Site usability should be one of your top considerations when building or maintaining a website. If your website is difficult to use, people will be discouraged from using it—or ever coming back. Furthermore, in many cases, good usability directly translates to better results when it comes to SEO.
Some of the hallmarks of good website usability include:
- Mobile responsiveness: More and more people are accessing the internet via their mobile phones (and Google decrees this as important for ranking on search as part of their mobile-first initiative).
- Page load speed: Yet another important ranking signal from Google, thanks to a correlation with how people interact with websites. According to Kissmetrics, 47% of consumers expect a web page to load in 2 seconds or less!
- Website navigation: According to Orbit Media Studios, if your website is easy to use and content is easy to find, this positively affects website traffic you’ll get from search engines. Gerry McGovern conducted a study with results demonstrating that 70% of people relied on navigation rather than search when looking for something because it’s easier and faster to click on links to specific pages within a website.
For the purposes of this article, we’ll focus on usability in terms of website menu design, best practices, and menu design inspiration.
Continue reading, or jump ahead using these links:
Website Navigation
Web navigation is a general term that refers to the internal link architecture of a site. Above all else, its primary purpose is to help users easily find relevant content on your website. Your navigational structure also forms the basis for your website’s sitemap, which helps search engine giants like Google to index your website accordingly.
Certainly, there are several aspects that make up effective website navigation, but for now, we’ll be focusing specifically on the menu because this is usually the first-page element users interact with when they land on a new website.
Menu Navigation
Navigation menus tend to be located at the front and center of a website (figuratively speaking—a centered menu would be interesting, though). For websites with different categories, drop-down functionality is an option for conserving space and addressing the need for categorization.
Nowadays, in a show of minimalism (and mobile usability), many websites have adopted a hamburger menu design (essentially, a square with three short horizontal lines, indicating that the menu that can be expanded in a click).
Woocommerce’s Storefront theme provides a handy example, in the top right corner:
Hamburger website menu design is most prevalent when it comes to mobile website design, as developers are tasked with creating usable navigation in very small spaces. Certainly, it can be difficult to create a usable drop-down menu on mobile sites!
All that said, many designers despise the hamburger menu, which has led to a new movement of finding creative ways to make website navigation fun and functional. With that in mind, a common website menu design heuristic involves the placement of menu navigation as a permanent fixture at the top of each web page, so the user can easily find their way back ‘Home’ or seek out the next page they’re interested in.
Best Practices in Website Menu Design Navigation
Most WordPress themes come with a predefined website menu design. Whether you’re looking to justify keeping it as-is or are planning to completely redo it, here are best practices for designing menu navigation with usability and SEO in mind:
- When possible, avoid drop-down menus. Many websites like using drop-down menus because they save space but they are not recommended, especially when it comes to technical SEO. Usability tests from the NN Group found that most people dislike drop-down menus. This is because the human eye works faster than the hand, and so people find it annoying when they’ve already decided what to click on and something else drops down—leading to a decrease in visits on certain pages. All that said, the ‘mega drop down’ menu is slightly more acceptable if the website you’re designing has so much content that you can’t do without a drop-down menu design.
- Be descriptive. Get rid of generic words like ‘Services’ or ‘Products’. Instead, specify what your products or services are, since no one really searches for the generic words ‘products’ or ‘services’. Better yet, before deciding on the exact names for your menu items, justify inclusions with SEO keyword research. Orbit Media recommends using descriptive labels, as this practice benefits both users and you when search engines crawl the site. The navigation appears on every page so if you use a term related to your industry, you are alerting Google that you truly care about the topic. Don’t forget that each individual page can rank as long as it is focused on one, specific topic.
- Additionally, Orbit Media advises against format-based navigation, like arranging pages according to content—such as all videos, all infographics, and so on. This is because people search according to topic and not format.
- The positioning (or arrangement) of the items in the navigation menu matters. There is a general suggested list of pages to have on a website, such as the ‘About’ page, ‘Contact’ page, etc—these are pages most often searched for by site visitors. These prominent pages, which often have high traffic (since they’re prominently displayed) often have low engagement rates. Use Google Analytics to determine your most important pages and to find optimization opportunities. Display the most important navigation items are first (or on top, depending on the orientation of the menu bar).
- Keep menu items to a maximum of 7. Studies have shown that people can only remember or take in seven items of information at most at a time. Having too many menu item categories can potentially affect your ability to rank in search, as Google may interpret too many seemingly unrelated categories as a sign that your website hasn’t settled on a specific niche. If you know that you’ll be needing more than 7 menu items, break them down further into subcategories.
In terms of the aforementioned point, United’s website menu design is too complicated—there are too many options for users to look through:
Conversely, Cafebond.com provides a well-organized example with regards to simple categorization:
- Audit your menu every now and then. Remove links that are rarely clicked on. Rename generic labels to be more descriptive for your human visitors and search engine spiders, alike.
Inspiration for Creative Website Menu Designs
Big Spaceship
Ignoring the typical website menu design heuristic (on top of, or to the side of the main page content), Big Spaceship’s menu button is located front and center on their homepage.
Once clicked, users are directed to a new page with just four menu options.
Upon picking where you’d like to go, you’re presented with additional options. Each page offers these new submenu options in different compelling and creative ways. For example, the ‘Work’ link leads to clickable photos, while the ‘Careers’ page offers up a different type of menu navigation, listing out open positions with arrows that, when clicked, drop down to show descriptions for each item.
Users can easily revert back to the main menu navigation by clicking on the “menu” button (which turns into a hamburger menu) at the bottom of the page.
Equus Design
This branding and communications agency from Singapore demonstrates the fact that minimalist website menu design is anything but boring.
There’s a fixed menu at the top of their website’s homepage, but when you click on one of the top links, each page presents its own unique navigation style. For example, on their ‘About’ page, visitors are presented with a one-page design within the existing menu navigation design that makes for an intriguing user experience.
As with the aforementioned Big Spaceship website menu design, major menu items are linked to pages structured with different internal layouts.
NKI Studio
KNI Studio has their menu in an unconventional location: centered at the bottom of the page. Additionally, you can click the “+” for relevant social links.
Navigation Trends
According to ImpactBnd, many designers are looking for alternatives to the minimalist mobile hamburger menu. In fact, Spotify removed their hamburger menu in favor of the tabbed menu, which led to a 30% increase in navigation menu clicks. Ironically, hamburger menu design still graces the likes of many articles about menu design trends!
Additionally, the use of the mega drop down and fixed top menu (both menu design trends from 2017), are still hot topics moving into 2018. Some fixed menus or mega menus are starting to include visual elements such as icons, photos, or even a map.
The Kellogg’s website provides a nice example of a multi-dimensional mega drop down menu:
Universal navigation is another website menu design trend that has been observed by many recently. At the top of the website’s home page is a link back to the main website. This is useful for businesses with many subsidiaries or franchises, such as Disney.
See this concept in action on the Disney Frozen sub-website:
All-caps corner links are another interesting creative menu design trend. This gives the website a professional feel that feels intuitive and symmetrical.
Websites that make use of this menu design trend, such as Sprout Social, have a lot of information to share but do so in a way that doesn’t overwhelm:
Light hues, sans-serif fonts, and extra spacing help make this menu design trend work.
Creative Website Menu Designs and Best Practices
Thinking creatively about site navigation elements can result in making your website more memorable, overall. But when designing, don’t forget the real purpose of site navigation: to make it easier for users to look for and access content. All the bells and whistles in the world cannot make up for website navigation that is unusable or that acts against your other SEO efforts.
Tags:
Keep reading the article at WPMU DEV Blog. The article was originally written by Maddy Osman on 2018-02-28 08:00:33.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.