Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

Skeumorphs – Good, Bad or Ugly?

Posted by bryan on May 31, 2013 in CSS, E-Learning, Flash, HTML with No Comments

No Gravatar
Nifty elevator interface. #skeumorph #nasig13

Nifty elevator interface. #skeumorph #nasig13 (Photo credit: BryanAlexander)

What are Skeumorphs?
In designing and developing new software systems and applications, a common strategy is to attempt to approximate device user interfaces to mimic or look like real-world physical objects. This is called a Skeumorph, or a skeumorphic design.

Some of the biggest problems with Skeumorphs are that they are time-sensitive and may not actually do a great job at approximating a particular item or interface from the real-world. For example, we still use the floppy disk to represent “Save” activities, when an entire generation of computer and internet users have grown up without the use of Floppy Disks.

This approach to implementing software solutions has been propagated by Apple in particular, as well as a number of other companies such as Adobe and Microsoft of late. On the other side of the fence is Google and Microsoft who have traditionally had very non-Skeumorphic designs that feel more like using a software interface than approximating any particular object in the real-world.


Where do Skeumorphs work?
Here are a few examples of types of interfaces for which I think Skeumorphs tend to work well (for the most part):


What are some non-Skeumorph design elements?
Some examples of non-Skeumorphic designs and Flat Design features would also be useful for comparison:


Side-by-Side Comparison

So let’s see some side-by-side examples of Skeumorphs .vs. Flat Designs that are each relevant in their own rights:

Skeumorph Flat
newsletter email client/word processor
billboard ads text ads (responsive)
e-reader (flippable magazine) news articles (responsive layout)
e-receipt shopping cart
e-prescriptions electronic health record
record player (spinning vynil pause/play) invisible/collapsible player
nutrition label interactive recipes
e-scoreboard fitness tracker
pinboard gallery
static embedded map (cartograph) LBS augmented reailty (camera hotspots)
calendar timeline
rolodex (contacts) social graph
thermometer long-range forecast (table)
1st-person Online Games 3rd-person Online Games



While I agree in principle that we should not constantly consider Skeumorphs as the best or only design approach, I would argue that they certainly have their time and place where they can be a viable if not superior alternative in terms of usability. In particular, it helps in the first generation of an application where an entire system is moving for the first time from physical modes of interaction such as paper and mechanical to electronic and digital ones such as HTML forms or touch interfaces. Making things look familiar gives useful cues to users trying to adjust to the new application for the first time, and can definitely ease the move from physical to digital. At the same time, we can sometimes accomplish more by going beyond the limitations of the physical world and stepping outside our comfort zones and ingrained processes.