Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI Patterns: A Practical Toolkit – Jim O'Neill


Published on

“Make it intuitive” is the mantra of every start-up, software company, and new technology. But intuitive means different things to different people – so how do you ensure your designs are intuitive for the right people? In large part, it comes down to the effective use of UI patterns – recurring solutions that solve common design problems.

UI patterns are everywhere, and new ones are being defined all the time. Hundreds of websites now exist to document popular UI patterns of all kinds – web, mobile, responsive, you name it. What’s more, sometimes you’ll need different patterns to solve the same problem, depending on the user's context. To achieve an intuitive UI and meet your users’ expectations, your first challenge is to identify which patterns will work best for the users, and the situation, that you're designing for. 

This presentation will walk through the process of evaluating design patterns; as part of this, we’ll dig deeply into several common and emerging UI patterns, focusing on how and when to use them to deliver a great user experience. But of course, UI/UX design is not just about following rules – sometimes you have to break them. We’ll also discuss when to break away from common patterns, and how to keep the experience intuitive when you do so.

  • Be the first to comment

UI Patterns: A Practical Toolkit – Jim O'Neill

  1. 1. @oneill_jim #uipatterns@oneill_jim #uipatterns UI Patterns: A Practical Toolkit Jim O’Neill (UX design agency) Me on Twitter
  2. 2. @oneill_jim #uipatterns@oneill_jim #uipatterns
  3. 3. @oneill_jim #uipatterns Make it…
  4. 4. @oneill_jim #uipatterns simple
  5. 5. @oneill_jim #uipatterns clean
  6. 6. intuitive.
  7. 7. @oneill_jim #uipatterns Easy to use or understand. intuitive: adj.
  8. 8. @oneill_jim #uipatterns Your users already know how to use it. intuitive: adj.
  9. 9. @oneill_jim #uipatterns A recurring solution that solves a common design problem. UI pattern:
  10. 10. @oneill_jim #uipatterns Accordion menu Inline editing
  11. 11. @oneill_jim #uipatterns
  12. 12. @oneill_jim #uipatterns Yes.
  13. 13. @oneill_jim #uipatterns • UI patterns? Why? • Best practices for common patterns • Inspiration for your work The point of this talk:
  14. 14. @oneill_jim #uipatterns UI patterns? Why?
  15. 15. @oneill_jim #uipatterns Theme #1:
  16. 16. @oneill_jim #uipatterns
  17. 17. @oneill_jim #uipatterns Users spend most of their time on sites other than yours. Jakob’s Law: – Jakob Nielsen
  18. 18. @oneill_jim #uipatterns Base expectations Frustration Delight Users’ goodwill: Meh.
  19. 19. @oneill_jim #uipatterns Theme #2:
  20. 20. @oneill_jim #uipatterns
  21. 21. @oneill_jim #uipatterns
  22. 22. @oneill_jim #uipatterns 4 common patterns (tiny caveat)
  23. 23. @oneill_jim #uipatterns IT DEPENDS.
  24. 24. @oneill_jim #uipatterns DO YOUR RESEARCH.
  25. 25. @oneill_jim #uipatterns Search and filter #1
  26. 26. @oneill_jim #uipatterns Helping users find what they’re looking for quickly, from a large set of results. What problem are we solving?
  27. 27. @oneill_jim #uipatterns
  28. 28. @oneill_jim #uipatterns
  29. 29. @oneill_jim #uipatterns
  30. 30. @oneill_jim #uipatterns
  31. 31. @oneill_jim #uipatterns ERMAHGERD THEY’RE MAKING ME DELETE MY OWN TYPING !!!!!!!1 (#firstworldproblems)
  32. 32. @oneill_jim #uipatterns
  33. 33. @oneill_jim #uipatterns
  34. 34. @oneill_jim #uipatterns Etsy on iPhone / Etsy iOS app
  35. 35. @oneill_jim #uipatterns DropBox
  36. 36. @oneill_jim #uipatterns DropBox
  37. 37. @oneill_jim #uipatterns
  38. 38. @oneill_jim #uipatterns • Respect the user’s effort (regardless of platform or screen size) • Use auto-complete or auto-suggest whenever possible. • Match your sort/filter options to the mental model of your users. • Minimize the number of input fields, and make good use of platform-specific controls. Best practices:
  39. 39. @oneill_jim #uipatterns Continuous scrolling #2
  40. 40. @oneill_jim #uipatterns • Showing a subset of results so we don’t have to load everything at once. • Keeping users engaged in the content, without the distractions of navigation. What problems are we solving?
  41. 41. @oneill_jim #uipatterns
  42. 42. @oneill_jim #uipatterns
  43. 43. @oneill_jim #uipatterns
  44. 44. @oneill_jim #uipatterns, smartphone
  45. 45. @oneill_jim #uipatterns iBooks
  46. 46. @oneill_jim #uipatterns Unfold dot NO.
  47. 47. @oneill_jim #uipatterns
  48. 48. @oneill_jim #uipatterns • Continuous immersion in the content • No distractions due to the need to pause and navigate • Easy to keep reading Continuous scrolling – pros:
  49. 49. @oneill_jim #uipatterns • Easy to lose yourself • Scrollbar expectations are broken • Back button expectations can be broken • No access to the footer • No psychological “closure” Continuous scrolling – cons:
  50. 50. @oneill_jim #uipatterns • Good for long-form browsing; not as good for completing tasks. • Use a “show more” link, always when there’s a footer and usually even when there isn’t. • Provide “loading” feedback while fetching more content. • Don’t break the Back button. • Set expectations when possible about how much content there is. Best practices:
  51. 51. @oneill_jim #uipatterns Tables #3
  52. 52. @oneill_jim #uipatterns • Displaying a grid of tabular data in a readable way. • Often, allowing users to drill into rows or perform actions on them. • Preserving relationships between items when there’s not enough space to show everything. What problems are we solving?
  53. 53. @oneill_jim #uipatterns
  54. 54. @oneill_jim #uipatterns • Fixed header • Zebra striping • Row selection & actions • Filtering • Collapsing & expanding rows or subheadings • Inline editing • Responsiveness Table design patterns:
  55. 55. @oneill_jim #uipatterns
  56. 56. @oneill_jim #uipatterns
  57. 57. @oneill_jim #uipatterns
  58. 58. @oneill_jim #uipatterns
  59. 59. @oneill_jim #uipatterns Two bad options:
  60. 60. @oneill_jim #uipatterns
  61. 61. @oneill_jim #uipatterns
  62. 62. @oneill_jim #uipatterns • Zebra-stripe or line each row. • If it’s easy enough to make the header fixed, do so. • Don’t hide data from small-screen users without giving them a way to get it back. • Responsive collapsing and axis- switching are good ideas; test them against your specific table content. • Don’t shrink tables by abbreviating or shrinking the font size. Best practices:
  63. 63. @oneill_jim #uipatterns Modal overlays & popovers #4
  64. 64. @oneill_jim #uipatterns • Presenting just-in-time information to the user that doesn’t belong in the regular content flow. • Allowing the user to see contextual info without cluttering the interface. What problems are we solving?
  65. 65. @oneill_jim #uipatterns (old)
  66. 66. @oneill_jim #uipatterns (old)
  67. 67. @oneill_jim #uipatterns
  68. 68. @oneill_jim #uipatterns
  69. 69. @oneill_jim #uipatterns Error: “Price” field must be a number. OK
  70. 70. @oneill_jim #uipatterns Error: “Price” field must be a number. Price: asdf
  71. 71. @oneill_jim #uipatterns
  72. 72. @oneill_jim #uipatterns
  73. 73. @oneill_jim #uipatterns AwesomeNote / iOS Contacts
  74. 74. @oneill_jim #uipatterns Spotify
  75. 75. @oneill_jim #uipatterns • Use modal windows: • Sparingly, when you need the user’s full attention. • For context-independent content that doesn’t need its own page. • When you need thought-intensive input from a user, like a sign-up form. • Generally, don’t use modals for error messages. Best practices:
  76. 76. @oneill_jim #uipatterns • Use modeless overlays (popovers): • When you need to provide quick contextual information. • When the user still needs to interact with the regular page content. Best practices:
  77. 77. @oneill_jim #uipatterns • Search & filter • Continuous scrolling • Tables • Modal overlays & popovers 4 common patterns (recap):
  78. 78. @oneill_jim #uipatterns Takeaways:
  79. 79. @oneill_jim #uipatterns Think about the problem, which means: Think about the user.
  80. 80. @oneill_jim #uipatterns Be interested in how other people have solved similar problems.
  81. 81. @oneill_jim #uipatterns Be aware of users’ basic expectations.
  82. 82. @oneill_jim #uipatterns Use UI patterns to help you be consistent…
  83. 83. @oneill_jim #uipatterns …but don’t be afraid to push existing patterns farther.
  84. 84. @oneill_jim #uipatterns Other stuff to check out: • • • • • • Theresa Neil, Mobile Design Pattern Gallery
  85. 85. @oneill_jim #uipatterns Thank you!