21

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

Improve this question
5
  • 6
    I'd expect clicking Services to open the menu... if clicking changes page I'd be puzzled.
    – Bakuriu
    Commented Jun 4, 2014 at 10:59
  • 1
    Certain navigation bar designs (e.g. this one which I came across today) don't look like menus, so I click the top item. Then the menu opens, so I try to click another item. But then the first page already starts to load. Two POLA violations in one design is what I'd call a bit of a failure.
    – ntoskrnl
    Commented Jun 4, 2014 at 19:03
  • Back then I would assume I've gotta clicked to open dropdown. But nowadays I often found navbar that implement it like that. So nowadays, I expect I only need to hover to open dropdown, because it started to be set in my thought that clicking will lead me to a new page. But yeah that's for input using mouse. Insight about what happen with touchscreen as being mentioned below is very good.
    – Konayuki
    Commented Jun 5, 2014 at 3:57
  • Interesting that Wordpress sites by default assume that all menu items are pages, including the top items.
    – Urbycoz
    Commented Jun 5, 2014 at 8:00
  • Drupal does the same thing and I hate it.
    – zkwsk
    Commented Oct 25, 2015 at 11:24

5 Answers 5

Reset to default
35

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

Improve this answer
5
  • 2
    I hadn't thought about touch-screen. Good point.
    – Urbycoz
    Commented Jun 4, 2014 at 9:42
  • 6
    If you don't want to add another option, you could 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.
    – Nzall
    Commented Jun 4, 2014 at 11:35
  • Does this mean there is any problem with menus that have no sub-menu opening pages? (e.g. "Home" on the example)
    – Urbycoz
    Commented Jun 4, 2014 at 13:37
  • correct. If there isn't a sub menu then navigate to the page e.g. "Home" on click/tap. IF there is a sub-menu e.g. "Services" then only open/close that sub menu on click/tap. If you want to provide navigation to the "Services" page either add a link in the sub menu or do what @NateKerkhofs suggested by splitting the button into 2 sections.
    – Dave Haigh
    Commented Jun 4, 2014 at 13:41
  • @Urbycoz this may sound contradictory to my answer but its an option - if you want to retain the navigation tap event on the "Services" and hover too, then you could make that sub menu visible when you are on that page. e.g. take a look here: bbc.co.uk/food/chefs the recipes sub menu appears on hover, but you can also click recipes in the main nav to go to that page, but when you are there the sub menu is visible. this caters for the problem I mentioned in my answer
    – Dave Haigh
    Commented Jun 6, 2014 at 9:02
2

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.

Improve this answer
1

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

Improve this answer
2
  • 1
    on amazon.com their hoverable items which reveal the sub-menus aren't clickable themselves.
    – Dave Haigh
    Commented Jun 4, 2014 at 10:00
  • I agree with this. When I saw the horizontal arrow I thought it was a link to an external site. You don't see it much these days, but it was almost convention a few years back.
    – Brendon
    Commented Jun 7, 2014 at 18:27
1

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 .

Improve this answer
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.