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.

Note: When reading this keep in mind we may have more of an information architecture problem than a menu usability one.


Suppose we have this menu:

Item 1              ............  Should link to Page 1 AND somehow show its children
    Item 1.1        ............  Should link to Page 1.1
    Item 1.2        ............  Should link to Page 1.2
    Item 1.3        ............  Should link to Page 1.3 AND somehow show its children
        Item 1.3.1  ............  Should link to Page 1.3.1
        Item 1.3.2  ............  Should link to Page 1.3.2
Item 2              ............  There is no Page 2. This should not link anywhere. Only show its children.
    Item 2.1  
    Item 2.2
    Item 2.3

Etc. with more items....


The challenge:

  1. We want children and grandchildren items hidden by default so we need a way to show them on demand.
  2. We dont want to use a flyout/hover interaction which our users have trouble with. We only want to use clicking.
  3. Some parent items are pages themselves and so they must be linked to somehow. Other parent items exist solely to provide a kind of group title to encompass their children and show site structure but these parent items are not pages themselves.
  4. User base: people above 40 and with little internet experience and sometimes limited vision/dexterity. They have problems with things you would not imagine.


I have thought of doing something like:

Link 1  [+]
    Link 1.1
    Link 1.2
    Link 1.3 [+]
        Link 1.3.1
        Link 1.3.2
Non-link 2  [+]
    Link 2.1
    Link 2.2

Where the [+] symbol would be an icon that shows you can open/close a sublevel. You would click on that to see children items but would click on the text to actually go to a page. I'm worried that the [+] icon would be too small to be easily clickable by our users.


Any alternative suggestions would be dearly appreciated as I have had this problem on 3 projects now and have never really found a solution I was satisfied with.

============================================================

UPDATE:

Well it looks like either we change the IA or do a treeview as described above and exemplified in one of the answers below. If anyone sees this post and has a better idea, please let me know.

share|improve this question
add comment

4 Answers

up vote 1 down vote accepted

I'm sorry to break it to you, but there won't be a solution for this if you're not ready to change the IA at all.

One (cheap and not very elegant) solution is to always move the content on the parent one level down and call it something like "overview" or "introduction"; like this when you click on a parent the sub-level opens and the first item of the sub-level is active. Not nice, but better than plus icons or stuff like that.

Hope that helps, Phil

share|improve this answer
    
Yeah, I keep thinking it might be more of an IA problem. I'm hoping I'm missing something though. That there might be some kind of interaction trick that would solve this without changing the IA... –  Andres Diez Oct 24 '11 at 8:40
add comment

Isn't a classic tree view what you need here?

Example: http://cssglobe.com/lab/sitemap_styler/01/# and http://boagworld.com/demos/sitemap/#

This is in fact very close to your own suggested answer, only the position of the [+] button is to the left of the link.

share|improve this answer
add comment

I would change the interaction model, and have the titles expand/collapse their children, while using an icon to follow the link.

It appears that most of the interaction with this menu will be to navigate the menu itself, and this exploration will be a much more common action that following a link. So it makes sense to assign this action to the large, easily reachable element (the label). You can distinguish between parents and childless items of the same level by color coding, or making the parents bold or some other formatting trick.

Now, the element leading to the linked page can be placed to the right of the label. In order to solve it visually, these can all be aligned to the right in a column, similar to a table of contents. You can also give this column a label which will help them understand the meaning of the icon. The visual similarity to a table of contents also employs a metaphor which they are probably familiar with, with the actual navigation done in the right-hand side of the element (page numbers).

share|improve this answer
    
The reasoning seems logical but people are so used to clicking on text links I'm afraid this might feel awkward to them. Interesting idea though... Following conventions is so useful most of the time that its hard to know when to question them. –  Andres Diez Oct 24 '11 at 8:22
add comment

Depending on the specifics of your design you may be able to improve the treeview model with layout:

Link 1             [+]
  Link 1.1
  Link 1.2
  Link 1.3         [-]
    Link 1.3.1
    Link 1.3.2
Non-link 2         [-]
  Link 2.1
  Link 2.2

This gets the click target of the [+] away from the text link (allowing it to be both larger and easier to hit without accidentally triggering another action) and aligns them, which makes it so a user doesn't have to hunt to find a particular line's 'show' function.

Also: I think your non-link case is going to result in user confusion, especially among older users. Similar items in your IA should take parallel form — being able to click one top-level item to navigate to that page and not being able to click another is going to feel broken.

share|improve this answer
add comment

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.