Date posted

23 Feb 2022

Read Time

Related Articles


Design systems explained: Streamlined collaboration and better products


Are you reducing the impact negative bias has on your website performance?


Is your website disorientating your users?

What is it?

The term skeuomorphism is used to describe mimicking the real-world. In particular, how things appear and how users can interact with them.

Examples include:

    • Having “Next” buttons on the right, and “Previous” on the left. This replicates left-to-right reading patterns and page turning.
    • “Buttons” in itself refers to a physical object in the real world. They immediately imply interaction as well as cause and effect.
    • Shadows on panels. These create layers in a design, simulating content being brought forward and made more important.

Taken further, skeuomorphism involves content and how users are guided through it.

For example:

    • An image gallery or carousel, where users navigate through left to right.
    • Opening and closing an accordion.
    • Sidebar panels sliding in from the side of the screen to provide extra information, such as a checkout basket.

These systems work effectively when controlled by the user. However if pop-ups appear or accordions change state unexpectedly, that can be very disorientating for users.

Why is it important?

The physical world is consistent to most of us. Having it replicated digitally creates familiarity and predictability for users.

Making sure users know where they are on your website as well as where content is or where to find it, is essential to engagement.

By using design patterns which are abstract or unfamiliar, users will take longer to learn how your website works.  If they are confused, they are more likely to give up and leave.

What to do next?

  • Conduct a UX audit to identify areas of interaction users may be struggling with.
  • For areas that need further investigation, run some user tests to get real world answers.
  • Work with designers to create a stable outcome to find a solution.
  • Speak to us if you need assistance.