Skeuomorph-a-what?

There has been an onslaught of smart devices released over the past year. All of these devices gain value from their applications. Who only makes calls on their phone anymore? For the digitally inclined, apps are welcomed and easily understood, but for the average to below average user there is a loss of familiarity between life experiences and their experience on these new smart device.

The hurdle: how do we digitize the real life actions into app form?

Suspected answer: Skeuomorphic Design

Skeuomorphic design is emulating objects in the physical world for use in the digital realm. A great example of skeuomorphic design would be the Contacts application on Apple products (desktop and iPads specific). Even though this is a digital application, it’s design mimics a real life address book. Notice the pages, binding, and cover which give the feel of a physical address book.

Apple Contacts App

Great, this seems to be a perfect solution for digitizing real life actions into app form… hold your sketch pads. Let’s talk pros and cons of this magical design style.

PROS:

  • Lowered cognitive load*
  • Assists in user comprehension
  • Engaging interfaces
  • Allows designers to flex their muscles

CONS:

  • Added visual load*
  • Geared towards non-tech users (people who have actually used the object in the past)
  • Can appear dated
  • Unadaptive

*Cognitive/Visual loads are types of mental processing users employ to understand the information in front of them. It is explained beautifully in “100 Things Every Presenter Needs to Know about People” by Susan Weinschenk

As you can see the benefits of skeuomorphic design lean heavily towards the average, or below-average user. Meaning this can’t be the best solution to digitizing real life actions.

The BETTER solution to the problem is: Use a design style that best fits your user base
If your user base is going to be predominantly non-technical users, skeuomorphic design would be a viable solution. If your user base is tech savvy, then the antithesis of skeuomorphic design is a better solution (Authentically digital design, more on this in a later blog). But what about apps for both user types? Then a best practice would be to use subtle hints of skeuomorphic design to achieve an equally engaging, visually intriguing, modern UI, that is usable for all users.

Libra iPhone App by delmonto

Libra example

This design uses a subtle hint of skeuomorphic design. Instead of having the books live on a bookshelf or adding a physical library to the background, the designer uses design cues that the app relates to books. The faux-binding in the header of the app, the use of the print glyph under the selected section, the textures used on the various “surfaces” of the app, and the way the books have pages and a cover. This design achieves the pros of skeuomorphic design without bringing on any of the cons.

Wine App iPhone UI by Mason Yarnell

Wine example

This wine app UI has an environment that creates a feel of the wine community. The wood background, the cork effect on the selected section of the app, and the linen texture on the top header all come together to generate a subtle skeuomorphic design.

iPhone Walkie Talkie Concept by James Cipriano

walkie talkie example

This walkie talkie concept example is another example of using subtle skeuomorphic design in an application. People that have past experiences with walkie talkie will know they have to click a button to talk. Yet, people that aren’t familiar with walkie talkies would still understand that pressing the button with the icon would do something. The metal/hearty plastic texture also helps familiarize users with the real life version of a walkie talkie.

Creating a UI that digitizes real life actions into app form is a difficult task, but using skeuomorphic design subtly can make this task easier. Until next time keep on designing!

James

Written by James

1 Comment

  1. avatar
    Katie
    June 18, 2013

    Great article!

    Reply

Leave a Reply

*