Can Design Be Explained With Art?
10 usability heuristics explained with art.
The link between Art and Design has always been a closely observed yet adamantly contested one. Designers tend to shun Art thinking it’s preposterous, putting the purpose of self-expression over the need of many. Artists won’t bat an eye at the term ‘Design’, believing that it limits their creativity.
Like many before me, I will try to once again bridge the gap between the two cousins, shed light on this love-hate relationship. After all, to be good designers, we should understand human psychology, which is shaped by our environment, with Art included.
“The purpose of art is to inform and delight.” Milton Glaser, a great designer.
And what better embodies Design than Jakob Nielsen’s 10 Usability Heuristics, a set of principles that evolves around the users? With that being said, here’s how Usability Heuristics explained with Art.
I. Visibility of System Status
In User Experience Design, the first Usability Heuristic states that systems are to:
- Inform users of what’s going on within a reasonable time and,
- To provide them with information to take action.
The lift floor indicator is a perfect example as it tells you at which floor the lift is so you could take action of whether to wait or to take the stairs.
Art informs and calls to action.
It’s Not Warming, It’s Dying by Milton Glaser is an effort to inform us of ongoing environmental issues. The choice of imagery is a green sphere slowly turning black to represent Planet Earth running out of time. The wording is direct, indicating that there is little time left, therefore calling out to people to take action.
II. Match Between the System and the Real World:
Systems should speak the user’s language, following real-world conventions to establish a relationship with the users.
The design of the calculator app on mobile devices has greatly evolved over the year. And yet, it has always stayed true to the representation of the physical calculator to provide people with a sense of familiarity, hence an effortless onboarding experience.
Art represents the social context in which it was made.
Girl with a Pearl Earring, oil painting on canvas (c. 1665) by Dutch artist Johannes Vermeer. Arguably one of the most realistic paintings, it depicts an imaginary young woman in an exotic dress and a large pearl earring. It has been scientifically explained how Vermeer achieved near-photorealism with camera obscura technique, almost two centuries before the invention of the camera.
The artwork is a real-world representation of the societal context of its time, suggested by the clothing and the pearl itself.
Originally, the painting was known as Girl with Turban. Much like other artists of his era, Vermeer enjoyed painting figures dressed in Middle Eastern attire, partly due to the exoticism that was attributed to non-European societies. And as pearls are found underwater, they are also often associated with exotic adventures and travel to far shores.
Vermeer dressed the girl in turban and pearl to express the yearning for adventure, a common sentiment during the 17th-century European maritime escapades. The painting, therefore, gives us an authentic representation of its era.
III. User Control & Freedom
Users need a clearly marked Emergency Exit sign (Undo, Cancel button, Back button on browsers) to avoid committing to accidental slip-ups and mistakes. This is particularly important for mobile devices where accidental touches are common.
The third Usability Heuristic argues that User Control and Freedom fosters a sense of freedom to allow for errors, giving the users control of the system.
Participatory Art allowing for errors and full audience control
Participatory Art is a form of art that directly engages the audience in the creative process so that they become the co-creator of the artwork itself.
The ‘Before I Die’ Project allows the audience to participate, write down their wishes, and change them later, thus offering a great sense of control and ownership.
IV. Maintain Consistency and Adhere to Standards
“People spend most of their time on sites other than yours.” Jakob’s Law
To ensure the product’s learnability, standard words, icons, actions should mean the same thing to avoid adding cognitive load. A good example is the common placement of the Cart button.
Consistency of Messaging in Classical Art
Have you ever wondered why most classical paintings look the same? This is most often due to allegories. Allegories are the subjects or elements of the artwork, used to symbolise a deeper moral or spiritual meaning such as life, death, love, virtue, justice. Traditionally, paintings were created as forms of propaganda to convey religious or political views. They are as such needed to be to the point, fairly easy to understand, and allegorically consistent to ‘hammer down’ the message.
V. Error Prevention
Systems should provide the means to prevent errors created by interaction with a user interface. Good input field design lets users know the type and the format of information needed and warns them when errors occur.
In Art, this coincides with the example of the depictions of Hell above. The Church wants to warn its followers of Hell by pointing out what it might look like using classical paintings.
VI. Recognition vs. Recall in User Interfaces
Retrieving memory is easier with cues. The more cues, the easier. Systems should promote Recognition over Recall to give users extra help to remember information.
In the self-initiative project WhatsAppéro, I created a built-in event and calendar feature for WhatsApp. Having learned that older users have a hard time learning and retaining new information, I took advantage of existing WhatsApp’s interactions to simplify the learning process.
In the example above, users can share an event invite using the message forward function of WhatsApp. A simple, well-known gesture now also serves to connect more people.
Art that aids recognition
Totem poles are monuments created to document stories and histories of communities, families, or distinguished clan members. They represent and commemorate ancestry, histories, people, or events. Most totems display spirit beings, sacred objects, or crest animals, marking an emblem of a family, clan, lineage, or tribe. Packed with symbolism and mental cues, totems serve as an aid to recognise and identify a community, oneself.
VII. Flexibility and Efficiency of Use
Good design should accommodate all types of users, novice, and experienced ones alike. Flexible systems help users achieve their goals in multiple ways, enhancing efficiency.
Flexibility facilitates both expert and new users, ensuring an inclusive design.
Indiscriminatory Art that delights adults and children alike
Don’t tell me this ‘little’ guy doesn’t put a smile on your face. I’ve seen 8-year-old kids to 80-year-old men grinning upon seeing it. And that’s another purpose of art, to spark joy, regardless of age or background.
VIII. Aesthetic and Minimalist Design
One cannot mention Minimalist Design and not make a reference to Dieter Rams. With his philosophy “Less, but better”, Dieter Rams is considered the founding father of Minimalist Design. Ram’s “Good Design” principles — Less is more, dictates that good design makes sure that the content and UI focused on the essential. Systems should have a high Signal-to-Noise ratio to transmit more relevant information.
I’m not sure about the physical “Signal-to-Noise” ratio of this Braun radio but it sure wins my heart for its simplicity and straightforwardness.
Minimalist Art
In Art, Minimalism isn’t a new concept either. American minimalist painter Mark Rothko is renowned for his color field paintings which comprise of striking minimal coloured rectangles.
Near the end of his life, Rothko painted the series “Black on Grays”, featuring a black rectangle above a gray one, with subtler colourations. Rothko explained that they were simply about death. They are desolate, empty images, but they also boast landscape-like qualities, connoting an Arctic wasteland under a vast and empty sky. But even without the artist’s explanation, one could also surmise the intended sentiments of the work thanks to its high Signal-to-Noise ratio.
IX. Help Users Recognise, Diagnose and Recover from Errors
Systems should:
- Inform users when an error has occurred.
- Tell users what the problem is.
- Offer a solution.
- Prevent errors in the first place.
Users are likely to move away from the product when help isn’t available when they need it.
Art that is as an error message in itself
La Trahison des images by René Magritte is an example of a meta error message. One interpretation conveyed by paralanguage is that the pipe in the painting is not a pipe, but rather a drawing of a pipe, hence pointing out the error in our perception of the artwork itself.
X. Help & Documentation
Complex systems aren’t always intuitive. Think of an airplane GUI as an example. In complex circumstances, Systems should offer additional help and documentation to allow users to complete their tasks.
Slack has been doing a stellar job at guiding new users through their product, offering helps at every opportunity. Rather than dragging the users through an exhaustive tour of every feature, Slack introduces them to features like Threads and Activity through their empty states — helpful microcopy explains how these features will function once the user is active in the platform.
Self-explanatory Art that offers integrated tutorials
Sagmeister’s The Happy Show is a thematic exhibition of film, print, infographics, sculpture, and interactive installations offering visitors the experience of walking into the designer’s mind as he attempts to increase his happiness via mediation, cognitive therapy, and mood-altering pharmaceuticals. The exhibition offers the viewers hints, legends, audio/visual clues to help them experience the work as intended.
That’s it! you’ve made it to the end. This list is by no means an exhaustive investigation of the link between Art and Design but an attempt at bridging the two areas akin to one another. I hope you’re leaving here informed and still a tad delighted. Let me know if you agree with my interpretations.
Also, check out my other article on how Powerlifting and Design are related.
I’d be chuffed to connect on LinkedIn. You can find me at https://www.linkedin.com/in/nguyentran-ngo/. In the meantime, have a good one!
