10

The old Windows menu bar (File, Edit, View, etc. ) is tried and true, but seems to be disappearing from popular usage. I have a new desktop/client application that I am developing and I would like to upgrade to some current, and effective, UI elements. Also, I don't really have enough commands to justify a full-blown menu bar. I only have:

  • New
  • Open
  • Save
  • Save As
  • Language
  • Export to PDF
  • Print
  • Help
  • About

What is a good way to present these commands to the user, but keep them mostly out of the way until they are needed, like the old menu bar did?

1
  • 1
    Based on that list you have a FILE and HELP menu...perhaps with an OPTIONS one as well. Why replace 30+ years of familiarity?
    – DA01
    Nov 12, 2010 at 15:24

4 Answers 4

11

In general, I caution against abandoning anything tried-and-true just to be current –some current things are fashion statements rather than usability advancements. If you’re really think it’s important to keep the commands “mostly out of the way until they are needed,” then use a menu bar. It looks like all you need is a File and Help menu, so it’ll constitute very little clutter indeed. Maybe you can even use the space after the Help menu for something other than commands (e.g., status annunciators), making your design more compact. Anything more current than File and Help is likely to be less familiar to your users, and therefore more likely to be confusing.

However, there is definitely an advantage to not hiding your commands like the traditional menu bar does. Displaying all the commands full time makes it easier for users to find commands and, by sheer exposure, more effectively educates the users on the capabilities of the app. When you have so few commands, and at least some of commands are used in every session, it makes more sense to display them in a single-level menu rather hide them in pull downs. Another issue with the menu bar is that it requires two clicks (or a click and drag) to select an item. In contrast, displaying the commands in a single level takes one click, making a more efficient design.

Perhaps you should put all the commands in a button bar. If you want, you can use split buttons where you want and put rarely needed commands (maybe Save As and About) on the drop-down. Such a button bar would take up no more space than a typical toolbar or multi-menu menu bar, so I wouldn’t worry too much about it being in the way.

Another option is to place the commands in a vertical bank of buttons on the left side of the window, web-style. Users can scan down a list of commands more easily that across.

2
  • I agree with Michael: don't replace the menus if you don't have to. Drop-down menus do not occupy much space (typically no more than 20 px), are well-known and understood, work with a number of other interfaces (mouses, keyboards, screen readers), and provide a good way of organizing actions to "keep them out of the way until a user needs them." Nov 11, 2010 at 11:16
  • I like your idea about the vertical bank on the left side. That, combined with a little bit of @Hisham's suggestion would blend in very well with my existing design. Thanks.
    – Stewbob
    Nov 12, 2010 at 12:41
4

You can use a "gears" button that invokes a menu, e.g.:

alt text

Keep in mind accessibility for folks who must use the keyboard or other OS accessibility functions. You might still want the standard menu bar even if it's sparse, or at least make sure that each item on the gears menu has a command key equivalent, or accelerators on Windows.

1
  • 1
    Google Chrome does this, in a keyboard-friendly way. If you press Alt (or F10), the menu-button gets focus, at which point you can press down (or space, or Enter) to open the menu, or press Tab/Left/Right to jump to other buttons (or to the address-bar). Nov 11, 2010 at 11:36
0

Toolbars disappeared because for years browsers couldn't support them properly. With js frameworks its ot more reasonable. I use extjs (Sencha) which has excellent interaction design. From a UX standpoint, toolbars are perfectly good UI elements. Use them when appropriate. The apple menu is in vogue fromm a stylistic standpoint, but its not terribly scalable.

4
  • What does this have to do with browsers? He's talking about an application on Windows. Nov 11, 2010 at 22:06
  • thanks for the info. Even if a little off-topic, I found the information useful. +1 from me.
    – Stewbob
    Nov 12, 2010 at 12:43
  • I'm not sure when MS fired their UX teams, but I find the 'glowing orbs', 'auto hide menus' and 'teensy tiny icon menus' that they've been spitting out recently hard to justify. Perhaps they moved their entire UX staff to the Windows 7 phone once they saw the iPhone.
    – DA01
    Nov 12, 2010 at 15:25
  • I missed the fact that it was a client/server app. THAT's the thing that has gone out of style. In the cloud, yo!
    – Glen Lipka
    Nov 12, 2010 at 17:43
-1

You should use the Ribbon - it is the reason that the standard menu bar is disappearing in Windows (and for good reason, it is a ton more useful). In fact, it is Microsoft's new application UI standard for any Windows-based application.

6
  • 4
    While useful for large-scale apps, the ribbon would be the exact opposite of my stated needs. I have never seen a UI design that is more obtrusive and hogs more screen real estate.
    – Stewbob
    Nov 12, 2010 at 12:40
  • @Stewbob, it doesn't hog screen real estate if it helps the user get the job done. It also works fine for small-scale apps as well. It makes everything easily available and very clear as to what can be done and how. Nov 12, 2010 at 14:59
  • 1
    "ton more useful" = what's that statement based on? Has there been data released on this? I've heard it's seen some benefit in MS Word, but, well, MS Word was bad to begin with.
    – DA01
    Nov 12, 2010 at 15:26
  • 1
    The ribbon is really confusing and unintuitive. When I had to use Microsoft Office at college recently, it took me about 5 minutes to work out how to print! The Windows icon in the top left corner does nothing to suggest it might have the capability to print. Also, using ribbon will mean that it will be harder to port the app to another platform should you ever want to.
    – david4dev
    Nov 12, 2010 at 16:55
  • @david4dev: I had had difficulty finding out how to print (I finally googled it), but I doubt that it is an inherent problem with the ribbon. Nov 13, 2010 at 2:30

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.