Which is the correct order?

interaction
ui
ux

#1

I have a box where is going to be placed 3 buttons:

  1. Edit
  2. Delete
  3. Restore

These buttons are going to be placed on the right up corner of the box.

I was wondering which would be the right order for them.

I know my own answer but I’d like to confirm it.

Thank you!

Place


#2

what does restore do?

Personally, I prefer to place delete buttons away from continuation buttons. Too many instances of users accidentally pressing delete!


#3

Hi! thank you for your answer.

  1. Edit: you can load an image (there is a default image loaded)
  2. Delete: you delete de image giving a non-image space
  3. Restore: you can load again the default image.

#4

It’s quite hard without context to understand exactly what these buttons do. I’d advise you to run some usability tests. Recruit some users and ask them to perform edit, delete and restore tasks. It’s the only way to know for sure which placement is better. You can also test how effective the labelling of each button is, because how you described the action for the edit button was not what i expected


#5

Ok I’m going to try to give you my point of view.

The key is about where should be “edit button” keeping in mind you have the button group on the right up corner.

If you would have to edit the image (button number 1), which position you would click before? Number 1 in option 1 or in option 2?

I know is difficult to know without context. Just is the exercise. I think here psychology could have part too.

Thanks.


#6

Maybe now is “more” understable:

Ops


#7

Do you’ve to make one group of 3 elements? Can you make 2 elements of one group and other group of one element?


#8

Hi dotafxoc! Unfortunately there is not possible :grimacing:

Well I think the correct order is Option 1. For several reason:

  1. On this box, usually the user wants to change the image (more than delete and restore it). So as we are on the right corner, the first thing we are going to “read” is the button which is near on it, in this case “the pencil” (edit).

  2. If we thing current Android behaviour on phones we have:

buttonbp-11

Similar than option 1. (left to right): go back (restore), go to main panel (delete) and select one screen you have open (edit).

What do you thing about??

Thanks!


#9

Okay, so first of all are you designing for an android or iOS? If android, in which context? It depends upon what problems are you trying to solve. ‘Edit, Delete and Restore’ is for what? Where will it be placed? left or right side? I think it’s right side because you just mentioned about reachability.


#10

The point is I’m designing for web. This block of buttons (edit, delete, restore) it will place on right up corner, like in the image.

Thank you for your feedback.


#11

Are you going to keep in mind that in future is it going to be designed for android or iOS?

Anyways - I think it should be like this - Edit, Restore and Delete.


#12

It will works on mobile too (web version on mobile, not like a app) but the main use is on web.

Thank you.


#13

Then I told you what it should be according to me. You don’t want your users to be seen ‘delete’ first or second. I believe it should be in 3rd position. Most of the time users use edit more than restore or delete. So, according to that, it should be on first. Restore will be used often less than delete but showing delete on 2nd position is like forcing your users to delete when you don’t want them to delete.

What do you think?


#14

Yes I’m agree with you. Could be something like that:

Asset%208

My big doubt is about the way to read. If the buttons were on the left, definitely your option is the best. But I have doubt about what happens if Edit button is in the 3rd place when the group in on the right side.

But maybe your way is a good point.

Thank you!


#15

You start to read from left to right. In this case, either you place it in left or right. User will still read left to right at right position.


#16

I like the last option. The one where the delete button is on the right. It makes sense to me; delete being the most extreme out of the three options.

Is there any way you can put a bit of extra space next to the delete button?


#17

Well in first intance there is no way to change but obviously always I can make new designs and proporsals.

Thank you for your feedback!


#18

Without context it is hard to decide but i would prefer order:

  1. Edit
  2. Delete
  3. Restore