Do you UX?

Defining and building online user experiences that are clear, consistent and easy to use

1. Do you UX? Defining and building online user experiences that are clear, consistent, and easy to use Laurie Kalmanson
2. Do you UX? Easy to use: Physical things Objects with clear clues about what to do with them are the easiest to use. Self-explanatory = awesome Self-explanatory = correct affordances
3. Do you UX? We know what we should do with these things. How? Why?
4. Turn signals are self explanatory Designs change Affordances stay the same Functions stay the same A blinking tail light is a signal A glowing tail light is a signal A tail light doing nothing is a signal Do you UX? "Turn signals are the facial expressions of automobiles"
5. A big red button is self explanatory One button, clearly labeled One action Two states Do you UX?
6. A light switch is self explanatory One button, clearly labeled Two actions Two states Do you UX?
7. How do I work this? Do you UX? Incorrect affordance Mismatched cue and action Possible harm to users Bruised foreheads
8. How do I work this? Many buttons Sorted by size Requires instructions Many actions Grouped by function Do you UX?
9. Do you UX? Easy to use: Digital experiences When digital things just work, users learn faster and need less training. User benefits Maker benefits Delight Good word of mouth Pleasure Easier sales cycle Speed Happier customers Better ROI Better ROI
10. Do you UX? Visual design for findability and readability Clear and consistent type hierarchies and icons Laurie Kalmanson
11. Do you UX? Where am I? Wayfinding guide with clear visual hierarchies Symbols Names
12. Do you UX? How do I get where I need to go?
13. Do you UX? Mental map: clarify it
14. Less is more: Redesigned NYC parking signs Improved clarity and usability Grouping and sorting Consistent layout Uniform font Fewer colors Do you UX?
15. Do you UX? Less is more Updates include Improving the information hierarchy Placing the day of the regulation before the hours Eliminating abbreviations More white space
16. Do you UX? Cognitive load: lighten it
17. Do you UX? Palate cleanser before the hard stuff
18. Do you UX? Digital wayfinding maps are mental models Hierarchies feel natural to users, based on their knowledge and needs Navigation, taxonomy, categories and subcategories Language, titles, labels and names match experience Choose your language Wide audience e-commerce sites use words consumers speak Specialized enterprise systems use language experts speak Workflows match mental models from the real world User flow identified in the discovery process makes sense
19. Example: Patientslikeme.com Laurie Kalmanson 06.25.13 Navigation clearly indicates selected category Tags can be easily added and deleted Filters are relevant, contextual, relevant, and fit on the screen without scrolling Results are clearly tied to queries
20. Graceful UX, IXD = Successful UX, IXD Navigation, next steps and workflows are obvious and continuous Actions are fluid and continuous No starting, stopping, hunting Users are prevented from getting lost Process and workflows proceed in order Hierarchies, categories and subcategories present information efficiently through lists, menus and selection options that shape the workflow Grouping actions and processes Main Related Do you UX?
21. Heuristics: How to know what's right The checklist for keeping users oriented as to actions, reactions, status and results is as simple as Who, What, When, Where, Why and How. You're doing it right if users: Always know where they are, and never feel lost Can easily get to where they want to go next, and get back to where they were, without memorizing the trail Can undo an action or redo an action until it is final: when it's about to become final, users should know that Do you UX?
22. Heuristics: Six big ideas This is an updated version of Jakob Nielsen's 10 usability heuristics from 1995. 1. Visibility of system status: Keep users informed about what is going on, through prompt feedback. 2. Match the real world: Speak with words that users recognize. 3. User control and freedom: Accidents can happen. Leave clear paths back and forward, for quick exits. Support undo and redo. 4. Establish consistency and standards: Visual hierarchies, font hierarchies, buttons, tools and links 5. Error prevention: Build so that users are likely to do something right 6. Recognition rather than recall: Show users where things are; don't make them memorize secret routes through hidden gardens. Do you UX?
23. Delight and Enchantment Design Principles from Android's UX Team http://developer.android.com/design/get-started/principles.html "A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand." Enchant Me Delight me in surprising ways Keep it brief Use short phrases with simple words. People skip long things. Do you UX?
24. Components of UX and UI The pieces of the UX and UI are everything the user sees and touches, on top of the machinery that makes it all go. Those things include: Information architecture: Navigation, hierarchy Content strategy: What the application says, to who Visual design: Look and feel Interaction design: How it works Development: The engine for the UX Do you UX?
25. Information architecture The information architecture creates a successful structure, hierarchy, sorting and presentation of information when it flows in ways that customers can track it. IA that makes sense to customers has clear and consistent: Navigation categories and subcategories Naming conventions Content strategy and structure Do you UX?
26. Content strategy A well researched and planned content strategy is the foundation for an information architecture that offers users clear, bright paths through tasks and actions. Depth and breadth are accounted for during initial discovery Categories and subcategories are named the way users would name them Information is sorted and presented with these tools, as appropriate: A to Z order Card metaphors Chronological order Filtering Sorting Summaries Do you UX?
27. Visual design A clear and graceful visual design is: ◦ Easy to read: Look and feel deploys type hierarchy, color, placement and prominence to guide users through workflows ◦ Easy to comprehend: Cognitive load is minimized through conservation of the user's mental energy ▪ Grids use just enough contrast: not too much, not too little ▪ Headings flow naturally to subheads ▪ Space is not too crowded: no clutter ▪ Hands and eyes are aligned: actions begin at the end of the visual path Do you UX?
28. Interaction design and development Interaction design How does the user interact with something? Swipe, tap, tab? Expand/collapse? Establish metaphors and actions based on depth, breadth and scenarios for how users interact with the tools. Development How the machinery works: reliable, fast, smooth and efficient. Putting users first typically takes more effort than building things the easiest way. Avoid the dev-first trap at all costs. Do you UX?
29. From here to there: Research & discovery Who are the users? Personas: How many different users are there? How do their needs vary from core to exceptions? Workflow How do users do things now? What’s working for them: what would they like to keep doing? Where does it hurt? Where could they do things better by doing things differently? Do you UX?
30. From here to there Storyboarding and sketching ◦ Examples and early prototypes of ideas for solutions ◦ Share across teams, seeking input and collaboration ▪ Refine ▪ Repeat Guerilla usability ◦ Share early prototypes with users ▪ Refine ▪ Repeat Do you UX?
31. From here to there Wireframe ◦ Next level of refinement of sketches ◦ Share across teams ▪ Share with users ▪ Refine ▪ Repeat Build ◦ First pass ◦ Share with users ▪ Refine ▪ Repeat Do you UX?
32. Do you UX? horizontal tab font hierarchy simple color palette low contrast
33. Do you UX? multi deck navigation utility level search and promo main sub: kids sub level detailed categories
34. Do you UX? tabbed sidenav expand/collapse categories
35. Do you UX? airbnb: tabbed help overlay
36. Do you UX? drop down tabbed nav vertical tab simple colors font hierarchy
37. Do you UX? detail: edit mode linkedin skills select / delete numbers = endorsements
38. Do you UX?
39. Do you UX?
40. Do you UX?
41. Do you UX? font hierarchy simple color palette low contrast
42. Do you UX? Does it make sense to users? Is it simple and clear? Is it easy to use? Is the effort of finding things and tracking things carried by the system, or by the user? Can a user tell how to work it just by looking at it? If you make things, you do UX
43. Do you UX? If you make things, you do UX Carve the right user paths in the solutions you build for user wants, needs, goals and desires, in workflows that make sense to people, while offering efficiency, smoothness, delight and only good surprises.