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:

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.

Figure 1: Squidoo
Figure 1: Squidoo page

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 1024x768 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.

Figure 2A: Forbes Traveler
Figure 2A: Forbes Traveler

Figure 2B: BusinessWeek
Figure 2B: BusinessWeek

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:

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.

Resources:

Want to Learn More?

At last year's User Interface Conference, Luke's session on Visual Design for the Web was our highest-rated session. Many attendees told me how awesome his session was. We still have a few seats left for Luke's session this year, which I promise will be equally as entertaining and informative. Check out the UI13 conference site for more information.

Share Your Thoughts with Us

Have you changed your site's design to give a better first impression? What did you do? What challenges did you face? We'd love to hear your experiences over at our UIE Brain Sparks Blog.

 Share this article with a friend/colleague.

Join over 25,000 subscribers to UIEtips, our free email newsletter


  • Original articles by Jared Spool delivered to your inbox
  • Podcasts that help to improve your UX skills
  • UX Insights from the brightest minds around
  • Awareness of all things UIE