Wow how flat – but I can’t use this
Flat design developed in user interface design as a counter force to skeuomorphism.
In skeuomorphism, the digital surface imitates real life: buttons are bevelled objects, so they have shadows. In the beginning, skeuomorphism was associated strongly to Apple’s user interfaces. More generally, you can call something skeuomorphic if it mimics the materials or elements of something that exists in the real world.
In flat design, there’s no drop shadow, no beveled edge, no gradients. Buttons are plain fields of color with sharp corners. Apple moved into flat design in its iOS7. As also Microsoft and Google strongly promote flat design, it has become the only acceptable style that a trendy designer dares to suggest.
Flat design is a trend. Increasingly, flat design is reported to produce bad usability. Where’s the problem? In misunderstandings – on several levels.
First let me explain my own starting point to the subject. Being a Finn, I grew up in the culture of Nordic functionalism. Form follows function. The beauty of being effective. Sans serif. Touchless water faucets. Yes, for me simple design feels natural and beautiful.
So, when flat design became a trend, I was among its first spokesmen. Now I feel sorry for what has happened. In an article published in March 2016, Kelsey Campbell-Dollaghan describes flat design’s problems. A quote crystallizes the all too frequent experience: “I don’t know what’s a link. I just start clicking and praying that it works.”
What went wrong?
Simplicity is not nothingness.
The old good wisdom “Design is perfect when there is nothing more to take away” may at first glance command you to move on as long as you find something to cut off. Hasty readers do not see the warning: “Do not proceed beyond the critical point, or you will regret.”
And when you do go beyond, the resulting user interfaces make no sense. Websites where everything looks the same whether they are read-only texts, links, or command buttons. Uniform and stylish. Cool and trendy. The users can just click everywhere and see if something happens. What a great experience.
In real world, we would not accept such bad usability that we see in contemporary digital design. Consider a public building where you could not make a difference between windows and doors. People would be just banging all around until they accidentally hit a door. Great architecture?
There is a physical equivalent to the experience of being lost in a overly minimalistic flat design website: the Escape rooms. Yes, you know there must be a way out of the room. Finding the hidden door may be a great experience. And yes, already the secod time you will complete the task much faster. But would we want all the shops and restaurants to be escape rooms? No.
What was forgotten in the design? The simple key rule of functionalism: Form follows function. In functionalism, you take off all the meaningless prettification – but not for the sake of minimalism. You do it to show the function more clearly.
Consistency is not monotony.
Good user interfaces are consistent. Consistency does not mean everything looks the same. Everything looking similar is monotony. Consistency is almost the opposite: In consistent design, elements with similar behavior look similar. Elements with different behavior look different. What you see tells what you get. Simple, fast, effective for human brains.
In good flat design, it is self-evident, what each visual element does – how they will behave if I touch them. And now we have just entered the theme of affordance.
Affordance
Designing user interfaces is about creating affordances.
Psychologist James J. Gibson introduced the term affordance in his 1977 article “The Theory of Affordances”. Gibson discussed affordances as “action possibilities” that an individual sees in the object.
Other researchers have continued to study and refine the idea of affordances. In “Relations“ (2004), Leo van Lier defined
“Affordance is a relationship
between an organism and the environment
that signals an opportunity for or inhibition of action.”
(e-Study Guide for: Handbook of Psychology, Volume 6: Developmental Psychology: Psychology, Human development. Springer. p. 4)
Don Norman defined rephrased the definition in “The Design of Everyday Things“ (2013) into
“An affordance is a relationship
between the properties of an object
and the capabilities of the agent
that determine just how the object
could possibly be used. ”
And this is my attempt to make it sound easy:
“An affordance of an object is
based on how potential users perceive it,
leading them to believe the thing can be used in some ways.”
Affordances are subjective. A small stone, seen by a small child, may have an affordance of “I can put it into mouth.” For a more experienced human being, its affordances may include “throw it into the nearest window” or “pick it up as a memory of this place.”
When you know what you can do with an object, you also know what you can not do. You can not push a rope – don’t even try. You can not walk through solid walls – don’t even try. A huge stone is too heavy to be lifted – don’t even try. As we grow up, we develop an ability to instantly model any object’s can-do and can-not-do aspects. This mental model enables us to make fast decisions and to avoid stupid impossible things.
When an adult sees a piece of paper, they don’t eat it. Children have a less restricted mind. They don’t understand the world, they learn life by making trials and errors. “I’ll try to eat that paper. Perhaps something good happens.” And this is precisely what happens with those overly minimalistic websites. An adult thinks: “There is nothing I can do here. I return back.” whereas a teenager mind may react differently: “With this website I feel just as lost as always. I’ll hover and click all around until something happens.”
Because adults have a long experience of different interactive user interfaces, they believe the minimalistic visual message: “There is nothing interactive on this website.”
The same applies to any object, not just websites. In my work I design and evaluate also physical interfaces that are parts of professional tools. I’ve witnessed many times an 8 year old child completing the test use cases effortlessly while adult test persons complain the product is too difficult to use. Both are right. Their brains are just in different development phases.
Art is about subjective opinions. Usability is about measurable facts.
People defending the minimalist monotonous UIs have one key argument: They look better.
Yes, a tidy room looks better than a messy one, to most of us. A door without a door handle may look better than a door with a handle. But as soon as a need arises to open the door, all of us start to value the handle. UI style decisions are too often made by just visual comparisons. They don’t reveal the essential: If you can not open a house door intuitively, you are facing bad design, no matter how good it looks.
A popular claim is that the younger generation gets adapted to the minimalist design. “The young ones learn to use the user interface intuitively even if the clear visual clues are missing.” No, they don’t. They just learn to overcome the difficulties. They don’t mind making repetitive errors. Click, click, click, click, click, and wow, I found the button.
Older generations are not as forgiving. They still remember the times when websites were easy to use. If there was a link, it looked like a link. Blue and underlined. If it was a visited link, it was purple. Later the design oriented people started to play with colors, but the distinction remained: Body text has style A, links had style B. Those days, all website design was flat. Flatter than any contemporary designer would dare to try.
And do you still remember why designers wanted to move from this flat design into skeuomorphic design. Yes – because it looked better.
The early web pages had a single colour background and texts of different kinds. The text could be body text or a link or a heading, in which case you would use some of the predefined heading styles. Super-usable. Which proves that flat design itself is not a usability problem. Forgetting the affordances is the problem that has driven the users crazy.
Good flat design: You identify right away the functions of each element. There are no distracting meaningless details.
Bad flat design: Everything looks similar. You don’t identify any functions because you have left off also meaningful details.
Time for bottomline. Flat design is alright as long as you don’t compromise affordances. Whether flat design is beautiful or not, that depends on the time when you ask it. Right now in 2016, it is very beautiful.