Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Do you UX?

Do you UX?

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

lauriekalmanson

August 07, 2013
Tweet

More Decks by lauriekalmanson

Other Decks in Technology

Transcript

  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. 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"
  4. A big red button is self explanatory One button, clearly

    labeled One action Two states Do you UX?
  5. How do I work this? Do you UX? Incorrect affordance

    Mismatched cue and action Possible harm to users Bruised foreheads
  6. How do I work this? Many buttons Sorted by size

    Requires instructions Many actions Grouped by function Do you UX?
  7. 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
  8. Do you UX? Visual design for findability and readability Clear

    and consistent type hierarchies and icons Laurie Kalmanson
  9. Do you UX? Where am I? Wayfinding guide with clear

    visual hierarchies Symbols Names
  10. Less is more: Redesigned NYC parking signs Improved clarity and

    usability Grouping and sorting Consistent layout Uniform font Fewer colors Do you UX?
  11. 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
  12. 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
  13. 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
  14. 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?
  15. 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?
  16. 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?
  17. 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?
  18. 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?
  19. 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?
  20. 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?
  21. 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?
  22. 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?
  23. 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?
  24. 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?
  25. 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?
  26. Do you UX? multi deck navigation utility level search and

    promo main sub: kids sub level detailed categories
  27. 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
  28. 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.