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

Designing a Great User Experience

Designing a Great User Experience

Steve Hickey

May 12, 2013
Tweet

More Decks by Steve Hickey

Other Decks in Design

Transcript

  1. Designing A Great User Experience
    Presented by Steve Hickey — fresh tilled soil
    fresh tilled soil
    Designing A
    Great User Experience

    View Slide

  2. fresh tilled soil Designing A Great User Experience
    About Your Instructor
    Hi, I’m Steve Hickey.
    I design and develop for Fresh Tilled Soil.
    I write, speak and teach.
    You can find me on Twitter @stevehickeydsgn

    View Slide

  3. fresh tilled soil Designing A Great User Experience
    01What is User Experience Design?
    UI vs UX and select principles of user experience design

    View Slide

  4. fresh tilled soil Designing A Great User Experience
    UI VS. UX Design
    User Interface Design is:
    A component of User Experience Design. It’s the look and the feel, the form.
    User Experience Design is:
    The bigger picture. How well does the site/app function? Is it pleasant to
    use? Can a user accomplish their goals with ease?

    View Slide

  5. fresh tilled soil Designing A Great User Experience
    UI VS. UX Design
    How do I feel while using the product?

    View Slide

  6. fresh tilled soil Designing A Great User Experience
    UI VS. UX Design
    All of the pieces of building a product affect the UX.
    Excellent user interface design is part of what creates a great user
    experience. But you can have a great UI with a terrible experience.

    View Slide

  7. fresh tilled soil Designing A Great User Experience
    Select Principles
    Let’s talk about some of the things that a great user experience designer
    must keep in mind when building a truly amazing product for the web.
    This list is not exhaustive, but the provided sources have a lot more info.

    View Slide

  8. fresh tilled soil Designing A Great User Experience
    The Robustness Principle
    Be conservative in what you do,
    be liberal in what you accept from others.
    alistapart.com/article/your-website-has-two-faces

    View Slide

  9. fresh tilled soil Designing A Great User Experience
    The Robustness Principle
    In other words, there are certain constraints that must be embraced to
    balance human needs with computer needs for a robust web application.
    • It must accept input in a human-friendly fashion.
    • It must accept the burden of translating info to a computer-friendly format.
    • It must be clear about what human input is reasonable.
    • It must provide feedback on this input.
    alistapart.com/article/your-website-has-two-faces

    View Slide

  10. fresh tilled soil Designing A Great User Experience
    The Robustness Principle
    Err towards making it easier for the user.
    alistapart.com/article/your-website-has-two-faces

    View Slide

  11. fresh tilled soil Designing A Great User Experience
    The Robustness Principle
    Phone Number:
    Submit

    View Slide

  12. fresh tilled soil Designing A Great User Experience
    The Robustness Principle
    Phone Number:
    1 (508) 833-8469 Submit

    View Slide

  13. fresh tilled soil Designing A Great User Experience
    The Robustness Principle
    Phone Number:
    1 (508) 833-8469 Submit
    Error: must be entered in this format: 555-867-5309

    View Slide

  14. fresh tilled soil Designing A Great User Experience
    The Robustness Principle
    Phone Number:
    example: 508-833-8469 Submit

    View Slide

  15. fresh tilled soil Designing A Great User Experience
    The Robustness Principle
    Phone Number:
    example: 508-833-8469
    Submit

    View Slide

  16. fresh tilled soil Designing A Great User Experience
    The Robustness Principle
    Phone Number:
    __ __ __ - __ __ __ - __ __ __ __ Submit

    View Slide

  17. fresh tilled soil Designing A Great User Experience
    The Pareto Principle
    For many events, roughly 80% of the effects
    come from 20% of the causes.
    measuringusability.com/blog/pareto-ux.php

    View Slide

  18. fresh tilled soil Designing A Great User Experience
    The Pareto Principle
    In other words, focusing on the top 20% of your bugs and design problems
    can fix 80% of the problems encountered by your users.
    Or, 80% of your users will only use 20% of your features/options.
    measuringusability.com/blog/pareto-ux.php

    View Slide

  19. fresh tilled soil Designing A Great User Experience
    The Pareto Principle
    Country:
    Afghanistan Submit

    View Slide

  20. fresh tilled soil Designing A Great User Experience
    The Pareto Principle
    Country:
    United States of America Submit
    Afghanistan
    Albania
    Algeria
    American Samoa
    Andorra
    Angola
    Anguilla
    Antarctica
    Antigua And Barbuda
    Argentina
    Armenia
    Aruba

    View Slide

  21. fresh tilled soil Designing A Great User Experience
    The Pareto Principle
    Country:
    United States of America Submit
    United States of America
    Canada
    United Kingdom
    Australia
    ------------------------------
    Afghanistan
    Albania
    Algeria
    American Samoa
    Andorra
    Angola
    Anguilla

    View Slide

  22. fresh tilled soil Designing A Great User Experience
    Fitts’s Law
    The time required to rapidly move to a
    target area is a function of the distance to
    the target and the size of the target.
    codinghorror.com/blog/2006/08/fitts-law-and-infinite-width.html

    View Slide

  23. fresh tilled soil Designing A Great User Experience
    Fitts’s Law
    In other words, the farther away a touch/click target is from where the
    user starts, the larger it needs to be in order for it to be quickly and
    accurately reached.
    Two ways to make frequently used items easier to click/tap:
    1: Put them near the edge of the screen.
    2. Make them larger than other items.
    codinghorror.com/blog/2006/08/fitts-law-and-infinite-width.html

    View Slide

  24. fresh tilled soil Designing A Great User Experience
    Fitts’s Law

    View Slide

  25. fresh tilled soil Designing A Great User Experience
    Fitts’s Law

    View Slide

  26. fresh tilled soil Designing A Great User Experience
    The Principle of Least Astonishment
    When two elements of an interface conflict
    or are ambiguous, the behavior should be
    that which will least surprise the user.
    wikipedia.org/wiki/Principle_of_least_astonishment

    View Slide

  27. fresh tilled soil Designing A Great User Experience
    The Principle of Least Astonishment
    In other words, the best result of an action is whatever the user is most
    likely to expect, not the result that comes through in depth knowledge.
    This will change from system to system. Mac OSX users could expect
    something different than Microsoft Windows users. Android and iOS have
    different design patterns for different interactions as well.
    wikipedia.org/wiki/Principle_of_least_astonishment

    View Slide

  28. fresh tilled soil Designing A Great User Experience
    The Principle of Least Astonishment

    View Slide

  29. fresh tilled soil Designing A Great User Experience
    The Principle of Least Astonishment

    View Slide

  30. fresh tilled soil Designing A Great User Experience
    Dieter Rams: Principle 10
    Good design is as little design as possible.
    vitsoe.com/us/about/good-design

    View Slide

  31. fresh tilled soil Designing A Great User Experience
    Dieter Rams: Principle 10
    He also stated this as “less, but better.” Many would refer to it as simplicity.
    vitsoe.com/us/about/good-design

    View Slide

  32. fresh tilled soil Designing A Great User Experience
    Dieter Rams: Principle 10

    View Slide

  33. fresh tilled soil Designing A Great User Experience
    Dieter Rams: Principle 10

    View Slide

  34. fresh tilled soil Designing A Great User Experience
    Joshua Porter: Principle 6
    One primary action per screen.
    bokardo.com/principles-of-user-interface-design/

    View Slide

  35. fresh tilled soil Designing A Great User Experience
    Joshua Porter: Principle 6
    Screens or states with more than one primary action become confusing.
    It’s better for any screen to have one primary reason for existing.
    bokardo.com/principles-of-user-interface-design/

    View Slide

  36. fresh tilled soil Designing A Great User Experience
    Joshua Porter: Principle 6

    View Slide

  37. fresh tilled soil Designing A Great User Experience
    Joshua Porter: Principle 6

    View Slide

  38. fresh tilled soil Designing A Great User Experience
    Joshua Porter: Principle 17
    Great design is invisible.
    bokardo.com/principles-of-user-interface-design/

    View Slide

  39. fresh tilled soil Designing A Great User Experience
    Joshua Porter: Principle 17
    An interface shouldn’t distract a user from what they are trying to
    accomplish, which is the reason the interface exists in the first place. Turn
    the special effects down a notch.
    bokardo.com/principles-of-user-interface-design/

    View Slide

  40. fresh tilled soil Designing A Great User Experience
    Joshua Porter: Principle 17

    View Slide

  41. fresh tilled soil Designing A Great User Experience
    Joshua Porter: Principle 17

    View Slide

  42. fresh tilled soil Designing A Great User Experience
    BJ Fogg’s Behavior Model
    Three factors drive behavior: motivation, ability and triggers.
    ability
    motivation
    High
    Low
    Low
    High Target behavior
    Triggers fail here.
    Triggers succeed here.
    behaviormodel.org/

    View Slide

  43. fresh tilled soil Designing A Great User Experience
    BJ Fogg’s Behavior Model
    The amount of motivation and ability required vary based on how much of
    the other is present. These must be combined with an effective trigger for a
    target behavior to happen.
    All three are required to persuade a user to do something.
    behaviormodel.org/

    View Slide

  44. fresh tilled soil Designing A Great User Experience
    BJ Fogg’s Behavior Model
    Motivation happens on three spectrums:
    Sensation: Pleasure <> Pain
    Anticipation: Hope <> Fear
    Social Cohesion: Acceptance <> Rejection
    behaviormodel.org/

    View Slide

  45. fresh tilled soil Designing A Great User Experience
    BJ Fogg’s Behavior Model
    You can increase ability in two ways:
    Train Your User: Harder to do but sometimes necessary.
    Make The Target Behavior Easier: Usually the right thing to do.
    behaviormodel.org/

    View Slide

  46. fresh tilled soil Designing A Great User Experience
    BJ Fogg’s Behavior Model
    In other words, make it simpler.
    Think of simplicity as a function of your scarcest resource at the moment in
    which you want to accomplish something. Time and money fit this model.
    behaviormodel.org/

    View Slide

  47. fresh tilled soil Designing A Great User Experience
    Resources
    You can read a lot more at these sites:
    Joshua Porter: bokardo.com/principles-of-user-interface-design/
    Dieter Rams: vitsoe.com/us/about/good-design
    Jeremy Keith: principles.adactio.com/
    BJ Fogg: behaviormodel.org/

    View Slide

  48. fresh tilled soil Designing A Great User Experience
    02Methods of Effective UX Design
    The habits of highly effective UX designers

    View Slide

  49. fresh tilled soil Designing A Great User Experience
    Methods
    Every UX designer’s process is different, but the way successful ones
    approach their process include some useful commonalities.

    View Slide

  50. fresh tilled soil Designing A Great User Experience
    1. Be Prolific
    Your best idea is never your first. Don’t tell me it is, I don’t believe you.
    Come up with 5 ideas. Come up with 10. Come up with 20!

    View Slide

  51. fresh tilled soil Designing A Great User Experience
    1. Be Prolific
    The point is to get the obvious out of your system. Once you’ve gotten past
    that you can really start to be creative and innovative.

    View Slide

  52. fresh tilled soil Designing A Great User Experience
    1. Be Prolific
    teehanlax.com/story/medium/

    View Slide

  53. fresh tilled soil Designing A Great User Experience
    1. Be Prolific
    teehanlax.com/story/medium/

    View Slide

  54. fresh tilled soil Designing A Great User Experience
    1. Be Prolific
    teehanlax.com/story/medium/

    View Slide

  55. fresh tilled soil Designing A Great User Experience
    1. Be Prolific
    teehanlax.com/story/medium/

    View Slide

  56. fresh tilled soil Designing A Great User Experience
    1. Be Prolific
    teehanlax.com/story/medium/

    View Slide

  57. fresh tilled soil Designing A Great User Experience
    1. Be Prolific
    teehanlax.com/story/medium/

    View Slide

  58. fresh tilled soil Designing A Great User Experience
    2. Collaborate
    Nobody works well in a vacuum. When you don’t seek outside opinions
    you can get trapped and focus on things that may not be as important.

    View Slide

  59. fresh tilled soil Designing A Great User Experience
    2. Collaborate
    Other opinions will break you out of mental traps and improve your work.

    View Slide

  60. fresh tilled soil Designing A Great User Experience
    2. Collaborate
    designstaff.org/articles/product-design-sprint-day-2-diverge-2012-10-26.html

    View Slide

  61. fresh tilled soil Designing A Great User Experience
    3. Iterate
    The best way to test your assumptions is to make something. You’ll get a
    lot of stuff wrong, but there’s no better way to learn about your problems
    and move beyond them.

    View Slide

  62. fresh tilled soil Designing A Great User Experience
    3. Iterate
    Fail early and often and you’ll set yourself up better for eventual success.

    View Slide

  63. fresh tilled soil Designing A Great User Experience
    3. Iterate
    azarask.in/blog/post/iterative_design_isnt_design_by/

    View Slide

  64. fresh tilled soil Designing A Great User Experience
    4. Be Flexible
    As you work you’ll realize that previous assumptions needs to be changed.
    You shouldn’t think of deliverables as a checklist, they are a web of
    connected items.

    View Slide

  65. fresh tilled soil Designing A Great User Experience
    4. Be Flexible
    Each change has the potential to affect every other deliverable.

    View Slide

  66. fresh tilled soil Designing A Great User Experience
    03Artifacts of a UX Design Process
    The things we build

    View Slide

  67. fresh tilled soil Designing A Great User Experience
    Definition Statement
    1. What is the product’s experience?
    2. What is the product meant to do?
    3. What is the product’s audience?
    iosworkshops.com/

    View Slide

  68. fresh tilled soil Designing A Great User Experience
    Definition Statement
    This should be short. A couple of sentences, a brief paragraph at most.
    It is the guiding principle of what you’re building.

    View Slide

  69. fresh tilled soil Designing A Great User Experience
    User Types & User Personas
    User types rely on existing data and informed assumptions to decide what
    distinct types of users you have and what they will want to accomplish.
    They aren’t complicated, they’re just a quick way of remembering the
    differences in your primary users and their objectives.

    View Slide

  70. fresh tilled soil Designing A Great User Experience
    User Types & User Personas
    User personas are much more involved, requiring research and interviews
    with actual potential users, and typically take weeks or months to compile.
    Findings are compiled into categories, then assigned traits, habits, names
    and photos so that they are visible and easy to remember as you work.

    View Slide

  71. fresh tilled soil Designing A Great User Experience
    User Types & User Personas
    uxmag.com/articles/personas-the-foundation-of-a-great-user-experience

    View Slide

  72. fresh tilled soil Designing A Great User Experience
    User Types & User Personas
    Whether you decide to deal with user types or user personas is a question
    of resources and time, but using at least one of them tends to remind you
    that your users are real.

    View Slide

  73. fresh tilled soil Designing A Great User Experience
    User Stories & Features
    As a { type } user, I would like to { task/objective }.
    These become your features. Have you come up with a feature idea that
    doesn’t fit into a user story? It may not be nearly as important as you
    thought it was.

    View Slide

  74. fresh tilled soil Designing A Great User Experience
    User Stories & Features
    https://www.apptrajectory.com/

    View Slide

  75. fresh tilled soil Designing A Great User Experience
    Site Map & User Journeys
    Features are going to fit into logical groups that define pages and flows.
    Placing these into a site map will help you create the appropriate
    relationships between components, and show you just how simple or
    complex your plan is.

    View Slide

  76. fresh tilled soil Designing A Great User Experience
    Wireframes & Sketches
    Your wireframes are the blueprints for your product. They generally consist
    of layouts of the pages and flows you listed previously.
    They help make sure all functionality is available, and that there is a logical
    hierarchy. Beyond those basics, wireframes really shouldn’t be used to
    dictate design decisions.

    View Slide

  77. fresh tilled soil Designing A Great User Experience
    Wireframes & Sketches
    Wireframes don’t even have to be high fidelity to be effective. Sketches
    can make excellent wireframes if they’re complete and well rendered.
    As another advantage, sketches are much faster to produce and iterate
    through than other, higher fidelity methods of wireframing.

    View Slide

  78. fresh tilled soil Designing A Great User Experience
    Wireframes & Sketches

    View Slide

  79. fresh tilled soil Designing A Great User Experience
    Wireframes & Sketches

    View Slide

  80. fresh tilled soil Designing A Great User Experience
    Wireframes & Sketches

    View Slide

  81. fresh tilled soil Designing A Great User Experience
    Wireframes & Sketches

    View Slide

  82. fresh tilled soil Designing A Great User Experience
    Prototypes
    Prototypes are a bit more advanced than wireframes. They mimic
    completed functionality to the point that you can run tests with a user.

    View Slide

  83. fresh tilled soil Designing A Great User Experience
    Prototypes
    They can be as small as a single piece of functionality, or they can mimic a
    completed product in every meaningful way. They are used to test a product
    without building it.
    A good prototype helps you decide what to build.

    View Slide

  84. fresh tilled soil Designing A Great User Experience
    Prototypes
    alistapart.com/article/dive-into-responsive-prototyping-with-foundation

    View Slide

  85. fresh tilled soil Designing A Great User Experience
    Prototypes
    These products can help you prototype:
    Foundation: foundation.zurb.com
    Bootstrap: twitter.github.io/bootstrap
    Ratchet: maker.github.io/ratchet
    Flinto: flinto.com
    Briefs: giveabrief.com
    POP: popapp.in
    Xcode/Storyboard: blog.mengto.com/prototype-xcode-storyboard

    View Slide

  86. fresh tilled soil Designing A Great User Experience
    User Tests
    A user test helps you validate whatever you decided to build.
    You can test a finished product and get lots of great information, but the
    greatest advantage is conferred when you are able to start testing early.
    We’ll discuss this more in the next section.

    View Slide

  87. fresh tilled soil Designing A Great User Experience
    04What to Build and Why
    Your first test

    View Slide

  88. fresh tilled soil Designing A Great User Experience
    So, what Should I build?
    Whatever you can. Sometimes that’s not much. But ask yourself this:
    Would you rather invest years and millions of dollars into building
    something only to find out nobody can figure out how it works? Or even
    worse, that nobody wants it?

    View Slide

  89. fresh tilled soil Designing A Great User Experience
    Prototype
    For us, the answer is often a prototype. We aren’t back-end developers, we
    don’t employ back-end developers. If we aren’t working with a dev team yet
    we still need to build something to test. Fortunately, front-end tech makes
    it easy to fake a back-end.

    View Slide

  90. fresh tilled soil Designing A Great User Experience
    Minimum Viable Product
    For startups and product companies a minimum viable product is often the
    answer. An MVP is popular in Lean circles. Building one means building the
    smallest thing you can learn something from. Build it, test it, learn from
    those tests, build something new.
    It is the smallest amount of effort you can go to and still get validated
    learning from it.

    View Slide

  91. fresh tilled soil Designing A Great User Experience
    Usability Testing
    Regardless of what you build, you should test it with real users.
    Assumptions are often wrong, and a user test will uncover that quickly.

    View Slide

  92. fresh tilled soil Designing A Great User Experience
    Steve Krug’s Maxims of User Testing
    A morning a month, that’s all we ask.
    sensible.com/rsme.html

    View Slide

  93. fresh tilled soil Designing A Great User Experience
    Steve Krug’s Maxims of User Testing
    Start earlier than you think makes sense.
    sensible.com/rsme.html

    View Slide

  94. fresh tilled soil Designing A Great User Experience
    Steve Krug’s Maxims of User Testing
    Recruit loosely and grade on a curve.
    sensible.com/rsme.html

    View Slide

  95. fresh tilled soil Designing A Great User Experience
    Steve Krug’s Maxims of User Testing
    Make it a spectator sport.
    sensible.com/rsme.html

    View Slide

  96. fresh tilled soil Designing A Great User Experience
    Steve Krug’s Maxims of User Testing
    Focus ruthlessly on a small number of the
    most important problems.
    sensible.com/rsme.html

    View Slide

  97. fresh tilled soil Designing A Great User Experience
    Steve Krug’s Maxims of User Testing
    When fixing problems, always do the least
    you can do.
    sensible.com/rsme.html

    View Slide

  98. fresh tilled soil Designing A Great User Experience
    Steve Krug’s Maxims of User Testing
    Read this. Thank me later. I’ll let Steve know I’m expecting a commission.
    sensible.com/rsme.html

    View Slide

  99. fresh tilled soil Designing A Great User Experience
    Q&A
    We’ll do Q&A now.
    If you’re looking for some of the sources I used,
    you can find this presentation on Slideshare:
    goo.gl/MAbqN

    View Slide