5

I am redesigning a navigation menu for a web-based application. The current menu is a list of tasks, grouped by service. The list is growing steadily as we are adding new functionalities and now the users have to scroll down to see all of it. We ideally want the list to be only one page long. Two solutions have been presented:

  1. Present an accordeon-like menu that will expand for each service
  2. Grouping tasks together to reduce the menu

For example, our current menu presents options like:

User
- Edit
- Delete
- Change password

Mailbox
- Edit
- Delete
- Set permissions
- Manage spam settings
- Search spam

With solution 1, you would only see User and Mailbox, then clicking on either would expand to show the tasks outlined above.

With solution 2, the new menu would present something like:
User
- Settings

Mailbox
- Settings
- Permissions
- Spam

Solution 1, while decluttering the interface on the first level, will still present the user with a lot of text to read on the second level.

With solution 2, I am worried that the users won't find what they are looking for. For example, a user who is looking to change his password would not nescessarily know to go in the user settings.

Both have their advantages and disadvantages - so which is better? Presenting more options to the user so they can find the exact task they want to do, or grouping the tasks together under a general heading?

Edit: As requested, I have included a screen mockup of the application. On the left is the list of users, selecting a user brings up the task for a user on the right hand side.
alt text

3
  • How would the user get to "Delete User" in solution 2?
    – peterchen
    Oct 26, 2010 at 16:51
  • He would go in User - Settings. In that page, there would be a delete user option. I seems pretty counter-intuitive when I explain it...maybe Settings isn't the right word. Management would be more appropriate. Oct 27, 2010 at 17:25
  • ok, so you go to a separate page - that answers my question.
    – peterchen
    Oct 29, 2010 at 21:32

5 Answers 5

2

Of the two option given, I'd go for accordion menu.

A separate page means two clicks and (usually) a server round trip, and then you have to go back.

There is no advantage to do a "preselection" - unless there are to many options for a single page.

A single page (i.e. without the "grouped" menu, just a single link) is ok, if all common use cases involve multiple actions per selected user.

Otherwise, I'd use "accordion" menus, or javascript popup/mega/cascaded menus, and allow to pin commands tro the top of the list.

1
  • +1 for allowing to pin commands to the top - that's a great idea Nov 2, 2010 at 11:59
6

It would be useful to see the space you have available for your navigation or the space you are planning to use. Without knowing, though, if you want to include all of your options because you are afraid of generating confusion, you could apply a solution sort of like the mega menus trend. Here's a link of examples on the subject:

http://designm.ag/inspiration/mega-menus-showcase/

If you definitely want the summarized option, though, you might want to rethink the titles of the summarized menu options. You can read this article for further pointers about designing an effective navigation system

http://buildinternet.com/2009/09/principles-of-effective-web-navigation/

When summarizing, I'd suggest some tests with random users or even just simple polling on the clarity of the labels you've been using. It doesn't have to be such an elaborate study, but it might give you useful input on the subject.

1
  • I added a screen mockup of the application. As you can see, mega menus don't really apply here - I don't have enough space. I did get one good trick from the second article - having extra information on hover of the links would help. I could display the most popular tasks on hover of the Settings option. Oct 27, 2010 at 17:21
2

Over time, I've come to realize that the more settings there are, the more I prefer to have a single link, e.g. how Amazon.com has a single link that says "Your Account". The reason for that is very simple: after I click on the "Your Account" link, a page comes up containing all the possible choices, and if what I'm looking for is not immediately obvious, I can press Control-F or Cmd-F to find what I want on the page.

With menus, the only option with web apps is to read them. I find that this becomes tedious over time. And the bigger the menu (the mega-er?!), the more tedious it becomes to read, with no option to search. (The situation is different on desktop apps where menus feel more "natural" and they offer keyboard shortcuts.)

2
  • I hadn't thought of CTRL-F - do you think this is a power-user trick though? I've never noticed anyone doing that in a page. Also, in my application, the "Your Account" equivalent is clicking on the user list on the left hand side (I just added a screen mockup to illustrate this). So the tasks menu presents what you can do with your account. Oct 27, 2010 at 17:34
  • I don't use Ctrl-F that often. But when I do ran into a busy page, I find it invaluable. Conversely, I would find it frustrating if Ctrl-F didn't work when I need it most.
    – Hisham
    Oct 27, 2010 at 23:50
1

I find it counter-intuitive that a "Task" takes me to a new menu or settings page. A task is to me focused on a single topic - like "Manage roles...", "Change password..." or "Disable account" - not "Manage this and that and show me some more..." ^^ But that might just be me.

Ideally I'd really try to include all tasks plainly written, scrollbar if needed.

But to compress it, the way the toolbox in Visual Studio does it is quite neat. It would in this case be like the accordion idea - but with an additional category at the top that is pre-expanded that lists the most common or popular tasks.

v Basic
   Change password
   Edit user
   Search spam
> User
> Mailbox

Deciding what is a common task could either be a simple decision, or made dynamically based on what the logged-in user uses the most.

The categories could also be turned around a bit if there are few logical categories with many tasks in them, to make each category less crowded.

v Basic
   Change password
   Edit user
v Edit
   User
   Mailbox
   Permissions
v Spam
   Search
   Settings
v Delete
   User
   Mailbox
0

Use tooltips.

Make a summarized menu with a list of all the things that can be done on each page in a tooltip that shows when the user hovers over the item.

Also when you first make the transition give the user some tips. For example when the user clicks the user menu option show a small popup (like the ones used on this site) that explains the changes to the menu.

2
  • Where do you see popups on this site? I really like that idea but it would help me if I could show an example. Oct 28, 2010 at 17:23
  • When you are new on the site, it gives you some tips as you move along. Like when you first upvote an answer to one of your questions you get a small box that suggest you mark it as the answer as well. This box fades after a few seconds.
    – Sruly
    Oct 28, 2010 at 17:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.