Upload
zoe-gillenwater
View
1.333
Download
0
Embed Size (px)
Citation preview
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