On Your Website, What Do People Look at First?

Your website is the primary billboard for your business, so you want it to be appealing.

But if you’re like most marketers, you wonder exactly what people look at when they visit your site. Do they see what you want them to see?

According to David Zheng at Crazy Egg, most users are on a website for fewer than 15 seconds before they click away to another site.

It follows, then, that you’ll need to work fast to capture their attention.

“Answer (these questions): ‘What is unique about your business? Why should I buy from you?’ This is missing from many business sites because the owners haven’t done the strategic thinking necessary to figure that out.” – Alice Bredin

The truth is, a cookie-cutter version of competitors’ sites just won’t cut it. Your site needs to give users what they expect and inspire them to act.

Easier said than done. Just how do you accomplish this?

If your unique message isn’t obvious on your website, follow Captain Jean-Luc Picard’s example and “make it so.” (Check out these brand story suggestions to get started.)

Of course, even the best message can get lost in a confusing layout. That’s why you should know where people are looking when they come to your website.

Let’s discuss eye tracking, heat maps, and Google Analytics.

The Famous F-Pattern

Most marketers are familiar with “F-pattern” studies that show how people’s eyes scan a web page.

The following F-Patterns are typical:

F-pattern examples, eye tracking, web design

Image Source: Adwords Magic

Typically, English readers will scan the top of a page from left to right to create the top stroke of the ‘F’ pattern.

They then scan the left side for other key information and across horizontally for things like subheadings and images.

Alternately, some users gaze from left to right and back down at a reverse angle before moving across from left to right a second time. These users are demonstrating the ‘Z-pattern.’

What’s the best way to take advantage of these patterns on your website?

According to the experts at Crazy Egg, the purpose of your page should determine its design.

For example, an F-pattern may be the best guiding principle when designing a homepage.

Conversely, a Z-pattern can be effective for shorter pages and simple designs:

Z pattern example via Crazy Egg

Image Source: Crazy Egg

Now that we’ve touched on F- and Z-patterns, let’s talk about heat maps.

What Heat Maps Reveal

The F patterns shown above are examples of heat maps—tools that monitor activity in a physical or virtual realm.

For instance, city planners may use heat maps to help monitor and eliminate traffic jams. Web developers and marketers use heat maps to monitor screen activity, usually in the form of cursor movement and clicks.

In heat maps, yellow, orange, and red areas indicate greater activity than blue or green areas:

Eye tracking heatmap, your website, Banyan blog

Image Source: Wikipedia

Let’s say you implement a heat map on your website. Not only will you see where visitors are hovering and clicking, but you’ll also notice what they’re not clicking.

Could be, a link to your service page doesn’t get clicked a lot, but a photo illustrating that service does.

If web users are clicking your photo, the answer is obvious: why not embed your service-page URL behind the photo?

Seems like a relatively painless way to optimize your site for more conversions.

Heatmap example, King Kong

Image Source: King Kong

To learn more about what eye-tracking studies reveal, read this Gregory Ciotti article.

Where to Find Other Data about Your Website

As helpful as heat maps may be, they don’t tell you who is visiting your website or why. They also don’t tell you the sources of your web traffic.

For that data, you need a different tool like Google Analytics (GA) or a paid marketing tool like HubSpot.

Google Analytics, your website

Image Source: My Internet Marketing Partner

Google Analytics may seem intimidating at first, but it’s a huge repository of valuable business information. And it’s free!

Here are the most important things GA can tell you about your website:

  1. Conversion data for new/unique visitors – shows what new users are seeing as opposed to returning visitors.
  2. Conversion data for returning visitors – singles out return visitors and work to increase their conversion rates.
  3. Primary sources of traffic – reports on visitors who search for you specifically, find you via search, or come via referrals.
  4. Typical web interactions – monitors visitor behavior in the form of time on a page, comments, reviews, and so forth.
  5. Duration of web session – shares the average session time for visitors on your site (higher time=more relevance).
  6. Bounce rate – shows how many visitors leave because of slow load times, confusing design, and other factors.
  7. Page views – reveals how often web visitors are viewing a given page (or pages) on your site.
Moz, Google Analytics, beginner's guide

Image Source: Moz

According to Jodi Harris of the Content Marketing Institute, these are the most important GA reports to use:

  • Audience reports (see above) show you who’s visiting your site and how they’re interacting with your content.
  • Acquisition reports point out the sources of your traffic and the search terms visitors are using to find you.
  • Behavior reports reveal actions your visitors take and how engaged they are with your content.
  • Conversion reports tell you if your website content is achieving the right results.

