Realistic User Interface Design

Realistic UI Design Aaron Weyenberg @aweyenbergFriday, May 13, 2011

Friday, May 13, 2011

Flickr photo: mwicharyFriday, May 13, 2011

Flickr photo: c_emeryFriday, May 13, 2011

Flickr photo: saxyjorgeFriday, May 13, 2011

Ancestor Decendent Realism (Analog) (Touch Device)Friday, May 13, 2011

Weak form Strong form Texture Texture Light & shadow Light & shadow Depth Depth Skeuomorphs Skeuomorphs + Behavior Structure ControlsFriday, May 13, 2011

Flickr photo: vanderveenr Strong form realism copies analog form & behaviorFriday, May 13, 2011

Mobile/Touch Web 2.0 Semantic Web Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011

Mobile/Touch Web 2.0 Semantic Web Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011

Mobile/Touch Web 2.0 Crazy Image Semantic Web Maps Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011

Mobile/Touch Insane Flash Web 2.0 Sites Crazy Image Semantic Web Maps Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011

Overzealous Touch Realism Mobile/Touch Insane Flash Web 2.0 Sites Crazy Image Semantic Web Maps Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011

Indiscriminate use of realism results in UIs that impair usability and stall innovation.Friday, May 13, 2011

How?Friday, May 13, 2011

Usability InnovationFriday, May 13, 2011

Realistic UIs inherit both good and bad genes Flickr photo: deltamikeFriday, May 13, 2011

A Tale of Two TypewritersFriday, May 13, 2011

“No problem... I’ll just add modern features to my cool, retro design.”Friday, May 13, 2011

Realistic UIs contradict realityFriday, May 13, 2011

Flickr photo: mr_t_in_dcFriday, May 13, 2011

Realistic UIs consume space Flickr photo: eridiusFriday, May 13, 2011

Camera+ No. 1 photography app Over 2 million installsFriday, May 13, 2011

Version 1.xFriday, May 13, 2011

Version 2.xFriday, May 13, 2011

2.7x revenue in one month v1.x v2.0 http://taptaptap.com/blog/million-million/Friday, May 13, 2011

So should we abandon realism?Friday, May 13, 2011

Realism can add credibility & trust + differentiate + utilize mental models = aid usabilityFriday, May 13, 2011

Flickr photo: usarmyafrica Well-designed realism can aid trust & credibilityFriday, May 13, 2011

Well-designed realism makes your app unique Flickr photo: carolmartinezFriday, May 13, 2011

Features + Personality = DifferentiationFriday, May 13, 2011

Flickr photo: double-m2 Thoughtful realism leverages mental modelsFriday, May 13, 2011

RedLaserFriday, May 13, 2011

Flickr photo: salemmapubliclibraryFriday, May 13, 2011

Featured in Apple TV ads 8 million installs Acquired by eBayFriday, May 13, 2011

Thoughtfully executed realism augments usability.Friday, May 13, 2011

Usability InnovationFriday, May 13, 2011

Indiscriminate realism stalls innovation Photo: Wikimedia CommonsFriday, May 13, 2011

Flickr photo: landerholmFriday, May 13, 2011

Flickr photo: mwicharyFriday, May 13, 2011

Flickr photo: angryamoebaFriday, May 13, 2011

Flickr photo: mariusmFriday, May 13, 2011

Flickr photo: dmkrumFriday, May 13, 2011

Photo: Wikimedia CommonsFriday, May 13, 2011

Flickr photo: erlingFriday, May 13, 2011

Flickr photo: degilbo_on_ﬂickrFriday, May 13, 2011

Photo: Wikimedia CommonsFriday, May 13, 2011

What if you had to start over? Multiline numeric display Calculate as you type Edit, undo, redo Add words for meaning Save and share calculationsFriday, May 13, 2011

DigitsFriday, May 13, 2011

CalcbotFriday, May 13, 2011

SoulverFriday, May 13, 2011

Digits Calcbot SoulverFriday, May 13, 2011

Four considerationsFriday, May 13, 2011

Be efficient Don’t further limit the form factor of mobile devices at the expense of design realism.Friday, May 13, 2011

Be honest Realistic design features should be consistent with and reflect reality.Friday, May 13, 2011

Be unique Your app wants a personality.Friday, May 13, 2011

Be inventive Think forward. Throw away old blueprints. “My job as a designer is to look into the future. Not use any frame of reference that exists.” Marc NewsonFriday, May 13, 2011

Usability 1980 1990 2000 2010Friday, May 13, 2011

Thanks! Aaron Weyenberg @aweyenbergFriday, May 13, 2011

http://www.webdirections.org	263
http://lanyrd.com	87
http://safe.tumblr.com	4
http://www.slideshare.net	3
http://twitter.com	2
http://2105.tumblr.com	2
https://lanyrd.com	1
http://paper.li	1

Realistic User Interface Design

by aweyenberg on May 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 363

Statistics

Realistic User Interface Design — Presentation Transcript