Where to Stick that Nav: Best Practices in Website Navigation

Confession: my colleague Julia and I are left-leaning web designers.

That’s not a political statement; it’s a best practice in design that acknowledges what scientific research has learned about how readers view your website.

fpattern

This hotspot map shows the F-shaped eye movement pattern. The color is generated by heat – where people looked longest, the color is hottest. The pink hot spots are concentrated in the top left-hand corner of the page. Image courtesy of usability.gov, a US government website devoted to internet usability research.

Eye tracking research has revealed that visitors scan your website in an F-shaped pattern like the one shown at right. That’s not surprising, considering that since the time of Gutenberg, publishers have laid out their text moving from top to bottom and left to right. (Nay, it was earlier! The monks who hand-transcribed English, Germanic and Romance language scripts during the Dark Ages were following this already-established cultural pattern.)

What is surprising is how fast readers’ eyes track through these patterns. The majority of people leave a web page after about 10-20 seconds. Given that people read about 250 words a minute, or four words a second, that means that you are going to be able to communicate only 40-80 words.

If you’re trying to make sales, they had better be good words, and they had better be in the right place. So what’s the right place? Eye-scan research by the Nielsen Norman Group found out that:

  • Web users spend 69% of their time viewing the left half of the page and 30% viewing the right half.
  • Only 1% of viewing time was spent on content to the right beyond the initially-visible 1,024 pixels on a standard monitor.

As designers for Blizzard Internet Marketing, we design with these findings mind. We use best practices such as those below to keep visitors on your website longer, communicate better, and ultimately, improve your website as a sales tool.

Best Practices for Locating Navigation

  • Locate your main navigation horizontally, near the top of the page.
  • Avoid horizontal scrolling. Keep the type big enough to read (at least 14 pixels high) and not more than 980 pixels wide.
  • If you need secondary navigation — or insist on having your main navigation in a vertical orientation — place it on the left side of the page.

Best Practices for Locating Content

  • Keep the main content near the left, indented from the main navigation.
  • Showcase your most important content between one-third and halfway across the page. This is where readers focus most.
  • Keep important content “above the fold” – high enough on the page so that people don’t have to scroll down to see it.
  • Have a clear center of attention. (If you try to make everything important, nothing will be.)
  • Place less important content to the right.
Telluride Rentals website by Blizzard Internet Marketing

Best practices of navigation and content are applied in Blizzard-designed websites such as the one shown above for Telluride Rentals. Although the website is “responsive” and resizes to fit huge monitors, as well as tablets and smart phones, the main navigation is about 980 pixels wide. The main navigation and secondary navigation form the F scan pattern, and the important quick search button is located on the viewer-preferred left side of the page.

 

Comments

  1. That is a great tip particularly to those new to the blogosphere.
    Simple but very precise info… Appreciate your
    sharing this one. A must read article!

  2. useful information, I use the service from Google and watch the behavior of your visitors to know what their interests are and what needs to change for convenience.

Trackbacks

  1. […] they leave? Based on the fact that most people can read 250 words a minute, an average person reads 40 to 80 words before they leave a […]