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?
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:
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.
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
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 .
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.
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.
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.