3 Tips For Skeuomorphic Design
Getting real with interfaces
Skeuo-what?
You might not have heard the term before, but skeuomorphism is something you likely interact with daily. Whether using the calculator app on your phone, or dragging an unwanted file into the bin icon, you are utilising a user interface design concept known as skeuomorphism. Essentially, skeuomorphism describes user interface objects that mimic their real-world counterparts in how they appear or how the user can interact with them.
I’m a UX designer within Certsy, SEEK’s very own credential verification platform. I recognised early on that a lot of the metaphors we were using consistently to describe the Certsy product and purpose lent themselves extremely well to skeuomorphic design.
In this article I’ll share my top 3 tips on using skeuomorphic design, and illustrate them with examples of how we’re applying it at Certsy.
Tip #1: Choose a meaningful metaphor
Not all skeuomorphic design metaphors are equal. So make sure you choose one that people readily understand, has strong positive associations, and ideally that you can own… or at least bring a unique twist to. It’s worth playing with multiple options so you can compare and contrast them, and involving your wider team to review in order to get different perspectives.
For example, Certsy was often described in internal discussions as either a “digital wallet” or “passport” that organised a user’s verified credentials, whilst also acting as a “document vault” that housed their licences and other sensitive documents securely.
Knowing I wanted to utilise some of these real-world objects as design inspiration, I brought this perspective into team discussions about which analogy — wallet or a passport? — was best to use when describing Certsy.
As we unpacked the options, it became apparent the term “digital wallet” was already strongly associated with payment-related products and apps; something outside of Certsy’s market. Using this terminology held the risk of people potentially misunderstanding what we do, plus it’s a concept that we’d never be likely to “own” given that much larger organisations like Google and Apple have their own versions.
However, the passport analogy seemed to have legs. A real-world travel passport acts as your key to world travel, and as a career passport we would be your key to the world of work. I saw great potential to translate some of a traditional passport’s features into recognisable elements that fit the Certsy version of a career passport.
For example, a traditional passport contains passport stamps, representing either permission to enter a country or a record of when you entered or left that place. The Certsy equivalent of a new passport stamp would be a new licence, registration, or skill, etc — all variations on the idea of permission to do something or a record of your achievements.
And what better digital reward for an achievement than a badge? Plus, the thing about badges is — much like travel destinations — you’re rarely content with just the one. Over time, you’d want to collect more, gradually building your passport into a comprehensive representation of an exceptional (career) journey.
Tip #2: Only use it when it makes sense
Striking the right balance with skeuomorphic design is important so that you don’t make the UI appear too cluttered or old-fashioned. You shouldn’t be using skeuomorphism for its own sake, but instead to help users quickly understand your product and interface. So be thoughtful and judicious in when you choose to use it — don’t feel like you have to use it everywhere!
Passport. With the above in mind, I wasn’t about to design the Certsy interface to resemble a 5-by-4-inch digital leaflet. Instead, I took inspiration from the concept of a passport when setting the overall information architecture and feel for the product. It should feel like it’s your career passport, so I decided to help personalise the navigation with your photo. We also added clear sections to make more visible the sorts of things that are included in your career passport.
Cards. Once the overall passport metaphor was established, I took a little inspiration from the wallet analogy for the licences section. No harm in mixing and matching — as long as it’s relatable and useful for the user, and doesn’t break or clash with your overall positioning. In this case, people are used to having cards for their licences and registrations so that was the natural choice for this section.
Certificates. Similarly, for the skills section of the passport, I thought about which metaphors were best. The nice thing about sections is they give us freedom to do things a little differently in each area. So for our upcoming skill assessments, I opted for a certificate metaphor.
Tip #3: Strike the right balance
Utilising the skeuomorphic approach to UX design is more of an art than a science.
In an age of pared-back minimalist interfaces, the key to good skeuomorphic design is to not get too hung up on the literal but instead capture just enough of the object’s essence without sacrificing user recognition.
Common mistakes with skeuomorphic design include:
- Harming usability by being too purist or literal in sticking to a metaphor
- Not considering the negative connotations of a real-world concept
- Adding excessive complexity or workload for your front-end developers. For example, one thing I consider is how many different components our front end developers will have to build. When to re-use existing components vs when is it important enough to represent a concept with its own metaphor or different treatment? As an example, we use the same card components across the Licences & Registrations aa well as Work Rights sections.
I hope this article has inspired you to consider skeuomorphic design as a powerful and relevant tool in your UX repertoire.
Done well, skeuomorphic design can help differentiate your product from the sea of sameness out there, making your product and brand more memorable and interesting.
