Your SlideShare is downloading. ×
  • Like
Skeuomorphs & Visual Metaphors in UI Design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Skeuomorphs & Visual Metaphors in UI Design


A look at skeuomorphs & visual metaphors in user interface design. How do they help users understand what to do? How can they impede usability?

A look at skeuomorphs & visual metaphors in user interface design. How do they help users understand what to do? How can they impede usability?

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Skeuomorphs & Visual Metaphors& what the heck they do in interface design.
  • 2. SKEUOMORPH [skyoo-uh-mawrf]: A design feature that is no longer functionally necessary, like human fingernails, appendix & wisdom teeth. Or maybe a "derivative object that retainsornamental design cues to a structure that was necessary to the original". —Oxford English Dictionary IMAGE: @NAILSFV / INSTAGRAM
  • 3. VISUAL METAPHOR: An image used to make a comparison.The comparison infers certain characteristics (brand) or functionality (features).
  • 4. The difference is......a skeuomorphsornamentation referencesoriginal functionality, likewoodgrain on laminateflooring standing for thestrength of wood.A visual metaphor likensthe UI to somethingfamiliar to help usunderstand. IMAGE: incase / HUNTERGATHERER / ARKITIP
  • 5. Loosely, people have been referring to anything thatreferences the real world when it doesnt have to as "skeuomorphic". IMAGE: iOS Learner
  • 6. Were talking "UI stuff that looks like,acts like or reminds us of real stuff."Lets not get hung up on semantics.
  • 7. So why are peopletalking about this?The recent firing ofScott Forstall,Sr VP of iOS Softwareat Apple has broughtthe retro-referencehaters out of thewoodwork. IMAGE: GETTY IMAGES
  • 8. People accuse Apple softwares visual design ofbeing mired in retro references.
  • 9. Theres even somefor your ears.The (nonexistent) shuttersound you hear when yousnap a photo is an audioskeuomorph.It makes you feel like youreally, definitely took apicture. IMAGE: STATE OF TECH
  • 10. Then is the new now. Retro camera apps like Instagram & Hipstamaticadd vintage-inspired lightleaks, lens flares, borders, paper & film stock. These nostalgia-invoking skeuomorphic artifacts have become a real stylistic force.
  • 11. The idea kindof eats itselfwith theseupcycledvintage radio& cameraiPod / iPhonedocks. IMAGE: LABORATORIOALTIERI, RELECTRONICS
  • 12. Steampunkstyle celebratesskeuomorphism& moderngadgets rootsin ancientmachines. IMAGES: JAKE VON SLATT, DAILY STEAMPUNK, MEGGRS, URBAN DON
  • 13. (This isnt the first time designers have reacted against regurgitated styles. The Modernists of the 1920s got sick of Greco- Roman historicism & decided to do away with ornamentation. Simplicity meant designed objects could "plainly express their function"—that is, be usable.) MASTERS OF MODERNISM. IMAGE: BERTHOLD WERNER
  • 14. They decided form oughta follow function. IMAGE: VALUEYOU / WIKIPEDIA
  • 15. So, some people just find skeumorphismtacky. The suggestion that we need to be comforted by faux leather to use a UI strikes some as patronizing. IMAGE: APPLE
  • 16. But its not just about how things look. IMAGE: VOLKSTUDIO
  • 17. Theres a usability rationale for designingUIs that reference the past visually. As analogue items transform into digital ones, users are able to transfer their mental models of how things work. IMAGE: HIPSTAMATIC / JUDY IS OK
  • 18. New things look comfortably old & familiar. Familiarity eases the learning curve, because we arent afraid to try it. IMAGES: BEEPSTREET / GREATSYNTHESIZERS / STEINWAY & SONS
  • 19. The perceptionthat somethingis easier to use actually makesit easier to use. (because you dont have to think as much. Its less, you know, cognitively taxing.) IMAGE: SURPAX TECHNOLOGY
  • 20. (unless your audience is too young for the metaphor.) IMAGE: VISUAMOBIL
  • 21. "When virtual objects & actions in anapplication are metaphors for objects &actions in the real world, users quickly grasphow to use the app."—Apples HumanInterface Guidelines IMAGE: WALLPAPERSTOCK
  • 22. AFFORDANCE:A quality of an object orenvironment that allowsyou to do something.In UI terms, its the easydiscoverability & suggestionof potential actions.Poetically, its a designs"functional colouring". IMAGE: APPLE
  • 23. Do you know how to operate this radio,or at least where to start? IMAGE: WEGRASS INTERACTIVE CO. LTD
  • 24. Real-world referencescan make UIs more:● intuitive● usable● quick to learn● easy to understand IMAGE: THE BLIMP PILOTS
  • 25. Many simple metaphors like tabs, folders, windows & even the desktop itself have helpedpeople understandsoftware, organize their data & interact comfortably with computers. IMAGE: MIKHAIL MISHCHENKO
  • 26. "Skeuomorphs arehobbling innovation bylashing designers tometaphors of the past."—Wireds Clive Thompson
  • 27. But sometimes, getting all tied up in ametaphor can limit a design. IMAGE: GAYNOIR_
  • 28. Skeuomorphic / metaphoric UIs can● limit functionality● make things harder to operate● take up more screen space● sacrifice accuracy by avoiding numeric input IMAGE: WEGRASS INTERACTIVE CO. LTD
  • 29. Realistic UIscan also interfere with understanding by breaking OS design conventions, creatinginconsistency between app experiences. IMAGE: THERMOMETER APP
  • 30. When UIs get random, users can’t really transfertheir existing knowledge of computer interaction.Which makes them have to stop & think. IMAGES: AGINOVA, PATRICK GUIDICELLI, PRESSELITE, ROBOCAT, SEBASTIAN CAMMERER
  • 31. Which interfaces interactivity helps you get lostin a story? Which calls attention to itself? IMAGE: APPLE / ANANDTECH, AMAZON
  • 32. Visual metaphorsin the form of illustrations, photos or designelements can also be used for branding. This isthe basis for much logo design & websites whereproduct shots arent available. IMAGE: STARTUP WEEKEND
  • 33. See how the designer explains with metaphor?Blue sky thinking/creativity, grass/growth,clouds/imagination.
  • 34. Even without a logo, do you get whatthese guys are saying about their brand? IMAGE: LAYER VAULT
  • 35. "Good design makes a productunderstandable.At best, it is self-explanatory."—Dieter Rams
  • 36. Lets practice usingvisual metaphor.Take an object that has areal-world analogue, like aflashlight, radio, phone ortv, and design an interfacethat doesnt use the expectedmetaphor but still offersaffordances that make iteasy to use. IMAGE: HTC