Navigation menus exist in almost every website you can find today, and are an important part of a website, being one of the first elements that you see upon entering a page. It is a website element that web design agencies never miss out. It is the primary navigation tool for a website and can be hidden behind a hamburger menu (mobile menu).
As a web design agency in Singapore, we’ve designed and built various navigation menus. While the main look and structure of a navigation menu almost always stay the same, there are many factors that impact the usefulness of your navigation menu. In this article, we will look into how to improve them — from a web design agency’s point of view.
How Good Your User Experience (UX) Is
Guiding The User Journey
UX web design is an aspect that web design agencies always take into consideration. From a UX point of view, the primary function of navigation menus is to guide users and lead them in the right direction — just like a map. For example, supermarkets have signs and labels in every aisle to tell customers where the different products are stored. Similarly, navigation menus help to show users where to find respective content on a site. In an instant, users should be able to understand what the main parts of a website are. The more parts there are to a website, the greater the need for a navigation menu.
The Law Of Serial Position Effect
Amongst web design agencies, there is a UX law known as the Serial Position Effect, people tend to pay more attention to and retain things at the beginning and the end. This means that people pay a larger amount of attention to the navigation menu at the top of a webpage. Thus, it is important to include important links and main pages in the navigation menu for a higher engagement rate.
Keep It Short, Sweet & Clear
Navigation with clear and concise categories are always recommended by web design agencies so your users can easily understand and navigate around your website. Having too many links on the navigation provides users with too many options and can overwhelm them.
Increased Visit Duration And Decreased Bounce Rate
In today’s world where high-speed technology is everywhere, people like things fast. Having a clear, easily understandable navigation is important in determining the duration of time a visitor remains on your site. If users visit your website and find it hard to navigate, chances are they will not stick around and “bounce”. A bounce occurs when a visitor only views a single page on a site and leaves without exploring the rest of the pages. This would mean that they did not stay to fulfil their intended goals and objectives. As a web design agency, this is something we know harms conversion rates and try to avoid.
How SEO-Friendly It Is
As a web design agency, we have redesigned numerous websites where the navigation penalised the SEO value of the whole site. Navigation menu exists on every page of a website, therefore in order for your website to be accessible, it is recommended for your navigation to be search engine optimised. What is in your navigation menu greatly determines how accessible your website is.
The Value Of The Top Sections Of Web Pages
Search engines value the topmost sections of web pages — a space commonly given to navigation menus. Since such a priority is given, it is crucial that your navigation menu is SEO-friendly and includes important keywords that represent your pages and your whole site well.
Labelling Your Menu Items
It is important to label your menu items to be more specific and relevant to your website’s purpose. For example, instead of using default terms that can be used in every industry, like “Contact Us”, you could use “Call Us For A Quote”.
Keep Important Pages On The First Tier
Search engine robots only crawl the top tier of navigation menus — the parts that aren’t hidden away by script in dropdowns or submenus (like in hamburger menus). As such, you should keep your important pages with specific labels in the first tier.
The Different Types of Navigation
Now that we’ve discussed the importance of navigation from SEO and UX points of view, let’s look into the different types of navigation and how they fare based on the above points. Web design agencies like Oangle specialise in coming up with different types of navigation for different use cases.
Simple Navigation
A simple navigation is, like the name suggests, simple. It only includes text-based links and has no submenu or hamburger.
Multiple Tiers Of Navigation
There are different styles of multi-tiered navigations that different websites may choose to use based on their content and goals. As a web design agency, we’ve built various kinds of multi-tiered navigations The most common type of multi-tiered navigation is flyout menu — where on hover or on click of a main navigation link, a submenu flies out with a list of related links. There is a hierarchy of relationship between the various page links listed on a multi-tiered navigation menu, and while it is common to see 2-tier navigation menus, it is also possible to have more than 2 levels of hierarchy.
When To Use Simple Navigation
- If your site only has a few main pages — most web design agencies would recommend about 5 to 7 max.
When To Use Multi-Tiered Navigation
- If your site has multiple categories and pages, or you have important pages that are related to each other, it may not be ideal to squeeze them all in a simple navigation.
Mega Menus
Mega menus are larger forms of multi-tiered navigation menus, where a massive submenu with many links appear, and they can include dynamic content, images and text within the submenu itself.
When To Use Mega Menus
- If you have a large and complex site, like an e-Commerce with various categories. For example, in Moleskine’s website, the design of the menu is used to enhance the site. Photos of their key products accompany the text links to help promote and give a better sense of their products.
When Not To Use Mega Menus
- When your site doesn’t contain a lot of important pages
- When you want to funnel visitors towards a specific page or action. A mega menu may provide users with too many options and they will be more unlikely to visit your intended page
- If you have limited or specific products and services
It is important that you listen to your web design agency with regards to what they advise on whether your website requires a mega menu or not, as more is not always good when it comes to the presentation of your page links on your navigation menu.
Left Navigation
A left or vertical navigation menu is one where the navigation links are listed vertically instead of horizontally. It can be combined with other styles of navigation such as flyouts and sticky navigation. The benefit of vertical navigation is that it allows users to switch freely between pages. Examples of sites that use vertical navigation are Facebook, Gmail and YouTube.
When To Use Left Navigation
- When there are too many important links to fit into a typical horizontal navigation menu.
- When you want to list important sections and links via a space-efficient method.
- When your site features user-generated content.
When Not To Use Left Navigation
- When your site has a specific topic and some links are more important than others.
- When you require your horizontal space for specific design elements (e.g. full width elements).
- When you require your navigation to have higher visibility and always stay above the fold.
Sticky Navigation
A sticky navigation is one that stays fixed in its position even when the user scrolls down the page. Users may feel lost trying to navigate through long web pages, which might trigger stress and make them leave your site. Having a sticky navigation gives users a sense of control as they interact with your website. It helps them explore your website in a comfortable and controlled manner. It gives them no reason to feel uneasy as everything they might need is right there. An example of a site that uses such navigation is our agency’s very own website — you might have already noticed that while scrolling through.
When To Use Sticky Navigation
- When your website features multiple categories and long pages of content.
When Not To Use Sticky Navigation
- If there is almost no scrolling to be done on your site.
What Should be Included in Your Navigation
Common And Intended Links
Common links that are expected, such as About, Products and Contact pages, should be included in your navigation — this provides users with a sense of familiarity. Links like Testimonials or Company History may not be important enough to warrant a place on your primary navigation. Of course, this also depends on the nature of your industry and your website’s goals. For example, in our agency’s recent website redesign, we moved the Careers page out of the main navigation as it wasn’t as critical as other pages.
A Link To Your Homepage
There is debate as to whether or not an extra link to Home is needed on top of your site’s logo. It’s ultimately up to you, but this could depend on a few things:
- Whether your site logo is obvious enough as a link to your homepage
- Whether you have enough space on your navigation
- Whether your target audience is tech-savvy. Users who are less tech-savvy may not be used to the logo being a link to Home, whereas more tech-savvy users may expect the logo to be a link to Home.
Conclusion
Navigation menus are extremely important in regards to making your website accessible, helping your users reach their goals and ultimately ensuring you get the conversions you need. What kind of navigation you choose to use is heavily dependent on the type and goal of your website — there is no one answer for the many types of websites. As such, it is vital to understand your users well to determine the kind of navigation you should use. Keep these tips in mind the next time you design your website’s navigation!
For more enquiries or help on determining the kind of navigation to use from a web design agency’s perspective, feel free to drop us a line — we’d be happy to help.
