What is Digital Skeuomorphism?
Skeuomorphism is the design concept which uses ornamental design elements to create three dimensional effects to make items resemble their real-world counter-parts. Digital skeuomorphism is frequently used to provide a visual cue in the design of user interfaces and web design. This can help improve your conversion rate because it makes a design more intuitive.
For example a call-to-action button may appear raised before it is clicked and lower after it has been clicked. Shadows and reflections are used extensively for UI buttons and elements to mimic real-life objects and instantly communicate how to interact with elements of a design. However, this has become less common with the popularity of flat design.
When did digital skeuomorphism first appear?
Digital skeuomorphism started in the 1980s when Apple created the concept of a ‘desktop’ and icons which look like folders and pieces of paper. Apple also employed skeuomorphism when it launched the original iPhone. It used leather, paper and metal textures to make on-screen objects appear like they do in the real-world. Skeuomorphic icons such as the telephone, clock, mail, calendar and notepad all mimicked their real-world counterparts.
There are also non-visual skeuomorphic design elements including the sound of a camera shutter when taking a digital picture and the page-turning movement when viewing an e-book.
Why should you use digital skeuomorphism?
Digital skeuomorphism can be used to assist conversion rate optimisation because it provides visual cues that instantly communicate how a user interface works. When Apple launched the iPhone in 2007 few people had used a smartphone even though IBM had launched one (called the Simon Personal Communicator) some fifteen years previously. Most phones did not have touch screens or have many additional applications other than email and SMS text.
However, Apple’s uses of skeuomorphism with icons made these new features instantly recognisable and appear simple to use. This may have helped persuade users to switch to the new electronic version because they looked just like the familiar paper calendars and notepads that they had grown up using.
Skeuomorphism leverages our preference for things that are familiar. It encourages interaction and speeds up adoption by making the UI look less intimidating and more appealing. Familiarity improves a user’s confidence which encourages visitors to explore the UI. Skeuomorphism also has the advantage that it provides a shared visual vocabulary between visitor and designer.
Skeuomorphism improves affordance by using design cues which indicate how a UI works. Website visitors automatically respond to visual cues as our brains can process images much faster than written instructions. Users are also lazy and impatient so they prefer intuitive designs that use visual cues to instantly communicate how to interact with an experience.
The button is probably the most effective form of skeuomorphism because they correspond so well to existing mental models for interacting with inanimate objects. If you have ever used a TV remote control, an electrical appliance or a lift you will instantly understand the function of a call-to-action button.
This is why digital skeuomorphism is a good idea when creating something new. There is no need for visitors to learn how to use a button and so this allows designers to build a framework for a new experience around it. However, affordance has nothing to do with minimalism or clutter. Skeuomorphism is a powerful technique because it improves user understanding of how to interact with a user interface and can work with any style of design.
Skeuomorphism is about making life easier for the user and no getting hung up about your preferred design style. Due to the popularity of flat-design skeuomorphism is not as common as it once was. This may be a problem for conversion rate optimisation because the design style should not come first. Indeed, Sitetuners point out that visual design style should come last when creating a new conversion-focused design.
Why do many designers hate skeuomorphism?
When Apple launched iOS7 with a revamped icon system without many of the skeuomorphic design elements of previous versions of iOS many designers let out an audible sigh of relief. This was the end of green felt in the Game Center and the pine bookshelf in iBooks.
Some designers have criticised skeuomorphic design because physical metaphors can create cognitive dissonance if the element doesn’t respond like the real-world counterpart. The use of skeuomorphism though may not be the problem, but rather how it has been implemented. Digital desk calendars, notepads and contacts don’t have to be designed to look exactly like their real-life counterparts because they behave differently. Desk calendars for example don’t have scrolling regions within a page or modes and so this could be confusing for users of the digital version.
Apple also used old-fashioned design styles to create their digital skeuomorphism. In addition, many younger users may have never seen or used the physical versions of the apps they use skeuomorphic design for such as desk calendars or address books. This means a skeuomorphic design won’t necessarily help such users as they don’t have any past experience of the real-world counterpart to learn from. Many designers argue that Apple went too far with their application of skeuomorphism and so made it more difficult to use the apps concerned.
Digital skeuomorphism remains an important technique for any tech start-up which plans to launch a new user interface to the mass market. Like any technique there are always going to be examples of bad implementation. However, this does not mean that the technique is somehow flawed. Skeuomorphism can improve affordance and help users understand how a new user interface works.
Good use of skeuomorphic design can help improve conversion rates by making the UI intuitive. This facilitates rapid and easy adoption of new designs and technology among all segments of users. By making the design appear familiar it increases confidence and so encourages users to explore the UI. For this reason it helps develop confidence among even less tech savvy users and so is valuable for mass market adoption of new technology.
For this reason we should always consider using digital skeuomorphism when appropriate. The lesson we should take from Apple’s use of skeuomorphism is to ensure we use a reasonably up-to-date real-world design to model the digital version on and not to force an app to necessarily behave like the real-world counterpart if it is not needed for user understanding.
- About the author: Neal (@northresearch) provides web analytics and digital marketing optimisation consultancy services and has worked for brands such as Deezer.com, Foxybingo.com, Very.co.uk, partypoker.com and Bgo.com. He uses a variety of techniques, including web analytics, personas, customer journey analysis and customer feedback to improve a website’s conversion rate.
- Neal has had articles published on website optimisation on CXL and Usabilla.com. As an ex-market research and insight manager he also had posts published on the GreenBook Blog research website. If you wish to contact us please send an email to email@example.com. You can follow us on Twitter @conversionupl, see Neal’s LinkedIn profile or connect on Facebook.