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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Skeuomorphs & Visual Metaphors in UI Design

5,231

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?

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
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,231
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
76
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×