Navigation toolbar design

Question

I'm working on a new web page using a navigation toolbar at the top of the screen. There is an employee profile box on the left, certifications (if any for that employee) in the center of the toolbar and some command icon buttons on the right.

The buttons are more links in functionality and on certain buttons dropdown menus appear when hovered over using a mouse. Nothing indicates the dropdowns might appear. There is not much real estate for navigation, so that is why the toolbar is there, which seems like a good way to get more in with less.

My questions are:

1. is this bad UX design mixing buttons with dropdown menus like this? To me it seems wrong?

2. the buttons are scrollable so you can fit more in, but how many buttons would be too many in a toolbar?

3. I'm thinking the design right itself (horizontal toolbar for navigation) is right for this, but it's implemented wrong? What do you need to utilize for a horizontal toolbar for navigation?

I can have input into the design now, but wasn't involved in the original process, so I'd like to get more information before presenting ideas for improvements.

Here is a very rough draft of the layout using Mockup Builder. Each set of round buttons on the top has a horizontal scroll to the right side for additional buttons and the text is above each button in the actual layout. The bottom images have a scrolling capability as well.

Answer 1

A sketch/wireframe of the UI would help in answering your queries.

But as far as buttons with dropdowns is concerned, it is not wrong. Infact many services use this kind of widget. There are 2 variations of this as listed below:

1. The button label is name of the group/category under which all actions under it is put, and the label is followed by a down arrow icon suggesting that this will open a dropdown like menu. Refer to Gmail More button as an example. Clicking the button will not take any action but show the user dropdown with all actions under it.

2. The button itself is a clickable action item (most used/default/recommended/context based action) and it has a small down arrow as an additional button attached to it. Both perform separate actions, i.e. clicking in the main area of the button will take the named action, and if the user clicks on the small button extension with down arrow, it opens a dropdown under the button showing more action items related to the main action.

Typically 2nd type of widget is very common in desktop applications, e.g. Eclipse uses it very often. But a lot of web apps are also using it increasingly.

It depends on the requirement as to which of the two is used in any application. Hope this clears your doubt for the button based dropdowns.

Answer 2

1. It is common practice to mix some user element types together, so the key here is to make it obvious that they have different behaviours and separate/group appropriately.

2. The general rule of thumb is that if you have between 2-7 then you don't need another group, but if it is over that then it gets difficult for people to find what they need easily.

3. There's no real right or wrong way to do this. There are usually constraints in terms of screen space, existing styles, user behaviour and other things to take into consideration. Sometimes you just have to balance/juggle things to best support what the user wants to do.