Button bar: criteria and position

Question

Me and my team are (re)thinking some UI details of our main application.

It's a "traditional" desktop application for the Windows platform. It's a business targeted application, and our customers are accountants, professionals, lawyers and (overall) their employees.

Currently we have a button bar placed at the bottom of each window. The main problem about it, it's that sometimes there are too many buttons and there is no way to emphatize the most important actions from the less ones.

So we decided to split the button bar in two, getting the "action buttons" (buttons about actions who "do something with the items") apart from the "navigation buttons" (buttons which call actions that end closing the window), where:

• Action buttons are placed on the bottom left of the windows: New Item, Details, Print, Delete

• Navigation buttons are placed at the very bottom right of the windows: Close, Back

• Is it a good idea?

• It would be clear to the final users the criteria?

I have prepared 2 different images:

Updated - loaded on my Dropbox account:

Before:

After:

Thank you

Answer 1

In in Windows environment, I would see more the navigation bar at the top (unless it won't be very often used..in that case there may be a problem somewhere else). I'll place the action-button bar as a toolbar on the left or right. I slightly prefer the right because it's more natural for right-handed people.And that's what we have on most popular apps such as Office.

For highlighting some actions I think that using color schemes for differentiation is pretty effective.

Answer 2

Is (separating action from navigation buttons) a good idea?
Yes.

It would be clear to the final users the criteria?
If well executed, they won't notice but act as if.

---

Your improvement violates one rule of thumb, though:

Navigation buttons go before what they affect.
Confirmation buttons go after what you confirm.

However, in that particular case, I'd say it's not much of a problem to violate this, given the layout cues (e.g. separator line) you suggest.

It would be still ok if you'd have them in one row, confirmation to the left, "Select Company" to the right.

If that's not a popup / sub-form, you could consider removing the explicit "Close", as this is typically in the window frame.

Answer 3

To me it feels more natural to place your action buttons at the top. This seems much more intuitive to me.

Upon first scanning the page it is then directly clear what the user can do.

There are a lot of different actions in your list:

• select company: closes the window, i presume navigate to a company; this is not the company view then? because if it was i would prefer a dialog allowing me to select another company, and upon close refresh the screen with the selected company.
• close: why not use the default window close? or leave this button at the bottom
• new: should be at the top, because i do not want to scroll over the page, but immediately create a new (company?).
• print: idem dito, make me print straightaway
• details and delete are a bit confusing, as they apply to the selection

So i would propose something like this:

(the image was made with an evaluation version of WireframeSketcher, hence the horrible watermark)

Small explanation:

• i think select company and new are the actions that will take you away from the page without having to scan the rest of the page.
• the bulk action would be details or delete for those rows that are checked
• print is close to the grid/table, as whatever is seen will be printed (it could maybe also be placed at the bottom, next to close
• close is at the bottom, at the top of the screen the user can use the default [x]; if she happens to have scanned the whole page and finds herself at the bottom, she can close the window there as well.

A somewhat more compact version:

I hope this is somewhat useful.

Answer 4

I think the logical separation of buttons into two groups is great. I don't understand why you put the two buttons that are on the right lower than the rest? You can separate into two groups and still have them on the same level. Also, I think it would be better to have all the buttons above the table instead of below.

Answer 5

Well I don't know. I happen to like to have all button at the bottom right. I am used to finding them there with wizards and the like. If it is about emphasizing some and not other buttons, I would suggest thinking about offering the most important ones as buttons and other actions as links. It's something many websites do nowadays (Save as a button, Cancel as a link to its right) and perfectly usable in desktop apps as well as the concept of clickable links transfers pretty well from web to desktop apps.

---

Having had a look at the images, I think your idea could work quite well and it would be clear to end users provided you are very strict in "categorizing" your actions and thus selecting on which bar they should appear. Instead of Action versus Navigation perhaps a more easily applied and thus recognized distinction could be "Item actions" versus "Form or general actions", where item actions always relate to the information in a grid (list, ...) and general actions always relate to the entire list or the form (if there is no list).

Answer 6

Your buttons for New, Details, Print and Delete belong above the table, like a toolbar. This is fairly standard in desktop environment, and in web based applications as well. There's no precedent for putting them in the lower left - I wouldn't do that at all.

The buttons on the bottom of the screen are your navigation buttons: Usually Ok, Cancel, or Ok, Apply, Cancel. You have "Select Company" and "Close". I wouldn't use "Select Company" since that sounds like an instruction to the computer. I would say something like "Use selected Company" instead. Did that help?