Skeuomorphs & Visual Metaphors in UI Design

6,470 views

Published on

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

Skeuomorphs & Visual Metaphors in UI Design

  1. 1. Skeuomorphs & Visual Metaphors& what the heck they do in interface design.
  2. 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. 3. VISUAL METAPHOR: An image used to make a comparison.The comparison infers certain characteristics (brand) or functionality (features).
  4. 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. 5. Loosely, people have been referring to anything thatreferences the real world when it doesnt have to as "skeuomorphic". IMAGE: iOS Learner
  6. 6. Were talking "UI stuff that looks like,acts like or reminds us of real stuff."Lets not get hung up on semantics.
  7. 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. 8. People accuse Apple softwares visual design ofbeing mired in retro references.
  9. 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. 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. 11. The idea kindof eats itselfwith theseupcycledvintage radio& cameraiPod / iPhonedocks. IMAGE: LABORATORIOALTIERI, RELECTRONICS
  12. 12. Steampunkstyle celebratesskeuomorphism& moderngadgets rootsin ancientmachines. IMAGES: JAKE VON SLATT, DAILY STEAMPUNK, MEGGRS, URBAN DON
  13. 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. 14. They decided form oughta follow function. IMAGE: VALUEYOU / WIKIPEDIA
  15. 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. 16. But its not just about how things look. IMAGE: VOLKSTUDIO
  17. 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. 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. 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. 20. (unless your audience is too young for the metaphor.) IMAGE: VISUAMOBIL
  21. 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. 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. 23. Do you know how to operate this radio,or at least where to start? IMAGE: WEGRASS INTERACTIVE CO. LTD
  24. 24. Real-world referencescan make UIs more:● intuitive● usable● quick to learn● easy to understand IMAGE: THE BLIMP PILOTS
  25. 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. 26. "Skeuomorphs arehobbling innovation bylashing designers tometaphors of the past."—Wireds Clive Thompson
  27. 27. But sometimes, getting all tied up in ametaphor can limit a design. IMAGE: GAYNOIR_
  28. 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. 29. Realistic UIscan also interfere with understanding by breaking OS design conventions, creatinginconsistency between app experiences. IMAGE: THERMOMETER APP
  30. 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. 31. Which interfaces interactivity helps you get lostin a story? Which calls attention to itself? IMAGE: APPLE / ANANDTECH, AMAZON
  32. 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. 33. See how the designer explains with metaphor?Blue sky thinking/creativity, grass/growth,clouds/imagination.
  34. 34. Even without a logo, do you get whatthese guys are saying about their brand? IMAGE: LAYER VAULT
  35. 35. "Good design makes a productunderstandable.At best, it is self-explanatory."—Dieter Rams
  36. 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

×