User interface experts are often suspicious of the role of visual aesthetics in user interfaces—and of designers who insist that graphic emotive impact and careful attention to a site’s visual framework really contribute to measurable success. Underneath the arguments, I see a fundamental culture clash. In academia, text (and lots of it) is the only way serious people make serious arguments, and very polished presentations are often seen as prima facie evidence that the presenter may be hiding a weak argument with graphic frou-frou.
Many eyetracking studies conclude that large graphics and graphic elements attract few “gaze fixations,” but can we really conclude that large, aesthetic, tone-setting graphics have no lasting effect on the user’s attitudes toward a site? To put it bluntly, are designers who create visually compelling sites simply wasting time and treasure on graphic indulgences that obstruct efficient e-commerce and communication?
Perhaps not. Another body of web user experience research shows that website users are powerfully influenced by aesthetics, and that positive perceptions of order, beauty, novelty, and creativity increase the user’s confidence in a site’s trustworthiness and usability. Recent design writing and interface research illustrate how visual design and user research can work together to create better user experiences on the web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and brain. In short: there’s lots of evidence that beauty enhances usability. [1]
What can we learn from user experience analysis tools such as eyetracking? Eyetracking is great for analyzing and understanding how users see, interpret, and use information. However, I disagree with usability researcher Jakob Nielsen, who asserts that, since his research subjects (apparently) pay little attention to large graphics on web pages, we can infer that those graphics have little influence on users — and that “useless” or “superfluous” images form “obstacle courses” for users. Nielsen isn’t talking about catalog images or other images closely related to merchandize or tasks, but about the images and other graphic content that designers use to create a site’s aesthetic ambiance. [2, 3]
I have no doubt that Nielsen and other researchers accurately report what their eyetracking study participants do in response to task-centric research on websites. Context is important here: In such studies, participants have a set of specific tasks to accomplish, and thus their gaze tends to focus on navigation links, titles, labels, and interface controls such as buttons and form fields. Expressive or visual tone-setting graphics are rarely useful in such tasks, and it’s not surprising that users performing these tasks (apparently) ignore most page graphics, as indicated by the infrequent gazes directed at large images.
To reconcile the differing views of the proper role of visual aesthetics, we need to understand how the brain processes images and responds to what we see.
It happens in an instant#section2
Thanks to the work of the early 20th Century Gestalt psychologists—and to many studies since—we know that the brain’s response to images is extremely complex, and in many cases nearly instantaneous. The process seems semi-magical and therefore untrustworthy. How could something so complex happen so fast? How can we trust the results of a process we don’t thoroughly understand? Research confirms that users make aesthetic decisions about the overall visual impression of web pages in as little as 50 milliseconds (1/20th of a second). [4, 5] These instant visceral reactions to web pages happen in virtually all users, are consistent over visit length, and strongly influence the user’s sense of trust in the information. In short, users have made fundamental, consistent, and lasting aesthetic decisions about the credibility and authority of sites before major eyetracking events begin.
In intensely visual fields such as art history and diagnostic radiology, this kind of sophisticated, complex, near-instant Gestalt visual judgment is well-known and respected, although the exact neural mechanisms at work are not well understood. In Blink Malcolm Gladwell tells the story of the Getty Museum’s famous kouros, a nominally ancient Greek statue now widely regarded as a modern forgery. Although the provenance and mineralogy tests seemed to provide definitive proof of the statue’s age, independent art history experts were almost universally negative in their first visceral reactions to the statue. Thomas Hoving’s immediate reaction to the statue’s unveiling was “fresh,” hardly the right word for a sculpture that had supposedly been buried for two thousand years. At first, the experts had only their gut visual reactions as proof, but their skepticism caused the Getty to reconsider, and the evidence supporting the statue’s age and provenance fell apart on closer inspection. [6]
Although Jakob Nielsen has been one of the most vocal skeptics of highly graphical sites, his business partner, Donald Norman, has best articulated the ways in which sophisticated visual design not only influences users, but also contributes to better usability.
Why attractive things work better#section3
In psychology, emotional reactions to stimuli are called affective responses. Affective responses happen very fast, and are governed in an automatic, unconscious way by the lower centers of the brain that also govern basic instincts (food, fear, sex, breathing, blinking, etc.). Think of affective responses as the brain’s bottom-up reaction to what you see and feel. Cognitive responses are your brain’s slower, top-down, more considered responses. They’re governed by your personal cultural views, learning, experiences, and personal preferences that you are aware of and can easily articulate. Affective reactions assign value to your experiences; cognitive reactions assign meaning to what you see and use.
Affective and cognitive responses to visual stimuli are governed by a three-stage process in the brain, at visceral, behavioral, and reflective processing levels:
The three-stage process governed by affective and cognitive responses to visual stimuli.
The visceral (“gut”) processing level reacts quickly to appearances. It’s the visceral reaction to web pages that researchers measure when they detect reaction times as fast as 50 milliseconds. It’s crucial to understand that these instant good/bad visceral-level affective responses are largely unconscious: it can take seconds or minutes to become consciously aware of your first, visceral reaction to a stimulus—particularly a stimulus as complex as a web page.
Behavioral-level processing involves the more familiar aspects of usability: it responds to the feel of using the site, the functionality, the understandability of the structure and navigation, and the overall physical performance of the site. At this level, users are consciously aware of their attitudes toward the behavior of the system, and their reactions (pleasure, for example, or frustration) play out over seconds and minutes as users interact with a site. It’s at this behavioral level that techniques such as eyetracking are most powerful and trustworthy, because they offer detailed moment-by-moment evidence of what users consciously decided to look at and do to fulfill a given task.
Reflective processing of reactions is the most complex level, and typically involves a user’s personal sense of a site’s beauty, meaning, cultural context, and immediate usefulness. Reflective processing often triggers memories and encourages pragmatic judgments about the overall aesthetic worth and value of what a user sees. Eyetracking and traffic logs are irrelevant at this level, but user interviews can give you insight into your user’s reflective judgments.
Visceral (affective) reactions can take a relatively long time to bubble up through layers of processing to enter conscious awareness at the behavioral or reflective levels, but that doesn’t mean that affective reactions don’t immediately influence thought. In fact, it’s the instant, pre-conscious pleasure of seeing a well designed page that makes you predisposed to find a beautiful design easy to use—an effect that lingers long after the slower, conscious behavioral and reflective levels of processing kick in and make you aware of how you feel about what you see.
Classical and expressive aesthetics in web design#section4
To explore viewer reactions to site design, user experience researchers need basic aesthetic models that simplify a complex subject, but nonetheless do offer some guidance to designers. These models are often divided into “classical aesthetics” versus “expressive aesthetics.” [7] Users bring context, expectations, and intentions with them, and the extent to which a site’s visual design matches those expectations will strongly influence perceptions of the quality and reliability of information or site interactions.
Classical aesthetics #section5
Classical aesthetics stress orderliness and clarity in design, and use familiar web and print conventions. Research shows that classical aesthetics strongly correlate with perceived usability. This model is most successful when users expect an e-commerce or content site to provide large amounts of information in a well-organized way, with a clear visual hierarchy and conventional headers, subheads, captions, and navigation—think newspapers, sophisticated magazines or e-commerce sites, or reference sites such as Wikipedia. The pleasure and trust that classical aesthetics generate seems to be centered in the higher and slower reflective level of processing. However, classically beautiful sites also generate instant positive visceral reactions as well, and this creates a lasting sense that a site is easy to use.
Expressive aesthetics#section6
Expressive aesthetics emphasize the originality, creativity, and visual richness of the site design. Think about the kind of site that typically wins design awards from Print or Communication Arts. Successful expressive designs generate immediate, positive visceral reactions in most users. It is less clear that this immediate expressive response influences longer-term positive judgments as strongly as successful classical designs, particularly in perceived ease of use. Understanding your audience is particularly crucial in expressive designs: a “successful” design approach for foreign policy wonks may be less successful with fans of the Jonas Brothers.
Expressive and classical aesthetics seem to correlate equally with the general positive or negative attractiveness of a site, but user expectations and context influence longer-term responses. Users expect the aesthetic model to complement the purposes of the site, for example, and thus text-rich content sites seem to benefit more from the classical aesthetic approach. Carefully built designs contribute strongly to the sense that a site is trustworthy and credible, no matter which aesthetic model they use.
Using data in the context of design (and not vice versa)#section7
The visual aesthetics that frame and define content are much more than simply a “skin” that we can apply or discard without consequence. Users react in fast, profound, and lasting ways to the aesthetics of what they see and use, and research shows that the sophisticated visual content presentation influences user perceptions of usability, trust, and confidence in the web content they view. [8] Those user judgments begin within 50 milliseconds of seeing the first page of your site.
Smart graphic design is always some balance of current expressive trends, information architecture, classical layout aesthetics, and detailed research on user preferences and motivations. You should never ignore solid user experience data, but mountains of data won’t auto-magically build you a successful site. Design is a synthetic activity. It can be informed by the results of analysis, but the tools of analysis don’t create beautiful designs. Douglas Bowman’s recent experience as a graphic designer among Google’s engineers who want “data” behind every aesthetic decision is instructive: data and user feedback are always important components of good design, but they are never its sole ingredients.
References#section8
[1] Norman, Donald. Emotional Design. New York: Basic Books, 2004.
[2] Nielsen, Jakob. Eyetracking Web Usability. Fremont, CA: Nielsen Norman Group, 2006.
[3] Nielsen, Jakob. Eyetracking study of web readers. Alertbox, 2000.
[4] Lindgaard, G., G. Fernandes, and C. Dudek. “Attention web designers: You have 50 milliseconds to make a good first impression.” Behavior & Information Technology, 25:2 (2006): 115-126.
[5] Tractinsky, N., A. Cokhavi, M. Kirschenbaum, and T. Sharfi. “Evaluating the consistency of immediate aesthetic perceptions of web pages.” International Journal of Human-Computer Studies. 64:11 (2006): 1071-1083.
[6] Gladwell, Malcolm. Blink: The Power of Thinking Without Thinking. New York: Little Brown, 2005.
[7] Schaik, P., and J. Ling. “The role of context in perceptions of web pages over time.” International Journal of Human-Computer Studies. 67 (2008): 79-89.
[8] Stanford Persuasive Technology Lab. “Stanford Guidelines for Web Credibility.” 2004.
I think by viewing Jakob’s site (http://www.useit.com/) we can see what happens to a design when it’s controlled by a usability expert and not a web designer. The site looks horrible and does nothing to make me want to read it further. It also looks untrustworthy, like some geocities site thrown together.
This article reminded me of a psychology textbook I had in college. The textbook actually explained the psychology behind its layout, specifically why they incorporated a lot of images with the text. They found that people would associate the image with text they read, and they would be more likely to recall the information they learned if they could picture the layout of the page and the image.
I think the same theory can apply to web design, and most people with content on the web want it to be remembered. Obviously, loads of extraneous images will have a negative effect, but a few well-placed and meaningful images can make a site more memorable.
Patrick – awesome article.
Target audience can have a hue impact on this. But I believe this is why the homepage of a site can be different than the primary content pages. If you have ‘milliseconds’ to engage the reader and communicate the essence of the site a large graphic representation can be most important. Once you’ve engaged the visitor and drawn them in the content areas can be less reliant on the visual impression. Apple is great at this. Their homepage has minimal content information but it makes a huge visual impact on the user. Once in the site the content takes over.
I’ve thought a lot about this in the past couple of months because it’s difficult to convey to clients. The research results are very similar to trade show booth design. You have to grab attendees attention immediately (graphically), but once there its the products and people (content) that hold them there.
It seems to me that to say that the visual design of a website is a waste of time is to say that there is no communication factor in images. I believe that the study done in Canada that says that a person can tell whether they like a website in less time than it takes to blink an eye demonstrates the communication factor of images.
Great article! It reminded me of a discussion I once had regarding the evolution of the human smile, and how “flight vs. fight” instincts in humans were often based on visual body language cues. While I don’t recall the exact reason for human beings smiling, I definitely feel the premise applies to your article. While it might take a visitor at the edge of the cave several minutes to explain the reason for the surprise visit with gestures, drawings or other forms of communication, a smile has somehow become the human visual indicator for “friend” not “foe”. Our facial expressions communicate at that visceral level, thus leading me to believe that visual cues play a critical role in how we interpret the world around us. After all, we were relying on visual cues before we had the benefits of the written word. Just think about the cave paintings of Lascaux, France.
http://en.wikipedia.org/wiki/Lascaux
Here is a reference on the origins of the human smile:
http://www.madsci.org/posts/archives/2000-02/950723950.Ev.r.html
Explaining the various psychological responses and how they play a part in design is a terrific topic for discussion! I often lecture on similar topics to my Web II class when discussing structured design and usability, but you beautifully argued for something I’ve always felt was lacking in many of the “studies” done today on tracking user’s behaviors – affective reactions in relation to data. Bravo!
@ Neal G
I just went to Nielsen’s site. Wow! That’s a ’90s Geocities / university bulletin board nightmare.
This article is a great example of the scientific approach to evaluating web design that has been developing in the past few years. From research done in the past, I have gathered that users initially pay most attention to whatever is in the top left hand corner of a website, whether it is visually appealing or not. Although I agree that visual appeal does play a part in a user’s overall opinion of a site, popular websites like Craigslist prove that an organized, aesthetically pleasing website is not necessary for it to be popular.
I couldn’t agree more with the idea of Prima Facie, and also the whole 50ms mindset. I focus only on those attributes when developing UI. Tendencies to follow trends are always futile. The best web designs existed before the time of Shakespeare. Think about it. The way a person’s mind doesn’t change, and the trends that surround us don’t improve our ability to lead good lives. The thing that does, and the same thing that allows a better user experience is the basic underlying science.
It all starts and ends with visuals. In today’s world the difference between a very successful site and an average one could be a few lines of CSS..
Thanks. That’s all I can really say.
As a creative / designer I find myself increasingly put up against the wall by all these “experts” who seem to be infesting our industry, all of them trying to back up their claims with reams of data, and none of them having the first clue about aesthetics.
In short, design adds value, it adds relevance, and it is integral to the successful communication of your message.
People like Jakob Neilsen would probably like to force us all to read text only webpages. Personally, I think engineers should keep their views on aesthetics to themselves.
Thank you thank you thank you; I LOVE this article. As someone with education and experience in both engineering and artistic areas, I see plenty of “fail” designs on both sides. Ones put together logically according to the engineer’s mental model and not that of the intended user and ones which are beautiful to look at and a nightmare to use. The failure in both cases is often a lack of “classical aesthetics.” The engineers/usability experts offer data-driven insights into what the users NEED for understanding; the artists/designers offer aesthetic insight into what the users WANT for their happiness. (Of course it’s really not that black & white, but hopefully you get the point…)
Also, ugly obviously doesn’t always mean “fail,” as demonstrated by Craigslist, because you have to take into account user expectations. What is Craigslist replacing? Newspaper classifieds, which are really ugly, but Craigslist wins because it offers far more than the hardcopy version.
You make a good argument about the value of an aesthetically pleasing web-site and I agree with your premise. I think many designers have dealt with people who underestimate the value of a well designed site. But, my experience in HCI has verified your point rather than exemplified the dichotomy that your article implies. My background is in both design ( art and graphic design) and development (programming and HCI). In my HCI classes the professors have stressed the importance of a visually pleasing site and so have many papers in the field of HCI ( as your citation of Fogg and Tseng at Stanford shows). I think one difference between HCI and design is the definition of what a well designed site is. I think designers have a much higher professional standard of aesthetics than developers do, but shouldn’t we expect that.
Last year a colleague went to a Marketing Pros conference. He came back impressed by a speaker from a company called Eight by Eight, who uses extensive eye tracking studies to track visitor behavior. The findings suggested that all visitors reacted the best to 3-column layouts. The colleague made the case that all web designs we did from here on out should be 3-column layouts. I was skeptical, but willing to keep an open mind.
I then looked at the company’s website and horrified. The design was the visual equivalent of nails on a blackboard. All credibility instantly out the window for me.
Great article. I’ll be passing it along.
I read the article carefully and enjoyed it. It’s valuable and I’m recommending it.
Also, I recalled other article I read many years ago.
An article thath changed my vision about the usability stuff in general: an epiphany.
As of then I was looking for the usability touchstone in the graphics layer of the web UI and Dick Berry taught me, with an iceberg analogy, that a great deal of the sense of usability is under the water.
The article is still there, and I recommend it, even after so many years. IMO it is to be read together with Patrick’s:
“The user experience – The iceberg analogy of usability”:http://www.ibm.com/developerworks/web/library/w-berry/ , by Dick Berry
A correlation between design and usability appears to be completely valid.
From the site’s standpoint, careful design of the visuals usually comes together with good interaction design (in skort: the functionality of the site with CSS turned off) because of the target quality level of the site.
From the user’s standpoint the same is valid: “Hmmm … if the graphics are good then everything will be designed that well!”
After having opened thousands of sites, users recognize the good ones as fast as Patrick says.
The sense of _betterness_ that the good visuals convey influences the user’s general perception of the whole UI.
Fantastic article. I will definitely keep this one handy for refuting some of the Nielson die-hards out there.
@mediacontour re: Craigslist – there is definitely something to be said for being first to market in that kind of situation as well. I can only imagine how much more I would use that site if it was well designed.
Creating world-class web sites requires mastery of many elements. Good web design isn’t easy, and articles like this are important reminders that as web designers and developers we need to continually educate our clients about what it takes to do it right.
Visual design matters. Thanks for making the point so eloquently.
Don Norman’s book “Emotional Design: Why We Love (or Hate) Everyday Things”, referenced in your article, has a wonderful story about automatic teller machine design and usability. The study cited has an awesome conclusion, which is (as I recall) that aesthetically designed interfaces make people feel good, and that the positive emotion gives them the will to work through minor problems they may encounter, ultimately resulting in a more users completing tasks successfully. Very interesting. A highly recommended read. (Even though it largely addresses the design of physical objects, the majority of concepts discussed by Mr. Norman can be applied to web and user interface design.)
A truly great article. I also agree with the first comment posted regarding Jacob’s site.
Thanks very much!
Nielsen’s Site is very boring. Viewers will never take interest visiting his website, surely content is king but you have to make it viewer friendly like adding some images and videos.
@mediacontour
Based on Patrick’s article, people visit a site like Craigslist to do a specific task. Because of this, looks are not so important.
If you look at “Warren Buffet”:http://www.berkshirehathaway.com/ ‘s website, it certainly follows the text is king strategy. Looks primitive, but loads up fast, and simply and clearly presents its data.
Due to the lack of visual masking in the short presentations, the results from the two studies that claim impressions are made in tens of milliseconds are highly dubious.
The visual system has a dedicated buffer and it’s guaranteed that users responses were influenced by processing which occurred across 100s of milliseconds. The only way to reduce the impact of this buffer is to display a masking stimulus following the stimulus of interest.
Sidenote: Early psychology experiments used a complicated physical contraption called a Tachistoscope to control very short duration timing. Modern psychology experimentation software use low level display parameters to synch screen updates with the hardware refresh rates.
This doesn’t jeopardize the general message of the article, but I hate to see research used to improperly promote a sensationalist headline.
More at http://surfmind.com/muzings/?p=81
Great post! Definitely worth sharing.
Despite what one might think from reading other comments, the debate is not graphics vs. text. Skilled typesetting can render text-only pages both beautiful and graphical. (Clearly not Nielsen’s approach.)
Our challenge as designers is to weigh and successfully balance the emotional reaction we seek to elicit against the information that needs to be conveyed. An accurate understanding of context (user, content, market, etc.) is what guides skilled designers to the sweet spot on the classical <-> expressive continuum.
BTW, it’s important to note that the prinicples Lynch discusses are relevant and applicable to a wide array of design projects, not just web design.
Good article, but for those web designers that choose to ignore visual elements, you have to ask yourselves a couple of questions. If people are just interested in data, why do the majority of people have hi-speed internet connections? Why are people getting bigger and higher resolution monitors? It isn’t to see more text data. If that is all they wanted they could use an old 14400 dial up modem and a dusty 600×480 monitor.
People are buying bigger HD monitors and using hi-speed internet connections because people want visuals and they respond to them.
Now, more than ever, a web site has to have compelling, rich, visuals in order to be successful. It is just as important as the copy.
This article ultimately presents a really well thought out and supported picture of two sides of aesthetics in web design – design for impact (expressive) and design for understanding (classical). I love that it pushes against Nielsen’s dismissal of graphics. We’ve talked to test participants who say that they don’t see or pay attention to imagery on an informational site, but we take those answers with a grain of salt. We never believe that people are trying to tell us they want the information stripped of all design or that they want old school web non-design, like Alertbox. Good design enhances the readability of text-heavy content on the web. Nice to have a well-thought out paper that supports what we know in our gut.
I’m currently doing a computer science education and we had the same topic about low level vision. In that class they said the time the brain can group proximity/closure/similarity/continuity was 0.2 seconds or 200 milliseconds. But that was in a crowded screen where suddenly an image appeared and disappeared. I love this kind of magic a website can create in the human brain. It was a hard article for me because i had to look-up some words. But i managed.
… and spies two ladies chatting, sipping their cocktails. One is very attractive (as in HOT!) and her friend, somewhat plain. Guess which one our man goes for? Even if “plain jane” is more interesting, with more context and personality? Why Eve picked the shiney red apple? Maybe it’s the same reason my clients, when asked to show me web sites they like, will pick the ones with the pretty picture and otherwise horrible design (aesthetically and from a usability standpoint).
That’s why its called “eye candy”.
Now, I’ll study Mr Lynch’s web style guide to learn how to better apply makeup to an otherwise “plain Jane” (or, as they say, “put lipstick on this pig and sell it!”)
Eat first- ask questions later.