Search code examples
user-interfaceusability

How can I simplify my toolbar interface as the list of commands grows?


I'm writing an internal-tools webapp; one of the central pages in this tool has a whole bunch of related commands the user can execute by clicking one of a number of buttons on the page, like this:

toolbar http://img709.imageshack.us/img709/1928/commands.png

Ideally, all of the buttons would fit on one line. Ordinarily I'd do this by changing each widget from a button with a (sometimes long) text label to a simple, compact icon - e.g.

button labelled "Save" http://img337.imageshack.us/img337/773/saver.png

could be replaced by a familiar disk icon:

disk icon

Unfortunately, I don't think I can do this for every button on this particular page. Some of the command buttons just don't have good visual analogs - "VDS List". Or, if I needed to add another button in the future for some other kind of list, I'd need two icons that both communicate "list-ness" and which list. So, I'm still considering this option, but I don't love it.

So it's come time for me to add yet another button to this section (don't you love internal tools?). There's not enough room on that single line to fit the new button. Aside from the icon solution I already mentioned, what would be a good* way to simplify/declutter/reduce or otherwise improve this UI?


*As per Jakob Nielsen's article, I'd like to think that a dropdown menu is not the solution.


Edit: I'm not looking for input about the icon idea. I'm looking for other solutions. Sorry my example disk icon was a small one; it was just an example. I'm showing a bigger one now to hopefully be more clear.


Solution

  • alt text

    I would add a More Link Like Google does. See the Top Bar of Google with WeB Images Map More >>

    To this more >> drop down you can add logic to add button less frequently used by user or something like that.