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

Show vs. Tell in UX Design Zoe Mickley Gillenwater

@zomigi Front in Amsterdam

28 August 2015

I work for

hot cold

shower

bath

Affordance and signifiers

(Perceived) Affordance: properties of an object that show

how it can be used

“ 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

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

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

Signifiers: indicators of meaningful

information

buttons = affordance

icons = signifiers

“ Forget affordances: what people need, and what design must provide, are signifiers.

Don Norman http://jnd.org/dn.mss/signifiers_not_affordances.html

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

Lack of signifiers

Morningstar iPad app

Morningstar iPad app

“Overhang” on disney.com

Illiterate toddler test

Endless Alphabet iPad app

Endless Numbers iPad app

“ Use a picture. It's worth a thousand words.

Arthur Brisbane, newspaper editor 1911

Buienalarm iPhone app

Facebook skeleton screen

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

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

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

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

Showing sure seems like the best choice

But telling can often be more effective

“ 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

Designers ♥ icons

But icons alone are often not usable

Outlook 97

Outlook 98

Outlook 2000

Outlook 2013

twitter.com, early 2014

twitter.com, 2015

Original Twitter iPhone app, 2010 Twitter iPhone app, 2015

Facebook iPhone app, 2012 Facebook iPhone app, 2015

Facebook iPhone app, 2012 Facebook iPhone app, 2015

iPhone camera app, iOS 6 iPhone camera app, iOS 7

+

LinkedIn app

FOLLOW

action copy vs. action icons

“ 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

Booking.com tablet site search results

Booking.com property page

“ A word is worth a thousand pictures.

Bruce Tognazzini Apple Human Interface Group motto, 1985

“ 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

showing vs. telling — &

Mental Model: what the user believes about the

system at hand

visual + verbal = stronger model

lan.com account creation

Booking.com search results

Beware cognitive overload

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

If it doesn’t work, try it another way

Context matters

Test to validate

Question assumptions

Thank you

@zomigi zomigi.com