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

Introduction to UI/UX Design

45ca9033757d209fabf1481740d1c936?s=47 Ire Aderinokun
December 03, 2016

Introduction to UI/UX Design

AN updated version of my previous talk, UI/UX Workshop.

45ca9033757d209fabf1481740d1c936?s=128

Ire Aderinokun

December 03, 2016
Tweet

Transcript

  1. Introduction to UI/UX Design Ire Aderinokun

  2. Hello! • Ire Aderinokun • UI/UX Designer and Front- End

    Developer • Blogger at bitsofco.de • Head of Technology at Big Cabal • Google Developer Expert in Web Technologies
  3. Agenda 1. What is UI/UX Design? 2. How People Really

    Use Your Website 3. Guidelines for User Experience 4. The Design Process
  4. What is UI/UX Design? Part One

  5. None
  6. I’m a “Chief Human Factors Director”

  7. None
  8. 4 Aspects to UX • Experience Strategy • User Research

    • Information Architecture • Interaction Design
  9. Experience Strategy Why does this product exist?

  10. User Research Who is this product for?

  11. Information Architecture What is this product?

  12. Interaction Design How will this product be executed?

  13. User Experience Why? Experience Strategy How? Interaction Design Who? User

    Research What? Information Architecture
  14. Okay, but what is User Experience Design?

  15. – Edward Tufte “The most common user action on a

    website is to flee”
  16. User Experience Design is about making the user feel in

    control
  17. Meet the User Part Two

  18. The User is Drunk

  19. theuserisdrunk.com

  20. How do users really use your app?

  21. They Don’t Read

  22. None
  23. None
  24. None
  25. They Don’t Give Their 100% Attention

  26. How many tabs do you have open right now?

  27. None
  28. They Don’t Want to Learn How to Use your App

  29. None
  30. When was the last time you read an instruction manual?

  31. They Don’t Care if They’re Doing it Wrong

  32. None
  33. None
  34. Recap 1. They don’t read 2. They don’t give their

    100% attention 3. They don’t want to learn 4. They don’t care if they are doing it wrong
  35. The User is Drunk NOT ^

  36. – Susan Dray “If the user can’t use it, it

    doesn’t work”
  37. None
  38. Guidelines for User Experience Part Three

  39. As User Experience Designers, Our Aim is to Make the

    User Feel in Control
  40. Use Normal, Everyday Language

  41. The User Doesn’t Speak Computer

  42. Bad Language

  43. Good Language • Human • Colloquial • Light-Hearted

  44. Good Language

  45. Give Feedback and Updates

  46. Progress Bars

  47. Realtime Validation

  48. Realtime Validation

  49. Allow Confirmation

  50. Element States

  51. Make Interactions Intuitive

  52. Employ Design Standards

  53. 3 Key Elements • Site ID / Branding • Navigation

    • Utilities (Settings, Account, Search)
  54. None
  55. None
  56. Page Hierarchy • The most important thing is the most

    prominent thing • Semantically related content is also visually related
  57. None
  58. Make a Link a Link

  59. Use Standard Icons Platform-Specific iOS Android iOS Android

  60. Mirror the Physical World

  61. IRL to the Web

  62. Material Design The material is grounded in tactile reality, inspired

    by the study of paper and ink, yet technologically advanced and open to imagination and magic. Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances.
  63. None
  64. Limit Instructions

  65. “A User Interface is like a joke. If you have

    to explain it, it’s not that good.”
  66. Show, Don’t Tell

  67. None
  68. Allow Flexibility

  69. None
  70. None
  71. Allow Users to Make Mistakes

  72. None
  73. None
  74. Recap 1. Use Normal, Everyday Language 2. Give Feedback and

    Updates 3. Make Interactions Intuitive 4. Limit Instructions 5. Allow Flexibility
  75. – Jared Spool “Design, when done well, becomes invisible. It

    is only when done poorly, that we notice it”
  76. The Design Process Part Four

  77. None
  78. Stages 1. Research & Concept 2. Content Mapping & User

    Flow 3. Prototype 4. Testing & Iteration 5. Design Details
  79. Case Study: “The Big Picture”

  80. First, Put the Code Editor Away!

  81. None
  82. None
  83. Research and Concept

  84. User Experience Why? Experience Strategy How? Interaction Design Who? User

    Research What? Information Architecture
  85. None
  86. TBP: Concept • To-do list for long-term goals • Each

    “big picture” goal broken down into small achievable tasks • Keep track of my ongoing progress as well as past achievements
  87. TBP: Research • What other similar apps are out there?

    • How is TBP different? • Who is TBP for? • Do they want this app?
  88. Content Mapping and User Flow

  89. User Experience Why? Experience Strategy How? Interaction Design Who? User

    Research What? Information Architecture
  90. None
  91. None
  92. None
  93. None
  94. Prototype

  95. User Experience Why? Experience Strategy How? Interaction Design Who? User

    Research What? Information Architecture
  96. Wireframe, Not Design

  97. None
  98. None
  99. Testing and Iteration

  100. User Experience Why? Experience Strategy How? Interaction Design Who? User

    Research What? Information Architecture
  101. None
  102. The Bare Minimum • Watch a couple of people use

    the app • Ask them to complete specific tasks without help • Record / Take notes
  103. Design Details

  104. User Experience Why? Experience Strategy How? Interaction Design Who? User

    Research What? Information Architecture
  105. Design Elements • Layout • Typography • Colours • Specific

    Design Details
  106. None
  107. Test, Test Again, then Test Again

  108. None
  109. Are We Done Yet?

  110. Recommended Reading

  111. Thank You! Any Questions?