This document discusses skeuomorphs and visual metaphors in interface design. [1] Skeuomorphs are design features that are no longer functionally necessary but reference real-world objects, while visual metaphors use images to draw comparisons and infer characteristics. [2] Skeuomorphs can help users transfer mental models and ease the learning curve, but can also limit functionality and innovation if overused. [3] Effective metaphors make interfaces more intuitive while inconsistent or random metaphors can confuse users.

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 retains
ornamental 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 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

5. Loosely,
people have
been referring
to anything that
references the real
world when it
doesn't have to as
"skeuomorphic".
IMAGE: iOS Learner

6. We're talking "UI stuff that looks like,
acts like or reminds us of real stuff."
Let's not get hung up on semantics.

7. 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

8. People accuse Apple software's visual design of
being mired in retro references.

9. 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

10. 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.

11. The idea kind
of eats itself
with these
upcycled
vintage radio
& camera
iPod / iPhone
docks.
IMAGE: LABORATORIOALTIERI, RELECTRONICS

12. Steampunk
style celebrates
skeuomorphism
& modern
gadget's roots
in ancient
machines.
IMAGES: JAKE VON SLATT, DAILY STEAMPUNK, MEGGRS, URBAN DON

14. (This isn't 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

15. They decided form oughta follow function.
IMAGE: VALUEYOU / WIKIPEDIA

16. So,
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.
IMAGE: APPLE

17. But it's not just about how things look.
IMAGE: VOLKSTUDIO

18. There's a usability rationale for designing
UIs 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

19. New things look comfortably old & familiar.
Familiarity eases the learning curve,
because we aren't afraid to try it.
IMAGES: BEEPSTREET / GREATSYNTHESIZERS / STEINWAY & SONS

20. The perception
that something
is easier to use
actually makes
it easier to use.
(because you don't
have to think as
much. It's less, you
know, cognitively
taxing.)
IMAGE: SURPAX TECHNOLOGY

21. (unless your audience is too
young for the metaphor.)
IMAGE: VISUAMOBIL

22. "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

23. 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

24. Do you know how to operate this radio,
or at least where to start?
IMAGE: WEGRASS INTERACTIVE CO. LTD

25. Real-world references
can make UIs more:
● intuitive
● usable
● quick to learn
● easy to understand
IMAGE: THE BLIMP PILOTS

26. Many simple metaphors
like tabs, folders,
windows & even
the desktop itself
have helped
people understand
software, organize
their data &
interact
comfortably with
computers.
IMAGE: MIKHAIL MISHCHENKO

27. "Skeuomorphs are
hobbling innovation by
lashing designers to
metaphors of the past."
—Wired's Clive Thompson

28. But sometimes, getting all tied up in a
metaphor can limit a design.
IMAGE: GAYNOIR_

29. 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

30. Realistic UIs
can also interfere with
understanding by
breaking OS design
conventions, creating
inconsistency between
app experiences.
IMAGE: THERMOMETER APP

31. When UIs get random, users can’t really transfer
their existing knowledge of computer interaction.
Which makes them have to stop & think.
IMAGES: AGINOVA, PATRICK GUIDICELLI, PRESSELITE, ROBOCAT, SEBASTIAN CAMMERER

32. Which interface's interactivity helps you get lost
in a story? Which calls attention to itself?
IMAGE: APPLE / ANANDTECH, AMAZON

33. 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

34. See how the designer explains with metaphor?
Blue sky thinking/creativity, grass/growth,
clouds/imagination.

35. Even without a logo, do you get what
these guys are saying about their brand?
IMAGE: LAYER VAULT

36. "Good design makes a product
understandable.
At best, it is self-explanatory."
—Dieter Rams

37. 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