Skeuomorphs & Visual Metaphors& what the heck they do in interface design.
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
VISUAL METAPHOR: An image used to make a comparison.The comparison infers certain characteristics (brand) or functionality (features).
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
Loosely, people have been referring to anything thatreferences the real world when it doesnt have to as "skeuomorphic". IMAGE: iOS Learner
Were talking "UI stuff that looks like,acts like or reminds us of real stuff."Lets not get hung up on semantics.
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
People accuse Apple softwares visual design ofbeing mired in retro references.
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
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.
The idea kindof eats itselfwith theseupcycledvintage radio& cameraiPod / iPhonedocks. IMAGE: LABORATORIOALTIERI, RELECTRONICS
Steampunkstyle celebratesskeuomorphism& moderngadgets rootsin ancientmachines. IMAGES: JAKE VON SLATT, DAILY STEAMPUNK, MEGGRS, URBAN DON
(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
They decided form oughta follow function. IMAGE: VALUEYOU / WIKIPEDIA
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
But its not just about how things look. IMAGE: VOLKSTUDIO
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
New things look comfortably old & familiar. Familiarity eases the learning curve, because we arent afraid to try it. IMAGES: BEEPSTREET / GREATSYNTHESIZERS / STEINWAY & SONS
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
(unless your audience is too young for the metaphor.) IMAGE: VISUAMOBIL
"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
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
Do you know how to operate this radio,or at least where to start? IMAGE: WEGRASS INTERACTIVE CO. LTD
Real-world referencescan make UIs more:● intuitive● usable● quick to learn● easy to understand IMAGE: THE BLIMP PILOTS
Many simple metaphors like tabs, folders, windows & even the desktop itself have helpedpeople understandsoftware, organize their data & interact comfortably with computers. IMAGE: MIKHAIL MISHCHENKO
"Skeuomorphs arehobbling innovation bylashing designers tometaphors of the past."—Wireds Clive Thompson
But sometimes, getting all tied up in ametaphor can limit a design. IMAGE: GAYNOIR_
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
Realistic UIscan also interfere with understanding by breaking OS design conventions, creatinginconsistency between app experiences. IMAGE: THERMOMETER APP
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
Which interfaces interactivity helps you get lostin a story? Which calls attention to itself? IMAGE: APPLE / ANANDTECH, AMAZON
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
See how the designer explains with metaphor?Blue sky thinking/creativity, grass/growth,clouds/imagination.
Even without a logo, do you get whatthese guys are saying about their brand? IMAGE: LAYER VAULT
"Good design makes a productunderstandable.At best, it is self-explanatory."—Dieter Rams
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