Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
6  
I'd expect clicking Services to open the menu... if clicking changes page I'd be puzzled. –  Bakuriu Jun 4 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 Jun 4 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 Jun 5 at 3:57
    
Interesting that Wordpress sites by default assume that all menu items are pages, including the top items. –  Urbycoz Jun 5 at 8:00

5 Answers 5

up vote 31 down vote accepted

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)
share|improve this answer
2  
I hadn't thought about touch-screen. Good point. –  Urbycoz Jun 4 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. –  Nate Kerkhofs Jun 4 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 Jun 4 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 Jun 4 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 Jun 6 at 9:02

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 .

share|improve this answer

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.

share|improve this answer

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

share|improve this answer
1  
on amazon.com their hoverable items which reveal the sub-menus aren't clickable themselves. –  Dave Haigh Jun 4 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 Jun 7 at 18:27

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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