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

Introduction to UI/UX Design

Ire Aderinokun
December 03, 2016

Introduction to UI/UX Design

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

Ire Aderinokun

December 03, 2016
Tweet

More Decks by Ire Aderinokun

Other Decks in Design

Transcript

  1. Introduction to
    UI/UX Design
    Ire Aderinokun

    View Slide

  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

    View Slide

  3. Agenda
    1. What is UI/UX Design?
    2. How People Really Use Your Website
    3. Guidelines for User Experience
    4. The Design Process

    View Slide

  4. What is UI/UX Design?
    Part One

    View Slide

  5. View Slide

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

    View Slide

  7. View Slide

  8. 4 Aspects to UX
    • Experience Strategy
    • User Research
    • Information Architecture
    • Interaction Design

    View Slide

  9. Experience Strategy
    Why does this product exist?

    View Slide

  10. User Research
    Who is this product for?

    View Slide

  11. Information Architecture
    What is this product?

    View Slide

  12. Interaction Design
    How will this product be executed?

    View Slide

  13. User Experience
    Why?
    Experience Strategy
    How?
    Interaction Design
    Who?
    User Research
    What?
    Information Architecture

    View Slide

  14. Okay, but what is
    User Experience Design?

    View Slide

  15. – Edward Tufte
    “The most common user action on
    a website is to flee”

    View Slide

  16. User Experience Design is about
    making the user feel in control

    View Slide

  17. Meet the User
    Part Two

    View Slide

  18. The User is Drunk

    View Slide

  19. theuserisdrunk.com

    View Slide

  20. How do users really
    use your app?

    View Slide

  21. They Don’t Read

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. They Don’t Give Their
    100% Attention

    View Slide

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

    View Slide

  27. View Slide

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

    View Slide

  29. View Slide

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

    View Slide

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

    View Slide

  32. View Slide

  33. View Slide

  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

    View Slide

  35. The User is Drunk
    NOT
    ^

    View Slide

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

    View Slide

  37. View Slide

  38. Guidelines for User
    Experience
    Part Three

    View Slide

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

    View Slide

  40. Use Normal, Everyday
    Language

    View Slide

  41. The User Doesn’t Speak
    Computer

    View Slide

  42. Bad Language

    View Slide

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

    View Slide

  44. Good Language

    View Slide

  45. Give Feedback and Updates

    View Slide

  46. Progress Bars

    View Slide

  47. Realtime Validation

    View Slide

  48. Realtime Validation

    View Slide

  49. Allow Confirmation

    View Slide

  50. Element States

    View Slide

  51. Make Interactions Intuitive

    View Slide

  52. Employ Design Standards

    View Slide

  53. 3 Key Elements
    • Site ID / Branding
    • Navigation
    • Utilities (Settings, Account, Search)

    View Slide

  54. View Slide

  55. View Slide

  56. Page Hierarchy
    • The most important thing is the most prominent
    thing
    • Semantically related content is also visually
    related

    View Slide

  57. View Slide

  58. Make a Link a Link

    View Slide

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

    View Slide

  60. Mirror the Physical World

    View Slide

  61. IRL to the Web

    View Slide

  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.

    View Slide

  63. View Slide

  64. Limit Instructions

    View Slide

  65. “A User Interface is like a joke. If
    you have to explain it, it’s not that
    good.”

    View Slide

  66. Show, Don’t Tell

    View Slide

  67. View Slide

  68. Allow Flexibility

    View Slide

  69. View Slide

  70. View Slide

  71. Allow Users to
    Make Mistakes

    View Slide

  72. View Slide

  73. View Slide

  74. Recap
    1. Use Normal, Everyday Language
    2. Give Feedback and Updates
    3. Make Interactions Intuitive
    4. Limit Instructions
    5. Allow Flexibility

    View Slide

  75. – Jared Spool
    “Design, when done well, becomes
    invisible. It is only when done
    poorly, that we notice it”

    View Slide

  76. The Design Process
    Part Four

    View Slide

  77. View Slide

  78. Stages
    1. Research & Concept
    2. Content Mapping & User Flow
    3. Prototype
    4. Testing & Iteration
    5. Design Details

    View Slide

  79. Case Study:
    “The Big Picture”

    View Slide

  80. First,
    Put the Code Editor Away!

    View Slide

  81. View Slide

  82. View Slide

  83. Research and Concept

    View Slide

  84. User Experience
    Why?
    Experience Strategy
    How?
    Interaction Design
    Who?
    User Research
    What?
    Information Architecture

    View Slide

  85. View Slide

  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

    View Slide

  87. TBP: Research
    • What other similar apps are out there?
    • How is TBP different?
    • Who is TBP for?
    • Do they want this app?

    View Slide

  88. Content Mapping and
    User Flow

    View Slide

  89. User Experience
    Why?
    Experience Strategy
    How?
    Interaction Design
    Who?
    User Research
    What?
    Information Architecture

    View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. Prototype

    View Slide

  95. User Experience
    Why?
    Experience Strategy
    How?
    Interaction Design
    Who?
    User Research
    What?
    Information Architecture

    View Slide

  96. Wireframe, Not Design

    View Slide

  97. View Slide

  98. View Slide

  99. Testing and Iteration

    View Slide

  100. User Experience
    Why?
    Experience Strategy
    How?
    Interaction Design
    Who?
    User Research
    What?
    Information Architecture

    View Slide

  101. View Slide

  102. The Bare Minimum
    • Watch a couple of people use the app
    • Ask them to complete specific tasks without help
    • Record / Take notes

    View Slide

  103. Design Details

    View Slide

  104. User Experience
    Why?
    Experience Strategy
    How?
    Interaction Design
    Who?
    User Research
    What?
    Information Architecture

    View Slide

  105. Design Elements
    • Layout
    • Typography
    • Colours
    • Specific Design Details

    View Slide

  106. View Slide

  107. Test, Test Again,
    then Test Again

    View Slide

  108. View Slide

  109. Are We Done Yet?

    View Slide

  110. Recommended Reading

    View Slide

  111. Thank You!
    Any Questions?

    View Slide