Skeuomorphs & Visual Metaphors in UI Design
-
Upload
tactica-interactive -
Category
Design
-
view
5.285 -
download
2
description
Transcript of Skeuomorphs & Visual Metaphors in UI Design
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 retains
ornamental 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 skeuomorph's ornamentation references original functionality, like woodgrain on laminate flooring standing for the strength of wood.
A visual metaphor likens the UI to something familiar to help us understand.
IMAGE: incase / HUNTERGATHERER / ARKITIP
Loosely,people have
been referring to anything that
references the real world when it
doesn't have to as "skeuomorphic".
IMAGE: iOS Learner
We're talking "UI stuff that looks like, acts like or reminds us of real stuff."
Let's not get hung up on semantics.
So why are people talking about this?
The recent firing of Scott Forstall, Sr VP of iOS Software at Apple has brought the retro-reference haters out of the woodwork.
IMAGE: GETTY IMAGES
People accuse Apple software's visual design of being mired in retro references.
There's even some for your ears.
The (nonexistent) shutter sound you hear when you snap a photo is an audio skeuomorph.
It makes you feel like you really, definitely took a picture.
IMAGE: STATE OF TECH
Then is the new now.Retro camera apps like
Instagram & Hipstamatic add vintage-inspired light leaks, lens flares, borders,
paper & film stock.
These nostalgia-invoking skeuomorphic artifacts
have become a real stylistic force.
The idea kind of eats itself with these upcycled vintage radio & camera iPod / iPhone docks.
IMAGE: LABORATORIOALTIERI, RELECTRONICS
Steampunk style celebrates skeuomorphism & modern gadget's roots in ancient machines.
IMAGES: JAKE VON SLATT, DAILY STEAMPUNK, MEGGRS, URBAN DON
(This isn't the first timedesigners 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
some people just find skeumorphism
tacky. The suggestion that we need to be comforted by faux leather to use a UI
strikes some as patronizing.
So,
IMAGE: APPLE
But it's not just about how things look.
IMAGE: VOLKSTUDIO
As analogue items transform into digital ones, users are able to transfer their mental models of how things work.
IMAGE: HIPSTAMATIC / JUDY IS OK
There's a usability rationale for designingUIs that reference the past visually.
New things look comfortably old & familiar.
IMAGES: BEEPSTREET / GREATSYNTHESIZERS / STEINWAY & SONS
Familiarity eases the learning curve, because we aren't afraid to try it.
(because you don't have to think as
much. It's less, you know, cognitively
taxing.)
The perception that something is easier to use actually makes it easier to use.
IMAGE: SURPAX TECHNOLOGY
(unless your audience is too young for the metaphor.)
IMAGE: VISUAMOBIL
"When virtual objects & actions in an application are metaphors for objects & actions in the real world, users quickly grasp how to use the app."
—Apple's Human Interface Guidelines
IMAGE: WALLPAPERSTOCK
AFFORDANCE:
A quality of an object or environment that allows you to do something.
In UI terms, it's the easy discoverability & suggestion of potential actions.
Poetically, it's a design's "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 references can make UIs more:
● intuitive● usable● quick to learn● easy to understand
IMAGE: THE BLIMP PILOTS
Many simple metaphorslike tabs, folders, windows & even
the desktop itself have helped
people understand software, organize
their data & interact
comfortably with computers.
IMAGE: MIKHAIL MISHCHENKO
"Skeuomorphs are hobbling innovation by lashing designers to metaphors of the past."
—Wired's Clive Thompson
But sometimes, getting all tied up in a metaphor can limit a design.
IMAGE: GAYNOIR_
● limit functionality● make things harder to operate● take up more screen space● sacrifice accuracy by avoiding numeric input
Skeuomorphic / metaphoric UIs can
IMAGE: WEGRASS INTERACTIVE CO. LTD
Realistic UIscan also interfere with
understanding by breaking OS design
conventions, creating inconsistency between
app experiences.
IMAGE: THERMOMETER APP
When UIs get random, users can’t really transfer their existing knowledge of computer interaction.
IMAGES: AGINOVA, PATRICK GUIDICELLI, PRESSELITE, ROBOCAT, SEBASTIAN CAMMERER
Which makes them have to stop & think.
Which interface's interactivity helps you get lost in a story? Which calls attention to itself?
IMAGE: APPLE / ANANDTECH, AMAZON
Visual metaphors in the form of illustrations, photos or design elements can also be used for branding. This is the basis for much logo design & websites where product shots aren't 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 what these guys are saying about their brand?
IMAGE: LAYER VAULT
"Good design makes a product understandable.
At best, it is self-explanatory."
—Dieter Rams
Let's practice using visual metaphor.Take an object that has a real-world analogue, like a flashlight, radio, phone or tv, and design an interface that doesn't use the expected metaphor but still offers affordances that make it easy to use.
IMAGE: HTC