Designing the First 8 Seconds

8seconds

The adage that visitors judge a website in a second may be questioned, but the lesson is not. The first few seconds create expectations on the subject matter at hand. Businesslike or casual, helpful or self-serving — especially on sites optimized for mobile devices, visitors infer the site’s value and professionalism at first glance.

That glance, however, is not a single moment. The first thing a visitor sees influences their opinion of a site. But so do the second, third and fourth. When used well, designing a visitor’s initial experience can keep him or her on the site longer and provide a more positive experience.

Judgement at a glance is not an obstacle. It’s a starting point.

Curated experience

Last month I showed a prototype website to an unbiased reviewer. I watched her expression as she looked over the home page. Her eyes blinked at the photo, darted left-right-left while reading the headline and opening paragraph, then made wider sweeps as she took in other elements on the page. She never reached the end. But she did reach the middle.

Diagram showing where the tester looked

The home page was arranged like the mockup above (albeit with real content). Her viewing experience followed a sequence of events.

  1. She looked at the photo. Like the example here, the real photo didn’t hold attention. Distracted by the rest of the page, the reviewer quickly moved on.
  2. The headline took moments longer to read and interpret.
  3. She read the paragraph under the headline.
  4. She asked, “OK, what am I looking for?” without reading the second paragraph. At that point, I knew I’d lost her interest as a visitor to the site; now she was just trying to be helpful.

A quick visual and a short phrase in large text — these two elements comprise the “hook” during which most readers decide if they want to read more. Conventional wisdom suggests that a killer hook — the photo or large headline — are keys to grabbing visitors’ attention. But when thinking about time, the dominant elements are not the most important. Designing with time in mind means making sure that each step of a visitor’s experience becomes a hook to the next part.

Diagram showing at what point the tester became disinterested. It didn't last long.

Above: The photo and headline vie for attention with size and placement. It’s the paragraph of text that creates a definite order of events. Regardless of whether the photo or headline get attention first, the paragraph of relatively small text will be read last. Blocks of text such as this are where both visitors and site creators lose interest.

After her initial look, my reviewer did not read the navigation, having been asked to evaluate this one page. Nor did she read the site’s title and tagline. The paragraph did not pique her interest or encourage her to want more.

Leading the Eye

The order in which people are exposed to information impacts how they perceive what they see. Sequential art, for example, uses framing and order to illustrate time.

Same photo pulls back to tell a story

Frame 1: By itself, an image of clasped hands conveys a gesture of affection — more emotion than fact. Visuals are open to interpretation.

Frame 2: Pull back and we’re introduced to two sisters. Additional visuals puts the first image in context.

Frame 3: Finally we see the two children taking a walk. What started as a gesture turned into a story.

People follow otherwise static visuals from point to point, taking in a bit at a time. Web design, however, is not linear. Like tour guides, design balances between leading visitors through information and letting them choose their interests — that support the site’s concept or theme.

People looking at the photo above see the people in the middle first and notice the out-of-focus road last. Likewise, web design offers viewers a path to follow.

Comparison of photo composition to website layout

The path design creates depends on possible destinations. In most websites, where visitors’ eyes travel is an open question. Visitors could wander anywhere. But certain elements are more likely to be noticed first, second and third.

Diagram showing likely eye paths

Above: People are most likely to follow the orange arrows. After that, their attention wanes. There are too many other things to look at and no clear path to follow. People are likely to wander anyway, but design can lead them to a destination that will benefit the site — say, the “buy now” button… except that “buy now” is lost in the footer.

To understand what’s happening here, we need to make an inventory of importance.

Setting priorities

Removing elements from layout gives designers a better idea of where focus should go. The initial design set size and contrast of text and the photo depending on how they fit together — important, to be sure, but the result lets people wander aimlessly.

Chart showing too many levels of priority.

Above, three prominent elements compete with four lesser items. A better visual hierarchy would create more difference between major and minor information.

Chart showing manageable degrees of importance

First, we create a definite hierarchy of visual importance. Size, contrast and location hint at where people should go. Above, the page de-emphasizes minor elements like the navigation, title, and secondary text. At the same time, it plays up three points: The photo and headline remain, but a large “buy now” button gives people a third point of visual interest. Ample space around the button gives it less competition, and its size gives it the same importance as the headline and photo.

Diagram of an improved eye flow.

All design can do is hint, really. Ultimately people decide what to look at. But the right visual cues can guide visitors around.

If the site has a clear goal, say, “demonstrate that Acme Corp. is reputable” or “make people believe they must sign up,” the designer’s job becomes much easier. Every avenue that a visitor may take should, eventually, lead to the conclusion.

The first eight seconds

No one stays at a website forever. But good sites provide an experience that prolongs visitors’ stays. If content and design guides people from point to point, holding their interest as they advance, then visitors will form educated judgements rather than knee-jerk reactions.

0.0 – 0.9 seconds: Impression. Visitors should learn what the site is about, intellectually and emotionally. One second is enough to absorb a color scheme and the general shapes: typography, borders, curves vs. straight lines. Clarity is paramount.

1.0 – 2.9: Elevator pitch. Visitors start reading. This is where a single sentence (or single phrase) summary of the site’s intent comes into play. Solid copywriting is critical.

3.0 – 4.9: Choice. This stretch is a transition between absorbing tone and evaluating worth. Visitors begin to decide if the site is worth their time. The decision process is ongoing. Secondary headings, keywords and informative imagery — like thumbnails that take a moment to process mentally — must keep readers interested.

5.0 – 8.0: Trust. Visitors find one part of a web page that interests or entertains them. At this point, the rest of a page actually hinders the experience by threatening to distract visitors from their tentative path.

Conclusion

Thinking of design as an ongoing conversation is the difference between good looks and good user experience. Understanding, from the beginning, what the main point of the site is and what you need to the visitors to focus on, will help you to design a site that keeps people engaged. The longer individuals stay on your website, the greater the chance they do what your design set out to accomplish.

Be sure to design your first 8 seconds. They could be the difference between your site becoming everything you dreamed it could be, or just another site taking up space on the web.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Ben Gremillion

Ben Gremillion started playing with pixels in the mid-1980s and building websites circa 1997. When not hiking or stargazing, he crafts HTML and CSS, spends a lot of time debugging PHP and MySQL, ponders the details of user experience, and injects bits of personality into staid websites. He blogs about his lessons learned in web design at benthinkin.net.

Comments

Comments are closed.