Site usability should be one of your main considerations when building or maintaining a website. If your website is difficult to use, people will be discouraged from using it or coming back. Also, in many cases, good usability translates directly into better SEO results.

Some of the characteristics of good website use include:

  • Mobile responsiveness : More and more people are accessing the Internet through their mobile phones (and Google believes this is important for search rankings as part of their mobile initiative).
  • Page loading speed : Yet another important ranking signal from Google, through 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!
  • Web site navigation: According to Orbit Media Studios, if your website is easy to use and the content is easy to find, it has a positive impact on the traffic you will get from search engines. Gerry McGovern conducted a study showing that 70% of people rely on navigation rather than search when looking for something because it is easier and faster to click on links to specific pages. of a website.

For the purposes of this tutorial, we will focus on usability in terms of menu design, and best practices.

Navigation on the site

Web browsing is a general term that refers to the internal link architecture of a site. Above all, its primary purpose is to help users easily find relevant content on your website. Your navigation structure also forms the basis of your website's sitemap, which helps search engine giants like Google index your website accordingly.

Certainly, there are several things that can contribute to efficient website navigation, but for now we will focus specifically on the menu, because it is usually the first page that users interact with when they go to a new website.

Navigation in the menu

Navigation menus tend to be located at the front and center of a website (figuratively speaking, a centered menu would be nice, though). For websites with different categories, the drop-down feature is an option to conserve space and meet 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 can be expanded with one click) .

The Storefront theme of WooCommerce provides a practical example, in the upper right corner:

example of menu.png

Hamburger-style website menu design is the most common when it comes to mobile website design, as developers are responsible for creating usable navigation in very small spaces. Granted, it can be difficult to create a drop-down menu that can be used on mobile sites!

That said, many designers despise the hamburger menu, which has led to a new movement to find creative ways to make site navigation fun and functional. With this in mind, a common website menu design heuristic involves placing the menu navigation permanently at the top of each web page, so that the user can easily find their way around or search for the next page.

Best practices in menu design

Most WordPress themes come with a predefined website menu design. Whether you're looking to keep it as is or plan to completely redo it, here are best practices for designing menu navigation with usability and functionality in mind. SEO on your mind:

  • If possible, avoid drop-down menus. Many websites like to use drop-down menus because they save space, but they are not recommended, especially when it comes to SEO technical. Usability testing has revealed that most people don't like drop-down menus. This is because the human eye works faster than the hand, and people find it annoying when they have already decided what to click on and something else falls out, leading to fewer visits to certain pages. That said, the "mega drop down" menu is slightly more acceptable if the site you are designing has so much content that you can't do without a drop down menu.
  • Be descriptive. Get rid of generic words like "Services" or "Products". Instead, specify how your products or services consistent, since no one really searches for products with "generic words or" services ". Better yet, before deciding on the exact names of your menu items, justify the inclusions with SEO keyword research. Orbit Media recommendsuse descriptive labelsbecause this practice benefits both users and you when search engines crawl the site. Navigation appears on every page, so if you use a term related to your industry, you're alerting Google that you really care. Remember that each page can be ranked as long as it is focused on a specific topic.
  • In addition, Orbit Media discourages navigation based on formats, as'Organisation content-based pages like all videos, all infographics, etc. This is because people search by topic, not format.
  • The positioning (or layout) of the items in the navigation menu is important. There is a general list of pages to offer on a website, such as “About” page, “Contact” page, etc., which are the pages most often searched by site visitors. These prominent pages, which often have high traffic (since they are clearly visible), often have low engagement rates. Use Google Analytics to determine your most important pages and find optimization opportunities. Show the most important navigation items first (or top, depending on the orientation of the menu bar).
  • Keep menu items for up to one maximum of 7 . Studies have shown that people can only remember or take in a maximum of seven pieces of information at a time. Having too many categories of menu items can potentially affect your ability to rank in search, as Google can interpret too many seemingly unrelated categories as a sign that your site hasn't tuned in to a specific niche. If you know you will need more than 7 menu items, divide them into subcategories.

Regarding the point mentioned above, United's website menu design is too complicated (there are too many options for visitors):

example of bad menu.png
Here is the absolute example of what to avoid on your blog. Conversely, Cafebond.com provides a well-organized example when it comes to simple categorization:
example of a good menu.png
  • Audit your menu from time to time. Remove links that are rarely clicked. Rename generic labels to be more descriptive to your human visitors and search engines.

That's all for these tips, I hope they will allow you to better organize your different menus on WordPress. Do you have any practices that are not listed, feel free to post them.