How to organize your navigation menu for better usability

A common stumbling block startups encounter is how to organize their website’s navigation menu for better usability. This is easy if you are the kind of person who can easily plot your itinerary for the day (or week) along with its logistics, time spent, and mileage.

That’s what organizing your navigation menu looks in daily life when compared to a website. I believe this is more a skill than a gift that could be learned over time. What you need to begin with are the tools for how it’s done.

Tools for organizing your navigation menu

There are two main tools I recommend that startups can use to organize their website’s navigation menu for better usability. This is through the use of a sitemap and user testing. The sitemap is used at the beginning of a website’s creation. While user testing is more for regular monitoring and for refining what you already have.

1. Sitemap

Making a sitemap may seem passe but it remains, personally, a good way to identify the content and map out the flow of a website. The end result would be a clear picture of your navigation menu. So how is this done?

Plotting the sitemap

When it comes to plotting the contents of a sitemap, one can do it from scratch or one can begin by enlisting the normal sections of a website. These are the Home, About, Products (Services), and Contact. Then you expound on each section as you go along.

a. Home page

Again, to begin with, it would be good to place About, Products (Services), and Contact also under your Home page. Then ask yourself the following questions:

• What ready materials do I have that I can put in the website?

• Of these materials, what do I want to be highlighted as soon as the website is loaded?

• Do I have an ongoing campaign that I want the public to be engaged with?

• Am I using the website to get more service bookings or do I intend to direct people to the website to book all business transactions?

• Do I want the website to act as a one-stop hub of information about my company, activities, products/services, multimedia resources, and what-have-yous?

The answer to these questions will not only determine how your Home page will be designed and what features it will contain but also identifies the additional sections that needs to be added in the website.

Let’s say your ready materials include your company profile; photos on your company, office, personnel, products, clients, packaging information; video clippings from your recently released TV commercial series; and contest mechanics on your ongoing marketing campaign. You also have an order form that you would like to be adapted in the website to increase sales.

Thus, your Home page may have links to History, Personnel, Packaging Information, Gallery, Contest, and Order Form along with corresponding visuals once designed. The History and Personnel are subsections of the About Us section.

While the Packaging Information and Order Form should come as subsections of the Products (Services) section in the navigation menu. This is besides having a call-to-action button for “Order Now” linking to the same Order Form page aligned with the top menu but using a different color. A strategic location would be at the upper right-hand corner.

Plus, your homepage may use as its main header the first video of your recently-released TVC series and links to the rest of it in the Gallery. This header may even be an animated image slider that highlights the photos of your company, office, and personnel along with the TVC and links to the About Us, Personnel, and Gallery pages, respectively.

b. About

The About section doesn’t necessarily have to be named as such. It could take other names such as Our Company or Our Brand (if it is a website dedicated solely to a product). Other ways this section is called are “About Us” and “Our Team”. You can always personalize this according to what suits you best.

The important thing to remember is to identify what you like to put in this section regarding your company, personnel, history, mission, vision, goals, job openings, philosophy, and what have yous. Again, whatever you come up with can become a subsection of the section.

Other companies dedicate a special page for their founders and for their current Board of Directors. This is a good way to show transparency and build on the credibility of your company.

Adding your VMG (vision, mission, and goals) gives visitors of your website a clear idea of what the company stands for and intends to achieve, especially for its immediate community—something that would be best supported by adding information about your company’s activities, involvements, and events.

This is often under a News section, which also helps to build user perception about you and your company’s branding.

c. Products (Services)

If have many products, it would be great to categorize them into their types and make each type a subsection of this section of the website. All the information about each product is then provided.

Some allocate a page for each product while others allocate a page for each product type and just enlist all the products that belong in it there. Each of the product pages should each link to an online order form, if you have one, or the website’s shopping page.

For those with voluminous product categories, it would be ideal to have an online catalog, one that is interactive. While some prefer a more simple approach through a downloadable product brochure.

If there are multiple product brochures, you can have a separate page for this on top of linking each page to it. Redundancy is okay as long as it makes the lives of visitors easier and as long as it is not confusing.

You can even have a page for Warranties and Terms of Services, as well as, branches or outlets they can go for repairs and after-sales services, which could also be subsections. The goal is to provide every aspect of product care available to visitors and consumers.

d. Contact

The Contact Page normally contains all information you can provide to make it easy for website visitors and consumers to get in touch with you. This includes your email address, postal address, branch information (if any), contact numbers, and social media platforms. A contact form is often seen on this page.

In summary, having plotted your basic website’s content, it might come out as something on this accompanying image I have provided. Your sitemap may be more diverse than this depending on what other features and information you’d like to provide such as a pop-up window on the Home page inviting customers to submit product reviews or testimonials.

