Designing a Great User Experience

Designing a Great User Experience

54d5fa57f499bd09aa3b713bc7fdbe37?s=128

Steve Hickey

May 12, 2013
Tweet

Transcript

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

    fresh tilled soil fresh tilled soil Designing A Great User Experience
  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
  3. fresh tilled soil Designing A Great User Experience 01What is

    User Experience Design? UI vs UX and select principles of user experience design
  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?
  5. fresh tilled soil Designing A Great User Experience UI VS.

    UX Design How do I feel while using the product?
  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.
  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.
  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
  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
  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
  11. fresh tilled soil Designing A Great User Experience The Robustness

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

    Principle Phone Number: 1 (508) 833-8469 Submit
  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
  14. fresh tilled soil Designing A Great User Experience The Robustness

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

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

    Principle Phone Number: __ __ __ - __ __ __ - __ __ __ __ Submit
  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
  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
  19. fresh tilled soil Designing A Great User Experience The Pareto

    Principle Country: Afghanistan Submit
  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
  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
  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
  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
  24. fresh tilled soil Designing A Great User Experience Fitts’s Law

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

  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
  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
  28. fresh tilled soil Designing A Great User Experience The Principle

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

    of Least Astonishment
  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
  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
  32. fresh tilled soil Designing A Great User Experience Dieter Rams:

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

    Principle 10
  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/
  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/
  36. fresh tilled soil Designing A Great User Experience Joshua Porter:

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

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

    Principle 17 Great design is invisible. bokardo.com/principles-of-user-interface-design/
  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/
  40. fresh tilled soil Designing A Great User Experience Joshua Porter:

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

    Principle 17
  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/
  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/
  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/
  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/
  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/
  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/
  48. fresh tilled soil Designing A Great User Experience 02Methods of

    Effective UX Design The habits of highly effective UX designers
  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.
  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!
  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.
  52. fresh tilled soil Designing A Great User Experience 1. Be

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

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

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

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

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

    Prolific teehanlax.com/story/medium/
  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.
  59. fresh tilled soil Designing A Great User Experience 2. Collaborate

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

    designstaff.org/articles/product-design-sprint-day-2-diverge-2012-10-26.html
  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.
  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.
  63. fresh tilled soil Designing A Great User Experience 3. Iterate

    azarask.in/blog/post/iterative_design_isnt_design_by/
  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.
  65. fresh tilled soil Designing A Great User Experience 4. Be

    Flexible Each change has the potential to affect every other deliverable.
  66. fresh tilled soil Designing A Great User Experience 03Artifacts of

    a UX Design Process The things we build
  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/
  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.
  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.
  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.
  71. fresh tilled soil Designing A Great User Experience User Types

    & User Personas uxmag.com/articles/personas-the-foundation-of-a-great-user-experience
  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.
  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.
  74. fresh tilled soil Designing A Great User Experience User Stories

    & Features https://www.apptrajectory.com/
  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.
  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.
  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.
  78. fresh tilled soil Designing A Great User Experience Wireframes &

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

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

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

    Sketches
  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.
  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.
  84. fresh tilled soil Designing A Great User Experience Prototypes alistapart.com/article/dive-into-responsive-prototyping-with-foundation

  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
  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.
  87. fresh tilled soil Designing A Great User Experience 04What to

    Build and Why Your first test
  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?
  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.
  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.
  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.
  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
  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
  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
  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
  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
  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
  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
  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