Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 8 down vote favorite

Here is a website's main navigation:

Simple navigation menu

Having sub-navigation on-click is pretty common and irreplaceable:

Child navigation dropdown


But as a user and designer, I have struggled with the case where there is only one child element in a drop-down:

Single-child sub-navigation on menu

In many cases, both are clickable: "Otters" will land on a general page about the animal, while "Sarah" will go to a page about a specific aquatic mammal.

It looks and feels awkward. What solutions are there for this?


Because in other cases, the distinction between a parent and child navigation element may not be so clear:

Similar parent and child elements in navigation menu

However, each page may be too long to be merged into one.

Or, alternatively, both may lead to the same page.

This will clearly depend on the implementation, but is there any established best practice? Any user-interaction research?

share|improve this question

4 Answers

up vote 2 down vote accepted

Menus don't have to be logic they have to be meaning and useful.

If there is one "child" then you do not need a "parent" like a unique radio button does not make sense.

Having sub-navigation on-click is common but very replaceable

Most web sites do not have sub-navigation menus. A book of one chapter does not need a summary: you just read it, a house with one room does not need a plan: you just enter.

That said: if there is a drop-down menu, then clicking on the "parent" usually opens the drop-down and does not lead to another page. If it is a hover menu, usually the "parent" is not clickable or it makes everything confusing.

Design the web site structure before building the menu should help avoiding this kind of problem. * Remember A website is not a taxonomic table.*

You can deal with exceptions by treating them as exceptions though :

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I guess if an entity has its own class then it might be enough important to be in the menu.

If not :

mockup

download bmml source

It is quite ambiguous to use the term intuitive

I found a definition in Klaus B. Bærentsen, INTUITIVE USER INTERFACES

An intuitive interface may be defined as an interface, which is immediately understandable to all users, without the need neither for special knowledge by the user nor for the initiation of special educational measures. Anybody can walk up to the system; see what kind of services it affords, and what should be done in order to operate it. While operating the device, navigation and manipulation of the system interface should proceed without the need for conscious awareness of the sensory- motor operational aspects of the interface

We are not at all in this kind of situation since the users uses it former knowledge in classes and fields to find what he wants.

share|improve this answer
I really like the example menus! The problem in this case is that it separates the "Gold fish" and "Iguana" out too much. (And the problem with "Other" is, well, it inherently can be less popular.) You could also group the dinosaurs and birds together :D – Baumr May 10 at 14:07
You can merge both with a Others in the style of the Iguana I guess. In those kind of organized website people go where they want to go, they do not pick up a way just because it is stressed, they might only if they have nothing to do. – Gildas Frémont May 10 at 14:12
up vote 6 down vote

Menus are a navigation element and so what make the most sense is whatever makes navigation easier for your users.

Your first example is a good menu, as although you have only one item under 'Otters', it wouldn't make sense renaming 'Otters' to 'Sarah' as it would then look like 'Sarah' were a type of animal. Additionally, if you get a second otter to keep Sarah company, you would then have two otters there and you wouldn't need to change the navigation structure.

enter image description here

Your second example is possible a poor menu depending on the implementation. Here there would be no loss of clarity if you simply renamed 'Accommodation' to 'Hotels'.

enter image description here

One small possible problem that you may have if you do that, is that the interaction model is no longer consistent. So as a user if I am used to seeing options under all the other menus, I may think that there is a problem with your site when 'Hotels' doesn't expand into another sub-menu. This is unlikely to be a big problem as that is probably the case already with 'Home' and possibly 'Contact'.

TL;DR: Example 1 good. Example 2 bad.

share|improve this answer
up vote 1 down vote

A approach I would take is to provide the alternate filtering option on the page of the main level only.For example,taking your last example of filtering by hotels the design would be something like that

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The advantage of this method is that you can provide the superset of results to the user but also provide them an option to filter down by only that parameter (in this case hotels). So the user is presented with all the relevant information with options to filter down as needed.

share|improve this answer
I like this, very creative! – Baumr May 10 at 16:17
up vote 1 down vote

I would wonder if theres any established best practice for this situation. This would depend on different factors.

Scalability: If your navigation menu is category based and there is significant possibility that the number of menus under it may increase, its definitely good to keep it as category. Example, If 'Accommodation' may contain 'Guest House', 'Service Apartments' in near future, its good to keep 'Accommodation' as main menu and single 'Hotels' as sub menu as of now.

Consistency: If you are having landing pages for different main menus, so 'Dogs', 'Pigeons', 'Walruses' have their landing pages and there are separate pages for Tom, Fat Tony also, it makes sense to keep separate landing page for 'Otters' and even separate page for 'Sarah'.

If you are merging two together, you might try best for labeling cleverly so that it becomes clear that the menu will lead to content for 'Sarah which is in Otters' category. But I doubt achieving this.

But overall I don't think there would be a problem by keeping single child menu as a part of main menu having two different pages.

share|improve this answer
Great points, you covered important stuff! – Baumr May 10 at 16:17

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.