Saturday, May 21st, 2022

Creative website menu design and best practices

The usability of the site should be one of your top considerations when building or maintaining a website. If your website is hard to use, people will be discouraged from using it—or coming back at all. Also, in many cases, good usability directly translates to better results when it comes to SEO.

Some of the characteristics of good website usability include:

  • mobile response: More and more people are accessing the Internet via their mobile phones (and Google considers this important for ranking on search as part of its mobile-first initiative).
  • page load speed: Yet another important ranking signal from Google, thanks in part to the way 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 Studio, if your website is easy to use and content is easy to find, it positively affects the website traffic that you will receive from search engines. Gerry McGovern conducted a study with results showing that 70% of people relied on navigation rather than search when searching for something because it is easier and faster to click on links to specific pages within a website.

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

Continue reading, or proceed using these links:

website navigation

web navigation 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 navigational structure also forms the basis of your website’s sitemap, which helps search engine giants like Google to index your website accordingly.

Sure, there are many aspects that make up effective website navigation, but for now, we’ll focus exclusively on these. menu Because it is usually the first-page element that users interact with when they arrive at a new website.

menu navigation

Navigation menus tend to be located at the front and center of a website (figuratively speaking—a focused menu would be interesting, though). For websites with different categories, drop-down functionality is an option to save space and address the need for categorization.

Nowadays, in a show of minimalism (and mobile usability), many websites have adopted the hamburger menu design (essentially, a square with three small horizontal lines, indicating that the menu can be expanded with a single click). .

Woocommerce’s Storefront theme in the upper right corner provides a simple example:

Hamburger website menu design is the most prevalent when it comes to mobile website design, as developers are tasked with creating usable navigation in very small spaces. Sure, creating usable drop-down menus on mobile sites can be daunting!

All Said, Many Designers Hatred Hamburger Menu, which has started a new movement of finding creative ways to make website navigation fun and functional. With this in mind, a typical website menu design heuristic includes the placement of menu navigation as a permanent fixture at the top of each web page, so that the user can easily find their way back to ‘Home’ or search for the next page. Can you interested in.

Best practices in website menu design navigation

Most WordPress themes come with a predefined website menu design. Whether you want to justify keeping it in place or plan on redoing it completely, here are best practices for designing menu navigation with usability and SEO in mind:

  • When possible, avoid drop-down menus. Many websites prefer to use drop-down menus as they save space but they are not recommended, especially when it comes to technical SEO. NN Group’s usability tests found that most people dislike drop-down menus. That’s because the human eye works faster than the hand, and so people find it annoying when they’ve already decided what to click and something else falls off—causing visits to certain pages. decreases. All that said, a ‘mega drop down’ menu is a bit more acceptable if the website you are designing has so much content that you cannot do without a drop-down menu design.
  • Be descriptive. Get rid of common words like ‘service’ or ‘product’. Instead, specify what your products or services are. Huh, because no one really searches for the generic terms ‘products’ or ‘services’. Better yet, justify the inclusion with SEO keyword research, before deciding on the exact names for your menu items. Orbit Media Recommends using descriptive labels, because 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 about the topic. Don’t forget that each individual page can rank as long as it focuses on a specific topic.
  • Additionally, Orbit Media advises against format-based navigation, such as arranging pages by content—such as all videos, all infographics, and so on. This is because people search by topic and not by format.
  • The position (or arrangement) of items in the navigation menu matters. There is a general suggested list of pages on the website, such as the ‘Brief’ page, ‘Contact’ page, etc.—these are the pages most often searched by site visitors. These prominent pages, which often have high traffic (since they are featured prominently), often have low engagement rates. Use Google Analytics to determine your most important pages and find optimization opportunities. Display the most important navigation items first (or on top, depending on the orientation of the menu bar).
  • Menu item a. keep on max 7, Studies have shown that people can only remember or take in up to seven pieces of information at a time. Too many menu item categories can potentially affect your ability to rank in search, as Google may interpret too many unrelated categories as a sign that your website isn’t set in a specific place. If you know you’ll need more than 7 menu items, break them down into further subcategories.

In terms of the above point, United’s website menu design is very complex—there are too many options for users to see:

website menu design

In contrast, Cafebond.com provides a well-organized example regarding simple classifications:

website menu design
  • audit your menu whenever. Eliminate links that are rarely clicked on. Rename generic labels to be more descriptive to your human visitors and search engine spiders alike.

inspiration for creative website menu design

big spaceship

Ignoring the typical website menu design heuristic (at the top of the main page content, or on the side), Big Spaceship’s menu button is positioned front and center on their homepage.

website menu design

Once clicked, users are directed to a new page with only four menu options.

website menu design

Upon choosing where you want to go, you are presented with additional options. Each page presents these new submenu options in a variety of compelling and creative ways. For example, the ‘Work’ link leads to clickable pictures, while the ‘Careers’ page offers a different type of menu navigation, listing open positions with arrows that, when clicked, So there is drop down to show the details of each item.

website menu design
website menu design

Users can easily return to the main menu navigation by clicking the “Menu” button (which turns into a hamburger menu) at the bottom of the page.

Equus Design

website menu design

This Singapore-based branding and communication agency showcases the fact that minimalist website menu design is anything but boring.

Their website has a fixed menu at the top of the 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 Inside Existing menu navigation design that makes for an interesting user experience.

website menu design

As with the Big Spaceship website menu design above, the major menu items are linked by structured pages with various internal layouts.

NKI Studio

website menu design

KNI Studio’s menu is in an unconventional place: centered at the bottom of the page. Additionally, you can click the “+” for relevant social links.

According to Impactbund, many designers are exploring alternatives to the minimalist mobile hamburger menu. In fact, Spotify ditched its hamburger menu in favor of tabbed menus, leading to a 30% increase in navigation menu clicks. Ironically, hamburger menu design still likes many articles about menu design trends!

Additionally, the use of mega drop down and fixed top menus (both menu design trends from 2017) are still an ongoing hot topic in 2018. Certain menus or mega menus are starting to include visual elements such as icons, photos or even icons. A map.

Kellogg’s website provides a good example of a multi-dimensional mega drop down menu:

website menu design

Universal Navigation There is another website menu design trend which has been noticed by many people recently. At the top of the website’s home page is a link to the main website. This is useful for businesses with multiple subsidiaries or franchises, such as Disney.

See this concept in action on the Disney Frozen sub-website:

website menu design

All-Caps Corner Link Another interesting is the creative menu design trend. This gives the website a professional feel that feels comfortable and symmetrical.

Websites that make use of this menu design trend, such as Sprout Social, have tons of information to share, but do so in a way that doesn’t overwhelm:

website menu design

Light colors, sans-serif fonts, and extra spacing help make this menu design trend work.

Creative website menu design and best practices

Thinking creatively about site navigation elements can make your website more memorable overall. But when designing, don’t forget the real purpose of site navigation: to make it easier for users to see and access content. Not all the bells and whistles in the world can make up for website navigation that is unusable or that works against your other SEO efforts.

tags:

Source link