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.
Symbolic Freebies – Symbol Photoshop Brushes Symbols are the imaginative signposts of life. – Margot Asquith We continue our series of posts devoted to various useful and free Photoshop tools. Today we focus on free symbol Photoshop brushes which allow you to easily implement symbols of different type and origins into your designs. Being the most important social archetype, symbol remains one of the most influential inventions ever made by human race. It was at the dawn of the era of verbal communication. Symbol has a huge visual value and often it is perceived much better than text information. Fist Brushes Grunge Stamps Poker Brushes Planetary Symbols Brush Set Radiation Symbols Photoshop Brushes SPN Brushes Milkyberry Brushes Altama Symbols Poison Labels 152 Graphic Pack New Age Goddess Symbol Brushes 9 Primitive Brushes Zelda Photoshop Brushes Hand Drawn Arrow and Symbol Photoshop brushes Industrial Brushes Circular Symbols Lite Signs Brushes Egyptian Hieroglyph Brushes Mixed Brushes Air-Mail Brushes Basic Arrows Vector Brushes Symbol brushes
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?”
The Anatomy of a Perfect Landing Page Placement and Content 7. Keep It Above the Fold The space a visitor sees without having to scroll is where the most important parts of the webpage should be. Place the call-to-action button above the fold and in a location where the viewer's eye will scan to. 8. Optimize a landing page for conversion over time. 9. Implementing motivational speeches, videos of user testimonials, and product images into a home page can have a positive impact on viewers, as well as give shoppers an extra push to look further into a product. Bellroy uses great imagery and videos on many of their pages. 10. Links connecting the user to a bunch of other sites or pages will distract them and have a negative impact on conversions. This landing page is designed well, but look at all those header links getting in the way of the message!