User-friendly navigation for your chamber website

The time I spent backpacking in Yellowstone National Park was one of the most incredible experiences of my life. The entire trip, I relied solely on color-coded trail markers to guide me through the primitive Wyoming wilderness. I emerged ten days later, dirt-streaked and enlightened – and realized I had never once needed to use my compass.

Likewise, web users shouldn’t need a compass to navigate your chamber of commerce website. Your website navigation design should be just as visible as the trail markers that guided me through Yellowstone.

First, a note on form vs. function

Before I dive into this post, I’d like to differentiate two components associated with navigation, form vs. function. Function refers to the specific content (such as link names) that guide users from Point A to Point B. Function-related topics will be discussed in future posts.

What I’m going to talk about today is form – the “look” of your navigation.

Top-level & sub-level design

The first thing to understand about navigation is that most websites contain two levels of navigation: top-level (global) and sub-level (in-page). 

Top-level menu items are displayed on the homepage, and represent the main topics of a website. These menu items are most commonly displayed as tabs in a navigation bar.

Sub-level items branch off each top-level tab. The most visually appealing way to display a list of sub-level items is in a dropdown menu. 

Want to improve your navigation even more? Set each sub-level dropdown to automatically fly out when a cursor hovers over its designated top-level tab.

Intuitive placement

Visitors naturally assume your navigation bar will be located at the top of your website, directly under the header. So that’s exactly where it should be. (Imagine what would happen if the trail markers of Yellowstone were placed flat on the ground, slowly vanishing under falling leaves.)

Style & color

A cleverly styled navigation bar draws your visitor’s attention but still remains consistent with the overall website design. The style of your navigation bar shouldn’t appear to be an afterthought – choose a style that intentionally compliments your overall website design. Incorporate your website’s color scheme into your tabs and dropdown menus.

SPOTLIGHT: Los Angeles Chamber of Commerce

The Los Angeles Chamber of Commerce website does a great job in the design of their navigation. Notice how their clean tabs below the header make the navigation bar easy to identify. The colors of the navigation bar stand out from the header image, yet still complement the overall design. Convenient dropdown menus appear when a visitor hovers the cursor over each tab, and the white text is perfectly legible against the solid blue background.

No compass required

Every hiking enthusiast knows how to use a compass, but that doesn’t mean we want to get lost in the woods. And visitors certainly don’t want to get lost in your website.  Create a user-friendly experience for your visitors by putting your navigation bar front-and-center.

Now that you understand key elements in creating your website design, it’s time to start filling the pages with content. The first step is choosing the right content management system. Come back next Friday for the kick-off of my new series on content for your chamber website.

 立博客户端app下载 for Chambers

Up next: Content for your chamber website

For the past seven weeks, I have discussed how cutting-edge website design and usability will greatly enhance your chamber website. You’ve learned how to channel your inner artist, choose the perfect typeface and develop a user-friendly design. Today’s post concludes my series on chamber website design and usability.

Here are some other articles you might enjoy reading:

The Best Chamber of Commerce Websites of 2019

Persuading Your Board for a New Website

Budgeting for a Website

How to Write a RFP