Get updates on new articles, webinars and other opportunities:

The Good Husband’s Guide To Website Navigation

by Tom Ruwitch

A journalist friend of mine claims that the best writing he reads each week is the grocery list his wife, Franny, gives to him.

The list is organized perfectly, he says. Fruits and vegetables first, followed by bread, then meat, canned goods, cereal, soft drinks, snacks, dairy, and finally frozen food. The list is a perfect road map for his journey through the store.

Without the organized list, he would navigate aimlessly, circling to and fro, doubling back, searching in vain, wasting time, cursing in frustration. That’s how I feel when I visit a poorly-organized web site.

A well-organized site should be like Franny’s grocery list.

It should be a road map that allows you to navigate quickly and logically through your agenda. Sounds simple enough, doesn’t it?

But most web sites I visit are organized more like my wife’s grocery list – the one that has each item listed in the order it popped into her mind. When I read her list, I know we ran out of milk before we ran out of celery, but I don’t have a clear roadmap to navigate the store and shop efficiently.

So, with apologies to my wife, I follow Franny’s lead when I develop web sites.

You are Franny

My journalist friend has a goal.  Get the groceries and get home in time for kick-off of the football game.

His wife Franny has a goal.  Get everything on the grocery list from the supermarket to the refrigerator without creating an aggravated husband.

Everyone wins if the task gets completed accurately and efficiently.

Let’s imagine that I am creating a web site for a local roofing company.

Start by asking three questions:

  • Who are my site visitors?
  • What are my site visitors’ goals?
  • What are my goals for the site visitor?

In many cases, your site will have multiple audiences and the answer to these questions will differ for each. For the imaginary roofing company, I answer as follows:

  • My site visitor is home owners
  • My site visitors goal is to determine:
    • what product and services we provide,
    • what are their options (asphalt shingles vs. slate, etc)
    • why they should choose our company,
    • what are their payment and insurance options
    • and how to schedule an appointment for an estimate, diagnosis or emergency repair. what are their options (asphalt shingles vs. slate, etc)
  • My goal is for the site visitor to:
    • contact the firm for an appointment and
    • or sign up for my mailing list so I can continue to market to them later

Once I am organize, it’s time to think like Franny.  My site should be organized, like Franny’s shopping list, so that the audience can accomplish its agenda with as quickly and efficiently as possible.

A prospective customer searches for roofing companies and finds the following site:

Good Example of A Roofing Website Navigation

What products and services does the firm provide? Easy…Click “Products and Services” to reveal a prominent “Content Index that lists all the services, including available materials. Without reading a word of copy, the prospect knows that this firm handles shingle and slate roofs. Click on “Shingles” or “Slate” and the prospect sees a nice description of the different materials.

Why should the Smith’s choose this firm? Clicking on “Testimonials” to hear from happy customers.

How do I take the next step? Just click “Order an Estimate” to request one or click the “Contact Us” link to get the  number or email.

Every link guides the visitor through the agenda. No surprises. No ambiguity. No repetition.

Compare that site to this one:

Roofing Website Navigation

What kinds of roofing material does this firm provide? Hmm…Maybe the answer is under “Roofing.” Maybe it’s under “Roof Installation.” You have to guess.

Why should the Smith’s choose this firm? Start clicking the links (kind of like aimlessly strolling the aisles at the grocery store). You might find the answer.

Where should you click first on the site below?

Bad Example of Website Navigation

Click “Services” (aisle 3) to reveal a sub-menu that includes “New Roof in St. Louis, MO.” Click that and you jump to a page with copy about the firm’s warranties, followed by a list of roofing materials. Want to learn something about the roofing materials? You’ll find that by clicking “New Roof,” (aisle 5) unless you want a metal roof, in which case you should click on “Metal Roofing.”

A well designed grocery list should allow the grocery shopper to effortlessly and efficiently complete their goal.  Getting the groceries home to the family.  Everyone wins.

Well designed website navigation allows site visitors to accomplish their goals.  No frustration.  No aggravation.

We all know what happens when people get aggravated or frustrated on the web.

Think like Franny.

Organize your website navigation according to your site visitors goals.  Do that, and you won’t send them storming angrily out of the grocery store without the eggs and milk you wanted.



Get updates on new articles, webinars and other opportunities:

Tom Ruwitch

Tom Ruwitch is the founder and president of MarketVolt, an interactive marketing firm in St. Louis, MO that specializes in email marketing. He publishes interactive marketing tips on the MarketVolt blog.


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

  1. Anonymous says:
    February 7, 2016 at 4:57 am

    wow, awesome post.Really thank you! Want more.

  2. Andrew Mooers says:
    December 23, 2011 at 6:21 pm

    Thanks for the thought.. what needs to be covered before the design is cranked out, envisioned. Plug in the goals, who in the audience you want to connect, engage with… folks who can relate with you, your site because it works, saves time, is not confusing.

  3. Collier says:
    December 21, 2011 at 9:09 pm

    I was drawn to your post by a comment on LinkedIn. The grocery list reference was a great hook!
    Upon a careful read, I see it’s a serious post about website navigation. I’ll Tweet it to my fellow Architects for their benefit.

Show Me My Heatmap

A3: @CrazyEgg was one of the best tools I have used to understand what and where users are engaging with a page. #seochat

Matthew Diehl