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.

I need some help with the layout of multiple buttons/links that have to be laid out in a row.

The delete button is furthest from the others in order to avoid error, but I will have a confirmation notice.

Screenshot of buttons and links. Save Changes button, Save as New Search link and Cancel link are left-aligned in that order and Delete this Search button is right-aligned

Any ideas on how to treat these in a more elegant way?

share|improve this question
1  
Need more context. Why are there 2 levels of representation being used, 2 are just links whereas other 2 are buttons? –  rk. Jun 14 '13 at 20:50
    
Sure The buttons are used for a editing a save search. Saving the changes is the primary function of the page. In order to simplify workflow, we wanted to also offer to save the changes to the saved search as a completely separate search. Since both start with the word "save" I wanted to make the distinction really obvious. The same thinking went behind cancel and delete. I want to make them distinct enough so that it is really clear which button does what. I should probably just spend a bit more time with this, but I wanted to see if anyone could point me to a best practices doc. –  Ana Jun 14 '13 at 21:10
    
@Ana, I think you're doing quite well already. The fonts could be bigger but I'm sure that isn't really an issue. –  Jerry Saravia Jun 15 '13 at 4:32
    
I also already like it as it is. I was wondering whether "Query" could be a better word than "Search" for the buttons? –  John Jun 15 '13 at 5:03
3  
@Ana How does this dialog pop up? If this is a full fledged application, I am imagining 'Save' and 'Save As' functionality, which is quite standard. –  rk. Jun 15 '13 at 5:11
show 4 more comments

2 Answers

I wouldn't say there's anything particularly inelegant about your design. You have the right number of options, i.e. no crucial functions are omitted and no superfluous functions are present. I only recommend two changes.

1) Reverse the location of the buttons. The confirm command should be on the right because western convention dictates a top-left to bottom-right flow.

2) Make "Save Changes" blue to match the other commands on the right or possibly green if you want to make it distinct. Unless you have specific branding reasons to use orange, it isn't sufficiently different from red to justify its use.

Example

share|improve this answer
2  
I like this answer. I would also consider making the "Delete this Search" button a text link so that it does not command as much attention. You could keep the icon and invert the color. –  Andrew Jul 27 '13 at 16:10
add comment

Generally I like to order things in a hierarchical manner from right to left. Right being the CTA type action that progresses the user through whatever journey their on to the left being the most destructive e.g. cancel/delete.

[delete this search], cancel                           Save as New Search, [Save Changes]
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.