Designing with Physicality

Interface Metaphors

Published in

Thinking Design

5 min readAug 28, 2017

Metaphors proliferate digital to the point where almost everything in digital is a metaphor of some sort. After some research and interest around metaphors in the digital space, key points came to the surface that I found to be really intriguing and worth further exploration. In this post, I sum up some of my findings.

Skeuomorphism vs. Flat Design

There’s an ongoing debate regarding skeuomorphic and flat design as two competing ideas. One point of view states that considerations and limitations about the physical environment need not necessarily apply to the digital space. For example, let’s say we are designing a digital notebook. The way that we think about a notebook physically with ordered pages and sections may not be the most intuitive way to capture our thoughts and ideas. Since in the digital realm we are not bound by any physicality, we can then make a digital “notebook” in any way that we want, with no need to abide by the rules of physics.

To expand a little bit for anyone new to this topic:

Skeuomorphism: derivatives retain attributes from the original. There are a couple of different skeuomorphs that matter here: memetic skeuomorphs and virtual skeuomorphs. An example of a memetic skeuomorph is the swiping motion on a tablet when reading through “pages” of a book. An example of a virtual skeuomorph is the battery level icon on a device which represents a physical battery.
Flat design: is not the opposite of skeuomorphism, in fact flat design uses skeuomorphs just as much as realistic/rich design. Minimalist design elements are what really set flat design apart.

The old, realistic skeuomorphic safari icon and the new, skeuomorphic flat icon.

To be clear, there are many definitions of skeuomorphism. A couple of product designs Apple put out a couple years back helped shape some of these definitions. One article offers another take on skeuomorphism where the element looks exactly like its physical object counterpart (same material, texture, etc.).

Apple’s skeuomorphic “wooden bookshelf” design for iBooks

There’s not necessarily a clear winner between skeuomorphic and flat design applications, but it’s interesting to think about how digital design mimics what we know best. The trash can icon, the clock icon, the calendar icon, the magnifying glass search icon, and so on, all originated from their physical forms. Funny enough, some do not even really exist in their physical form anymore. For example, the save icon of the floppy disk still pervades interfaces, but many younger users have never even seen a floppy disk and might not know what a floppy disk is/was.

What initially was an icon with a physical resemblance to something, has now turned into something with no known resemblance between the signifier and the signified.

The path to where we are now with our visual language in the digital space is a winding one, with a need to reevaluate “good design decisions” regularly, to consider what they mean today.

Lost in Translation

One interesting symbol that is present on just about all pieces of hardware is the combined on/off button. This one is a little tangential because it’s not inspired by a physical object, but it is relatable especially for those who aren’t in tech. This symbol was inspired by binary, with the zero being the circle and the slash through it representing the number one. You can look at this symbol and know what its function is without knowing its background or what it is depicting. Although zero means off and one means on, the combination of these two into one symbol means that the user does not have to know which is which, or that the symbol originates from binary.

A good designer is always looking at the wants and needs of the user to make design decisions that align with their mental models to avoid points of friction. It makes sense that someone trying to represent time on a digital device for the first time would illustrate a clock with a round face and two ticking hands, because that is what users are most likely familiar with. However, now that our physical objects are changing, and because digital is proliferating human culture, our digital lexicon needs to change.

Other Metaphors

There are many physical metaphors, that aren’t necessarily visual, that get pulled over to digital spaces as well. The idea of windows as planes of viewing is a standard way of presenting information via screens. The idea of menus as a high-level organization of options is a concept used in website architecture. As we continue to use mobile devices as our primary devices, menus prove to be an interesting metaphor example. The hamburger menu symbol is predominantly used as a full menu in mobile designs, and is an index of a physical hamburger with all its layers.

We are taking a lot of our mental models of the physical world and bringing them into the digital landscape.

New terms like “hamburger menu” have become part of digital culture in the same way that new words work their way into languages. All it takes is one person to introduce something to our social consciousness and slowly new ways of thinking trickle into our vocabulary.

Researching interface metaphors is kind of like researching the entire history of digital interfaces and is vast and expansive, but the more we learn about our mental models, the better we can understand ourselves and course-correct.

Additional Thoughts

Some other cool icon/index/symbol histories to think about (some are rooted in physicality, some are not):

Check out a great write-up on “x” meaning closing out
Uncover the accidental history of the @ symbol
More about origins of common UI Symbols like play, command, and Bluetooth here

It’s amazing that people know and understand hundreds of digital metaphors, symbols, icons, and indexes after a matter of 30–40 years. Digital is a language itself, and we have a lot of power as designers in shaping the future of the language and in shaping social consciousness.

We need to keep considering people, both as users today and in the future, and the way that we are connecting humankind.