WE CREATE BRANDS PEOPLE L♥VE
Share

How to Choose the Correct Menu Style


Tegra - June 22, 2020 - 0 comments

How to Choose the Correct Menu Style

How to Choose the Correct Menu Style ✔

Courtesy of @leeohgonzalez

🤔 Are you delivering a thoughtful navigation system to your users? ⠀

Menu’s should be purely functional & help support a user’s experience.

You can reduce drop off rates on your site by making sure user’s can find the proper links they’re looking for 👀

Sticky nav’s gives users a constant location to access links while navigating through the site.

But, if your site doesn’t have a ton of web pages then maybe a sticky nav isn’t necessary to reduce clutter.⠀

Menu Styles 
Your navigation style should primarily support a ser's experience & be extremely functional. A menu style can also have design benefits & be a reflection of your communication style to your consumer. 
Let's explore the different styles & figure out which will be best for you.

Menu Styles

Your navigation style should primarily support a ser’s experience & be extremely functional. A menu style can also have design benefits & be a reflection of your communication style to your consumer.
Let’s explore the different styles & figure out which will be best for you.

Standard Horizontal  The most commonly used is the horizontal text-based navigation. All links are visible & you can enhance the user experience by creating a sticky bar and/or including dropdowns for organizing content. Use this style of navigation to minimize interaction & confusion.

Standard Horizontal

The most commonly used is the horizontal text-based navigation. All links are visible & you can enhance the user experience by creating a sticky bar and/or including dropdowns for organizing content. Use this style of navigation to minimize interaction & confusion.

Hamburger Menu  With mobile devices now driving over 52% of web traffics design is now focused on a mobile-first approach. The hamburger menu helps consolidate information into a slide out menu reducing clutter on the landing page & having a dedicated location for navigation.

Hamburger Menu

With mobile devices now driving over 52% of web traffics design is now focused on a mobile-first approach. The hamburger menu helps consolidate information into a slide out menu reducing clutter on the landing page & having a dedicated location for navigation.

Full Page  Similar to what can be achieved through a hamburger menu, a full page desktop menu utilizes each corner of the webpage to navigate users. This is most likely used by creative agency & studio portfolio sites where there aren't a large list of pages.

Full Page

Similar to what can be achieved through a hamburger menu, a full page desktop menu utilizes each corner of the webpage to navigate users. This is most likely used by creative agency & studio portfolio sites where there isn’t a large list of pages.

Bottom Page  Understanding how mobile design users hold their devices is what helped spawn this design execution. With a majority of users have a more natural lower grip on their phone, building a navigation bar that's easier to reach just makes sense.

Bottom Page

Understanding how mobile design users hold their devices is what helped spawn this design execution. With a majority of users have a more natural lower grip on their phone, building a navigation bar that’s easier to reach just makes sense.

Vertical Stack  Probably the least used navigation style because of how unconventional. The vertical stack uses icons to help navigate users & is typically used for dashboard focused sites. Overall, the menu can be fairly distracting if not designed properly & creates an unusual aesthetic users aren't familiar with.

Vertical Stack

Probably the least used navigation style because of how unconventional. The vertical stack uses icons to help navigate users & is typically used for dashboard focused sites. Overall, the menu can be fairly distracting if not designed properly & creates unusual aesthetic users aren’t familiar with.

Carousel Menu  The carousel menu design takes advantage of users scrolling when landing on a page. The menu breaks down into specific sections at each scroll & designers have more control over the users viewport. This is a great way to communicate how long users can expect to be scrolling.

Carousel Menu

The carousel menu design takes advantage of users scrolling when landing on a page. The menu breaks down into specific sections at each scroll & designers have more control over the users viewport. This is a great way to communicate how long users can expect to be scrolling.

Keep These Tips In Mind  Understand how your user navigates through sites 
Take into consideration that most users will be on mobile 
Is it better if links are visible? Or hidden?

Keep These Tips In Mind

  • Understand how your user navigates through sites
  • Take into consideration that most users will be on mobile
  • Is it better if links are visible? Or hidden?

Get 50+ Marketing Tools we use in Tegra 🤘

Follow the link 👉 tegra.co/tools to get a list of 50+ free (or cheap) growth marketing tools that we and other growth agencies use to scale businesses like yours + growth hacking insights.

Related posts

Leave a Reply