By Andrew Zeller
When you first arrive on a website’s homepage, what is the first thing you look for? Most likely it’s the navigation bar so you can begin your journey.People tend to be goal-oriented when cruising through a website, whether they’re on the hunt for a new checking account or researching mortgage rates. The navigation bar is a fundamental piece of every website. It’s always being tinkered with and evolving to enhance the user experience (UX). Interestingly though, it’s often given little thought by users as to what it is, how it’s used and the features that really lead to great UX.
Let’s take a peek under the hood at the evolution of website navigation and what key elements are necessary to best engage users.
Reimagining dropdown menus
A natural component of the navigation is the dropdown menu. It serves the most basic and evident of functions. It allows visitors to scroll over high-level categories, then be presented with a list of all the related products below, allowing them to navigate from there. Then why did dropdowns briefly disappear from websites? The answer is that it was found that the UX was limited and frustrating as responsive design became the standard.
With touch-oriented devices dominating the market, dropdown menus started to feel very clunky and difficult to use due to the average finger being larger than a mouse pointer. And limited screen space on mobile devices makes it harder to design a smart, functional dropdown menu. A key feature missing on mobile devices is hover—hen a menu item changes color, or adapts in some way to show that it is clickable.
Though less of a consideration to the average user, without a hover feature on mobile you never know if you are going to click and expand a section or be directed to a new page.
Dropdowns also became more unappealing when they ballooned to hold too many links as menus within menus became the norm. So they were abandoned in favor of more curated, high-level pages—which were designed to offer an easy and clean experience for users to access the product they were searching for after just a single click. A click in the navigation to open a menu is the same as a click to load a page, isn’t it?
As time went on, web designers embraced the dropdown menu again. With the enhanced functionality that browsers continue to provide, dropdowns have been utilized again, re-imagined smarter and easier to use. Not every site needs a dropdown, but in the case of some banks that have many products and services, they can be beneficial. However, it’s essential to really think about dropdown content so that it doesn’t overwhelm or lead to information overload. Visitors should be able to easily scan and find the information they seek.
Whenever creating any sort of list, the items in the first part or last part of the list are most visible. So, being very thoughtful with your information architecture to guide your users is essential. The desire to put every page in the dropdown can be strong, but too much choice can be distracting.
Since you are trying to bring users on a journey, too many options can lead to frustration and dilution of your message and the benefits your bank provides. Make the journey straightforward so users arrive at their intended page faster—those pages can always have links to other helpful information—but ultimately, you want to get out of the way of users who are ready to open an account!
With that knowledge in your toolbelt, you can avoid the frustrations of the past and think of ways to get more utility out of a dropdown.
No longer do you have to worry about the menus auto-closing when your mouse barely moves out of a skinny menu, or consider whether it is better to have a menu open on click or on hover, and how that translates over to a touchscreen device. There are even opportunities to promote within the dropdown space.
Hamburger menus for mobile
What happens to the navigation on a mobile phone when a dropdown cannot be used? Enter the hamburger menu.
We’re all familiar with the three little lines in the upper right corner of a mobile website. Once a user clicks they are presented with all the high-level pages for your website. How great and handy! In most cases, it would be impossible to list out all the high-level pages any other way. A question that is becoming more and more prevalent is: If a mobile hamburger menu should be used as part of the desktop experience instead of more traditional navigation, shouldn’t such navigation be the same on both? Well, not necessarily. Think about the user experience in this scenario. When viewing the site on a desktop or laptop screen, there is more space than on your mobile device for your navigation to hold all your high-level pages.
If you collapse all those pages under a menu on the desktop, you are forcing the user to make an extra exploratory click. The menu needs to be opened for the user to just see that first tier of pages. Also, some older users of your site may experience frustration when interacting with these hidden menus and aren’t always aware of the functionality of the hamburger menu, even with the label “Menu” present. While a hamburger menu on the desktop experience can free up some space for the layout and present unique design opportunities, you have to consider if it is worth it when it potentially prolongs a user’s time spent hunting for the page they need.
At the end of the day, everyone’s preference will be different and there’s no “one-size-fits-all” approach. Just be sure your navigation supports your users’ experiences and helps them find what they are looking for.
Andrew Zeller is a senior web designer at Pannos Marketing, based in Manchester, New Hampshire. Pannos Marketing is an award-winning, full-service communications firm specializing in strategic marketing, public relations, social media, e-commerce and website solutions for financial institutions. Email: [email protected].
