When it comes to the front end of a website, there are two primary areas that can make or break your online success ... your content and your navigation. You need to have engaging content that speaks to your visitors and addresses their needs and questions. You also need to ensure that it is logically organized, easy to browse, and easy to search. Good navigation functions to both allow visitors to easily find information and to drive visitors to your goal.

SSC-homepage.jpgSmallShipCruises.com is a very useful site offering a large selection of cruises with a variety of destinations, themes, ship types, and deals. The primary goals of the website are to receive individual bookings and individual charters and the secondary goal is ad clicks.

Unfortunately, the current navigation poses some major hindrances for both search engines and visitors.

Navigation Code That Is Crawlable
Not all ways to program navigation are spiderable by the search engines. The search engine bots cannot read the pull down menus such as those used for "Find Cruise By Destination," "Find Cruise By Interest" and "What To Do Before You Go." Nor do they read javascript. While pull-down-menu.jpgusing the form field function to create these pull downs works moderately well for visitors, it can prevent pages on your site from being indexed by the search engines and thus they won't show up in search results.

Fortunately, the top navigation links are crawlable by search engines and many of the website's key pages are accessible through both navigation elements. However, none of the pages under "What To Do Before You Go" are duplicated in the top navigation and will not be indexed.

Your primary navigation links need to be HTML coding in order to be crawlable by search engines. If you want to create drop down menus, hover effects, or other special effects, use CSS.

You can also ensure that all of your pages are easily indexed by creating multiple ways for visitors to reach information. This could include more than one means of primary navigation as well as in-site links within the content.

Navigation That is Logically Organized
There are five primary methods for organizing the pages on this type of website:
  1. Topic - one of the most useful and most difficult organization schemes. Organize information by subject or topic.
  2. Task - this scheme organizes content and applications into a collection of processes, functions, or tasks. This is most appropriate when visitors will likely have a limited number of high priority tasks they want to perform. These are characterized by action verbs such as "find" "book" and "buy."
  3. Audience - an audience-specific organization makes sense when there are two or more clearly definable audiences. For instance, you see this prominently on college and university websites that address "future students", "current students", "parents", "alumni" etc.
  4. Metaphor - metaphors can be used to help users understand the new by relating it to the familiar. For instance, the "folders" and "recycle bin" on your desktop. These metaphors must be familiar to your users, and can sometimes be limited.
  5. Hybrid - combination of two or more of above.
If it is possible to maintain one organization scheme, users will most easily be able to find their way around your website. Consistency in the way you organize and label your navigation is key to good usability.

The SmallShipCruises.com website uses a combination of topical and task-oriented navigation. The top navigation links are topical, while the pull downs are task-oriented. For this site, the task-oriented scheme is probably most appropriate and effective. Virtually all of the website's pages could be organized into the following top level categories:
  • Find by destination
  • Find by interest
  • Find by ship
    • Small ship
    • Big ship
    • Yacht
    • Cruise Lines
  • Book cruise
  • Prepare for your cruise
    • "What to do" pages
  • Learn more
    • About page
    • Charters and Groups
    • Contact
Additionally, the navigation needs to be grouped logically on the page. Currently, there are top navigation links, pull downs in both the right and left sidebars, and additional navigation links in the right sidebar. This makes it very difficult for a visitor to quickly scan the website and determine what information and tasks are available. Navigation elements need to be grouped together visually as well as organizationally. The primary elements of navigation also need to be available on every page of the website. Don't make visitors return to the homepage to browse types of cruises - they're more likely to give up and go elsewhere.

Navigation That Drives Visitors To Your Goal

Perhaps the most detrimental aspect of the current navigation is that it does not come close to driving visitors to the primary goal, which is booking. (Visitors aren't actually booking their cruise on the website; they are submitting a form showing their interest in order to be contacted by an agent.)

While links in the site-wide banner and navigation take visitors to a booking page, there is no way to book when browsing actual cruise options. Say I look at cruises by destination and select Australia. I then get a listing of various cruise lines that go to Australia. I find one that sounds good, and click the link at the bottom of the page to make my reservation. I am then taken to the main booking page, which explains how to book a cruise on the site and provides a list of destinations. Australia is not in that list of destinations. Technically I can still send my contact form choosing a similar location, but this is highly confusing. Especially when the detail pages for the specific Australian cruise in which I was interested links off-site to the actual cruise line where I can also book. So, why would I book with SmallShipCruises.com when I can book with the cruise line itself ... and it is probably easier to do?

SmallShipCruises.com needs to eliminate that middle step of the main booking page. If a visitor clicks all the way through to a specific cruise line destination and then clicks the booking link on that page, they should go directly to the contact form. AND the cruise information should automatically input into the necessary fields.

Your contact form, shopping cart, subscription page, or other goal page needs to be as simple to use as possible to receive maximum conversions.

In Short, Navigation That Is Usable

There are many areas that SmallShipCruises.com could improve to be more successful online including adding more specific content on individual pictures, images, customer testimonials and reviews and ensuring that the website functions correctly in all browsers (it doesn't work well in Firefox). None of this matters however, if visitors can't find their way around the site or if the search engines can't index all of your pages.


June 27, 2008





Jackie Baker is an internet marketing analyst with SiteLogic Marketing (http://www.sitelogicmarketing.com) where she focuses on auditing websites as well as SEO, social media, usability, and information architecture consulting. She comes to the industry from a marketing/PR and website development background. Jackie maintains an active presence online through her blog RegardingHorses.com (http://www.regardinghorses.com) where she shares her love all things equine, particularly therapeutic riding.






Comments(8)

The site needs to a complete design overhaul, it looks outdated and i wouldn't be surprised if it has a high bounce rate due to the slow loading page alone, if the design doesn't already scare you away!

Besides the navigation, the design is a make or break factor as well, and it's a big break factor in this case.

That website, with it's awards, content, etc...would do so much better with a proper design.

There are tons of affordable designers that would love to get started on a site like this, make it a completely WordPress driven for easy maintenance and you're really heading in the right direction.

It's got potential!

A great article. Decent navigation is still too often overlooked, and there shouldn't really be any excuse for that these days.

A couple of extra things for your readers...

In order to check for JavaScript-dependent navigation such as the pull down menus described above, use your browser's security settings to turn off JavaScript. If you can't reach all your lovely content without scripting, then it probably won't get indexed.

Also, it can be useful to review your website navigation periodically if you use WordPress or another flexible content management system. It's one thing to plan out logical and unambiguous navigation when a website is designed, it's quite another to stick to that plan once the website is a year or two old and you've been posting content all the time!

Ed - I agree with you 100%. The website concept has a whole lot of potential, but it needs a design overhaul to improve it's professional feel and usability. Studies have shown that one of the factors that are important to users are a professional design; it lends a good deal of credibility. Unfortunately, I only have so much space to address issues in one article.

George Young - Thanks for sharing that tip on turning off javascript to see if your navigation still functions. This is equally important for visitors and not just search engines, as many users turn off javascript. If that's the case, they won't be able to get around your website either!

Thanks for the advice on the Booking Forms, Jackie. I have shortened the form and eliminated the extra step.

On the advantages and disadvantages of drop-down menus. It was recommended to me by a designer to help make the home page cleaner and he said it would be okay for search engines. You say will not be searched by spiders. Does anyone have experience for and against? any studies? I would love to hear other comments on this.

One other problem I am trying to solve: how do you do alternate text for pictures using Microsoft Front Page?

Although our design is not modern, our content is to be found nowhere else; in fact so unique we were featured in Travel & Leisure Magazine in June and on the Today Show last week. Guess I'll spend the weekend looking some more at design!

Editor, SmallShipCruises.com

Shirley,

There is nothing wrong with using drop down menus as long as they are coded correctly. What you are using is not drop down menus. It's a form field acting like a pull down menu, and it is not read by the search engines. The problem isn't the drop downs, it's the way they are being created. The best way to create drop down menus that are user and search engine friendly is to write them in HTML and design the functionality using CSS. It is crucial that these menus are redesigned to be search friendly.

However, it's fine to use drop downs if they are created the right way. I agree, they are the best form of navigation for the information you are offering.

I'm glad to hear you eliminated the extra step to the booking form ... that will go a very long way towards cutting down confusion and increasing your conversion rate.

@Shirley

No question your site has great content, but without a good design, you're putting off more people then you think and with a better design you will definitely see significant improvements in your conversion rate.

You've got top notch content, now it's time to get a top notch design! ;)
Hire someone to do it for you, for under $5000 there is surely someone that could make something nice for you.


Shirley, I can see the competitive advantages you have with your content and business concept and why you have been featured but they are very different issues from website design. If I were looking for a cruise and landed on this site, I would bounce straight back out because it hurts my eyes! So, the potential is great. Good luck. Ewan Kennedy.

I'm speechless as if I can't add anything for you covered a lot of area in creating our websites navigation, you really know what you were doing and I really amazed with it.. I'll keep this one in my mind.

Comments closed after 30 days to combat spam.


Search Engine Guide > Jackie Baker > Site Clinic: Navigation Usability Can Make Or Break Your Website