Actions and navigation buttons in the same toolbar?

Question

In our application, each view has a title bar and a toolbar. The toolbar contains two types buttons:

• Actions: e.g. Create new project, action is performed in the same view
• Navigation links, e.g. Go to workflow, link leads to another view

As our app is extended, the number of buttons increases as well. Example:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Currently there isn't a good way to tell both categories of buttons apart. What is a common practice for solving this? Should action buttons even be on the same toolbar as nav buttons?

EDIT The action buttons I mention are not related to specific content. If they are, our app will display them in the vicinity of that content.

Answer 1

Sometimes buttons are not content-dependant, so they could be placed along with links, here is an example:

So the roles of controls should be quite distinctive. To make distinction even more noticable, you can separate the controls. So the Gestalt principle of proximity gives clear distinction between these two groups: functional buttons vs navigation links.

The second problem is increasing complexity. Again, if the buttons are not context dependant (otherwise @dendini's answer is great), just display the most important controls and hide others. It's not a new pattern, see the More button on the image:

Answer 2

Desktop applications routinely combine navigation and action controls on the menu bar, so I don’t think it’s inherently confusing. The most important thing is to have clear labels so users can tell what a control will do before they click it. However, there are definite advantages for some redundancy in a design’s communication to users –adding elements that confirm what each control does.

There’re several techniques for distinguishing your sets of controls, which may be combined:

• Group your action and navigation controls separately, like you’ve done in your wireframe. Users expect similar commands to be near each other (e.g., Cut and Copy), so this will be a clue that the controls nearest each other have something in common while being distinct from farther controls. You may want to consider putting your navigation controls first on the tool bar. That may be more consistent with how users think of the task (first they navigate to content, then they act on the content).

• Put a divider between the action and navigation controls. For example, a little white space will accentuate that controls in a set are related and distinct from the other set.

• Add a label to each set of controls. You can put a label to the left of each set (e.g., in the white space you made to separate the sets) or underneath (i.e., like the Ribbon in MS Office). For example, instead of each navigation button being labeled “Go to A”, “Go to B”, you can have a label to the left “Go to:” followed by controls labeled “A”, “B”, etc.

• Use buttons for the action commands and links for the navigation commands. Users generally expect command buttons to do actions and links to navigate. This is sufficiently strong that you can probably eliminate the “Go to” text from the links –it’s obvious that links go to places. You may have to play around with the graphic design so it doesn’t look weird (assuming your users care). For example, it may be sufficient for the action controls to have black font and the navigation controls to have colored (bluish?) font. On mouse-over, the action controls acquire a rectangular border (confirming they’re buttons), while the navigation controls acquire underlining (confirming they’re links)

Answer 3

Your solution seems confusing to me and probably to you if you asked this question, and usually if something "seems" then 90% of times "it is".

I would generally expect the top menu bar to permit me to navigate on a certain page and then on that page to be given particular actions.

So actions in my opinion should be where content is, because they are relative to content and not to navigation.

Also consider this, imagine a navigation links lands you to a page where two objects are represented and one separate action for each object is given: with your solution you would have two actions on the top bar with no indication to which object they refer to.

By putting the actions in the content area instead you are giving them meaningful context to the object they belong to.

EDIT: according to your last edit these actions are independent of context, in this case probably a more specific example of such actions could clear the domain. Nevertheless if you don't feel completely confident with putting them on the same bar as the links you should probably consider a vertical menu on the left just like NextDoor example below: