Notes on Further Research into Aesthetics and Usability (and What It Means for Technical Writers)

Lately I’ve been studying the role of aesthetics in documentation. My research led me to an article titled “Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI” by Alexandre N. Tuch, Sandra P. Roth, and others (2012, Computers in Human Behavior). You can download a copy of the manuscript here from ResearchGate.net.

This article piqued my interest for several reasons.

1. The abstract suggests that the “what is beautiful is usable” notion, which I touched upon in a previous post (and which has been championed by design experts like Donald Norman), may not always be true. The authors found no causal link in their experiment between an attractive web user interface and a higher usability score. This is significant because the “what is beautiful is usable” notion basically asserts that aesthetics has a persuasive, motivating, and/or calming effect on users that leads them to at least perceive a system as more usable.
2. The abstract states that in some cases, the “what is beautiful is usable” notion can be flipped around: “what is usable is beautiful”. They base this conclusion on data from their experiment showing that when users could complete a task quickly and efficiently in a website, they were more likely to assign it a higher aesthetics score.

This fascinates me because it challenges my assumption that beauty reinforces usability. Reality, apparently, is more complicated. Below are my detailed notes from the article, followed by what I believe are some implications for technical writers. Go ahead and skip to the end if you’d rather get right to the practical points.

Summary of Article

• Tuch et al. situate their study in the larger context of aesthetics and usability research, noting that most studies on the topic are correlative rather than causative, since few if any other studies systematically manipulated aesthetics and usability as independent variables. The basic problem is that aesthetics and usability can become easily mixed up, making it difficult to test how one influences the other. For example, if you change how a website layout is organized in order to test its aesthetic appeal, you may have just also changed how usable the website is (and vice versa, if you change a web layout to test how usable it is, your changes have likely just changed its aesthetic appeal).
• The authors also point out that too little attention has been given to “boundary conditions” on the aesthetics-usability relationship: “With boundary conditions we describe the possibility that different degrees of usability and aesthetics manipulation may affect the aesthetics–usability relation differently. For instance, a large effect size of the usability manipulation may attenuate the effect of interface-aesthetics on perceived usability.” Sounds rather convoluted to me, but this really is an important observation, because it means that the degree to which you adjust the aesthetics or usability factors of a website can have a significant influence on the causal relationship between them. More on this below.
• The authors then claim that their study is the first to use a more strictly-controlled design in which “interface-aesthetics” and “interface-usability” were systematically manipulated and tested independently of each other. To manipulate usability, they created two online clothing shops with different information architectures (IAs) (since as they point out, there is well-established causal relation between a high-quality IA and a strong degree of usability). One had a low-quality IA, one had a high-quality IA. The only differences between the websites were the labels and the placement of items within categories. The layouts, menu depth, etc., were identical.
• To manipulate aesthetics, they created two retail websites: one with an ugly interface, another with a beautiful interface. The only aesthetic elements they changed were the background color, background texture, and graphics—no interaction elements (such as the navigation) were changed. This was done to avoid affecting the usability of the websites being tested.
• They used a rather rigorous procedure to identify an “ugly” and a “beautiful” website. Long story short, they performed a preliminary study with 150+ participants who rated 20 different websites. They finally selected the two websites with highest and lowest aesthetic scores across all the ratings.
• Test subjects were asked to follow a basic procedure: (1) rate a screenshot of a website for perceived aesthetics and usability; (2) perform four practical tasks within the website; (3) rate their user experience after each task; (4) rate their overall interaction with the website for perceived aesthetics and usability.
• Their findings interest me greatly: “Against our expectations, the participants did not use the interface’s aesthetics as a proxy for pre-use perceived usability.” Also: “In the post-use phase, interface-aesthetics also did not affect perceived usability (SUS, WOOS, PQ), contradicting H2 rather than supporting the ‘what is beautiful is usable’ notion.” What this means is that the visual appeal of the website didn’t cause participants to think the website would be more usable—and this held true before and after the participants used the website.
• After further analysis and controlling for variables, the authors were led to conclude that the “effect of usability on perceived aesthetics depends on the user’s affective experience with the usability of the online shop”. Stated differently, a poor experience with a website’s usability caused users to get frustrated and subsequently assign a lower aesthetics score to the website.
• In their discussion Tuch et al. conclude that their research diverges from previous research in two key ways. First, they found that aesthetics didn’t affect usability, but rather in certain conditions the reverse is true: usability affects aesthetics. Secondly they conclude that over time, how users perceive the aesthetic quality of an interface can change significantly based on their moment-to-moment interaction with a website—which challenges prior research suggesting that users’ perceptions of aesthetic quality are mostly immune to change. The authors attribute their finding to the fact that they manipulated of the interface-usability variable of the website quite strongly, and asked test subjects to complete highly practical (as opposed to more open-ended) tasks within the website.

