April 18, 2011

Digital Derivative: A Glance at Skeuomorphism in Web and App Design

Skeuomorphic. The state of derivatively retaining design elements from an original source. Adding things simply because they were there in the first version. We see it every day: spokes in hubcaps, rivets in jeans, wooden texturing in laminate flooring.

In digital design however, skeuomorphism can take on a dark guise, forming artifacts such as the new iCal for Mac OS X 10.7.

Thoroughly overwrought and fragrantly anti-digital; companies like Apple are taking digital design and flooding it with an abundance of real-world analogues and metaphors, often to a disadvantage.

It runs rampant on the iPad, bringing page turning and the appearance of a book to iBooks, the look of a leather notepad to Notes, and the truly awful word-a-day calendar tearaway look to Calendar.

It's no secret that people can enjoy skeuomorphic design. In measured, subtle doses, it can bring life and emotion to the user experience by connecting digital conventions with the familiar. It is when this is done for its own sake where the problems begin to appear.

Digital design should be all about an efficient and rapid flow of information, allowing users to get to what they need. It should be clean, simple and effective, while maintaining a tidy level of visual splendour. The best example of this approach recently is the simple, type-focused interface belonging to Windows Phone 7.

Metro UI is a stark digital interface that doesn'€™t apologize for refusing to cling to realistic metaphors. It represents a system entirely free of skeuomorphism where the content is the interface. It sheds any notion of realism or depth and replaces it with pure, smooth text and solid colour tiles that bring a focus to the task at hand in a uniquely pristine manner. As a result, it's no surprise that the upcoming Windows 8 is taking a great deal of inspiration from Metro UI.

On the other hand, a pristine digital approach can backfire, robbing an interface of all emotion. A careful balance is usually required to keep things human. In Microsoft's case, the use of meaningful and contextually relevant images and panoramas helps hold this emotional tether.

Mac and iOS are at the opposite end of this spectrum, dipping too far into skeuomorphism but keeping just away from the edge by having highly digital core-level interactions such as menu navigation, push notifications and multitouch gestures. If system preferences required the turning of virtual knobs and dials, I’d be more concerned.

There'€™s no need to get rid of skeuomorphism entirely. It helps maintain a connection between our beloved physical gadgets and the faceless glass and steel devices that have replaced them.

Where I draw the line is when content and interaction efficiency take a backseat to nostalgic metaphor. Too often, app and web designers feel like they have to overcompensate for the uniformity of modern device hardware design by overloading their interfaces and layouts with meaningless metaphors. This is the wrong approach to take, and it leaves the device feeling awkward and slightly out of touch with its own time. A reverse anachronism, if you will.

If we stay subtle and find a balance between the clinical and the nostalgic, our devices can get ever more impersonal but still be as personal as ever.