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.

 

Best of Online Marketing from VRMA

This post began as a presentation given at two recent Vacation Rental Manager Association conferences.

The goal was to create a list of great online marketing examples to help other vacation rental managers plan their next great website or marketing effort.

So without further ado…

A  Showcase of our favorite Online Marketing examples by VRMA Members

Your Website matters, especially your booking engine.

We looked at 10 vacation rental websites and found that 73.4% of the guest’s website interaction happened  in the booking engine (measured by pageviews).

Certainly it is worth it for the average VR manager to pay close attention to the usability and overall effectiveness of their booking engine.

Next we used BlizzardTracker to determine that in March 2011, 68 vacation rental manager websites averaged a 36% bounce rate:

Of those websites, 29 were engaged in eCommerce with a .42% conversion rate on average.  In other words, they got 1 online booking for every 233 visitors to their website.

Anything you can do to get that bounce rate down and that conversion rate UP is good.

Here is a sample sales funnel where you can see, for this particular VRM, a .68% conversion rate, with the sales funnels starting at the property page.  (At bottom of the chart it shows a .63% funnel, but that is starting from the search results page, which was cropped from this image.) [Read more…]

New BlizzardInternet.com Website… Going Orange

After months of Blizzard being  its own client, BlizzardInternet.com is finally rolling out a new and improved website!

The dominant feature of our new design is the vibrant orange color and finally, the integration of our new logo!  We decided on orange mostly because I like orange – I am the boss after all.

The reality is, we all wanted and needed a fresh and contemporary site that effectively describes what we do and who we are.

During the redesign process we focused on 8 key elements we felt would make the site: more engaging, easy for visitors to understand, increase leads, and increase profits directly from the site.

1. Feature Client Reviews.
Everyone at Blizzard believes in the power of testimonials and are proud that our clients are so eager to recommend us. So integrating client reviews, quotes and stats into our site was a major goal.  The testimonials have a unique design style and are sprinkled throughout the website.  We also were fortunate enough to be able to record a few video testimonials which are featured on select pages.   The new “Real Results” section on each page (in the lower left corner) adds simple and small textoids intended to highlight some of the results our customers are achieving.

[Read more…]

Google Browser Size Tool: Visualize Your Website

Screen Resolutions and monitor sizes seem to be going in two different directions.   Obviously, mobile is growing quickly.  Less discussed has been the slow increase in average screen resolutions.

How does you website look in different resolutions?

Check out the Google Browser Size Tool which will help you visualize your website for different users.  After looking at several websites in this tool, I concluded that the height of the design was more often a problem than the width.

google-browsertool

Optimizing Your Photos for Image and Universal Search

I read a great article today over at StateOfSearch.com on optimizing images for search engine rankings.  It was put together nicely and a great resource for “how to” tips on making your images rank in Image and Universal search.

The tips aren’t all that different from what we’ve been saying for awhile now, validation is always nice, but putting all the tips together makes the underlying theme of image search apparent: ALWAYS use keywords where you can.

As with most things ranking – keywords are king – and should be chosen for images with as much thought as they are for the content on your page.  Start your image optimization with fresh keyword research.  I’d take this a step further and see if anyone is searching for your keyword AND image keywords appended together, such as later that day...{Keyword} + photo, photos, pictures, pic, pics, image, images, etc.

Once you’ve found your keywords, assign them to the images you have on your website.  You don’t want to overdo it – so maybe one or two keywords per image.  After you’ve assigned them – you can do this by listing the URLs and the photo descriptions in Excel – start optimizing the photos.

Here are the steps according to the comprehensive article cited above: [Read more…]

Best Websites to Discover Design Ideas and Get Inspired

The worst way to get inspiration for your own web design is your competitors!

Here are some great websites to turn to for inspiration:

24 Beautiful Hotel Website Designs to Get Inspired

Checking in Hotel Web Design: 50 Cosy Hotel Websites and Trends

90+ Remarkable Examples Of Bold Colors In Web Design

50 Excellent Corporate Website Designs

35 Beautiful Water-themed Web Designs for Inspiration

30 Beautifully Textured Web Designs

Web Design Trends: Testimonials Design

20 Super Creative Website Menus

Web Design – Pricing Tables [Read more…]

5 Invisible Best Practices for Your New Website

perfect_by_designWorried that your new website is missing a few important details? Learn about 5 “invisible” best practices that will help your new website.

Before you roll out your new website design, talk to your website designer about each of these.  Make sure you have implemented the following 5 best practices:

404 Page Setup – A 404 error page is a “whoops” page that your website visitors see when they go to a malformed or non-existent web-page.  Make sure you have 404 page that fits the character of your website and shepherds all those lost visitors back into your website.  With a new website, you are bound to get a few “whoops” visitors.

  • Tip: consider monitoring this page to see if there are any major sources of traffic that need accounted for.
  • Benefit: it is easier to keep a visitor than get a new one!
  • Learn More about 404 pages

301 Redirects - When you build your new website, your page names change (ie from www.yourdomain.com/oldpage.htm to www.yourdomain.com/newpage.php).

This confuses the heck out of search engines and can cause lower rankings and lost visitors.  Make sure you set up a 301 redirect for each old page of your website to a new page. [Read more…]