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?
This is the final result
5
-
1This question would be improved with the image embedded to protect against link rot.– Taj MooreSep 10, 2012 at 20:29
-
I tried but i don't have enough reputation to add images within the question.– SilagySep 11, 2012 at 5:01
-
Ah! Didn't realize that could be an issue. I added for you.– Taj MooreSep 11, 2012 at 16:15
-
3Thinking 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.– BevanSep 11, 2012 at 19:05
-
@tajmo that won't prevent link rot: you're still hotlinking to an image on a server not under your control– Nicholas ShanksAug 2, 2013 at 8:34
Add a comment
|
2 Answers
By Keeping the Icons:
- 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).
- 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).
- It's one stage only as depicted in the Scenario Comparison depicted below.
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)
-
1I 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. Sep 17, 2012 at 1:30
-
1I reworded my answer do that it flows better. I found your comment valuable, thanks! I added the Mockup and the Considerations too. :) Sep 17, 2012 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.– SilagySep 17, 2012 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). Sep 18, 2012 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 :) Sep 18, 2012 at 1:25
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.
-
1It was also another concern, I did what you suggested. I set the icons' opacity to 40%, and changed it to 100% while mouse hover.– SilagySep 13, 2012 at 5:33