One of the more interesting ways that the Gate 39 Media team customizes our clients’ website designs is through carefully-crafted user interface (UI) design. Central to strong website UI is how the user is prompted to move through the site. This includes the main path through which a user explores the site’s underlying pages: navigation menus.
DOWNLOAD OUR FREE FINANCIAL WEBSITE DESIGN GUIDE
The main navigation is often presented in a global navigation area, meaning it remains the same across the entire website. This area typically includes the brand’s logo and the high-level overview pages, such as About Us.
Navigation menu styles are functional to support the user experience, but are also inherently part of the design itself. Thereby, they are for function AND form. Here, we explore six different types of navigation menu structures, describing and displaying the usage factors for each type.
1. Sticky or Fixed Navigation Menus
A popular trend in UI navigation and one that we implement often, the sticky or fixed navigation menu does not disappear when the user scrolls down a web page. Sticky navigation is typically used in websites where the main call to action elements are within the primary horizontal navigation bar. Also referred to as persistent navigation bars, these menus work well to give a user a sense of control on actionable websites and on longer web pages.
2. Standard Horizontal Menu
The most common menu style is a horizontal text-based navigation. This type of navigation presents a horizontal list of the main site pages, typically named in one or two words. It can either be created with graphics or straight HTML text, both of which can have rollovers for a bit of user interaction
3. Mega Menu
A mega menu is a dropdown interface triggered by the user hovering over a link or defined area. This dropdown shows all options in one main mega-panel and often groups related topics into categories. Mega menus risk overwhelming the user with options and are tricky to elegantly display in responsive mobile views. The mega menu is not our go-to, but they do have their place, most notably in online retail websites and those businesses offering lots of options in one menu.
4. Hamburger Menu
Originally created by Xerox product designer Norm Cox in 1981, the hamburger icon was designed to simply indicate a list within the Xerox system. These days, the hamburger menu (or three-line menu) is a compact solution often seen on mobile responsive websites that hides the traditional file menu until clicked. Also referred to as a flyout menu, this dynamic option also provides a high-end, stylish, and subtle solution for a desktop version of a website where an ultra-modern minimalist design takes center stage. This trend is most commonly used by websites that want consistency as desktop/mobile designs converge.
5. Vertical Sidebar Navigation Menus
More prevalent in website designs of a decade ago, a vertical navigation does not produce a logical hierarchical structure for the even treatment of links, nor for sites that have any depth. Additionally, this vertical navigation unnecessarily uses up precious screen real estate.
While there are select exceptions where vertical navigation can work on inner pages of a website, vertical navigation is an out-of-date method on primary top-level navigation.
6. Hover Activated Dropdown Menu
A semi-controversial navigation menu type, a hover activated dropdown menu assumes intent of the user and provides additional menu options when a mouse moves across a link. Just because a user is hovering over a link doesn’t necessarily mean they intend to actually interact with it. With a well crafted UI, we do implement this in primary navigations on desktop versions to create a streamlined experience. In mobile, a hover activated dropdown is more problematic.
While navigation menus continue to evolve as digital habits evolve from online to mobile, in the end, selecting a navigation menu style should always be done with one key objective: to provide your website’s users with the most streamlined experience possible.
Design for Your Bottom Line
Every decision you make for your business matters. Every tool, strategy, and person you bring on board needs to contribute to the company’s growth and prosperity. If you’re considering a website redesign, you need to approach it with those thoughts in mind.
We firmly believe that your website should work for you, and we’re here to make that happen. We follow growth-driven design in our WordPress website projects, and our designers hold the Growth-Driven Design HubSpot Certification.
Set up a call today to speak to us about your website relaunch. We’d love to chat more about growth-driven design and show you some examples of our past work and how it’s driven sustainable growth for our clients.
You may also be interested in: