Communicate Quick: First Impressions Through Visual Web Design

by Luke Wroblewski

While many people still associate visual design for the Web with “making things look pretty”, investing in the presentation layer of Web sites can quickly yield more significant returns. When done right, the visual design of a Web page can communicate key concepts to Web users: what am I looking at, how do I use it, and why would I care to? Of these fundamental questions, one gets asked before the others and often determines if people give your Web site a chance to succeed or not.

What Am I Looking At?

According to the research firm, comScore, Americans conducted 11.8 billion searches in July 2008. That’s a lot of attention coming from a few keywords, and a quick scan of an ordered list of abstracts. Where the rubber hits the road, though, is when people select one of these links and land on the Web page they lead to. There, one of three things is likely to happen:

A person looks over the page and determines it is not relevant to their goals.
A person looks over the page and determines it might be relevant to their goals then quickly scans the page for the information they need.
A person looks over, then quickly scans the page, finds the information they need, and stays awhile.

While these scenarios may seem somewhat obvious, the timing of them might not be. In a 2006 study of users interacting with over 65,000 unique URIs, researchers Weinreich & Herder found that 25% of all Web pages were displayed for less than 4 seconds and 52% of all visits were less than 10 seconds with a peak between 2 and 3 seconds.

Using these metrics in conjunction with our earlier scenarios, this means people generally decided whether or not a page was relevant to them in 2 to 3 seconds and that they deemed a quarter of the pages they encountered not to be. Of the pages that passed the 2 to 3 second test, another 25% of pages didn’t make it past a quick scan that only lasted up to 10 seconds.

While we can debate if this data holds up today (I personally believe the numbers might be overly generous), the fact remains there’s not a lot of time to tell people what they are looking at. In fact, people determine what “kind” of page they are looking at almost immediately.

Visual First Impressions

Within the first moments of encountering a Web page, people jump between the distinct visual areas of the page trying to get a sense of what they are looking at. To see this in action, just follow the blue dot in the eye-tracking video illustrated in figure 1. It shows a user’s eye movements through a Web page they are encountering for the first time. Note the way this user’s eyes move between large areas of the page very quickly.

It’s at this point that people are looking for a sense of the “kind” of page they’ve gotten themselves to. Is it a listings page where they can buy the product they need? Is it an FAQ or forum that might have the answer they want? Have they found an article that could provide the information they are looking for? The visual presentation of a Web page can answer questions like this up front by organizing the elements on a Web page in a manner indicative of its role.

Consider the Forbes Traveler site in Figure 2A. On a 1024×768 pixel screen resolution, it’s difficult to tell what kind of page it is. A travel booking form, a vacation promotion, or an article about bottled water? Turns out it is the third option — an article — but you’d never know by the visual presentation of the page. Contrast the Forbes page to the one from BusinessWeek (figure 2B). No question that this is an article that can be read.

When it comes to first impressions, the question that sits at the top of people’s minds is: “have I found the right kind of thing?” Obviously layout and design choices have a big impact on whether this question is answered clearly or not.

Scan-ability

Once a Web page passes the crucial 2-3 second “what is this” test, its next challenge is getting people to the information they need. Once again, the presentation layer can help by utilizing visual relationships to make key information areas quickly scan-able.

In the example in Figure 3, visual contrast is used to bring relevant pieces of information to people’s attention. The bold green color that frames each section’s headline stands out from the gray background allowing you to quickly jump between important information about the event the Web page is promoting. Because each of the section headlines on the page is rendered in the same green color the transition between each section flows naturally. In less than ten seconds, the visual presentation of this page has walked you through who, when, where, and how much. 50% of pages never get that far.

Figure 3: Start Conference — Figure 3: the Start Conference page uses effective visual design to quickly introduce people to their event.

Though the visual design of a Web page goes much deeper than the points illustrated here, first impressions matter. So when designing Web pages, it’s important to keep the initial functional role of visual design in mind. The visual design of Web pages should:

Set initial expectations by communicating what kind of information it provides.
Provide a way to quickly scan that information in order to locate something of value.
Allow people to immerse themselves in the information they want and explore other relevant information when they choose to.

Meeting these objectives sets up a mutually beneficial relationship where visitors get their goals met and Web sites earn customers. In other words, in our vast search-driven Web, visual design can help people move beyond first impressions and into meaningful interactions.