This article focuses on how to get the most out of your website menu.
What is the difference between “navigation” a “sitemap” and a “menu”.
Navigation is anything and everything that lets a visitor move through your website. This includes your menu, buttons, hyperlinks, news items, adverts and images that lead people to other pages or content.
Your sitemap is the entirety of your page content and where each page resides in relation to other pages. A site map may include pages that don’t appear in your menu, since sometimes it is less cluttered and a better user experience to have pages that you keep concealed. These pages are reachable when people navigate to them in other ways such as from buttons, hyperlinks or a news feed.
Your menu is one of the most important components of your website navigation.
Tips for your website menu
- Try to have a maximum of 7 main menu items to help avoid people becoming overwhelmed.
- Categorise your website content into logical groups based upon your audience and what they are looking for. For example, in the realm of sport, common groups may be “Players”, “Coaches”, “Officials”, “Volunteers”, and “Fans”. Or you may prefer actions for your categories, such as “Participate in football”, “Watch football” or “Support football”.
- Use descriptive names for menu items. For example, if you sell football gear through your website, name the page “Football gear” or “Gear for sale” rather than “Products” or similar.
- Try to keep sub-menu items no deeper than a sub-sub-menu. This reduces the number of mouse clicks or screen taps your visitors must make and reduces frustration for people that might otherwise navigate down 5 levels to eventually discover the content they’re seeking isn’t there.
- Never use a hamburger menu on desktop displays. You have no choice on a mobile, but for desktops they force people to make one extra click/tap just to discover what’s underneath.
- Remember that most visitors are viewing your site on their phone and many others are using a touchscreen computer. This means that you shouldn’t use menu dropdowns that only display upon hover or mouse-over.
- Let people find information where they expect it to be. For example, people expect a website menu on a phone to appear as a hamburger (three horizontal lines) at the top corner of the screen. They often expect to find contact information in your website footer.
- Consider the user journey. What are people coming to your site for? Think about, “what’s in it for them?” Make it easy to find.
- Consider the design aspects of your navigation. Ensure the font is easy to read and there is sufficient contrast between your menu font and the background colour. Change the colour of the active menu item to make it obvious which page the user is actually on.
- Simple always wins. Don’t try to be clever. Use language that a 10 year old would understand. Always proof your spelling.