27

In our application we have several places where users see a list of items and can add, edit or delete an item.

enter image description here

For some of these lists adding new items is probably the most frequent used functionality whereas for others it's editing existing items.

Would you keep the order of the buttons consistent throughout the application (no matter which use case) or would it be good to have the most frequented button on the left (which is depending on the use case)?

2

7 Answers 7

38

Definitely keep the order of the buttons the same on all parts. There is nothing more disturbing than clicking a delete button where on the previous page there was an edit button.

As for the order, I would suggest ordering them by what you want users to click most often. Use UI design to guide the application user.

6
  • 2
    So then if someone were to use a bold button often but not italics, you would suggest not having them together? I don't see this as a useful ordering.
    – JohnGB
    Commented Dec 4, 2012 at 13:15
  • Not really sure what makes you think my answer would imply that - seems to me you understand my answer completely the opposite from what I meant. In fact, I mean to say that the designer should place the buttons in the way she wants the users to use them, thus guiding the user behaviour.
    – kontur
    Commented Dec 4, 2012 at 13:22
  • 1
    Thanks for your answer - in this case it's not my intention to guide the user's behaviour (in terms of manipulating). It just needs to be very obvious what can be done on a screen, although the aims a user wants to achieve on a certain screen can vary depending on the current use case. (It's a software for doctors that need to use it everyday, so it's more about getting things done quickly.)
    – Gabriele
    Commented Dec 4, 2012 at 13:41
  • Different use cases still does not mean that you shouldn't take into account what you think will be the desired user flow. Do you think delete will be pressed more often than the edit button, and how often in relation to those are new items added? Also see @André's suggestions concerning the neccesity to have those three buttons next to each other. You will always delete or edit a specific item, while adding is a functional element of the list, rather than of the item.
    – kontur
    Commented Dec 4, 2012 at 13:49
  • 2
    This is a blog posting from Microsoft about the design of the Windows Explorer ribbon for 'Windows 8'. It describes their decision making for a similar problem. As you would expect in a ribbon, button position and button size reflect feature usage. While Delete has a prominent place in the ribbon, New/Create does not. However, Windows users create new objects from inside applications rather than inside Explorer. Commented Dec 4, 2012 at 14:34
15

It is best to order them logically and group similar actions together. In your case with only three, the order that you have them now is good.

However one thing that you really should do it to move the delete button away so that it is not with other action buttons. I would place it aligned to the right to reduce the likelihood that it is accidentally selected.

1
  • 2
    Agree with JhonBG on this one, make sure that the "delete" button stands out (make it red for example) or move it away from other actions.
    – Igor-G
    Commented Dec 4, 2012 at 13:21
11

I think this is the logical order.

Create | Edit | Delete

And definitely keep the same throughout the application.

2
  • This looks logical. Is there any documentation on this being a best practice? I've looked but can't find anything.
    – PixelGraph
    Commented Feb 7, 2014 at 16:08
  • @PixelGraph not sure couldn't find one as well...
    – Igor-G
    Commented Feb 10, 2014 at 12:05
6

Considder if you can't change your design a bit further than by just changing the ordering of your buttons. Ask yourself if the buttons really make sense in the first place.

You currently have two types of buttons above your list: one button that creates a new item in the list, and two buttons that act on the currently selected item. The item has to be selected from a list under the buttons. Is that really the most logical flow? Usually, users tend to scan roughly from the top left to the bottom right (at least in cultures where text is ordered like that), and that is also the most logical flow through your form. So, first selecting the item from the list, and then moving back up in the form to click the edit or delete button might not be ideal.

You could consider moving the edit and delete actions to the context of the selected item itself, either by making them actions on the item directly (by just showing two small buttons on the row of the item), or by adding them to some kind of contextual menu or an extended item that appears on selection of the item only.

That would remove your problem too.

3

If the app is for a special ecosystem use the user guidelines given by the system. http://developer.android.com/design/building-blocks/dialogs.html

otherwise stay consistent

3

In my opinion New is very different from Edit and Delete, as it does not require an item to be selected.

Edit and Delete refer to some item, thus should kept hidden while no item is selected, and shown in a different position from New. If you really can't put them inside the list, consider putting them on the side.

I usually like to put the New (or Add, +, .. ),button below the list, as there is where the added things go, it will make the list grow to the bottom.

If the list were horizontal I would put A,B,C,D [add] and not [add] A,B,C,D. Same with a vertical list.

 ------ 
| item |
| item |
|______|
| ITEM |  Edit (visible only if item selected)
|______|  Delete (visible only if item selected)
| item |
| item |
 ------ 

  New

Or at least

 ------ 
| item |  Edit (visible only if item selected)
| item |  Delete (visible only if item selected)
|______|
| ITEM |
|______|
| item |
| item |
 ------ 

  New
0

I realize that this is a question one may ponder. However, when it comes to a set of similar list views, each containing a similar/or exact set of buttons you should keep the order of the buttons consistent. Otherwise this will be an obstructive feature in your UI and a user will then have to play hide and seek in every view looking for the correct button.

Other factors, such as how items are ordered in different lists depending on what's relevant for the type of items in that specific list is an example of a good inconsistency to implement, order of buttons however isn't.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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