Introduction
Graphic user interfaces have been around since the 1980s, and they have come a long way in terms of their applications, aesthetics, and served purposes.
In order to truly grasp the importance and relevance of certain design trends, I believe it is important to take a high-level glimpse into how human cognition operates.
About the human cognitive process and design
In Don Norman’s book, titled “The Design of Everyday Things,” he describes how the cognitive process can be split up into three levels and how these very distinct mechanisms operate when interacting with a design. These are the visceral, behavioral, and reflective levels, respectively. In my view, when it comes to designing user interfaces and products at large, understanding them is paramount to being able to create intuitive experiences.
The visceral level, which is the most basic one, primarily consists of the basic protective mechanisms. As for designers, this level is about immediate perception, aesthetics, and the pleasing visuals of a design. Here, only appearances matter, meaning that the usability of a certain product does not carry any significance for the receiver. However, as the Aesthetic-Usability Effect implies, “users often perceive aesthetically pleasing design as design that’s more usable.”
On the behavioral level, things are a bit different. At this stage of cognition, the subconscious still does the majority of the operations. This is where all of our learned skills and our ability to recognize patterns ‘live’. The most critical aspect of this for designers to remember can be summarized by Jakob’s Law. This law states that “Users will transfer expectations they have built around one familiar product to another that appears similar.” and “By leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models.”
The reflective level of human cognition is probably the most important one when designing a new product. This is the conscious decision-making part of our brain, which enables us to develop a deep understanding of complex mental models and reflect on them (hence the name). However, it is a slow process compared to the behavioral level. If a design is not intuitive, then frustration might emerge trying to consciously figure out how a certain product works and operates.
All three levels work in conjunction when interacting with a product, be it digital or physical. One bad experience at any stage of the cognition process can spoil one’s perception of a design.
Making users feel at ‘home’
So, how does all of this translate to UI design? Let’s take a look at why skeuomorphism was such an important step.
Before we dive deep, a quick recap on what skeuomorphism is.
“Skeuomorphism — or a skeuomorph is an object that mimics the design or feel of its real-world counterpart.”
In the early days of the iPhone, Apple pioneered skeuomorphism, so to speak. Operating the phone by touching glass was a novelty at the time. However, it lacked the tactile feedback that many users were used to, coming from traditional mobile devices. Skeumorphism’s main objective was to make new users feel a sense of similarity. This meant an intuitive solution to this problem because mimicking real-world objects in the UI created an experience in which users could feel at home.
Consequently, their behavioral patterns would be activated — which as described
above — are derived from past experiences of using everyday objects that people understood. For example, the notes app in the first versions of iOS resembled a real notepad with its faux paper texture and matching cursive font. This helped the user to visually connect a certain app with its intended objective without the need to learn a new set of patterns or to use the reflective level of cognition.
This visual metaphor helped Apple to popularize the iPhone among people who might have been reluctant to make the switch from other devices. This way of designing the UI sold the idea that a phone or a tablet could replace your calendar, your notepad, your contacts book, and many more things because all of them resembled the physical counterpart of these objects.
The limitations of Skeuomorphism
However, skeuomorphism had its limitations. At times, Apple itself used it very poorly, finding loose connections with real objects to imitate. For instance, let’s take a look at the Game Center app in iOS 6. Despite it perfectly resembling a card game-playing table with its wood ornamentation, you cannot play any card games here. This app’s sole purpose is to keep up with your friends. Consequently, the design not only fails to communicate the function but also generates frustration in the user.
Furthermore, using skeuomorphism limits the designer’s ability to solve certain problems. At some implications, trying to use real-world metaphors became counterproductive, where form did not necessarily dictate function.
For example, a sign-up page does not exist in the real world, so designing it using skeuomorphism could mean a bit of a challenge. What design element do you need to use to make it feel aligned with the rest of the aesthetic and make it feel intuitive?
Shift into flat design
Apple also felt this baggage, and in 2013 with iOS 7, skeuomorphism was dead. Jony Ive, who took software design in the same year, explained the update.
“We understood that people had already become comfortable with touching the glass, they didn’t need physical buttons, they understood the benefits. So there was an incredible liberty in not having to reference the physical world so literally.”
The flat design meant a paradigm shift in UI design since the interfaces were no longer bound to the real world. Shiny 3D elements are gone and were replaced by 2D components, bold and readable typography, and drop shadows to represent the hierarchy.
This change has brought about new ways of approaching problems. Now, designers can freely create incredibly functional products because the focus is on cleanliness and order. The user journey is clearly planned out, and the interface provides little to no distractions or friction.
As for the cognitive process, the flat design still heavily relies on the behavior level, meaning that the majority of functions and action patterns stay similar to skeuomorphic interfaces. Generally speaking, this way, users don’t feel lost in this different environment. However, it wasn’t perfect from the beginning.
Usability problems with flat design
On the flip side, there have been a few usability problems with ‘flatness’, especially in its early days in 2013–15. For example, in iOS 7, there was an excessive urge to reach absolute minimalism, which at times generated confusing moments.
Furthermore, the flat design had to use more abstract metaphors to convey information, which meant that some users had to utilize their reflective level of cognition. This implies that a user might need a relatively long period of time to consciously comprehend what the given interface wants them to do. If a user finds this process difficult, frustration and a sense of dissatisfaction might arise.
UI design today
UI design and flat design have reached a mature level today. It has evolved and morphed over the years into a universal design language that is very capable and intuitive. Users have learned abstract patterns and have become familiar with the devices they use.
Summary
The relationship between human cognition and interface design is deeply linked and has come a long way over the years. From Skeuomorphism, which set out to offer comfort for users in a novel digital environment to Flat design, which’s the main objective is to create a very functional and clean experience.
A very exciting time lies ahead of us with a new era of product design on the horizon. AR, VR, and Web 3.0 will undoubtedly revolutionize the way we interact with computers and how UI design will respond to this shift.
Sources
The Design of Everyday Objects by Don Norman
https://lawsofux.com/aesthetic-usability-effect/
https://lawsofux.com/jakobs-law/
Written by Ákos Lévárt
