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 full-size 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 full-size 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 full-size slide

  4. What is UI/UX Design?
    Part One

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Experience Strategy
    Why does this product exist?

    View full-size slide

  8. User Research
    Who is this product for?

    View full-size slide

  9. Information Architecture
    What is this product?

    View full-size slide

  10. Interaction Design
    How will this product be executed?

    View full-size slide

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

    View full-size slide

  12. Okay, but what is
    User Experience Design?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Meet the User
    Part Two

    View full-size slide

  16. The User is Drunk

    View full-size slide

  17. theuserisdrunk.com

    View full-size slide

  18. How do users really
    use your app?

    View full-size slide

  19. They Don’t Read

    View full-size slide

  20. They Don’t Give Their
    100% Attention

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

  26. The User is Drunk
    NOT
    ^

    View full-size slide

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

    View full-size slide

  28. Guidelines for User
    Experience
    Part Three

    View full-size slide

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

    View full-size slide

  30. Use Normal, Everyday
    Language

    View full-size slide

  31. The User Doesn’t Speak
    Computer

    View full-size slide

  32. Bad Language

    View full-size slide

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

    View full-size slide

  34. Good Language

    View full-size slide

  35. Give Feedback and Updates

    View full-size slide

  36. Progress Bars

    View full-size slide

  37. Realtime Validation

    View full-size slide

  38. Realtime Validation

    View full-size slide

  39. Allow Confirmation

    View full-size slide

  40. Element States

    View full-size slide

  41. Make Interactions Intuitive

    View full-size slide

  42. Employ Design Standards

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Make a Link a Link

    View full-size slide

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

    View full-size slide

  47. Mirror the Physical World

    View full-size slide

  48. IRL to the Web

    View full-size slide

  49. 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 full-size slide

  50. Limit Instructions

    View full-size slide

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

    View full-size slide

  52. Show, Don’t Tell

    View full-size slide

  53. Allow Flexibility

    View full-size slide

  54. Allow Users to
    Make Mistakes

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. The Design Process
    Part Four

    View full-size slide

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

    View full-size slide

  59. Case Study:
    “The Big Picture”

    View full-size slide

  60. First,
    Put the Code Editor Away!

    View full-size slide

  61. Research and Concept

    View full-size slide

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

    View full-size slide

  63. 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 full-size slide

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

    View full-size slide

  65. Content Mapping and
    User Flow

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. Wireframe, Not Design

    View full-size slide

  69. Testing and Iteration

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. Design Details

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. Test, Test Again,
    then Test Again

    View full-size slide

  76. Are We Done Yet?

    View full-size slide

  77. Recommended Reading

    View full-size slide

  78. Thank You!
    Any Questions?

    View full-size slide