How to solve an issue of repetition in a layout?

Question

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 its space taking snippets. I changed this:

Old layout

(ignore the arrows and all; but notice only two snippets are shown at once)

to this:

New layout:

Now it saves a lot of space. Many more snippets are shown in the same space. User can view the whole snippet by clicking the "View" button. But if you would notice, there is a lot of repetition of the three buttons - "View", "Edit" and "Delete" - which kind of looks odd when viewed at once.

Therefore, I want to know if there is a way of how I can improve this to avoid the repetition.

Also, I can't use the hover effect because people on laptop without mouse might have problem.

UPDATE:

1. I have decided to go with the approach of a down arrow, which shall reveal the options on click. I shall share the final product when ready with you all.

2. The approach of Mass Actions by Ilan is also very nice. But I feel it would be difficult to implement. It is still definitely a good alternative.

3. The final design would be like: on clicking the down arrow, the snippet shall be shown fully, and only the edit&delete buttons would be shown, while the down arrow shall become up-arrow. Clicking it again shall reverse the action. I think this would be easy, and more fun!

4. Thanks to all the people who answered. Their effort was really helpful!

Thank you all!

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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: https://coderwall.com/p/3uwgga.