2

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

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

to this:

New layout:

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!

Improve this question
2
  • 1
    I like the way Dropbox website does it. It pretty much works like the file managers: Explorer (Windows) and Finder (Mac) do it. Right-click gives you list of functions, such as: delete, rename, move, etc.... You can select multiple items with Ctrl or Cmd and Shift click to perform mass operations. And when you do select multiple items, a toolbar appears above the list or on the top of the viewport. Other similar sites use the arrow method instead of right-click or in addition to that and the checkbox method instead or ctrl or cmd and shift selection or in addition to that. – Joonas Nov 6 '14 at 18:43
  • @Joonas That's a useful information you shared about Dropbox. Thank you! I am sure to implement it the next time I make something similar! – Gaurang Tandon Nov 7 '14 at 10:18
3

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.

Improve this answer
2
  • 1
    Nice idea! But what if the user then wants to un-expand the expanded snippet. How would I deal with that? Also, how should the dropdown icon look like? I am sorry but I am very new to designing you see. – Gaurang Tandon Nov 2 '14 at 5:33
  • Maybe like an upside down triangle's stroke with the top side erased. Would kinda look like the function y=abs(x) from -1 to 1 – pabombs Nov 2 '14 at 18:35
4

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.).

enter image description here

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).

enter image description here

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.

enter image description here

Improve this answer
1
  • I like the idea of icons. Also, from your post, I also got one idea of having one small icon on the right, which when clicked, would let the three buttons slide into view. But with this idea, I don't know what that icon would look like, and how would the user let the buttons re-slide out of view? I am very new to designing so I would need your help. Thank you! – Gaurang Tandon Nov 2 '14 at 5:36
2

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.

Improve this answer
1

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.

enter image description here

Improve this answer
1
  • This shall definitely be a nice approach. Thanks! – Gaurang Tandon Nov 6 '14 at 4:52
1

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.

enter image description here

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.

Improve this answer
4
  • Thank you for your reply! But actually, I wanted to avoid any repetition. And so, I wanted to avoid using the buttons again and again. – Gaurang Tandon Nov 3 '14 at 17:21
  • 1
    You're welcome, and you have a very nice app. It looks like BurninLemons added a few new button dropdown mock-ups that may work for you. DA01 also has a good idea by having the entire row display more information when touched. It could span the width of the page, and display all the needed information. I'm fairly sure you'd want to use JavaScript or jQuery for the dropdown functionality. – Talkingrock Nov 3 '14 at 21:05
  • Your new way is really nice. I am going to implement a feature similar to it. Thank you! – Gaurang Tandon Nov 7 '14 at 10:17
  • 1
    I'm actually using this technique to convert a desktop mega-menu to handheld, and it works well. Some things to consider are if the list is longer than the handheld viewport, you only want the arrow icon to trigger the dropdown, not the entire snippit row. If the row is the trigger, then the users can accidentally trigger a dropdown if they scroll too slow. The other point is not to have the dropdown cover the other arrows. Also, when touched the row and dropdown change to matching background colors, to show association. Thank you for the positive feedback and follow-up, it's appreciated:) – Talkingrock Nov 7 '14 at 18:02

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.