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.

1. Show vs. Tell
in UX Design
Zoe Mickley Gillenwater
@zomigi
Front in Amsterdam
28 August 2015

2. I work for

5. hot cold
shower
bath

7. Affordance and signifiers

8. (Perceived) Affordance:
properties of an object that show
how it can be used

9. “ 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

10. https://www.flickr.com/photos/avlxyz/4197353238/

11. https://www.flickr.com/photos/panavatar/3571555763/

12. Signifiers:
indicators of meaningful
information

13. buttons = affordance
icons = signifiers

14. “
Forget affordances:
what people need,
and what design must provide,
are signifiers.
Don Norman
http://jnd.org/dn.mss/signifiers_not_affordances.html

15. “
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/

16. Lack of signifiers

17. Morningstar iPad app

18. Morningstar iPad app

19. “Overhang” on disney.com

20. Illiterate toddler test

21. Endless Alphabet iPad app

22. Endless Numbers iPad app

23. “
Use a picture. It's worth a
thousand words.
Arthur Brisbane, newspaper editor
1911

24. Buienalarm iPhone app

27. Facebook skeleton screen

28. Polar app loading spinner
http://www.lukew.com/ff/entry.asp?1797

29. Polar app skeleton screen
http://www.lukew.com/ff/entry.asp?1797

30. Skeleton screen demo by Mark Disciullo
https://disciullodesign.wordpress.com/2015/03/13/animation-
and-the-user-experience/

31. Booking Now app onboarding
http://www.booking.com/now.html

32. Showing sure seems like the
best choice

33. But telling can often be more
effective

35. “ 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

39. Designers ♥ icons

40. But icons alone are often not usable
Outlook 97
Outlook 98
Outlook 2000
Outlook 2013

41. twitter.com, early 2014

42. twitter.com, 2015

43. Original Twitter iPhone app, 2010 Twitter iPhone app, 2015

44. Facebook iPhone app, 2012 Facebook iPhone app, 2015

45. Facebook iPhone app, 2012 Facebook iPhone app, 2015

46. iPhone camera app, iOS 6 iPhone camera app, iOS 7

49. +

50. LinkedIn app
FOLLOW

51. action copy vs. action icons

52. “ 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

53. Booking.com tablet site search results
Booking.com property page

54. “
A word is worth a thousand
pictures.
Bruce Tognazzini
Apple Human Interface Group motto, 1985

55. “ 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

56. showing vs. telling—
&

57. Mental Model:
what the user believes about the
system at hand

58. visual + verbal = stronger model

60. lan.com account creation

62. Booking.com search results

63. Beware cognitive overload

64. Chrome bookmark dialog, April-June Chrome bookmark dialog, now

65. If it doesn’t work,
try it another way

66. Context matters

68. Test to validate

69. Question assumptions

70. Thank you
@zomigi
zomigi.com