Designing A Great User Experience

45,182 views
43,358 views

Published on

Published in: Design
2 Comments
97 Likes
Statistics
Notes
No Downloads
Views
Total views
45,182
On SlideShare
0
From Embeds
0
Number of Embeds
1,867
Actions
Shares
0
Downloads
490
Comments
2
Likes
97
Embeds 0
No embeds

No notes for slide

Designing A Great User Experience

  1. Designing A Great User ExperiencePresented by Steve Hickey — fresh tilled soilfresh tilled soilDesigning AGreat User Experience
  2. fresh tilled soil Designing A Great User ExperienceAbout Your InstructorHi, 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 Experience01What is User Experience Design?UI vs UX and select principles of user experience design
  4. fresh tilled soil Designing A Great User ExperienceUI VS. UX DesignUser 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 touse? Can a user accomplish their goals with ease?
  5. fresh tilled soil Designing A Great User ExperienceUI VS. UX DesignHow do I feel while using the product?
  6. fresh tilled soil Designing A Great User ExperienceUI VS. UX DesignAll of the pieces of building a product affect the UX.Excellent user interface design is part of what creates a great userexperience. But you can have a great UI with a terrible experience.
  7. fresh tilled soil Designing A Great User ExperienceSelect PrinciplesLet’s talk about some of the things that a great user experience designermust 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 ExperienceThe Robustness PrincipleBe 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 ExperienceThe Robustness PrincipleIn other words, there are certain constraints that must be embraced tobalance 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 ExperienceThe Robustness PrincipleErr towards making it easier for the user.alistapart.com/article/your-website-has-two-faces
  11. fresh tilled soil Designing A Great User ExperienceThe Robustness PrinciplePhone Number:Submit
  12. fresh tilled soil Designing A Great User ExperienceThe Robustness PrinciplePhone Number:1 (508) 833-8469 Submit
  13. fresh tilled soil Designing A Great User ExperienceThe Robustness PrinciplePhone Number:1 (508) 833-8469 SubmitError: must be entered in this format: 555-867-5309
  14. fresh tilled soil Designing A Great User ExperienceThe Robustness PrinciplePhone Number:example: 508-833-8469 Submit
  15. fresh tilled soil Designing A Great User ExperienceThe Robustness PrinciplePhone Number:example: 508-833-8469Submit
  16. fresh tilled soil Designing A Great User ExperienceThe Robustness PrinciplePhone Number:__ __ __ - __ __ __ - __ __ __ __ Submit
  17. fresh tilled soil Designing A Great User ExperienceThe Pareto PrincipleFor many events, roughly 80% of the effectscome from 20% of the causes.measuringusability.com/blog/pareto-ux.php
  18. fresh tilled soil Designing A Great User ExperienceThe Pareto PrincipleIn other words, focusing on the top 20% of your bugs and design problemscan 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 ExperienceThe Pareto PrincipleCountry:Afghanistan Submit
  20. fresh tilled soil Designing A Great User ExperienceThe Pareto PrincipleCountry:United States of America SubmitAfghanistanAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua And BarbudaArgentinaArmeniaAruba
  21. fresh tilled soil Designing A Great User ExperienceThe Pareto PrincipleCountry:United States of America SubmitUnited States of AmericaCanadaUnited KingdomAustralia------------------------------AfghanistanAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguilla
  22. fresh tilled soil Designing A Great User ExperienceFitts’s LawThe time required to rapidly move to atarget area is a function of the distance tothe 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 ExperienceFitts’s LawIn other words, the farther away a touch/click target is from where theuser starts, the larger it needs to be in order for it to be quickly andaccurately 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 ExperienceFitts’s Law
  25. fresh tilled soil Designing A Great User ExperienceFitts’s Law
  26. fresh tilled soil Designing A Great User ExperienceThe Principle of Least AstonishmentWhen two elements of an interface conflictor are ambiguous, the behavior should bethat which will least surprise the user.wikipedia.org/wiki/Principle_of_least_astonishment
  27. fresh tilled soil Designing A Great User ExperienceThe Principle of Least AstonishmentIn other words, the best result of an action is whatever the user is mostlikely to expect, not the result that comes through in depth knowledge.This will change from system to system. Mac OSX users could expectsomething different than Microsoft Windows users. Android and iOS havedifferent design patterns for different interactions as well.wikipedia.org/wiki/Principle_of_least_astonishment
  28. fresh tilled soil Designing A Great User ExperienceThe Principle of Least Astonishment
  29. fresh tilled soil Designing A Great User ExperienceThe Principle of Least Astonishment
  30. fresh tilled soil Designing A Great User ExperienceDieter Rams: Principle 10Good design is as little design as possible.vitsoe.com/us/about/good-design
  31. fresh tilled soil Designing A Great User ExperienceDieter Rams: Principle 10He 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 ExperienceDieter Rams: Principle 10
  33. fresh tilled soil Designing A Great User ExperienceDieter Rams: Principle 10
  34. fresh tilled soil Designing A Great User ExperienceJoshua Porter: Principle 6One primary action per screen.bokardo.com/principles-of-user-interface-design/
  35. fresh tilled soil Designing A Great User ExperienceJoshua Porter: Principle 6Screens 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 ExperienceJoshua Porter: Principle 6
  37. fresh tilled soil Designing A Great User ExperienceJoshua Porter: Principle 6
  38. fresh tilled soil Designing A Great User ExperienceJoshua Porter: Principle 17Great design is invisible.bokardo.com/principles-of-user-interface-design/
  39. fresh tilled soil Designing A Great User ExperienceJoshua Porter: Principle 17An interface shouldn’t distract a user from what they are trying toaccomplish, which is the reason the interface exists in the first place. Turnthe special effects down a notch.bokardo.com/principles-of-user-interface-design/
  40. fresh tilled soil Designing A Great User ExperienceJoshua Porter: Principle 17
  41. fresh tilled soil Designing A Great User ExperienceJoshua Porter: Principle 17
  42. fresh tilled soil Designing A Great User ExperienceBJ Fogg’s Behavior ModelThree factors drive behavior: motivation, ability and triggers.abilitymotivationHighLowLowHigh Target behaviorTriggers fail here.Triggers succeed here.behaviormodel.org/
  43. fresh tilled soil Designing A Great User ExperienceBJ Fogg’s Behavior ModelThe amount of motivation and ability required vary based on how much ofthe other is present. These must be combined with an effective trigger for atarget behavior to happen.All three are required to persuade a user to do something.behaviormodel.org/
  44. fresh tilled soil Designing A Great User ExperienceBJ Fogg’s Behavior ModelMotivation happens on three spectrums:Sensation: Pleasure <> PainAnticipation: Hope <> FearSocial Cohesion: Acceptance <> Rejectionbehaviormodel.org/
  45. fresh tilled soil Designing A Great User ExperienceBJ Fogg’s Behavior ModelYou 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 ExperienceBJ Fogg’s Behavior ModelIn other words, make it simpler.Think of simplicity as a function of your scarcest resource at the moment inwhich you want to accomplish something. Time and money fit this model.behaviormodel.org/
  47. fresh tilled soil Designing A Great User ExperienceResourcesYou can read a lot more at these sites:Joshua Porter: bokardo.com/principles-of-user-interface-design/Dieter Rams: vitsoe.com/us/about/good-designJeremy Keith: principles.adactio.com/BJ Fogg: behaviormodel.org/
  48. fresh tilled soil Designing A Great User Experience02Methods of Effective UX DesignThe habits of highly effective UX designers
  49. fresh tilled soil Designing A Great User ExperienceMethodsEvery UX designer’s process is different, but the way successful onesapproach their process include some useful commonalities.
  50. fresh tilled soil Designing A Great User Experience1. Be ProlificYour 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 Experience1. Be ProlificThe point is to get the obvious out of your system. Once you’ve gotten pastthat you can really start to be creative and innovative.
  52. fresh tilled soil Designing A Great User Experience1. Be Prolificteehanlax.com/story/medium/
  53. fresh tilled soil Designing A Great User Experience1. Be Prolificteehanlax.com/story/medium/
  54. fresh tilled soil Designing A Great User Experience1. Be Prolificteehanlax.com/story/medium/
  55. fresh tilled soil Designing A Great User Experience1. Be Prolificteehanlax.com/story/medium/
  56. fresh tilled soil Designing A Great User Experience1. Be Prolificteehanlax.com/story/medium/
  57. fresh tilled soil Designing A Great User Experience1. Be Prolificteehanlax.com/story/medium/
  58. fresh tilled soil Designing A Great User Experience2. CollaborateNobody works well in a vacuum. When you don’t seek outside opinionsyou can get trapped and focus on things that may not be as important.
  59. fresh tilled soil Designing A Great User Experience2. CollaborateOther opinions will break you out of mental traps and improve your work.
  60. fresh tilled soil Designing A Great User Experience2. Collaboratedesignstaff.org/articles/product-design-sprint-day-2-diverge-2012-10-26.html
  61. fresh tilled soil Designing A Great User Experience3. IterateThe best way to test your assumptions is to make something. You’ll get alot of stuff wrong, but there’s no better way to learn about your problemsand move beyond them.
  62. fresh tilled soil Designing A Great User Experience3. IterateFail early and often and you’ll set yourself up better for eventual success.
  63. fresh tilled soil Designing A Great User Experience3. Iterateazarask.in/blog/post/iterative_design_isnt_design_by/
  64. fresh tilled soil Designing A Great User Experience4. Be FlexibleAs 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 ofconnected items.
  65. fresh tilled soil Designing A Great User Experience4. Be FlexibleEach change has the potential to affect every other deliverable.
  66. fresh tilled soil Designing A Great User Experience03Artifacts of a UX Design ProcessThe things we build
  67. fresh tilled soil Designing A Great User ExperienceDefinition Statement1. 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 ExperienceDefinition StatementThis 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 ExperienceUser Types & User PersonasUser types rely on existing data and informed assumptions to decide whatdistinct types of users you have and what they will want to accomplish.They aren’t complicated, they’re just a quick way of remembering thedifferences in your primary users and their objectives.
  70. fresh tilled soil Designing A Great User ExperienceUser Types & User PersonasUser personas are much more involved, requiring research and interviewswith actual potential users, and typically take weeks or months to compile.Findings are compiled into categories, then assigned traits, habits, namesand photos so that they are visible and easy to remember as you work.
  71. fresh tilled soil Designing A Great User ExperienceUser Types & User Personasuxmag.com/articles/personas-the-foundation-of-a-great-user-experience
  72. fresh tilled soil Designing A Great User ExperienceUser Types & User PersonasWhether you decide to deal with user types or user personas is a questionof resources and time, but using at least one of them tends to remind youthat your users are real.
  73. fresh tilled soil Designing A Great User ExperienceUser Stories & FeaturesAs a { type } user, I would like to { task/objective }.These become your features. Have you come up with a feature idea thatdoesn’t fit into a user story? It may not be nearly as important as youthought it was.
  74. fresh tilled soil Designing A Great User ExperienceUser Stories & Featureshttps://www.apptrajectory.com/
  75. fresh tilled soil Designing A Great User ExperienceSite Map & User JourneysFeatures are going to fit into logical groups that define pages and flows.Placing these into a site map will help you create the appropriaterelationships between components, and show you just how simple orcomplex your plan is.
  76. fresh tilled soil Designing A Great User ExperienceWireframes & SketchesYour wireframes are the blueprints for your product. They generally consistof layouts of the pages and flows you listed previously.They help make sure all functionality is available, and that there is a logicalhierarchy. Beyond those basics, wireframes really shouldn’t be used todictate design decisions.
  77. fresh tilled soil Designing A Great User ExperienceWireframes & SketchesWireframes don’t even have to be high fidelity to be effective. Sketchescan make excellent wireframes if they’re complete and well rendered.As another advantage, sketches are much faster to produce and iteratethrough than other, higher fidelity methods of wireframing.
  78. fresh tilled soil Designing A Great User ExperienceWireframes & Sketches
  79. fresh tilled soil Designing A Great User ExperienceWireframes & Sketches
  80. fresh tilled soil Designing A Great User ExperienceWireframes & Sketches
  81. fresh tilled soil Designing A Great User ExperienceWireframes & Sketches
  82. fresh tilled soil Designing A Great User ExperiencePrototypesPrototypes are a bit more advanced than wireframes. They mimiccompleted functionality to the point that you can run tests with a user.
  83. fresh tilled soil Designing A Great User ExperiencePrototypesThey can be as small as a single piece of functionality, or they can mimic acompleted product in every meaningful way. They are used to test a productwithout building it.A good prototype helps you decide what to build.
  84. fresh tilled soil Designing A Great User ExperiencePrototypesalistapart.com/article/dive-into-responsive-prototyping-with-foundation
  85. fresh tilled soil Designing A Great User ExperiencePrototypesThese products can help you prototype:Foundation: foundation.zurb.comBootstrap: twitter.github.io/bootstrapRatchet: maker.github.io/ratchetFlinto: flinto.comBriefs: giveabrief.comPOP: popapp.inXcode/Storyboard: blog.mengto.com/prototype-xcode-storyboard
  86. fresh tilled soil Designing A Great User ExperienceUser TestsA user test helps you validate whatever you decided to build.You can test a finished product and get lots of great information, but thegreatest 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 Experience04What to Build and WhyYour first test
  88. fresh tilled soil Designing A Great User ExperienceSo, 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 buildingsomething only to find out nobody can figure out how it works? Or evenworse, that nobody wants it?
  89. fresh tilled soil Designing A Great User ExperiencePrototypeFor us, the answer is often a prototype. We aren’t back-end developers, wedon’t employ back-end developers. If we aren’t working with a dev team yetwe still need to build something to test. Fortunately, front-end tech makesit easy to fake a back-end.
  90. fresh tilled soil Designing A Great User ExperienceMinimum Viable ProductFor startups and product companies a minimum viable product is often theanswer. An MVP is popular in Lean circles. Building one means building thesmallest thing you can learn something from. Build it, test it, learn fromthose tests, build something new.It is the smallest amount of effort you can go to and still get validatedlearning from it.
  91. fresh tilled soil Designing A Great User ExperienceUsability TestingRegardless 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 ExperienceSteve Krug’s Maxims of User TestingA morning a month, that’s all we ask.sensible.com/rsme.html
  93. fresh tilled soil Designing A Great User ExperienceSteve Krug’s Maxims of User TestingStart earlier than you think makes sense.sensible.com/rsme.html
  94. fresh tilled soil Designing A Great User ExperienceSteve Krug’s Maxims of User TestingRecruit loosely and grade on a curve.sensible.com/rsme.html
  95. fresh tilled soil Designing A Great User ExperienceSteve Krug’s Maxims of User TestingMake it a spectator sport.sensible.com/rsme.html
  96. fresh tilled soil Designing A Great User ExperienceSteve Krug’s Maxims of User TestingFocus ruthlessly on a small number of themost important problems.sensible.com/rsme.html
  97. fresh tilled soil Designing A Great User ExperienceSteve Krug’s Maxims of User TestingWhen fixing problems, always do the leastyou can do.sensible.com/rsme.html
  98. fresh tilled soil Designing A Great User ExperienceSteve Krug’s Maxims of User TestingRead 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 ExperienceQ&AWe’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

×