My Analysis

Tuch et al.’s research certainly nuances the “what is beautiful is usable” theory and offers an intriguing reversal: “what is usable is beautiful”. You might look at a beautiful website and tell someone you find it objectively gorgeous, but you could well change your mind as you continue to use the website and especially if you have a frustrating experience with it; or you might find a website ugly at first, but alter your opinion of it based on how easy it is to use. That is, your emotional response to the act of using the website mediates your opinion of its beauty.

That said, Tuch et al.’s findings are limited. To begin with, as the authors themselves state, they tested one web product with one population; and they focused on giving their participants practical tasks to perform, which could have biased the participants towards a specific way of evaluating the system. Their findings might have been different if participants were given more open-ended prompts.

More importantly, the authors admit that they manipulated the interface-usability variable more strongly than the interface-aesthetics variable. So while there was a pronounced contrast between the low- and high-usability versions of the websites in their experiment, the difference between the ugly and beautiful versions was less pronounced. (This goes back the “boundary conditions” concept they commented on earlier in their article.)

To me this is an important point, so I’ve added the graphic below from Tuch et al.’s paper illustrating the contrast between the low- and high-aesthetics versions used in their experiment. Basically, they changed the background color and background texture to make website one ugly, while leaving everything else the same.

I mean, sure, the ugly version is ugly, but its ugliness is not that pronounced; and to me it seems too contrived. The authors themselves confess, “This reduced perspective on aesthetics might lower the ecological validity of our study.” Indeed. Yet I am not sure how much more they could have changed the interface-aesthetics variable without tampering with the interface-usability variable.

Anyways, what does this mean for technical writers?

It’s risky no doubt to apply the findings of a web usability study to documentation, but since so much documentation is web-based these days, I think it’s fair to attempt a comparison. With that caveat in mind, I would say that this study has two high-level implications.

1. You can waste valuable time creating a beautiful document that isn’t as usable as it should be (which I think is rather obvious).
2. You can create a usable document that can actually enhance your readers’ perception of its beauty not before but after they are done with it (which I think is less obvious).

In fact, in the world of UX design, there is now a name for the first phenomenon: the “aesthetics-usability effect”. The Nielsen Norman Group defines this as “users’ tendency to perceive attractive products as more usable. People tend to believe that things that look better will work better — even if they aren’t actually more effective or efficient.” Consequently (the Nielsen Norman experts say) designers need to find ways for form and function to work together; otherwise you may sacrifice one for the other. Offering beautiful photos and stylistic fonts or layouts may have a positive initial effect on uses, but if they can’t get things done easily, this effect will quickly wear off.

One research article published in 2019 in the Journal of User Experience takes this principle a step further. Researchers John Grishin and Douglas Gillin argue that designers should privilege usability over aesthetics rather than seeking to balance the two equally. This is because their research found the following: “if aesthetics influences perceptions of usability in early interactions with a system, the effect is not a strong one, and repeated experience with a system reduces it further.”

Let’s get even more specific now about the implications for documentation. Usability for documents is usually a matter of good organization, clear and simple explanations, consistency of terminology, the ease with which information is found, and so on. Certainly these are goals technical writers should seek to achieve. However, it seems to me that usability and aesthetics are more intertwined than Grishin and Gillin (the authors of the 2019 study) are willing to admit. Furthermore, I think it’s important for technical writers not only to make a document usable, but to convey the impression that it is credible—and aesthetics seems to be a crucial way to do that. This idea is corroborated by another resource I found, the Standford Web Credibility Research, which is based on a large-scale study in which thousands of participants were asked to observe two websites. Here is what the researchers found: “The data showed that the average consumer paid far more attention to the superficial aspects of a site, such as visual cues, than to its content. For example, nearly half of all consumers (or 46.1%) in the study assessed the credibility of sites based in part on the appeal of the overall visual design of a site, including layout, typography, font size and color schemes.”

Indeed, perhaps what all of this points to is that technical writers should focus on a specific quality within the larger domain of beauty: namely, elegance. Whereas beauty can be conceived broadly as being about appearances which bring pleasure, elegance is a type of beauty characterized by simplicity, consistency, and grace. As Wikipedia puts it, “Elegance is beauty that shows unusual effectiveness and simplicity.” Think of an elegant math equation or an elegant workflow. Why not think of elegant documentation? That just might be the best word to describe documentation that manages to marry good writing, design, and usability. It certainly would resonate with research I have done in the past to benchmark online help systems.

Summary

