As babies, we explore our surroundings, understanding how the world works. We discover the meanings of various signs and symbols and learn how to use certain objects. Eventually, connecting an object’s appearance with what it actually does (its function) becomes second nature. Pushing a button will lead to a reaction; a handle on a drawer is there to be pulled; red means stop. And then you get to the more complex things – how do we learn how to use taps when some of them are automatic, while others require twisting, pulling, pushing, or even tapping (yes, those exist and they mess with your minds!)? And even more mind-boggling, how are we supposed to instinctively know what to do with those small, flat, rectangular objects they call smartphones?
The importance of understandability
The more romantically-minded people among us might like the sound of exploring an object, slowly discovering what can be done with it and what its boundaries are. But most of the time, if we don’t immediately understand how to use a certain product (whether it be an object, app, or website), it’s just frustrating – especially as we seem to have such little spare time these days and our attention spans are getting shorter. That’s exactly why Dieter Rams’ fourth principle for good design, which stresses the importance of understandability, is still so relevant in this day and age, across all design disciplines.
The fine line between innovation and understandability
As technology evolves and enables many new possibilities, designers are faced with the challenge of creating websites, apps and other products that are innovative, while still being understandable. As a response, designers often reference the old product in the new design, or design according to other preconceived ideas we have of how something works (in other words, “mental models”). Referring to older, more familiar versions of a product will help us understand the new one. For example, we’re all (hopefully) accustomed to flipping the pages of a book, which is why, when the Kindle was introduced, swiping the screen from right to left to get to the next page seemed pretty natural. The familiar, intuitive UI pattern of the physical world is often repeated in digital products, as designers and developers gradually understand how we can make the best use of these mobile devices. But sometimes, that doesn’t quite work and we end up not understanding how to use a certain product.
Fourth commandment: “Good design makes a product understandable”
On understandability, Dieter Rams wrote: “It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.”
People struggle with things they don’t understand
Our wise friend, Dieter, is certainly not alone in these thoughts. Before we delve into how well-executed web design can make a product understandable, let’s explore this subject in relation to tangible objects.
Tinker Hatfield, the renowned designer behind many of Nike’s most popular shoes, has always been far ahead of his time, but has never let that innovation get in the way of ensuring his audience still fully “get” the shoes he designs. Speaking of the design process behind the acclaimed and timeless Air Max 1 model, he tells GQ that he knew he was pushing boundaries by keeping the cushioning exposed. However, he made sure to leave some of the classic marks that Nike’s audience know and love. “I felt like if the whole shoe was too advanced, it would just maybe kind of fly over the radar or under the radar and never really get quite accepted,” he shares with GQ. “That’s an important aspect of design that we look at on a regular basis. How far do you take anything before people no longer understand it? And if they don’t understand it, they might not like it.”
With shoes, this “understanding” is more about familiarity, rather than actually understanding how to use the product (I assume that even back in the ‘80s when the Air Max 1 was released, people understood that it was to be placed on the foot). When it comes to a radio, for example, labelled buttons are useful and nothing is clearer than a short piece of text saying “increase volume”, or a small icon of a loudspeaker. However, is there a way of designing this button that exudes “increase volume”, without actually clearly stating it, making it therefore self-explanatory? Perhaps this button could be a sliding button, in which the user physically slides it up to increase the volume. Or it could be a knob that you turn – another familiar interface that indicates a gradual change.
Good UX makes a website understandable
If wonderful buttons and a sense of familiarity make a product understandable in the tangible world, how does this translate to web design? In the online realm, it’s good UX design that plays a huge role in making a website clear and understandable. Websites that are understandable will convey an accurate atmosphere right from the get-go so that you get an immediate feel for the site’s purpose and the brand’s general tone. In addition, to make navigation clear and fluid, everything will be placed where you expect it to be, along with well-designed buttons that feel intuitive. Animation and illustration are useful tools in web design, as they can depict ideas visually while reflecting the brand’s vibe and adding to the overall user experience.
We often try to tackle problems with overly complex solutions. But a simple and effective way of making our websites understandable – that also happens to be a web design trend – is writing a big bold message on the top fold of our homepage. Designer and artist Ellen Rose has done just that on her portfolio, with a no-nonsense, unpretentious statement that lets us know exactly what we’re in for. The good UX continues as you scroll down. Her professional projects and passion projects are clearly separated, using inverted colors and a neat division of the screen. This is also a nice way of showing her personality and design expertise side-by-side.
Ellen Rose‘s online design portfolio, created with Wix.
The same goes for the Educational Video Center’s website. Not only does their name give an immediate clue as to who they are and what they do, they’ve also added a large video with a halftone filter on the top fold, further emphasizing their brand’s personality. It seems as though each element of their website is placed exactly where it should be, making for a clear, understandable user experience: the accurately labelled menu stays fixed as you scroll for your convenience, the ‘Donate’ button stands out subtly and the ‘Events’ section is also emphasized, thanks to a minimalistic design and making use of white space.
Educational Video Center‘s website.
When executed well, even the most complex products and ideas can be made understandable – something we can learn from the field of data visualization, in which stats are made much more approachable thanks to visual tools. As we can see, there are some parallels when it comes to understandability in the design of objects and the design of websites. Ultimately, to “make the product talk”, as Dieter Rams puts it, you should focus on a clear, intuitive interface that will convey the brand’s look & feel at first glance.
Want to delve further into the world of Dieter Rams? Check out this series’ first article on innovative web design.