If you have never used GA, check out Moz’s Absolute Beginner’s Guide to Google Analytics.

Is Your Website Easy to Navigate?

We’ve all visited confusing websites that either tell us too much or not enough about a brand.

Then there are the visually-busy examples, like this travel site:

 

example of confusing website, website design, hard to navigate website

Note: This website features not one, but two top-level navigation menus—one on a white background and the other in a series of red tabs.

Underneath, you’ll also find a call-to-action banner in burgundy and an entire side menu of travel categories.

Is it the worst site we’ve ever seen? Not by a longshot. But it’s still overwhelming.

You have only to think of personal experiences online to understand why your website should be easy to navigate.

For instance: Are your menu categories clear and easy to find? Is your font size legible? Are you using breadcrumbs (text links that show users exactly how they got to the current page)?

These are only a few structural elements you should consider.

Why Less Is More in Your Website Design

Now, let’s look at a website that’s the opposite of visually busy:

Minimalist website design

Image Source: J.P. Morgan Trusts

This site perfectly illustrates the “less is more” principle.

Instead of showing a typical navigation bar, J.P. Morgan’s website features grayscale navigational buttons (top and bottom right) and an interactive dragging tool (orange arrow) that launches questions visitors may be asking.

Is this design for everyone? Probably not.

However, by paring down viewers’ choices, J.P. Morgan increases the likelihood of click-throughs. Plus, its interactive features may keep viewers on the site longer than otherwise.

Here’s another site that’s also easy to navigate:

Shopping in Birmingham, website design examples

Image Source: Shopping in Birmingham

Remember those eye-tracking studies? Shopping in Birmingham clearly understands the value of the F pattern by putting a search bar in prime territory for clicks (top left).

Then there’s a user-friendly menu for fans of the traditional navigation bar. Users can also click the call-to-action button under the header to see a shopping directory.

Quick, easy, and obvious. This site is a win-win.

Finally, let’s talk about one of the most important elements on any web page: the call to action.

The Captivating CTA

Take a look at your current website. What does it ask visitors to do?

Without a great call to action (CTA), your website—no matter how nicely designed—is just digital wallpaper.

“Your call to action, whether it’s a lead gen form or click-through button, is arguably the most critical element of your page. If there’s no call to action, your visitors can’t convert.” – Unbounce

Take your home page. Depending on your focus, you might place a call to action near the top of your page, within the ‘F pattern’ zone.

On the top of its homepage, Netflix places a CTA in two separate, but distinct places:

Netflix homepage example

Image Source: Netflix

Netflix also demonstrates the power of actionable verbs like “see, watch, cancel, join and sign in.”  All are calls to action, but those shown in red are the primary CTAs.

How Visitors Convert on Your Website

For every page on your site, ask yourself what would be most motivating to your target audience.

Your highest-converting CTAs might include:

  1. Make an appointment now
  2. Log in
  3. Get started
  4. Try it for free
  5. Sign up now
  6. Join millions of others
  7. Claim your free trial
  8. Click here to begin
  9. Go premium
  10. Give a gift
  11. Donate here
  12. Find out how
  13. View services
  14. Register today
  15. Grab the template
  16. Download this form
  17. Buy now
  18. Add to cart

In the Barkbox example shown below, designers have used color and illustration to subtly influence the viewer. Check out the buttons on the top right side of the menu.

By leaving the ‘login’ button white, the turquoise ‘get started’ button (a primary CTA) stands out.

The hero shot is overlaid with another primary CTA ( the ‘view all themes’ button), which is left white to stand out against the turquoise background.

This visual hierarchy also extends to the ‘chat with us’ CTA (see the dog illustration, bottom right).

Barkbox homepage, CTA examples

Image Source: Barkbox

It’s easy to see that the Barkbox folks have this whole CTA thing down.

 

Want to try a more informal option? Depending on your business persona, you can also use first-person CTAs:

  • Show me how
  • Yes please; send me the coupon
  • Hit me up!
  • Send me specials now
  • Yes, take me there
  • Subscribe me
  • Give me freebies

The Best First Impression

Remember, even little changes can make a big difference on your website.

Even if you never perform a heat-map study, you can still follow best design practices and put your most important information close to the top of each page on your site.

Then, track the results via Google Analytics or a similar tool. Pay attention to the ‘less is more’ design principle. Optimize your calls to action.

That’s the path to a great first impression!

 

Need advice about your online presence? Contact us anytime—we’re happy to help.

 

Subscribe to our Newsletter

Want to be even more personal, relevant, and connected online? Get Banyan’s fresh tips every week in your inbox!

Share this post with your friends

Shopping Basket