• The idea that “what is beautiful is usable” has been a common theme in the user experience design field for the past three decades. There have been multiple studies showing a correlation between websites that are aesthetically pleasing and more “usable”. The implication for technical writers: attractive documents (especially web-based docs) tend to be more usable.
• However, the research was inconsistent regarding a causal relationship between aesthetics and usability. A few studies published in the last two decades attempted to find a causal link and could not do so.
• Technical writers should therefore be cautious about the idea that “what is beautiful is usable” since there is credible research to challenge and complicate this view.
• But technical writers should take seriously the reverse idea that “what is usable is beautiful” since there is credible research to support this view. A study published in 2012 found that users who experienced a website as usable also gave a higher aesthetics rating to the website after using it.
• Yet technical writers shouldn’t go too far in prioritizing usability at the expense of aesthetics, since there is solid research showing that users are (among other things) powerfully persuaded by the aesthetics of a web resource that it is credible and trustworthy.
• Technical writers should also be aware that the latest studies about aesthetics and usability had certain methodological limitations and inconclusive data. One of the takeaways from these studies should be that it is not so easy to separate aesthetics and usability. For example, Tuch et al. describe how difficult it was to test them as independent variables, and that changing one could have affected the other—a clear sign that there is considerable overlap between them. Indeed, it seems fair to conceive of aesthetics and usability as existing within the same spectrum or continuum.
• So we need a balance somehow. And perhaps the balance we are trying to strike can best be described as one of elegance. Stated another way, perhaps we should be seeking to create not merely something that is beautiful or usable, but a combination of the two: something elegant.
• What do I mean by elegant? The relevant characteristics I think of are clear, simple, consistent, clean, well-organized, balanced. These are characteristics which came up quite often in benchmarking research I have done in the past with my team. The concept of elegance seems to combine aesthetics, usability, and what technical writers do best (writing with clarity, style, and grace) in a more holistic sense.

If you work in the technical communication or UX writing and design fields, let me know what you think! I’d be especially curious to know if there are other resources on this subject you found useful.

Resources

Here are links to the resources I studied for this post, ordered by date of publication (most recent to oldest). I’ve also included some of the key quotes which made an impression on me.

• “Exploring the Boundary Conditions of the Effect of Aesthetics on Perceived Usability.” Journal of User Experience. February, 2019.
  • Key quote 1: “Based largely on previous studies (e.g., Ben-Bassat, Meyer, & Tractinsky, 2006; Tractinsky, Katz, & Ikar, 2000; Thüring & Mahlke, 2007), this study hypothesized that aesthetics contributes to judgments of usability in early interactions with systems, and that, with continued use, the role of aesthetics diminishes with respect to overall perception of usability. The results provided only limited support, at best, that aesthetics played any role in participants’ perceptions of usability, both in early interactions and with continued use. […] Instead, the results showed a significant effect of occasion and manipulation of interface usability on participants’ judgments of usability.”
  • Key quote 2: “The current research suggests that, if aesthetics influences perceptions of usability in early interactions with a system, the effect is not a strong one, and repeated experience with a system reduces it further.”
• “How Do People Evaluate a Web Site’s Credibility? Results from a Large Study” (PDF). October 29, 2002.
  • Key quote: “The data showed that the average consumer paid far more attention to the superficial aspects of a site, such as visual cues, than to its content. For example, nearly half of all consumers (or 46.1%) in the study assessed the credibility of sites based in part on the appeal of the overall visual design of a site, including layout, typography, font size and color schemes.”
• “The Aesthetic-Usability Effect.” Nielsen Norman Group. January 29, 2017.
  • Key quote: “Aesthetically pleasing interfaces are worth the investment. Visual designs that appeal to your users have the side effects of making your site appear orderly, well designed, and professional. Users are more likely to want to try a visually appealing site, and they’re more patient with minor issues. However, this effect is at its strongest when the aesthetics serve to support and enhance the content and functionality of the site. Additionally, this effect often influences user comments during research. As always, listen to what users say, but, first and foremost, take into account what they do.”
• “Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI“. Computers in Human Behavior. April 2012.
  • Key quote 1: “A more general explanation for the interface-usability effect on perceived aesthetics might be found in the user’s affective reaction towards the usability of the online shop: A frustrating usability experience may lead to a negative affective experience for the user, which in turn reduces the ratings of perceived aesthetics. In other words, users get frustrated by poor usability and therefore they rate the interface more negatively in general, including its aesthetics.”
  • Key quote 2: “Our findings differ from previous research in at least two ways. First, our study is the first one able to show an interface-usability effect on perceived aesthetics and at the same time finding no interface-aesthetics effect on perceived usability. Most existing studies found an effect (or at least a trend) of interface-aesthetics on perceived usability. Two studies (Ben-Bassat et al., 2006; Lee and Koubek, 2010) also found an interface-usability effect on perceived aesthetics alongside the interface-aesthetics effect, but the effect was less pronounced. Our results show that Tractinsky’s notion (‘what is beautiful is usable’) can be reversed to a ‘what is usable is beautiful’ effect under certain circumstances.”