show vs. tell in ux design (front in amsterdam)
TRANSCRIPT
![Page 1: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/1.jpg)
Show vs. Tell in UX Design Zoe Mickley Gillenwater
@zomigi Front in Amsterdam
28 August 2015
![Page 2: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/2.jpg)
I work for
![Page 3: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/3.jpg)
![Page 4: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/4.jpg)
![Page 5: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/5.jpg)
hot cold
shower
bath
![Page 6: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/6.jpg)
![Page 7: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/7.jpg)
Affordance and signifiers
![Page 8: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/8.jpg)
(Perceived) Affordance: properties of an object that show
how it can be used
![Page 9: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/9.jpg)
“ 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
![Page 10: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/10.jpg)
https://www.flickr.com/photos/avlxyz/4197353238/
![Page 11: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/11.jpg)
https://www.flickr.com/photos/panavatar/3571555763/
![Page 12: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/12.jpg)
Signifiers: indicators of meaningful
information
![Page 13: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/13.jpg)
buttons = affordance
icons = signifiers
![Page 14: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/14.jpg)
“ Forget affordances: what people need, and what design must provide, are signifiers.
Don Norman http://jnd.org/dn.mss/signifiers_not_affordances.html
![Page 15: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/15.jpg)
“ 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/
![Page 16: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/16.jpg)
Lack of signifiers
![Page 17: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/17.jpg)
Morningstar iPad app
![Page 18: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/18.jpg)
Morningstar iPad app
![Page 19: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/19.jpg)
“Overhang” on disney.com
![Page 20: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/20.jpg)
Illiterate toddler test
![Page 21: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/21.jpg)
Endless Alphabet iPad app
![Page 22: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/22.jpg)
Endless Numbers iPad app
![Page 23: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/23.jpg)
“ Use a picture. It's worth a thousand words.
Arthur Brisbane, newspaper editor 1911
![Page 24: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/24.jpg)
Buienalarm iPhone app
![Page 25: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/25.jpg)
![Page 26: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/26.jpg)
![Page 27: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/27.jpg)
Facebook skeleton screen
![Page 28: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/28.jpg)
Polar app loading spinner http://www.lukew.com/ff/entry.asp?1797
![Page 29: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/29.jpg)
Polar app skeleton screen http://www.lukew.com/ff/entry.asp?1797
![Page 30: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/30.jpg)
Skeleton screen demo by Mark Disciullo https://disciullodesign.wordpress.com/2015/03/13/animation-and-the-user-experience/
![Page 31: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/31.jpg)
Booking Now app onboarding http://www.booking.com/now.html
![Page 32: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/32.jpg)
Showing sure seems like the best choice
![Page 33: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/33.jpg)
But telling can often be more effective
![Page 34: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/34.jpg)
![Page 35: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/35.jpg)
“ 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
![Page 36: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/36.jpg)
![Page 37: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/37.jpg)
![Page 38: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/38.jpg)
![Page 39: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/39.jpg)
Designers ♥ icons
![Page 40: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/40.jpg)
But icons alone are often not usable
Outlook 97
Outlook 98
Outlook 2000
Outlook 2013
![Page 41: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/41.jpg)
twitter.com, early 2014
![Page 42: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/42.jpg)
twitter.com, 2015
![Page 43: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/43.jpg)
Original Twitter iPhone app, 2010 Twitter iPhone app, 2015
![Page 44: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/44.jpg)
Facebook iPhone app, 2012 Facebook iPhone app, 2015
![Page 45: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/45.jpg)
Facebook iPhone app, 2012 Facebook iPhone app, 2015
![Page 46: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/46.jpg)
iPhone camera app, iOS 6 iPhone camera app, iOS 7
![Page 47: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/47.jpg)
![Page 48: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/48.jpg)
![Page 49: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/49.jpg)
+
![Page 50: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/50.jpg)
LinkedIn app
FOLLOW
![Page 51: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/51.jpg)
action copy vs. action icons
![Page 52: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/52.jpg)
“ 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
![Page 53: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/53.jpg)
Booking.com tablet site search results
Booking.com property page
![Page 54: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/54.jpg)
“ A word is worth a thousand pictures.
Bruce Tognazzini Apple Human Interface Group motto, 1985
![Page 55: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/55.jpg)
“ 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
![Page 56: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/56.jpg)
showing vs. telling — &
![Page 57: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/57.jpg)
Mental Model: what the user believes about the
system at hand
![Page 58: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/58.jpg)
visual + verbal = stronger model
![Page 59: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/59.jpg)
![Page 60: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/60.jpg)
lan.com account creation
![Page 61: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/61.jpg)
![Page 62: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/62.jpg)
Booking.com search results
![Page 63: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/63.jpg)
Beware cognitive overload
![Page 64: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/64.jpg)
Chrome bookmark dialog, April-June Chrome bookmark dialog, now
![Page 65: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/65.jpg)
If it doesn’t work, try it another way
![Page 66: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/66.jpg)
Context matters
![Page 67: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/67.jpg)
![Page 68: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/68.jpg)
Test to validate
![Page 69: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/69.jpg)
Question assumptions
![Page 70: Show vs. Tell in UX Design (Front in Amsterdam)](https://reader031.vdocuments.mx/reader031/viewer/2022030310/58f9aa08760da3da068b74db/html5/thumbnails/70.jpg)
Thank you
@zomigi zomigi.com