The Home page may even have an area for Newsletter subscription and can be linked to a Privacy Statement or a Membership page that enlists member benefits and responsibilities. The possibilities are endless.

Reorganizing The Sitemap

As mentioned, plotting the sitemap happens when you are just beginning to create your website. What happens if you already have one and would need to organize your navigation menu, will a sitemap still come in handy? Of course!

Having a sitemap would often come in handy as long as you have a website. To organize a website, you would really need a sitemap, to begin with. What comes next then?

a. Review the sitemap

The next thing you need to do is to review each section of your sitemap vis a vis the actual navigation menu and content of the website after a period of six months since you initially launched it. This review could then be conducted every six months thereafter or once every quarter in a year.

The aim of reviewing the sitemap is to remove outdated content and enhance the navigation menu for better usability and to improve the overall user experience in your website, which in turn improves its performance.

Besides removing outdated content, reviewing the sitemap regularly also allows you to identify what sections or pages need to be added to your website. This could be based on the results of your website analytics.

What words led people to your website? What words do they use to search for your website? What pages on the website are most viewed? Are possible questions to ask yourself when you look at your analytics. This gives a clue as to what they are interested in and may hint at what additional information you need to provide on the website as a new section, feature, or content.

b. Renew the sitemap

After reviewing the sitemap, implement the changes and make a new one. This will then guide you in revamping your navigation menu. Make sure each section is linked accordingly.

As you renew the sitemap, it might be good to also come up with a new design for your navigation menu to make it clearer and easier to use. There are generally three parts to a website’s navigation—the top menu, the sidebar, and the footer.

Some websites forego the sidebar and use a hamburger menu instead, which is when they only highlight a few sections in the top menu or forego it altogether. You might revamp your navigation by using a hamburger menu or making it into a dropdown menu instead so that there aren’t too many sections shown in the top menu. The hamburger menu is often indicated as three rows of bars at the upper right-hand corner of the website.

Having a footer is great because it helps your visitors navigate the website when they reach the bottom of the page without having the scroll all the way up to the top menu. The footer is also a good place to put a good listing of what’s on your website such that it comes as a categorized section of your sitemap.

Although some use the footer to place sections of the website that could not be categorized into any of the sections in the top menu such as the Privacy & Terms besides displaying the Copyright notice and social media platforms.

c. Enhance the navigation menu

Besides redesigning how your navigation menu looks and refining its contents, you can also enhance its features by adding a search field and button beside it. This would make your visitor’s life easier in finding information on your website.

Other websites also add a search feature for branches or outlets, which is a function different in itself as it is more of an additional service to visitors. This would be more directed to the Branch section of your website, which is normally under the About section.

The analytics of the website also helps greatly in how the navigation menu could be enhanced. Pages most viewed may be highlighted instead on your top menu instead of the usual content, which instead will be contained in the hamburger menu.

Analytics will also help you identify what percentage of your visitors use mobile phones or other gadgets to access your website. A great percentage would determine the need to modify your navigation menu in such a way that it can be flexible enough when viewed by these users without encountering difficulty. This is called responsiveness, which is important for you to attend to.

While using color to make the navigation menu more prominent on the page is also a great way to enhance it. You may even use a different color for visited links or use a mouseover effect for the menu to add interactivity to the website.

Of course, the best way to enhance the navigation menu would be based on the results of your user testing, which is what I’ll discuss next.

2. User testing

The thing is, a navigation menu is not set in stone. It has to be modified over time according to the needs of the business and what is relevant to its customers. This is why there is a need to constantly monitor site performance to assess what needs to be refined in the website’s content and how should this be presented in the navigation menu.

Conducting regular user testing throughout the life of the website is part of refining the website’s content and maximizing its performance. User testing is conducting surveys or research on the efficiency of the information architecture of your website.

This could be done through heatmaps, card swapping tests, using software, or giving a set of questions, scenarios, or problem-solving tests to chosen customers or a random individual. Do check my recent post on user testing for more details.

Now that you know the tools on how to organize your navigation menu, let’s go through some exemplary website examples on this.

Exemplary websites with effective navigation menu

Let’s look at some examples from among the listing of the best 26 menu website designs I’ve curated for 2023 as inspiration on how to organize your navigation menu for better usability.

1. Everyday Robots

Everyday Robots has an awesome navigation menu and web design. A simple orange circle—its take on the hamburger menu–situated at the upper right-hand corner of the screen, which is the perfect location to place an important object or content in a reading or visual material since it is the first thing the human eye will look at.

