: How to solve an issue of repetition in a layout? UPDATED: ProKeys updated with new layout is available. You can check it out. Thank you! I did a recent redesign of ProKeys so as to minimize

@Annie732

This is very common problem which usually is solved by "MASS ACTIONS" - you provide the user with radio-buttons and only one line of mass actions, look at the picture - after the user choose the snippets he/she presses the desirable actions. You should provide option for mass action of view options too.

Vote Up Vote Down

@Shelley591

There's lots of options here. What works best will depend on your particular users. If the goal is to merely minimize the visual clutter, then I'd suggestion the following:

Static view:

----------------------------------------------------

Your Snippet

----------------------------------------------------

Your Snippet

----------------------------------------------------

Your Snippet

----------------------------------------------------


On hover of an item (in this case, the second one:

----------------------------------------------------

Your Snippet

----------------------------------------------------

Your Snippet / Edit X Delete
------------ ------ --------
----------------------------------------------------

Your Snippet

----------------------------------------------------


This would work only for a non-touch device, of course. If the goal is to also support touch devices (which is a good goal) then you don't want to rely entirely on hover. Something to consider.

Another option to consider is to consider how important that all these options always appear on this page Do people need to do a lot of editing and deleting from this screen? If not, maybe move EDIT and DELETE to the VIEW page instead.

Vote Up Vote Down

@Ann6370331

Another Option

Here's a mock-up of the full dropdown mentioned in the comment below. (The original button layout was deleted.) Since the dropdown in this example spans a larger area, it can contain the 3 buttons as well as additional information. It can be styled accordingly (colors, buttons, styles, alignment...), but the trick is not to let the big dropdown cover the other title's dropdown button icons.





For a drop-down icon, usually its a square with 3 horizontal lines, but a down triangle works too. Which technology to use for a dropdown is a lengthy subject. Solutions involve using JavaScript, jQuery or CSS. If you are not concerned about users who have JavaScript disabled, perhaps jQuery or JavaScript is the way to go. Here's a jQuery example: coderwall.com/p/3uwgga.

Vote Up Vote Down

@Gail6891361

Maybe you could put a little dropdown at the end of each entry that expands it into the full view when you click it (similar to a minimize/maximize). The edit and delete buttons could then be added to that expanded view of each element.

Vote Up Vote Down

@Miguel516

Spitballing here, because I don't know your limitations.

You could introduce some icons (might even what to drop the color on the button, here too. You could also get rid of all the buttons and use a magnifying glass.).



Or you could drop the color on the buttons, and add it upon hover or active (hover should only be an issue with touch devices, finger on screen).



EDIT:

If you want to add an icon that would open an option menu, this would be the icon I would use (My only concern would be people MAY mistake it for a drag and drop system, given the fact its a list. But regardless this icon is used for drawers and drop-down lists in mobile and desktop).

Would recommend using a drop-down list but is up to you.

You could also use a downward "arrow" or downward facing Triangle.

Vote Up Vote Down