How to resolve a multilevel sidebar menu where parent sections must show children AND link somewhere

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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).

Answer 4

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.