Should buttons appear on a menu bar?

Question

I am reviewing a design change in a desktop application. The proposed change is implemented with standard clickable buttons in a menu bar, appearing to the right of the normal menu items. These are standard action buttons, like the ones you would use for an OK button in a dialog (although they carry out an action more akin to what menu items are normally used for). Note that this is not a tool bar; these buttons appear on an otherwise normal menu bar with pull down menus like File and Edit.

Here's a representative shot of just the menu bar:

It seems self evident to me that it would be better to put these commands in a standard pull down menu, perhaps augmented by additional commands in a contextual menu or toolbar. It is apparently not a self evident to the other programmer, though.

I am looking for clear design guidelines that directly address whether components other than pull down menus belong in a pull down menu. I found one such reference from Oracle, but Apple and Microsoft UX guidelines seem silent on the issue.

If possible, I'd like something more specific than the ubiquitous "use components for what they were designed for," although I realize this comment does address this issue.

Alternatively, if this has somehow become acceptable in some UX designs, pointing to examples or design guidelines saying so would also be appreciated.

Answer 1

welcome to StackExchange!

(Sorry for the length of this answer. I felt like I needed to make sure you have enough fodder to convince whomever wants you to place buttons in the menu bar, that that is a bad idea, at least on a Mac. ;) )

You mention that this design is for a native desktop application. I'm most familiar design patterns for macOS, so I'll respond for that platform.

The intro paragraph to Apple's Human Interface Guidelines chapter on the Menu Bar states this:

The menu bar at the top of the screen provides a home for the top-level menus in your app. These menus can include standard, system-provided menus, as well as custom menus your app defines.

While this does not explicitly mention what does not belong in the menu bar, this statement is pretty clear: the menu bar is for menus, and that's it.

Interestingly, Apple violate this rule themselves, as the icons for Siri and Spotlight at the right edge of the menu bar behave like buttons. But that's not that problematic, as I'll explain below.

What you will never find in a well-designed Mac app's menu bar, though, are standard text-label buttons like the ones you're showing in your design mockup.

Besides not being "compatible" with the above HIG quote, there are (at least) two further problems:

1. There simply is not enough room.

   Especially on smaller laptop screens, and with more powerful applications (think Sketch or Xcode), and the user really liking all those "menu extras," ;) you'll not have enough room in the menu bar to place a text-label button.

   As an example, here's the Safari menu bar on my machine as I type this:

   

   Maybe you could place, what?, one button with a medium-length label in that narrow space near the center. Even if there's some space, you'd still be faced with a more serious drawback:

2. Buttons in the menu bar might not sufficiently reflect the context within which they trigger an action.

   If I click on the default Siri or Spotlight "button," this triggers a system-global action: Siri can command the OS and potentially all applications, and Spotlight can search the entire file system and the web!

   In contrast, all menu items only affect the front-most application (with the exception of some items in the Apple menu, of course).

   If you place a button in the menu bar, it might not be obvious to the user whether that button does something strictly within the scope of the front-most application, or whether it triggers something beyond that scope.

   If you use a menu instead, users will immediately understand that the menu operates within the context of the front-most app. Why? Because that's how all other applications' menus work, so you should keep your own app's behavior consistent with all those other apps. ;)

Bottom Line: At least on macOS, never place application-specific buttons in the menu bar.

In your specific case, depending on what those buttons trigger in your application, consider using a menu instead, or add them in a toolbar within the app's main window(s), as you already wrote yourself.

Good luck!

Answer 2

I will probably use button if user is performing any action (Longing in popup) other than navigating from one page to another. Whatever you are going to use make sure it is consistence all over the site.