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
annyang! Easily add speech recognition to your site Go ahead, try it… Say "Hello!" Annyang! Let's try something more interesting… Say "Show me cute kittens!" Say "Show me Arches National Park!" Now go wild. That's cool, but in the real world it's not all kittens and hello world. No problem, say "Show TPS report" How did you do that? Simple. What about more complicated commands? annyang understands commands with named variables, splats, and optional words. Use named variables for one word arguments in your command. Use splats to capture multi-word text at the end of your command (greedy). Use optional words or phrases to define a part of the command as optional. What about browser support? annyang plays nicely with all browsers, progressively enhancing browsers that support SpeechRecognition, while leaving users with older browsers unaffected. It looks like your browser doesn't support speech recognition. Please visit in a desktop browser like Chrome.
Responsive Tables (2) My last article on responsive tables was very popular so I’ve only gone and implemented the idea that I was alluding to with horizontal scrolling! See Responsive Tables Demo (2) — in a modern browser! Webkit browsers handle both tables perfectly. Firefox & Opera handle the first version. I’m confident with more ingenuity I can get this idea working in IE9. * Update 10th Jan: as the comments below note this technique (as is here) won’t work on a lot of older mobile browsers. Something to consider: once you go block, you can’t go back! I like this concept. 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.
Sketchnotes From UX Australia 2012 The UX Mastery team were in sunny Brisbane last week for the excellent UX Australia 2012 conference. We had a blast and returned home feeling better educated, inspired, and connected. We’ll write more about what we learned at the conference in a separate post, but in the meantime I thought I’d publish the sketchnotes of twelve of the sessions that I attended. Here’s the set of all twelve sketchnotes: A huge thank you to Donna and Steve, the dynamic duo behind UX Australia. Luke & Matt between sessions at UX Australia 2012 Matt presenting “What the @#$% is UX Design?”
25 Interface Design Resources User interface design resources can really help you get things moving when your time is limited. When I was first learning more about UI design, I always wished there was one place, a single list that provided the essentials to get started. This is that list. Hopefully you find some value and it helps you along your way. Below are some of the most essential user interface design resources available, enjoy. UI Patterns Providing more detail than a basic gallery and offering discussions on how design patterns are used, UI Patterns allows users to showcase their own designs and is one of the world’s most popular interface design resources. Twitter Bootstrap Described as “by nerds, for nerds,” Twitter Bootstrap is managed through GitHub, a popular website for interface design resources. jQuery UI Bootstrap Use Bootstrap-themed widgets and most of the rest of the Twitter Bootstrap side-by-side with jQuery UI Bootstrap. Wijmo Dojo Jumpstart UI Pattern Tap UX Magazine UX Booth Designing Interfaces
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.