One of the more interesting ways that the Gate 39 Media team customizes designs for clients seeking a new website is through carefully-crafted user interface (UI) design. Creating UI for a website includes how the user is prompted to move through the website, including the main path through which a user explores the underlying pages of a website: navigation menus.
DOWNLOAD OUR FREE FINANCIAL WEBSITE DESIGN GUIDE
The main navigation is often presented in a global navigation area — meaning that it remains the same across the entire website. This area tends to include the site logo and functional navigation such as login and search links.
The styles for navigation menus are functional, supporting a user’s experience, but are also inherently part of the design itself (and are, thereby function AND form). Here, we explore the different types of navigation menu structures, describing and displaying the usage factors for each menu type:
1. Standard Horizontal Menu
The most common navigation 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
2. Hamburger Menu
Originally created by Xerox product designer Norm Cox in 1981, the hamburger icon was originally 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 menu option also provides a high-end, stylish and subtle solution to a desktop version of a website where an ultra-modern minimalist design would take center stage. We’re seeing the hamburger menu trend more into desktop website designs as desktop/mobile designs converge.
3. Mega Menu
Often seen in online retail websites and those businesses offering lots of options in one menu, a mega menu is a drop down interface triggered by the user hovering over a link or defined area. This dropdown usually 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.
![Mega Menu]()
4. Scroll -Triggered
Scroll-triggered web effects have grown in popularity by bringing the user experience to a new interactive level of online viewing. These user interface effects are typically seen in parallax effects or in animations, which are (you guessed it) activated by the user scrolling. In terms of navigation, scroll-triggered effects offer a depth and animated experience that can make navigation simple and fun to interact with. We’re a fan of using scroll effects judiciously as too many instances of this can be overkill and ruin the user experience.
5. Vertical Sidebar Navigation
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 are intending to actually interact with it. With a well crafted UI, we do implement this in primary navigation on desktop versions to create a streamlined experience. In mobile, a hover activated dropdown is more problematic.
7. Sticky or Fixed Menu
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.
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.
—
BE SURE TO CHECK BACK AND FOLLOW GATE 39 MEDIA’S #WORKINGREMOTELY SERIES
You may also be interested in: