Visual Design: breaking into the fourth dimension of Experience Design

The age-old question in experience design: as a designer, should I strive for desirability or usability? However, this question is backed by a misconception that aesthetics and usability come at the expense of each other, while in reality, they are not at all in opposition.

Kylie Ho
UX Collective

--

Geometric design with the text “Bauhaus” on each corner
Source: Vecteezy.

Form follows function

Form and function are in a sequential relationship, not an either-or relationship. The famous axiom by Louis Sullivan is “form follows function,” not “form or function.” An experience must first be usable before it attempts to be desirable¹. Usability is a prerequisite, or the bare minimum, for a prototype to become a product. If the product is to survive in the market, however, it must display desirable traits at first glance. This is why visual design is integral to experience design: whether or not consumers decide to purchase, and keep purchasing, depends heavily on a product’s visual presence.

A design must be aesthetic to be usable

Imagine a website that has red text on blue background, or its heading is half the font size of a paragraph, or its buttons are shoulder-to-shoulder, neck-to-neck to one another, without any way to tell where one button ends and where the next begins. This website would just be illegible.

An interface before following aesthetic principles in design and after following aesthetic principles in design
Modifying a UI prototype with Gestalt principles in mind.

Usable websites possess the right amount of white space, text hierarchy, and appropriate distribution of visual weight on salient and non-salient elements. In the absence of fundamental design principles, a design becomes incomprehensible, thus, unusable.

Furthermore, aesthetically strong products give users the impression of usability. In a study by Masaaki Kurosu and Kaori Kashimura in 1995, people were asked to rank variations of an ATM interface by usability. The end rankings showed a strong correlation between aesthetic appeal and perceived ease of use, even stronger than the correlation between perceived ease of use and actual ease of use². This is the Aesthetic-usability effect²: people often perceive aesthetically pleasing designs as more usable designs. A designer does not have to worry about sacrificing usability to achieve aesthetics nor vice versa, as in many times, aesthetics is a sound method to achieve usability.

The 4 dimensions of Product Experience

Beyond basic, utilitarian aesthetic principles, visual design creates product value by reflecting cultural values that increase a product’s and, by extension, its brand’s influence by magnitudes. Here is an interesting take from entrepreneur and designer Christiaan Maats: there are four dimensions to a product experience³.

Keep in mind that these dimensions exist in a hierarchical system: a product must fulfill a previous dimension before it attempts to ascend to the next dimension.

1. Utilitarian function: Does the product work? Is it durable?

The first dimension of a product experience is Utilitarian function which, in experience design, can mean deciding what features go on a platform. After utilitarian requirements are met, such as the platform runs, is available on mobile, has little to no latency, etc., it can move on to achieve the second dimension:

2. Emotional attitude: How does the product strike you when you see it?

Is the product cute? Is it formal? Aggressive? Arrogant? Modest? Elegant?

A financial contract’s layout, where the majority of text has equal visual weight, comes in chunks, and is segregated by occasional headings, would present a different attitude from a game interface’s layout, which may look more like punchy colors and bold taglines.

The attitude is what creates the first impression, and likely, the only impression that most consumers have time to take in. In a supermarket with fully stocked aisles, shoppers do not stop to weigh the costs and benefits of each option, but “make snap judgements based on a paucity of information⁴” such as choosing recognizable brands, low price tags, or attractive packaging.

Shopper standing between two fully-stocked isles of goods in a supermarket
Too many product attitudes to count. Photo by An Rong Xu for The New York Times.

The brain handles information overload by relying on heuristic shortcuts instead of rationale⁵. These heuristic shortcuts can be based on past trial and errors, or assumptions based on prior knowledge about similar situations⁴. This is where concepts such as brand recognition and loyalty come in.

3. Cultural style: Does the product fit the style you identify with?

In 1940, Lucky Strike cigarettes turned into a national symbol by committing one design change to its packaging: the packet’s base color was changed from green to pure white.

