Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 9 down vote favorite
3

What would you suggest the best practices for CRUD operations options.

Consider the following design; Should i keep icons for each operation or create a drop down menu with all the options inside?

Link to image

This is the final result

enter image description here

share|improve this question
1  
This question would be improved with the image embedded to protect against link rot. – tajmo Sep 10 '12 at 20:29
I tried but i don't have enough reputation to add images within the question. – silagy Sep 11 '12 at 5:01
Ah! Didn't realize that could be an issue. I added for you. – tajmo Sep 11 '12 at 16:15
3  
Thinking about why you might be considering a switch from icons to a drop down menu, and wondering if your concern was visual clutter. If so, consider hiding the icons and making them visible only when the mouse is over an item. – Bevan Sep 11 '12 at 19:05

2 Answers

up vote 11 down vote accepted

By Keeping the Icons:

  1. You may save the user clicks. (Like for example from clicking the drop-down box and then the option, as opposed to the icon only version that has the options readily available).
  2. You may avoid the visual clutter that happens from clicking one option or another (which is especially dangerous while clicking on Delete instead of Edit, for example as stated in Scenario 2).
  3. It's one stage only as depicted in the Scenario Comparison depicted below.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Considerations

  • Make sure that you have the relevant tool-tips
  • You might not need to have a create button on each row, that might be handy at the top of the table.
  • The Detail button is optional and it would be encouraged to be linked as well with the title of the row (Item Number 1 as depicted above).

Bonus

Add a bulk operation option for Delete, or other appropriate Bulk Transactions with the check-box next to the name)

share|improve this answer
1  
I agree, but it's worth noting that the icons don't remove the problem of mis-clicks. It's generally a good idea to keep frequently-used, constructive operations like View and Edit away from infrequently-used, destructive operations like Delete, even if it's just a matter of separating them by a few extra pixels. – Kit Grose Sep 17 '12 at 1:30
1  
I reworded my answer do that it flows better. I found your comment valuable, thanks! I added the Mockup and the Considerations too. :) – edgarator Sep 17 '12 at 7:24
Where do you suggest putting the bulk operation actions. In my opinion, when the user checked something he should see a new row above the list of item with available options. That because sometimes there are a lot of items and to put the row bellow where couldn't see it it's wrong. – silagy Sep 17 '12 at 17:22
@silagy That's a nice idea. I think the convention of putting the actions at the bottom of the list is because people tend to move down the page checking items off. It seems to me to be good practice to put the actions at the top too (since that will allow users to know which bulk-change functions exist before checking any items). – Kit Grose Sep 18 '12 at 1:10
I think it depends of some other issues related to pagination size, framing, etc. If the table requires you to scroll and while doing it you lose sight of the top controls then adding it at the bottom makes sense. If the listing is long, then I'd add them on top and bottom, assuming that the user is going to go through the whole page before getting to the controls wouldn't be a good thing to do. If the listing is less likely to go beyond the scrolling point, then once at the bottom make sense :) – edgarator Sep 18 '12 at 1:25
up vote 3 down vote

If visual clutter is a concern, and you want to keep the icons, you could have light-grey placeholders that light up when the user hovers over the associated item. That way, users know the actions are there, but they aren't distracted by them when perusing the content.

share|improve this answer
1  
It was also another concern, I did what you suggested. I set the icons' opacity to 40%, and changed it to 100% while mouse hover. – silagy Sep 13 '12 at 5:33

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.