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