Whiteness, hygiene, and bodily cleanliness were seen as an American ideal in the 1940s. This made for curious effects such as Americans paying more for white-shelled eggs than for brown⁶.

Lucky Strike’s new white coat made the cigarette pack recognizably American. This incentivized consumption in the massive population of immigrants coming into the United States at the time. Immigrants wanted so badly to be identified as Americans — while reminded everyday by their tongues that they are not, they looked to other means of self-expression to “feel part of American culture⁶,” one of which was owning a pack of white Lucky Strike.

Lucky Strike’s packaging over the years, show the change in the packet’s base color from green to pure white
Lucky Strike before 1940 (left and middle) and after 1940 (right). Source: Pinterest.

By adopting a cultural style, visual design can speak intimately to a body of consumers. In Lucky Strike’s case, it spoke to a repressed need shared by many people to express an ideal of their identity.

Once the third dimension — cultural style — is achieved, a product can become an extension of one’s identity to the world around them.

4. Belief and Purpose: Does the product reflect how you see the world?

According to Maats, a product experience that achieved the fourth dimension is rooted in “a belief system we can identify with and serve a purpose that we can empathize with³.” In the marketing field, this is otherwise known as Societal Marketing Concept.

Patagonia’s website landing page. The biggest title on the page is “Why Waste It?” — an environmental activism campaign that Patagonia leads
Photo captured by rachael mclaughlin on Medium.

A great example for successful Societal Marketing Concept is Patagonia: a brand selling outdoors gear, whose consumers are outdoors people, and is devoted to causes that outdoors people believe in and support: environment and sustainability activism.

Patagonia employees marching for a people’s climate movement
Photo by Tim Davis via Patagonia.

Patagonia was able to “build a community” around their cause⁷, which sustained a loyal and ethical consumer base. Subsequently, Patagonia became not only an apparel choice people can be recognized for, but a lifestyle people can subscribe to.

Using the 3rd and 4th dimensions as a Consumer

The centrality of visual design to experience design is not to be overstated. Without strong visual design, a usable experience design may miss the mark on three dimensions that could have enriched its value. The inverse of this also applies. We, as consumers, can choose which belief we adhere to and which cultural style we identify with. The choice to reject fast fashion, or the choice to use sustainable packaging, has made impactful changes on industries to reconsider practices and redefine the third and fourth dimensions of their products to meet new consumer demand.

[1]: Schenker, Marc. “Usability vs. Desirability in UX Design.” Adobe Xd Ideas, 6 Nov. 2018. xd.adobe.com/ideas/process/user-research/usability-vs-desirability-ux-design/

[2]: “The Laws of UX — 19 Psychological Design Principles.” YouTube, uploaded by Joseph from LearnSketch․com, 11 Jun. 2019, youtu.be/fYs2Mdyasuc.

[3]: Maats, Christiaan. “How product design can change the world.” YouTube, uploaded by TEDx Talks, 4 Oct. 2016, youtu.be/ZqeA_psKn2E.

[4]: Preece, J., Rogers, Y., & Sharp, H. Interaction Design: Beyond Human-Computer Interaction. New York: John Wiley & Sons, 2002, p. 38.

[5]: Toxboe, Anders. “The Power and Danger of Persuasive Design.” UX Booth, 9 Jan. 2018. uxbooth.com/articles/the-power-and-danger-of-persuasive-design/

[6]: Forty, Adrian. Objects of Desire: Design and Society since 1750. New York: Thames and Hudson, 1986, pp. 242–245.

[7]: Deshmukh, Rohan. “Patagonia’s Purpose-driven Marketing Strategy.” The Strategy Story, 14 Sep. 2021. thestrategystory.com/2021/09/14/patagonia-marketing-strategy-mix/#:~:text=Patagonia%20has%20been%20built%20around,social%20activism%2C%20and%20sustainable%20practices

--

--

I’m a User Experience student, product enthusiast, and wannabe fiction writer.