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 have a list of string items which I want to use inline editing for modification. Before a user can change a string they need to hit an edit button to enter edit mode. There's also an inline delete button which will delete the associated item. These buttons will only be visible when the user hovers over the item in the list.

My question is regarding the alignment of these inline editing/command buttons. Each string item will be of a different length and I don't know whether these buttons should:

  1. Align vertically at the end of the longest string.
  2. Be placed immediately at the end of the string regardless of its length.

Hopefully these mockups demonstrate my question:

enter image description here enter image description here

Remember that the buttons normally won't be visible unless the user hovers over the item they affect.

share|improve this question
add comment

3 Answers

up vote 4 down vote accepted

It's always better to keep the controls aligned. I like the way it was done at Basecamp some time ago:

enter image description here

The idea to move controls to the left is really nice: controls are always aligned and bound to the start of the line so mouse movements will be minimized.

share|improve this answer
    
I hadn't thought to put the command buttons to the left of the string items. Most UIs I've come across put them to the right of the item to be edited. Thanks! –  Angavar Jan 23 '13 at 7:39
add comment

I recommend the buttons always visible but very faint (and disabled) and come into full contrast when it's line is hovered over, otherwise it would be surprising and jarring for them to appear and disappear as the mouse moves, especially so when the user is moving the mouse to click on it.

And the buttons should definitely be aligned (faintly visible or not), it will make it easier to use and more aesthetically pleasing.

share|improve this answer
    
I'd have to agree with them being faintly visible when not hovered. If for some reason the user doesn't hover over any of the list items, at least this will be a subtle clue that the options to delete and edit are there. –  Rich Jan 24 '13 at 9:19
add comment

I would have to agree with keeping the buttons aligned. Another benefit that hasn't been mentioned, is if the user would like to delete several items consecutively, when they delete the first item, the item below it will take its place, and the cursor will already be over the delete button.

I have found deleting consecutive items with non-aligned buttons to be time consuming and increase cognitive load.

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.