hide me

What’s the Plan? A Guide to Effective Website Navigation

What’s the Plan? A Guide to Effective Website Navigation

Co-author, Rebecca Dirkse

Are you the type of person who likes to skip brainstorming and outlining and simply jump into your project or writing? That process of working can be a real headache if there is a lot of content to discuss and organize. The same is true for designing websites.  The best way to approach designing a website is to plan! The first and perhaps most important step to creating an efficient and user-friendly website starts with careful research and brainstorming.  It is crucial to write and/or sketch out your ideas before heading to a computer.  Unfortunately, many designers skip over this step, jumping straight into the project hoping it will turn out a success. Thus polluting the web with mediocre to some very bad websites.

 

Websites can be very complex and no two are the same, so it is important to treat each one individually and plan accordingly. An efficient and well-functioning website should be an enjoyable experience for its users.  Below are a few easy tips and advice that experienced web developers use.  It may seem like common sense, but hey, surprisingly people don’t always use their common sense, so check it out!

 

1) Establish a clear goal and objective.

 

Be sure to know the objectives and goals you or your client is trying to achieve.  It is also very important to know who the audience is and what they are looking for.  Be on the same page with your client in terms of understanding the goals for the website and what is realistically achievable before starting any design. This will save you time and stress by preventing any mistakes from happening before the site is made.

 

2) Structure the content.

 

Use site mapping to define the structure of your site.  A site map is a collection of your ideas and the content that you will organize on your site. Scottie Claiborne claims in his article, Effective Site Navigation, that when planning your site or site redesign, think about the structure first.  It helps to physically map out these pages. Use index cards or post it notes, write a page topic on each card, lay them out and organize them into groups. Once satisfied with your plan, you will have yourself a site map and will be ready for the next step; wire framing.

 

Use wire framing to come up with the skeleton of the site. According to Andy Budd, creative director of Clearleft (clearleft.com), wire framing is similar to a director’s storyboard or an architect’s blueprint. There are two different (and necessary) ways to approach wire framing.  The first is a design free wire frame. This allows to focus on the purely functional aspect of the site, keeping in mind effective and consistent navigation. The second is a structure-free wire fame.  This allows for focus on the aesthetic aspect of the website. Combining these two wireframes will result in a very effective skeleton of your site (Grannell, 10).

 

3) Use Effective and Efficient Navigation. 

 

In his book Designing Web usability, Jakob Neilson stresses that online navigation must answer these questions:

 

– Where am I?

– Where have I been going?

– Where can I go? 

 

Consistency in navigation placement is vital if you want your website to be a success.  It allows users to move fluidly to and from pages without hassle.  Scottie Claiborne makes an analogy in his article on Effective Site Navigation (webcredible.co.uk) relating website navigation with hospital navigation. If you walk down a hallway in a hospital and see a sign for where you want to go, but suddenly the main entrance, cafeteria and emergency signs are gone how are you supposed to find your way back? Many sites use breadcrumb trails, which are links (usually in a small font, placed directly below the page header) that show where the user is in relation to the homepage.

breadcrumb

 

So what exactly is the most effective layout for navigation? Both horizontal and vertical navigation work well, but which is the best of the two is debatable.  Designer Chris Garnett argues “vertical navigation doesn’t demand the same amount of visual attention. I want primary navigation to be one of the most instantly recognizable elements of any site I build.”

 

Here are 5 sites that demonstrate efficient navigation according to the Ultimate Guide to Web Design:

amazon

apple

bbc

google

guardian

 

Unfortunately, what we have found with many of these sites is that the design aspect of the site suffers in order to enhance effective navigation.  Here are some sites that we have found to have both effective navigation and great design:

 

The Fox website uses a consistent top bar navigation throughout the entire site. Any information the user might need is accessible within 2 clicks.

fox

 

The Chicago Water Taxi website is a good example of using an effective vertical navigation bar.

cwt

 

The NFL website is a great example of how to organize a site with A LOT of information on it. They utilizing two top navigation bars: one with all the team logos and one for the general content of the site.

nfl

 

 

If you want to read an article that helps explain how to plan a website for consistency and intuitive navigation in more detail, read Claiborne’s article Effective Site Navigation. It is worth checking out if you find yourself to be someone who has a hard time planning a site or if you feel your process of planning isn’t really working for you. The article even provides a helpful section of Dos and Don’ts on website navigation.

One more important thing keep in mind when making any website — efficiency. Your aim should be to enable users to get to content swiftly, in a logical manner, and with few clicks as possible and remember, stay consistent!

 

Two articles from .Net’s issue The Ultimate Guide to Web Design contributed to this blog, Plan the Perfect Site and Master Site Navigation by Craig Grannell.

  • The BPDS newsletter