Interaction Aesthetics versus Visual Aesthetics

[Infragistics] Joel Eden / Sunday, February 28, 2010

When people talk about “aesthetics,” usually they are talking about how nice something looks visually, for example when a client tells you they want their website to be “aesthetically pleasing.” Well, there’s a lot more to aesthetics than just visual beauty…take a look at the following definition for aesthetics from the Merriam Webster online dictionary:

“a particular taste for or approach to what is pleasing to the senses and especially sight”

Aesthetics have to do with human perception from all of the senses, including how it “feels” to interact with something (e.g., as a result of physically touching an artifact, or moving your body through a space).

I use the term “interaction aesthetics” to refer to the qualities of a design that lead to the feelings, emotions, and the behaviors that result from these more bodily types of interactions. An important element of these types of interactions to note is that they happen over time. This is why when we talk about interaction design, and user experience design it is important to not forget that interactions and experiences happen over time (even if just for a brief moment while someone moves their mouse from one area to another).

Contrast this with “visual aesthetics,” which is a term that I would use to talk about the qualities of a design that lead to feelings, emotions, and behaviors that result stopping and being more deliberative about the visual aspects individually. When we stop and deliberate about these types of visual qualities of a design, we’re noticing things in a much different way than when we actually use the same designed artifact for a real world activity. This is where the danger occurs of clients asking for “better looking” designs, without realizing the potential negative implications of focusing only on visual aesthetics.

So why does this even matter?

We don’t stop and deliberate about visual aesthetics when actually using a tool to accomplish an activity…we are more likely to notice the interaction aesthetics during actual use. So there’s a bit of a trap you can fall into…when evaluating a design by looking at it, it is easier to notice, and therefore focus on attributes of the design that are completely different than the attributes of the same design in use. More generally, humans don’t stop and deliberate about most actions as much as many designers think…this is why if you ask people what they do and how they do it, you are likely to get a very convincing story that in most cases will be far from what actually happens.

Consider this screenshot of a website for an interior design/architecture firm. Many people think this "looks nice," but it's very hard to use...you need to spend a lot of effort just figuring how to get to information, not only the first time, but every time. The little vertical bars lined up near the bottom of the page are the navigation; as you hover over each, the navigation text shows up in the middle of the page. This is an example bad interaction aesthetics, but what many think are good visual aesthetics ("it looks nice") because you are forced to move your mouse to bring up the text, then move your eyes to a different area to see the text (assuming you know the text should be there), then repeat for each possible navigation item until you find what you need. This also taxes our weak human memory by forcing us to try and remember which little vertical bar represents which item (users won't be able to do this, so they'll be forced to play the game of mousing over each bar every time they come to the site).

Many would say that craigslist.com that has good interaction aesthetics (e.g., you can efficiently get to the info you want with a small number of clicks and mouse movement in a top-down and left-right flow), but I've heard many people complain about poor visual aesthetics (e.g., many clients have told me they would not want a design that looks so "plain").

Amazon.com is another site that allows you to quickly find what you're looking for (products and information about products), and it has very good interaction aesthetics (buttons are just where you seem to move your mouse). In many cases, it seems that Amazon has anticipated where you expected something (this is a result of good design). But again, I've heard many clients say that amazon.com is too busy, and they would never want a visual design that looks like that (long pages, use of orange), but these are all things that you don't really notice in use...you're too busy being productive.

The goal of good user experience design is to end up with artifacts that are useful, usable, and desirable…the most important word here is “and;” we want to end up with designs that have good interaction aesthetic qualities and good visual design qualities. When people use the things you design, they aren’t having separate experiences, e.g., one interaction with the visual design, and a different parallel interaction with the interaction design; they are having one single, unified experience. It is only the designer who separates out these aspects and discusses them. What we want to design for is beautiful designs that also have great interaction aesthetics.

So, how about an example of something that has good interaction aesthetics and visual aesthetics? The pricing page for Basecamp from 37signals is a good example of using good visual aesthetics and interaction aesthetics together, in a way that create a single, unified experience. The visual design is not over the top (I wouldn't call it "beautiful," but it's good as far as web app marketing pages go), it uses colors that are pleasing, and most importantly, the visual design hierarchy guides your attention to key information (the most popular pricing plan, info useful to compare plans are given stronger treatment, and the sign up buttons are easy to notice).

The concept of “preattentive attributes” (I’ll cover this in detail in a later blog post) is one example where the two can blend together, for better or worse…basically, because of how our visual perception systems work, certain aspects of a design get your attention whether you want them to or not, before you actually spend cognitive effort or think about what you want to notice. You can use visual design to take advantage of these types of attributes, or your designs may suffer without you even knowing (you want to make sure that the visually appealing aspects that draw visual attention are moving that attention to the right places). That extra bit of color the client demands may interfere with the overall visual hierarchy of your design (e.g., using extra color and weight for headers of information may draw too much attention away from the actual information).

Going back to what I started with about the difference between attributes we notice during use versus attributes we notice when we stop and deliberate about how our designs look, of course users may notice the visual aesthetics (e.g., “oh, I like how this one looks better”), but that doesn’t mean that you have to use this information to drive your design. Many things that look good during this kind of non-use deliberation actually serve as distracters when a user is trying to get something done.