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.

In our new product we have several pages grouped into several categories. One of those categories is more important than the rest. Moreover, we have relatively a small number of pages and categories (and no, we would not have more in the future, since this is a "lean" version of a fuller and richer app).

I am wondering how to spread the different options on the vertical nav-bar we have. Note that when hovering over the menu's buttons, a label expands to the right, and sometimes also sub-menu next to it.

  1. We could show only the categories, and under each, expand a sub-menu that shows all the corresponding pages. This alternative leaves us with a minimal menu.
  2. The other extreme is to spread all the pages, and group the options according to their category (and also color-code). This makes the nav-bar too long.
  3. The middle alternative is to show only the pages of the important category, and leave all the other categories inside a sub-menu.

See the following illustrations of the three alternatives (the first with the buttons only, and the other two expanded):

enter image description here enter image description here enter image description here

I really think that alternative 3 strikes the right balance. I just don't know if that will confuse users to see one category of pages spread out, and the rest hidden under a sub-menu. Do you think it is acceptable?

share|improve this question
add comment

2 Answers 2

http://dev.sencha.com/deploy/touch/examples/production/kitchensink/ seems to show a good attitude to nested items on a menu. Try clicking 'user interface'.

Also, add a 'more' button for the lesser used pages, and reduce a need for many categories.

share|improve this answer
    
I don't understand how this related to my question. Can you elaborate? –  Dvir Adler Feb 20 '13 at 15:46
    
It shows a reasonable hierachy method of display, and appropriate limitations. –  ir-g Feb 21 '13 at 11:10
add comment

You're not all that far out - I think I got your idea. But I would like to place sub menu items in an accordion menu instead to make it easier for the user. As it is now - one can't tell the difference between category items and category.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
My original ambition was to expose the options in the first level. Is this achieved by having the first section of the accordion open by default? Does this mean that the options of the second category are hidden? –  Dvir Adler Mar 15 '13 at 10:23
    
@DvirAdler Yes and yes. I took the inspiration from your images which lead me to the design on the left as default. Jou can set any catogory as deafult open in an accordion, maybe controled by a coockie if you want the users to quickly find where they where previously. –  Benny Skogberg Mar 15 '13 at 10:37
    
Nice idea, thanks –  Dvir Adler Mar 15 '13 at 15:22
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.