Startup i idiotyczne hasło

We explore the most common website navigation schemes and identify the best approaches.

The test setup

One question that comes up often is “What is the right way to handle dropdown menus?” It seems simple, but there are many different ways you could tackle this decision.
Should the top item in the navigation be clickable, or a label only?
If it is clickable, do we repeat the link in the dropdown menu, or only show it at the top?
And what about interacting with the dropdown? Should it be triggered on hover or on click?
What do we do for mobile?
What about accessibility? 
When looking for answers on the internet, I came up short. Top websites across industries seemed to all have a different way of doing things. Any articles that addressed the topic didn’t go as in depth as I wanted and mainly relied on vague “best practices” that differed between articles. I wanted data that provided an answer once and for all, so I conducted the study myself. 
In this article, I’ll share the results of a usability study that tested several different iterations of a navigation prototype as well as a survey of top websites and the patterns that they are using. To conduct the study, I created a navigation prototype in Figma and tested it using the tool Useberry. I recruited participants from the recruiting service Prolific. I’m happy to say I believe the results give us some definitive answers on the true best practices for dropdown menus in navigation.

Variations to Test

First, let’s go over the different variations I decided to test. They all use a simple wireframe prototype for a fictional fitness club website. Each prototype used the same control navigation with minor variables between them. I made sure to make the navigation and the tasks participants need to complete pretty simple so as not to confuse anyone.

Each participant was asked these four tasks in a random order. Two questions target the top level/overview item, and two questions target items in the sub nav. 

• Where would you click to learn more about what this gym is like and its background? Answer: About (in version 3 this was called “Overview”)
• Where would you click to read about what makes this gym different and the benefits of joining? Answer: About → Why Choose Panda Gym

Where would you click to learn about the instructor-led programs you can sign up for? Answer: Classes (in version 3 this was called “Overview”)

Where would you click to learn about the gym’s pilates programs? Answer: Classes → Pilates
 There were three main elements I wanted to test:

What happens when someone clicks on the top item (or the label that triggers the dropdown opening)?

What happens when someone hovers on the top item?

Is it helpful to have some sort of “overview” page that references the top item in the dropdown?
I’ve seen combinations of each of these navigation schemes before, and I wanted to find out which option would perform the best. With Useberry, I was able to have participants complete the study in an unmoderated way to save time and money. I could still watch the sessions later to analyze their mouse movements and clicks in detail. I recruited 50 participants for each version of the test, and my coworkers and I watched and analyzed every session.