Website Menu is the genesis of a good website. In addition, Web links (or URLs) are often quite long. Many companies use a custom link shortener to reduce the number of characters in a URL when they’re looking to share white papers, blog posts, and other content.
And not just because it helps them stay under character count limits. Shortened links can be used to easily track and measure web traffic, clicks, marketing campaigns, and traffic sources. Among these is the site main lead called the Menu.
What is a Custom Website Menu?
Custom website Menu is a list of common links that are usually displayed as the main navigation for your site. The menu location can vary depending on your theme, and some themes offer additional menus such as social links menus. Did you know that your main menu is a part of your marketing? It’s true.
What your website menu says gives your visitors a small indication of what your website is about and whether or not they are in the right place. Main menu mistakes can lead to a high bounce rate, low length of time on site, and low rankings in search engines. Worst of all, the main menu mistakes directly impact the number of leads and sales from your website.
Which are the Best Practices for Website Menu?
After my 7 active years in the website business, I still see the same mistakes over and over again. I don’t think there is a single day that I don’t visit at least 10 websites, of which half are making main menu mistakes.
So, I started taking notes of all the main menu mistakes I see on a regular basis and organized them into this explainer blog post for you. Let’s get started.
Don’t be too Clever
When Steve Jobs said “Be Different”, he didn’t mean in your main menu. So to be clear, not to be clever in your main menu. Using phrases like “Get in Touch, “Let’s Chat”, or “Let’s Talk” is confusing. Many of your visitors are consciously or subconsciously looking for the good old “Contact” button. Don’t make it difficult to contact you simply because you want to be clever.
After my 7 active years in the website business, I still see the same mistakes over and over again. I don’t think there is a single day that I don’t visit at least 10 websites, of which half are making main menu mistakes. So, I started taking notes of all the main menu mistakes I see on a regular basis and organized them into this explainer blog post for you. Let’s get started.
Don’t be too Clever
When Steve Jobs said “Be Different”, he didn’t mean in your main menu. So to be clear, not to be clever in your main menu. Using phrases like “Get in Touch, “Let’s Chat”, or “Let’s Talk” is confusing. Many of your visitors are consciously or subconsciously looking for the good old “Contact” button. Don’t make it difficult to contact you simply because you want to be clever.
Your blog is a way for people to find your website. It’s not a destination once people get there. So, take it out of your main menu, unless your blog is the main part of the service you provide, or unless of course, your website is your blog. Place it in the footer so people can find it if they need it. But chances are, they won’t be looking for it.
List your Services identifiably
Remember, your main menu helps visitors understand your website. If possible, list your services in the main menu, instead of using a generic word like “services”. I realize this only works if you have a limited amount of services. But if you do this, it works like a charm. On one hand, it informs people about what you do, and on the other hand, it gets them one step closer to your services.
Keep your main menu Short and Simple
Hick’s Law says that the more choices you give someone, the longer it will take them to make a decision. So help your visitors make a decision by keeping your main menu short, and therefore simple to understand.
Not too much Attention!
Your content should be your superstar, not your menu. Many websites have these massive headers with giant menus that draw the eye toward the top of your site, and away from your superstar content. Keep the main menu and the header simple and small. Don’t make it loud and obnoxious.
Make both your site and menu Responsive
Have you ever tried using the main menu on a cell phone that was not responsive? Frustrating! You have to zoom in and out and try your hardest not to click on the other menu options next to the button you’re trying to click. Responsive is the industry standard and typically converts your main menu into a drop-down that is easy for mobile users.
Don’t tell them to go home, they already know
For years the industry standard has been to not include a “home” button in your main menu. The logo should be the link back to your main menu. Placing a “Home” link in your main menu wastes space and draws attention away from your important content. I have read in the past year that the home button is making a comeback, and some people are arguing that it should go to the main menu. I’m not convinced. So for now, keep in out of the main menu.
Clustering your Menu
Stop cluttering up your main menu with useless pages like faqs. Go through your analytics and see which pages in your main menu are most important. If some of those pages never or hardly get clicked then move them to the footer. Don’t forget Hick’s Law above.
Highlight your Menu
A simple way to make your website more usable is to remind your visitors of where they are at all times. Of course, you can do this with breadcrumbs, but it’s also important to make sure your main menu uses active states. In other words, your main menu should highlight or dim the pages you are on at the moment. This lets the user know where they are at all times on your website.
Site Menus are not Sentences
Your main menu links should not be sentences. At most, keep them to three words or less, but preferably 1-2 words. Surprisingly, many clients ask for this, and I find myself talking them out of that dangerous ledge as quickly as possible. Some of the more acceptable longer menu links are: “What we do”, “Who we are”, and “How it works”.
Website Menu – Hamburger Icon Design
Originally created by then Xerox product designer Norm Cox waaay back in 1981, the hamburger icon was originally designed to simply indicate a list within the Xerox “Star” system. For years the hamburger icon lay mostly dormant, emerging randomly in various interfaces.
Then came the smartphone. Saving screen real estate was the cause, and flyout menus—triggered by the hamburger icon—was the effect. With the whole world moving to smaller-screened devices, the need slowly arose to get as many menu items on the screen as possible.
First came the tabbed navigation from the native iOS apps—typically four to five icons anchored to the bottom of the screen. These were your primary menu items and they did the trick for a time.
The name has become a bit of a double entendre since it’s inception. The title obviously refers to the shape literally looking like two buns and a slab of meat. However, in the past couple of years, it’s come under fire within the UI/UX community due to its use on desktop designs.
It tastes good, but it’s bad for you, they say. The hamburger’s public image went from grass-fed hipster beef to a slimy Big Mac hiding behind the glossy veneer of a plastic & glue-filled model burger photoshopped to look like Pixar food. Learn more here!
Creating a Navigation Menu in WordPress
By default, you don’t need to install anything to create a simple menu for your WordPress site. It might not be the most elegant way or the one with the most customization options.
But, WordPress menus work well enough to clearly direct visitors through your site, and they look okay with a default theme.
1. Create a Menu
Let’s first make a simple menu from the WordPress dashboard. Log into your backend and head to Appearance > Menus, located on the sidebar.
Look for Menu Name and type in the title of your new navigation menu, then click the big blue button to create it.
2. Add and Customize Navigation Menu Items
Your menu won’t do much unless you specify what’s in it. On the side of the page, you should now see dropdowns with pages, posts, custom links, and categories to choose from.
Just click the checkbox next to any page you want to add and click Add to Menu. Make sure to click use the View All tab, or the search function if you have too many pages.
Once you’ve added a few items, you’ll need to include some info. By clicking the arrow next to each element under the Menu Structure.
- Navigation Label – The title of the link, displayed within your menu. Example: “Store”, “Gallery”, and “About”.
- Title Attribute – Text that appears on mouse hover over that menu item.
- Open Link in New Window – Generally, leave this off unless linking to a third-party site.
- CSS Classes – Add a little padding, bold the text, and so on using CSS.
- Link Relationship– If linking to a third-party related site, specify if this is a site from your colleague, family member, or even another of your own websites.
- Description – A short description of the menu item that displays if your theme supports it.
3. Change the Nav Menu Structure
When you’ve fleshed out all your menu items, your job isn’t quite done. For one, WordPress supports submenus. That means you can create parent and child menu items. If you do, visitors will be able to hover over the parent item on your site to reveal its child pages.
Drag and drop the items into the order you want them to appear. If you want to make a submenu, drop it underneath the item you want to be its parent, then drag it to the right.
You can use the same method to change the order of your menu items to your desired sequence.
4. Publish Your Menu
In the menu editor screen, go to the Manage Locations tab and click the checkbox where you want to add your new menu. The available options depend on your theme, but generally, you’ll want to tick Primary Menu or Top Menu.
You can find the same settings at the bottom of the main menu screen in the form of checkboxes.
If this doesn’t work for you, try going to Appearance > Widgets and dropping the new Custom Menu or Navigation Menu item where you want it.
Factors to consider while designing Hamburger Icon
During those crucial early months of planning, researching, site mapping, and prototyping, your creative team will need to break down the multitude of interface variables. Especially, that your project presents in order to make that ever-important decision.
Do I need a hamburger icon on my desktop site? (It isn’t even a question on a mobile viewport.) Having said that, let’s explore some of the biggest questions that help steer the decision-making process.
How many menu items do you have?
In a perfect world, all sites would be as simple as an agency site (Work, Services, Team, Blog) — chances are you need more than that. So ask yourselves, can I pull out the bare essentials and add the rest to an off-canvas panel, or flyout menu?
If your current traffic patterns prove that 80% of traffic is flowing to your Products page, why feature your Company page just as prominently, cluttering the page? Caution: Blanket Statement—none of this is black and white; it’s all about context.
Are you building a web app or a simple responsive website?
Apples and oranges I know, but the functionality is beginning to merge between native apps and responsive layouts. Typically a web app will have a small set of interactions the user wants to repeat over and over again.
Because of this, the user interface needs to reflect the repetition of the usage patterns. So, having the link to a frequently-used feature hidden off-canvas would be a frustrating experience. However, if you have user profile settings or lists you want to access like on Twitter, the off-canvas basement is the perfect spot to store them (note to Twitter!).
What features need to be ever-present?
eCommerce sites are unique in that they add a second level of interaction. By giving the user a profile, cart, wishlist, product search, etc. These become navigation items, as each item has a page dedicated to it. Typically, these items end up in a utility bar which can add unnecessary bloat to an otherwise clean UI. Adding these to a flyout menu is a great option.
Have I structured my content with a solid conversion strategy?
If you work with an agency using inbound marketing best practices, then the answer is yes. Without clear calls to action and an expertly laid out conversion strategy, you should likely avoid off-canvas navigation.
Oftentimes a website requires the navigation to be present at all times.
Because the content is not built around conversions and education. Resulting in content dead zones that rely on using the primary navigation to continue exploring. Inbound marketing best practices allow for the freedom to stay on-canvas or venture off-canvas.
Here: Full Stack Web Developer: The 5 Essential Skills
Get Free Updates
Notice: All content on this website including text, graphics, images, and other material is intended for general information only. Thus, this content does not apply to any specific context or condition. It is not a substitute for any licensed professional work. Be that as it may, please feel free to collaborate with us through blog posting or link placement partnership to showcase brand, business, or product.
