Will users know to click the top item in navigation menu?

by Urbycoz   Last Updated October 21, 2017 21:16 PM

I've got a navigation menu on my website which has several levels of submenu.

In the example pictured below I'd like users to be able to click "Services" in the top level menu and go to a "services" page. But I'm worried they won't think it is clickable, and will assume only the bottom level actually will take you to a page.

Can anyone advise? Has there been any research done on this?

enter image description here

Answers 5

Good question. I can only offer my opinion, no research.

In my opinion, it seems as though doing this is mixing 2 separate actions on one element (I've done it myself in the past).

I've come to the conclusion that the navigation click action on the "Services" item should be removed. You will face further problems when people use touch screens. E.g. when they tap the "Services" item will you open the sub menu or navigate to the Services page? This could be a big problem if those sub pages are only accessible from that drop down.

Some examples of solutions to the problem:

  • Have an option on the sub menu called "All Services".
  • Split the button in 2: a larger part that is the link to the Services page, and a smaller part with an obvious arrow and border that opens the submenu (from Nate Kerkhofs in the comments below)

Additional solution (from my comments) to cater for problems caused by hiding sub options on hover:

You should at a bare minimum offer that sub menu list of links (the ones hidden until hover) on the actual "Services" page. This is a backup for when the sub menu can't be opened (e.g. on touch) and so at least a user can navigate to the services page, and then navigate to a sub page from the links provided on there.

Here is an example from BBC Food. See the recipes menu option and its sub menu. Tap recipes to see that the sub menu is permanently visible on there.

enter image description here

Dave Haigh
Dave Haigh
June 04, 2014 09:20 AM

The big problem of your screenshot is that the "arrow" icon is looking like a horizontal arrow, which usually means that you click it and then come to another site.

The whole confusion here can be easily solved by an arrow that shows people that this menu item is expandable. Very much like this ▲ or ▼. The menu item becomes a dropdown menu item in this case.

Also for easier discoverability you should make it show on hover not only on click.

An example can be seen on amazon.com

Christoph Hellmuth
Christoph Hellmuth
June 04, 2014 09:56 AM

I don't think having the services part clickable is a good idea if it leads to a page that has nothing to do with the entities that are part of the drop down. Though i have seen sites that have the first item as clickable but the page that it redirects to is not a separate page but a page that has info on all the entities of the drop down. ( Kind of a home page ) . But this type of navigation would certainly cause problems on a touch device .

Athreya SN
Athreya SN
June 04, 2014 11:59 AM

Pro users will, but novice users won't. Index pages are hidden behind the hover. This is one reason among many why hover menus are a bad choice for navigation.

Why Hover Menus Do Users More Harm Than Good

To summarize:

Index pages are often hidden in the category name that users first hover their mouse over. Most users don’t know that the category name leads to the index page because it looks like it’s already selected. The highlighting on hover makes it unclear that the category name is a link. This hurts new users who often need index pages to give them an overview of content to know where to navigate.

June 04, 2014 14:28 PM

I think this IA is a bit complex for what seems to be a simple site. I would recommend bringing the content of services to the top level. So you top level nav is

home | web design |Identity | logo design | wordpress| portfolio (put testimonials here) | contact

Avoiding drop down menus like that in a simple site is really good idea - not only does putting your services in top level immediately disambiguates what you actually do, but it is painless for navigation and great for SEO.

June 08, 2014 20:51 PM

Related Questions

Best way to indicate for user to make selections

Updated August 19, 2016 08:06 AM

Responsive Menu that has a LOT of menu items

Updated May 24, 2018 19:16 PM