Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

Before

After:

After

Thank you

share|improve this question
1  
You can edit your question and add urls to the images if you can upload them elsewhere. –  Marjan Venema Feb 5 '11 at 12:06
    
I've added one more question about this theme, even if more related to a specific software --> link –  franz976 Feb 14 '11 at 17:20
add comment

6 Answers

up vote 0 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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:

enter image description here

(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:

enter image description here

I hope this is somewhat useful.

share|improve this answer
    
I do not like your solution, imagine how many unnecessary action buttons are Placed on the screen? –  J. Lennon Sep 3 '12 at 15:27
    
If you are referring to the links on each item seperately, I understand what you mean, but on the other hand it takes only one click to choose an action on a single item. Otherwise you would have to first check the box, and then select the bulk action. It also depends what is the most common action for a user. –  nathanvda Sep 4 '12 at 9:47
add comment

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.

share|improve this answer
add comment

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).

share|improve this answer
    
As we're using an internal developing framework, we can't add links to the button bar. –  franz976 Feb 5 '11 at 13:38
add comment

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?

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.