The Tangible Influence of the Physical World on Digital Design
By Dylan Flowers, Senior Product Designer, Devbridge
Back in 1990 when computers were still getting used to graphical user interfaces and the ‘world wide web’ was considered a cool but passing fad, one of the godfathers of UX design, Jacob Neilson, published an article called “Improving Human computer dialogue.” This article presented an analytical perspective on how we should design interfaces in order to make them a human experience.
A big focus for the article was the introduction of a series of criteria that could be used to assess a digital interface. These criteria were named “the 10 Usability Heuristics for User interface design.” They included a list of 10 categories that every good user interface should have:
- Visibility of system status
- Match between the system and the real world
- User control and freedom
- Consistency and standards
- Error prevention
- Recognition rather than recall
- Flexibility and efficiency of use
- Aesthetic and minimalist design
- Help users recognize, diagnose, and recover from errors
- Help and documentation
More than 30 years since the article was published, this continues to be the ‘go to’ list used by thousands of designers to analyze interfaces each day. While the list has been tweaked since it first appeared, its staying power and prevalence are a true testament to the genius of Jacob Neilson.
Although when recently revisiting the list, one thing stood out to me above the rest, and that’s point number two: ‘match between the system and the real world.’ On the website for the Neilson Norman group, they summarize the heuristic thusly:
“The system should speak the users’ language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.”
The reason it stood out is that I wondered whether this heuristic has stood the test of time like the rest of them. Back in the 90’s a plethora of practical interfaces would be interacted with on a daily basis. Boom boxes were a smorgasbord of nobs, buttons, switches and sliders. Phones were wired machines with chunky buttons; rotary phones weren’t uncommon either. Punch cards, Filofaxes, fax machines all analogue interfaces with very specific physical interactions and symbols that could be emulated once the move to digital began.
The first iteration of Photoshop took direct inspiration from the darkroom, introducing features and icons such as dodge and burn. The original iPod had a scroll wheel interface, emulating and reflecting the nobs we were used to on radios.
The Evolution of Physical to Digital
The issue lies with the digital and physical worlds changing at different rates. Most adults remember floppy disks… small, plastic and resembling coasters that helped us run a variety of early programs. And while most adults understand the meaning of the Microsoft Word SAVE icon, some don’t get the reference. By the time Gen Z began using computers, floppy disks were a thing of the past. Some may understand what the younger generation asks, “why is the SAVE icon a garage?”
You could suggest they just update it to something more relevant to today’s technology, like a solid-state drive. Apart from the obvious issue that an icon of an SSD would be a boring plain rectangle, there is another issue that’s a little harder to deal with. The floppy disk icon has ingrained itself into the subconscious of millions, even those that don’t know its origin know it as the SAVE icon.
The floppy disk example is one of the most well-known of a heuristic paradox. The icon no longer fulfils “#2 Match between system and real world” but if it were to be changed it would no longer fulfil “#3 Recognition rather than recall.”
In 2008, the original iPhone was launched. Even though touch screens had been around for quite some time, this was the birth of complex touch native interfaces. This was the button killer; no longer did we need to press the number keys on our flip phones 3 times to access a single letter. Buttons could be any shape or size, new interactions could be created (like swipe), and as a result the world was everyone’s oyster. But Apple was fully aware of how new and daunting this tech could be, so they utilized this heuristic with an order of magnitude.
Everything on the phone was designed to look and feel like real world objects. Icons were intricate 3D illustrations with complex shadows and muted colours. This style of design is called Skeuomorphism. The calculator app looked like an old Casio you would carry in your pencil case, the compass looked and worked like an old pirates’ compass. Apple was really trying to sell the idea that everything you used to carry in your briefcase now fits in your pocket.
Then came the iPad. Books were laid out in a digital bookcase where you could open up your favourite book or newspaper and swipe between newspaper articles the way you would turn pages in a real broadsheet.
But this approach to emulating the real world to the nth degree swung hard the other way in 2013 with the launch of IOS 7. No longer did app icons look like little 3D images. Shadows were replaced with gradients, muted real-world colours moved aside for bright hues that would never occur outside a digital screen. The entire big tech industry was adopting the hot new trend ‘flat design.’
It wasn’t like the heuristic was forgotten all together, but it seemed like it was agreed across the industry to shunt it to the bottom of the priority list. Since then UI design trends have slightly come the other way, Google’s material design reintroduced the use of shadows. This subtle transition meant the bright gradients of 2013 were toned down so that you wouldn’t mistake your phone’s home screen with a 90’s glow rave.
Digital Based on Digital
All of Gen Z and a good portion of Millennials are known as ‘digital natives.’ This was a term coined in 2001 by Marc Prensky, representing the idea that there is a group of people that have grown up with the internet and digital interfaces as something that was always there rather than their predecessors (digital immigrants) who had to learn to adopt the new digital tools.
The article argues that teachers are having trouble teaching students, specifically pointing out that today’s students speak a digital language, while their teachers speak a pre-digital language, causing a communication gap.
We’ve seen instances where digital experiences have originally emulated real world interactions, but then evolve based on collective digital patterns. E-commerce is a good example of this. When e-com sites were first designed, their information architecture mirrored that of a physical shop. Let’s take a clothing shop as an example. You enter and the floors are separated by gender, you then have general areas by clothing type with complimentary products scattered amongst them. This layout is identical to a classic e-com journey of entering a gendered section of the site, navigating to an item area then seeing the related areas.
However, in recent years we have seen innovations in the e-com world based on our digital interactions. People spend a lot less time looking for fashion inspiration whilst window shopping or flipping through magazines. Instead, Instagram is the number one source of what’s hot and what’s not.
Because of this, Instagram has made the e-com process even easier, enabling users to buy clothing simply by tapping on the image. Just tap a shirt in a picture and voila, you can now enter your card details to buy it. Very often your sale will be redirected via a chatbot on Facebook messenger.
All of these interactions make a lot of sense, and to a lot of people feel familiar because we have lived with digital interfaces long enough to create new experiential associations.
So, as the world gets filled with more and more digital natives, will our digital experiences no longer take inspiration from the physical world? Will we see Jacob Nielsen’s second heuristic fade away? Probably not.
While we get more digitally inclined, we can’t pretend we live in a VR metaverse (at least for now), where the physical no longer drives our familiarities. We may see this heuristic used more subtly and see more digital interactions inspired by other digital interactions. But until we are a series of heads in jars communicating solely via Neuralink, I’m confident we’ll forever take our cues and our inspiration in the digital world from what we see and experience in the physical.
Get more insights from our engineering and design experts on our website!