Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Show vs. Tell in UX Design (Front in Amsterdam)

1,463 views

Published on

We’ve all heard these “laws” of design: “People don’t read on the web.” “If you have to explain how to use your product, you’ve failed.” “A picture is worth a thousand words.” It seems like our job as designers is to make things as intuitive as possible, using as few words as possible so that the meaning is self-evident through our visual design. But does this always produce the best user experience? Is showing always better than telling? We’ll look at several examples of design from the real world, the web, and apps that use showing, telling, or both as a method for producing the best UX. Rather than just assuming one is always better than the other, learn how to choose the right approach for your particular design problem and users.

Published in: Design
  • Be the first to comment

Show vs. Tell in UX Design (Front in Amsterdam)

  1. 1. Show vs. Tell in UX Design Zoe Mickley Gillenwater @zomigi Front in Amsterdam 28 August 2015
  2. 2. I work for
  3. 3. hot cold shower bath
  4. 4. Affordance and signifiers
  5. 5. (Perceived) Affordance: properties of an object that show how it can be used
  6. 6. “ When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed. Don Norman The Design of Everyday Things, 1988
  7. 7. https://www.flickr.com/photos/avlxyz/4197353238/
  8. 8. https://www.flickr.com/photos/panavatar/3571555763/
  9. 9. Signifiers: indicators of meaningful information
  10. 10. buttons = affordance icons = signifiers
  11. 11. “ Forget affordances: what people need, and what design must provide, are signifiers. Don Norman http://jnd.org/dn.mss/signifiers_not_affordances.html
  12. 12. “ Patterns provide us with wonderful shortcuts to easily communicate affordances. Natasha Postolovski http://www.smashingmagazine.com/2014/06/affordance-most-underrated-word-in-web-design/
  13. 13. Lack of signifiers
  14. 14. Morningstar iPad app
  15. 15. Morningstar iPad app
  16. 16. “Overhang” on disney.com
  17. 17. Illiterate toddler test
  18. 18. Endless Alphabet iPad app
  19. 19. Endless Numbers iPad app
  20. 20. “ Use a picture. It's worth a thousand words. Arthur Brisbane, newspaper editor 1911
  21. 21. Buienalarm iPhone app
  22. 22. Facebook skeleton screen
  23. 23. Polar app loading spinner http://www.lukew.com/ff/entry.asp?1797
  24. 24. Polar app skeleton screen http://www.lukew.com/ff/entry.asp?1797
  25. 25. Skeleton screen demo by Mark Disciullo https://disciullodesign.wordpress.com/2015/03/13/animation- and-the-user-experience/
  26. 26. Booking Now app onboarding http://www.booking.com/now.html
  27. 27. Showing sure seems like the best choice
  28. 28. But telling can often be more effective
  29. 29. “ You don’t want to put too much meaning into [the icon]. Because the pregnancy test has a very different significance to different people. For some people, it’s good news. For others, it’s bad news. You can’t put too much of your own sensibility into the object. Marcel Wanders, designer of a pregnancy test in 1990 http://www.nytimes.com/2012/07/29/magazine/who-made-that-home-pregnancy-test.html
  30. 30. Designers ♥ icons
  31. 31. But icons alone are often not usable Outlook 97 Outlook 98 Outlook 2000 Outlook 2013
  32. 32. twitter.com, early 2014
  33. 33. twitter.com, 2015
  34. 34. Original Twitter iPhone app, 2010 Twitter iPhone app, 2015
  35. 35. Facebook iPhone app, 2012 Facebook iPhone app, 2015
  36. 36. Facebook iPhone app, 2012 Facebook iPhone app, 2015
  37. 37. iPhone camera app, iOS 6 iPhone camera app, iOS 7
  38. 38. +
  39. 39. LinkedIn app FOLLOW
  40. 40. action copy vs. action icons
  41. 41. “ Icons contribute to the visual attractiveness of an interface and, under the appropriate circumstances, can contribute to clarity; however, the failings of icons have become clearer with time. … Instead of icons explaining, we have found that icons often require explanation. Jef Raskin, “Father of the Macintosh” and cognitive psychologist The Humane Interface, 2000
  42. 42. Booking.com tablet site search results Booking.com property page
  43. 43. “ A word is worth a thousand pictures. Bruce Tognazzini Apple Human Interface Group motto, 1985
  44. 44. “ Don’t underestimate the power of humdrum. We have centuries of practice at making print and text engaging, and old interface conventions are not necessarily old- fashioned. Josh Clark Buttons Are a Hack: The New Rules of Designing for Touch, Webstock 2011
  45. 45. showing vs. telling— &
  46. 46. Mental Model: what the user believes about the system at hand
  47. 47. visual + verbal = stronger model
  48. 48. lan.com account creation
  49. 49. Booking.com search results
  50. 50. Beware cognitive overload
  51. 51. Chrome bookmark dialog, April-June Chrome bookmark dialog, now
  52. 52. If it doesn’t work, try it another way
  53. 53. Context matters
  54. 54. Test to validate
  55. 55. Question assumptions
  56. 56. Thank you @zomigi zomigi.com

×