Mobile is snorkelling. Desktop is diving

Copied!

Metaphors for interface design from Rachel Hinman via Mobile First .

Published 23 Mar 2014

New sketches by email

Learn something new in a sketch each Sunday

Get the book!

Big Ideas Little Pictures

Prefer to listen?

Try the podcast

Sketchplanations is ad-free
thanks to supporters like you.

Keep exploring

Everyone's a Geek About Something — Revised and Expanded

Don't ask the barber if you need a haircut

Brenda Ueland quote: What is the purpose of existence but to discover truth and beauty and share it with others? showing a person finding a flower, painting it, and then enjoying seeing others experience the same emotions they did

Discovering Truth and Beauty and Sharing it with others

Why is the save icon in your software a floppy disk that no one has used for over 20 years? And that phone icon looks nothing like your mobile phone when making a call. These are both skeuomorphs. What is a skeuomorph? A skeuomorph is when a new design borrows practical elements from a former design and repurposes them in a functional or ornamental way. Skeuomorphs are practical because they make new systems more intuitive. Their comfort and familiarity can help bridge old and new ways. For example, some electric cars are designed to look like they have air intake vents like traditional combustion cars. More poetically, a skeuomorph can offset the loss of physical reality when interacting with our digital devices. Skeumorph examples Skeuomorphs abound in the digital world: The save icon is a floppy disk from the 1980s and '90s Microphone and speaker icons The bin icon for deleting files The battery icon on your computer The envelope icon for email Gears for Settings Storing files in folders Books apps displayed with bookshelves The magnifying glass to zoom The camera icon as a physical SLR camera The shopping cart in an online shopping site The 'desktop' Sliders and knobs, or even connecting wires, are made to look like analogue mixing desks and gear in music software (music software is awash with skeuomorphs) A link icon represented by a link of a physical chain A clipboard for paste Dials and levers or a funnel representing filters Shadows under boxes on a webpage simulate light falling on a surface to show depth Grab bars are indications of friction points where you can change the order of a list The list goes on and on. I once read that when designing, if you can't think of an icon for your feature in about five seconds, you probably need to write the word, as not everyone will understand it. Not all digital icons are skeuomorphs: the printer as the print icon and the folded page for a page layout still map to their physical counterparts. Physical skeuomorph examples include: Electric candles. Slot machine levers that change the state of a circuit rather than spin any wheels. Fake wood grain is used on floors or interiors. Haptic feedback—a simulated click when pressing on a touchscreen. Speed camera signs in the UK use a stylised visual of a classic Kodak Brownie camera. Rivets on jeans are from when fixing denim together required more than just stitching. Electric cars sometimes include imitation air vents at the front that cool traditional combustion engines. Car hub caps with spoke designs from early wheels. Textured wallpaper, such as Anaglypta, echoes leather wall hangings with scored patterns. There's even a design for an early car with a fake horse head on the front—though the inventor designed it to avoid scaring other horses on the road. A smartwatch isn't just a watch; it's a computer you wear on your wrist. Skeuomorphs can borrow sound also: The imitation shutter sound of taking a photo on your phone Simulated engine noise on an electric car Skeumorphs in Software and User Interfaces Software and the digital domain are ripe places for spotting skeuomorphs, as they don't have physical characteristics—it's all 1s and 0s that we can't see or interact with. Apple's early iPhone interfaces were famous for skeuomorphic elements, such as a Contacts app that resembled a contacts book complete with tabs—tabs are also skeuomorphic— and fake leather or paper effects in note apps. Skeuomorphs, like metaphors in design, are helpful. In a magic box that can do anything—a mobile phone—a visual connection to a physical object with a defined purpose helps immediately tell you what something might be or do. As the digital world gradually becomes the first interaction for so many uses, skeuomorphs may become less common. But we'll see them around for decades yet. Early skeuomorphs Skeuomorph is not a recent term. It was coined by archaeologist Henry Colley March by combining the Greek skeuos (σκεῦος) for container or tool and morphe (μορφή) for shape. Skeuomorphs have been used in art and architecture since ancient times. For example, they are decorative features of stone buildings that mimic structural elements from older wooden ones, such as protruding rafters. Ancient pottery sometimes includes decorative rope patterns on the surface. More About Skeuomorphs The BBC has a lovely radio piece on Skeuomorphs, Design, and Modern Craft with novelist Will Self. The piece discusses their subtler side and some great examples, some of which I've included here. In the same episode, they also mention the zombie walk with faces lit by the glowing screen from a phone. Related Ideas to Skeuomorph Also see: Affordance Common button states Dark patterns Desire path Fitts Law "The content is the interface"—Sam Moreau…Why is the save icon in your software a floppy disk that no one has used for over 20 years? And that phone icon looks nothing like your mobile phone when making a call. These are both skeuomorphs. What is a skeuomorph? A skeuomorph is when a new design borrows practical elements from a former design and repurposes them in a functional or ornamental way. Skeuomorphs are practical because they make new systems more intuitive. Their comfort and familiarity can help bridge old and new ways. For example, some electric cars are designed to look like they have air intake vents like traditional combustion cars. More poetically, a skeuomorph can offset the loss of physical reality when interacting with our digital devices. Skeumorph examples Skeuomorphs abound in the digital world: The save icon is a floppy disk from the 1980s and '90s Microphone and speaker icons The bin icon for deleting files The battery icon on your computer The envelope icon for email Gears for Settings Storing files in folders Books apps displayed with bookshelves The magnifying glass to zoom The camera icon as a physical SLR camera The shopping cart in an online shopping site The 'desktop' Sliders and knobs, or even connecting wires, are made to look like analogue mixing desks and gear in music software (music software is awash with skeuomorphs) A link icon represented by a link of a physical chain A clipboard for paste Dials and levers or a funnel representing filters Shadows under boxes on a webpage simulate light falling on a surface to show depth Grab bars are indications of friction points where you can change the order of a list The list goes on and on. I once read that when designing, if you can't think of an icon for your feature in about five seconds, you probably need to write the word, as not everyone will understand it. Not all digital icons are skeuomorphs: the printer as the print icon and the folded page for a page layout still map to their physical counterparts. Physical skeuomorph examples include: Electric candles. Slot machine levers that change the state of a circuit rather than spin any wheels. Fake wood grain is used on floors or interiors. Haptic feedback—a simulated click when pressing on a touchscreen. Speed camera signs in the UK use a stylised visual of a classic Kodak Brownie camera. Rivets on jeans are from when fixing denim together required more than just stitching. Electric cars sometimes include imitation air vents at the front that cool traditional combustion engines. Car hub caps with spoke designs from early wheels. Textured wallpaper, such as Anaglypta, echoes leather wall hangings with scored patterns. There's even a design for an early car with a fake horse head on the front—though the inventor designed it to avoid scaring other horses on the road. A smartwatch isn't just a watch; it's a computer you wear on your wrist. Skeuomorphs can borrow sound also: The imitation shutter sound of taking a photo on your phone Simulated engine noise on an electric car Skeumorphs in Software and User Interfaces Software and the digital domain are ripe places for spotting skeuomorphs, as they don't have physical characteristics—it's all 1s and 0s that we can't see or interact with. Apple's early iPhone interfaces were famous for skeuomorphic elements, such as a Contacts app that resembled a contacts book complete with tabs—tabs are also skeuomorphic— and fake leather or paper effects in note apps. Skeuomorphs, like metaphors in design, are helpful. In a magic box that can do anything—a mobile phone—a visual connection to a physical object with a defined purpose helps immediately tell you what something might be or do. As the digital world gradually becomes the first interaction for so many uses, skeuomorphs may become less common. But we'll see them around for decades yet. Early skeuomorphs Skeuomorph is not a recent term. It was coined by archaeologist Henry Colley March by combining the Greek skeuos (σκεῦος) for container or tool and morphe (μορφή) for shape. Skeuomorphs have been used in art and architecture since ancient times. For example, they are decorative features of stone buildings that mimic structural elements from older wooden ones, such as protruding rafters. Ancient pottery sometimes includes decorative rope patterns on the surface. More About Skeuomorphs The BBC has a lovely radio piece on Skeuomorphs, Design, and Modern Craft with novelist Will Self. The piece discusses their subtler side and some great examples, some of which I've included here. In the same episode, they also mention the zombie walk with faces lit by the glowing screen from a phone. Related Ideas to Skeuomorph Also see: Affordance Common button states Dark patterns Desire path Fitts Law "The content is the interface"—Sam Moreau

Newer

RRandom

Older