2

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.

Improve this question

4 Answers 4

Reset to default
5

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.

Improve this answer
1
  • 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!
    – Blake Mumford
    Jan 23, 2013 at 7:39
4

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.

Improve this answer
1
  • 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, 2013 at 9:19
2

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.

Improve this answer
2

I recommend 2 things:

  1. Keep the edit and delete buttons aligned - this will minimize mouse travel, saving the user time and effort.
  2. Keep them in the same location, don't just add them to the end of the longest string. This will help maintain the users spatial memory so they'll always come to expect them in same location and not have to think about which is the longest string.

While others have also recommended always keeping the buttons faintly visible I think it really depends on how often your users are going to be using this solution. Is this something that the users will be using day in/day out? If so, this is a very learnable thing that you could easily provide some coaching tips for the first few times and hide the buttons minimizing any extra visual clutter. However, if you're not expecting your users to be using these functions regularly, I would agree with the others and perhaps keeping them faintly visible providing more affordance to the user.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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