BCmoney MobileTV

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):

• Calendars
• E-Reader Bookshelf
• Icons
• Text Editors
• Media Players
• Buttons
• Text fields
• Edit-in-place Text
• Tabs (as markers in a book, folder or binder)
• Pages and paging (flipping through pages)
• Voice controls
• Toggle Buttons
• Fullscreen applications
• 3D Models
• CAD (engineering design)

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

• Lists
• Search Results
• Scrolling
• Infinite Scrolling
• Flexible Grid
• Hyperlinks
• 3D navigation components (i.e. Spherical/Cubic)
• Carousels/Sliders
• Accordion
• Dashboards
• File Uploads
• Progress Bars
• Most Animations
• Dropdowns
• Multi-selects
• Tiles (i.e. Windows 8 Metro app tiles, Google iCalendar, widgets, etc)
• Word Clouds
• Zoom in/out
• Virtual Tours
• Drawing (graphic design)

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:

Conclusion

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.

Related Articles

• Design Fads vs. Design Trends
• Skeumorphic versus flat design
• A Eulogy for Skeuomorphism
• Seth’s Blog: Skeumorphs = failure
• Skeumorphic vs. Flat is beating the wrong dead horse