UI Pattern Ideas: List with Functions Last week I asked people to participate in a group design project on a specific design pattern: a list with functions. The premise was: The design pattern we are going to tackle is a list with functions. Think of a list of five names. The primary function of this list is to click the names. The response was amazing. Not every single submitted idea is shown below. Hover Functionality I quoted a Zeldman tweet in the opening article that said that functionality that only reveals itself on hover fails. Example by Sean. Example by cancel bubble. Example by kil. Edit Mode I'm thinking having a toggle for turning the list into "Edit Mode" is the most successful base for this design pattern. Example by Jay Salvat. Kirk Strobeck created a PDF describing an interface which is essentially a list with three different modes. Mass Edit Mode Mass Edit Mode differs from Edit Mode in that when the Edit Mode is enabled, all list items immediately become editable. Drag Functionality Example by Bart. Other
10 Usability Tips Based on Research Studies We hear plenty usability tips and techniques from an incalculable number of sources. Many of the ones we take seriously have sound logic, but it’s even more validating when we find actual data and reports to back up their theories and conjectures. This article discusses usability findings of research results such as eye-tracking studies, reports, analytics, and usability surveys pertaining to website usability and improvements. You’ll discover that many of these usability tips will be common sense but are further supported with numbers; however, some might surprise you and change your outlook on your current design processes. 1. Forget the "Three-Click Rule" The idea that users will get frustrated if they have to click more than three times to find a piece of content on your website has been around for ages. Logically, it makes sense. But why the arbitrary three-click limit? In fact, most users won’t give up just because they’ve hit some magical number. Source: User Interface Engineering
Patternry | User Interface Design Patterns for Ideas and Inspiration linowski.ca Interactive Sketching NotationHelping you tell better stories of interactionPurchase & Download for $44 CAD Watch: How I Sketch - An Intro The Interactive Sketching Notation is a visual language which enables designers to tell more powerful stories of interaction. Less DocumentationHaving merged flows, user stories, sketches and wireframes into one document, it is easier to maintain your work with the notation. Inside the Template - version 1.5 Icons: 100 common interface sketch style icons for faster concepting Screens: scaled UI screens for popular devices and multiple browser sizes - with 9 point scaling Specific device screens include: iPhone: 4, 5; Samsung Galaxy: Nexus, S3, S4, Nexus5; Sony Xperia Z; Nokia Lumia 920; HTC Windows Phone 8X, Blackberry; Surface Pro, iPad, iPad Mini, Google Nexus 7 Components: various predesigned components and elements ready for dragging and dropping ISN + MicroPersonas Bundle for $59 Get the Interactive Sketching Notation + MicroPersonas at a discount.
15 UI Design Patterns Web Designers Should Keep Handy User interface design patterns help create consistency throughout the web, and provide a great resource for web designers looking for the best tested, most usable, and most efficient layouts. Many things in life are in a pattern, and this includes applications in both design and development. Whilst creativity and thinking outside the box is a must in design, so is conformity much of the time. UI patterns in web design are gaining recognition as an important resource to consider, and creating designs around them can help any website be more user-friendly. In this post we're going to look over the 15 most usable UI design patterns web designers should be paying attention to. By using these patterns, or at least taking bits and pieces of their theory, designs can be created quicker with the best possible results. 1. Grids are often used in web design to organize imagery and content, create alignment, and apply Divine Proportion or other basic design principles. Further Resources 2. 3. 4. 5.
52 Weeks of UX Design Pattern Library We, Yahoo, are part of the Yahoo family of brands The sites and apps that we own and operate, including Yahoo and AOL, and our digital advertising service, Yahoo Advertising.Yahoo family of brands. When you use our sites and apps, we use Cookies Cookies (including similar technologies such as web storage) allow the operators of websites and apps to store and read information from your device. provide our sites and apps to you authenticate users, apply security measures, and prevent spam and abuse, and measure your use of our sites and apps If you click 'Accept all', we and our partners, including 237 who are part of the IAB Transparency & Consent Framework, will also store and/or access information on a device (in other words, use cookies) and use precise geolocation data and other personal data such as IP address and browsing and search data, for personalised advertising and content, advertising and content measurement, and audience research and services development.
UX Myths Interaction Design Pattern Library - Welie.com Suggest a pattern Have you seen new examples of patterns out there that have not been described on this site? Send me a link to an example and I'll add it to my to-do list. Suggest a pattern Latest comments Form (Lucas Gwadana) Sometimes the ERROR handling is not explicit enough because when a user makes an... Map Navigator (Marcus) For print pages etc static maps are still relevant. Accordion (dellmre) Ajax accordion samples with source code Autocomplete (Zorg) I believe the name of this pattern to be misleading. Slideshow (Joshua) Slideshows on Homepages can be very beneficial.