Using orange for its color is also strategic since it is a color in total contrast to the background color. This is using visual hierarchy in a design through colors. The word “Menu” appears on the mouseover of the orange circle to indicate what it is for.

The awesome thing about the orange circle is it expands as a whole page once clicked. The page changes to a black background and the sections of the website are enlisted while a photo appears beside the listing. Clicking a section closes the menu and returns the page to its original design. Meanwhile, the name displayed beside the orange circle changes from “Home” to the section that was clicked.

2. Argor Heraeus

Argor Heraeus, a subsidiary of Germany’s Heraeus Group that is known for its focus on technology, is a mediator between sources and distributors of precious metals. Their website exhibits their expertise in technology.

While their navigation menu creatively maps out a distinct funnel that directs visitors from learning to conversions. The menu is actually numbered from 1 to 8 above each section’s name. This number gives a visual cue on how visitors should navigate the website in a chronological manner.

They use visual hierarchy through muted colors where the overall background is grayish-brown and the color of the text is cream. The muted colors set the tone of the website, lean on the nature of the business being mining, and convey the identity of the company.

The use of white-colored fonts for the top menu makes it easier to see it without contradicting the overall feel, such as in the case of using a traditional boxed top menu, but instead flows with the overall design.

This is then supported by a burger menu represented by the two parallel lines at the top right-hand corner of the website. The burger menu, similar to that of Everyday Robots, expands to a full-page display of lists to other sections of the website using a black-colored background. It contracts once the one bar at the upper right-hand corner of the screen is clicked or one of the sections listed is clicked.

Black or dark grayish brown is used for call-to-action buttons—also aids in the navigation as to where to go next—while tinges of gold appear as part of animation either as a hovering 3D image, the trail of the mouse pointer, or an underline effect when on mouseover of menu sections.

3. Smokin Buttz BBQ

Smokin Buttz BBQ’s website is highly conversion oriented. The company clearly highlights through its navigation menu what they want its customers or website visitors to do: “Find Our Truck”, “Book The Truck”, and “Buy Sauces”. The three sections and call-to-action messaging form the website’s top navigation menu that is supported by the main navigation menu—all the regular sections of the website—below it.

Yet the main navigation menu itself is arranged in such a way–from left to right—that still is conversion based. “Shop BBQ Sauces” is the first section on the left, which is a redundancy of what’s on the top navigation menu.

This is then followed by “The Buttz Truck”, “Catering, “About Us”, and “Contact”. The link to their food menu is highlighted as a call-to-action button overlayed on their three-photo image scroller, which interchanges with the “Find The Truck” and “Shop Now” buttons.

All buttons are colored red and the button names are colored white, which makes it stand out against the background photo. The very background of the main menu is colored red to clearly show visitors that this is where they want visitors to look first. Another visual hierarchy technique uses colors.

The footer is used not only to show copyright and social media platforms but also as a means to invite visitors to sign up for their newsletter.

4. Curry Up Now

Curry Up Now has a simple and clean menu with a dropdown feature and a mouseover special effect that changes the black colored-menu names into a yellow hue–the color of curry. The yellow hue also serves as an indicator of where the visitor is on the website, such that the Home portion of the top menu is preset to its color once the website loads.

The dropdown menu makes it easy to locate all information on Ordering and getting in touch with the restaurant. The Menu and Ordering subsections actually go to the same page, which is for online ordering. While the online ordering page’s menu becomes different as it becomes a sidebar containing the different items on the menu. The top menu becomes a signup or login portion for members to easily order from them.

The footer is used to show other sections not in the top menu. It also has a search bar that makes it easy to find information on the website.

In conclusion, what makes these websites exemplary in their navigation menu is their clarity, simplicity, and orderliness made possible using visual hierarchy and design techniques. These, in turn, give better usability that provides a pleasant user experience when browsing a website.

FAQs

1. Does my target audience affect the way I organize my navigation menu?

Yes, it does. As mentioned in the article, one reason why you should regularly review your sitemap so as to modify your navigation menu accordingly is to ensure it provides better usability—that is visitors to the website will have a pleasant experience. It is important to know who your target market is, what they need, and how they behave, especially on your website so that you can cater the design of your navigation menu to suit it. Their geo-demo information, modes of accessing your website, length of stay on the website, what they often view and click, and the words that led them to the website speak a lot about who they are, their needs, and their behavior. These are aspects that direct the changes needed in the navigation menu.

2. Why is it important to modify the navigation menu to suit my target audience’s needs and behavior?

This is important because, first of all, it provides a pleasant user experience, which translates to good website traffic or performance. This not only thereafter affects the search engine optimization of your website—that is making it rank higher in search engines—but also helps you achieve your target conversion rates, which means increased sales and profitability.