We stand with Ukraine and our team members from Ukraine.

A Community Of Over 740,000

Home ›› Design ›› Realism in UI Design

Realism in UI Design

by Lukas Mathis
4 min read
Share this post on


Why abstractedness is key to comprehension for icons and symbols used in UIs.

The history of the visual design of user interfaces can be described as a gradual change towards more realism. As computers have become faster, designers have added increasingly realistic details such as color, 3D effects, shadows, translucency, and even simple physics. Some of these changes have helped usability. Shadows behind windows help us see which window is active. The physicality of the iPhone’s user interface makes the device more natural to use.

In other areas, the improvements are questionable at best. Graphical user interfaces are typically full of symbols. Most graphical elements you see on your screen are meant to stand for ideas or concepts. The little house on your desktop isn’t a little house, it’s “home.” The eye isn’t an actual eye, it means “look at the selected element.” The cog isn’t a cog, it means “click me to see available commands.”

Details and realism can distract from these concepts. To explain this, I’ll take a page from Scott McCloud’s Understanding Comics, a book which should be required reading for all designers.

The image on the left is a face of a specific person. The image on the right is the concept “face;” it could be any person. When designing user interfaces, we rarely ever want to show a specific entity; typically, we want to convey an idea or a concept. Details can easily distract from that idea or concept.

Camera icon compairson

At the same time, it’s obvious that some details are required. Too few details, and the user won’t recognize the idea at all.

Face comparison 2

The circle on the left clearly shows a face. The circle on the right isn’t recognizable as a face anymore.

Let’s look at a symbol we actually see in user interfaces, the home button. Typically, this button uses a little house as its symbol.

Home image comparison

The thing on the left is a house. The thing on the right means “home.” Somewhere between the two, the meaning switches from “a specific house” to “home as a concept.” The more realistic something is, the harder it is to figure out the meaning. Again, if the image is simplified too much, it’s not clearly and immediately recognizable anymore.

home icon comparison

The thing on the left is a home button. The thing on the right might as well be an arrow pointing up; or perhaps it’s the ⇧ key.

Let me explain this concept using an entirely unscientific graph:

People are confused by symbols if they have too many or too few details. They will recognize UI elements which are somewhere in the middle.

The trick is to figure out which details help users identify the UI element, and which details distract from its intended meaning. Some details help users figure out what they’re looking at and how they can interact with it; other details distract from the idea you’re trying to convey. They turn your interface element from a concept into a specific thing. Thus, if an interface element is too distinct from its real-life counterpart, it becomes too hard to recognize. On the other hand, if it is too realistic, people are unable to figure out that you’re trying to communicate an idea, and what idea that might be.

button style comparison

The button on the left is too realistic. The button on the right does not have enough details to be immediately recognizable as a button.

toggle style comparison

The same applies to these toggles. Shadows and gradients help the user figure out what he’s looking at and how to interact with it. Adding too many details, however, ends up being confusing. The toggle switch is no longer just a toggle switch that is part of a user interface, it is clearly recognizable as a photograph of a specific toggle switch; it loses its meaning. It’s no longer a symbol, it has become a specific thing.

home buttons

An Exception

There is at least one specific area where more details are good: application icons. You want your icon to depict one specific idea: your application.

application icons

Coda’s leaf isn’t a representation of the idea of a leaf; it’s a very specific leaf, the Coda leaf. Acorn’s acorn isn’t just any acorn, it’s the Acorn. Adding details moves these images from a generic concept towards a specific entity, and in the case of an application icon, this is exactly what you want.


Graphical user interfaces are full of symbols. Symbols need to be reduced to their essence. This helps avoid cluttering the user interface with meaningless distractions, and makes it easier for people to “read” the symbol and figure out the meaning of an interface element. Realistic details can get in the way of what you’re trying to communicate to your users.

The goal is not to make your user interface as realistic as possible. The goal is to add those details which help users identify what an element is, and how to interact with it, and to add no more than those details. UI elements are abstractions which convey concepts and ideas; they should retain only those details that are relevant to their purpose. UI elements are almost never representations of real things. Adding too much realism can cause confusion.

Thanks to Max Steenbergen and Cameron Kenley Hunt for helping me form a coherent opinion on this topic. The second house icon is from Dellustrations’s icon set “Dellipack”.

This article was original posted on Lukas’ blog, Ignore the Code.

post authorLukas Mathis

Lukas Mathis, Lukas Mathis works as a software engineer and user interface designer for a Swiss software company creating workflow management software. He lives in a small village in a remote part of the Swiss Alps. Visit Lukas' website at https://.ignorethecode.net/ or follow him on Twitter @LKM.


Related Articles

Article by Jessica Sherratt
Understand And Define Users With The User Profile Model
  • The article covers the evolution of user research and the importance of effective personas, as it explores the user profile model and how it can help teams gain valuable insights to create customer-centric products and services.
Share:Understand And Define Users With The User Profile Model
11 min read
Article by Jim Ekanem
Why We Need 11 Usability Heuristics
  • The article critically examines the 10 Usability Heuristics by Jakob Nielsen, highlighting their limitations in addressing current technological advancements and societal contexts.
  • The author proposes an additional heuristic called “Accessibility and Inclusion” to bridge the gap and emphasize the need for designers to prioritize equal access and consider social identities and biases.
Share:Why We Need 11 Usability Heuristics
9 min read

Part of a series on prototyping with generative AI.

Article by Juliette Laroche
Designing Materials for Better Storytelling with Generative AI
  • This article discusses the role of materials in product design, the concept of designing new materials, and the use of digital tools and AI in material development.
  • The author highlights the impact of materials on product storytelling and encourages designers to consider materials in their design process, envisioning a desired world through material design.
Share:Designing Materials for Better Storytelling with Generative AI
4 min read

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and