4

Every time I design lists (which are a beautiful thing in itself) I am wondering about how to treat list item specific actions which aren't bulk actions such as delete.

Let me give you an example, I have a list of reports and every report of the list can be edited or run if needed. For three consecutive reports in a list it would look like this, if the actions are always displayed: http://cl.ly/image/091k290d0E2i – this is an option which works, on the other hand there is also the option to hide the actions but once the user hovers over the list item, the list item will turn to active and the action buttons would be revealed, like this: http://cl.ly/image/001S3K28431Y.

I have seen both on various web applications I really enjoy using and designed by designers I really respect – however, I am wondering if there are some research based results on which of those approaches do better? I would also appreciate your personal honest opinion.

What I personally like about the always-display approach is that it is fool-proof and invites the user to take action. On the other hand it just doesn't look aesthetically very pleasing to have the same buttons repeated over and over again and show plenty of stuff the user doesn't need.

What I like about the reveal-on-hover approach is that it adds more interactive context to the list-item itself and it only shows up when needed (assuming the user gets it). It really hides the stuff which isn't needed. It also looks more pleasing and reduces weight from the lists. On the other hand, it might be irritating and not as usable as the always-display approach.

Curious about your thoughts and tested results on this one.

Thanks!

5 Answers 5

3

I like the idea of the hover effect, because repeating the buttons over and over will make it look cluttered. However, the hover effect wouldn't work on touch devices.

There are other solutions:

Small icons

enter image description here

These are smaller than buttons and will make it look less cluttered. For edit you could use the classic pencil icon. For 'run report' you could use a plane (like I tried to visualise with the top right icon in the image) or something else.


Option icon

enter image description here

In this option you add the classic arrow and add the options in a sort of drop down. This will keep the cluttered look to a minimum too.

2
  • Good point regarding touch devices, since the platform will be responsive, hover elements will be exchanged with persistent buttons for sure. Yep, also thought about the mini buttons as options to make them less cluttered. The option icon seems like a neat solution too to make it even less cluttered, requires a click more though (which can be fine at times). Thanks!
    – Thierry M.
    Jan 9, 2014 at 10:32
  • If your user's have an 80% (ie. 80% of the time they run the report) then you could make that happen when the click the list item, and include the flyout menu for all items.
    – Don Nickel
    Jan 9, 2014 at 13:19
1

I'd say that there is one main question to consider when choosing approach; Is the element repetitive for each item in the list, and if so does the element have state changes which provides contextual information?

Lets use an email inbox as our topic.

An inbox usually features a list of items with favorite controls to flag items as favorites. Here the presence of the item is repetitive, and it's displayed in two different states, either it's flagged or not. In such a scenario the elements should be persistent, since it clearly presents the user with the value of each item.

The inbox usually also features non repetitive controls, such as an attachment indicator element. This element will not be present for all items in the inbox list and it's therefore motivated to have it persistently displayed for all items in the list so that the user doesn't have to manually with direct manipulation find which emails contain attachment.

The final example which in my mind doesn't require persistent visual elements would be the delete control. The user knows that she can delete individual messages, she can delete any message she wants and she doesn't need the list to clutter up the view by letting each message tell the user that she can delete it. It's enough to have the control displayed on hover, plus that also provides great mapping between the item and the action (which you also mentioned in the OP).

So in the scenario you describe above I think it looks closest to the third example. You have a set of actions which will be available for all items in the list and therefore it could pose for poor UX to have them persistently displayed for all items in the list.

1
  • Thanks a bunch for this fast and insightful response. Definitely a good question to consider and I find "the user knows that she can delete individual messages" a good point you have made. As long as the user knows (or should know) that certain actions can be taken with a list item, it is sufficient to display the actions on hover, otherwise it is likely that it is not enough, therefore it would make sense to have them persistent.
    – Thierry M.
    Jan 9, 2014 at 10:31
0

From a users experience, I'm sure most are familiar with the line by line icon options, so it's a safe feature. With touch devices with some thoughtful design, you can make them very aesthetically pleasing IMHO. Alternatives

Have a look at the UX guides for list implementations

  1. Android
  2. Microsoft
  3. Apple

At the end of the day, you might want to put in some logging tool to see what people actually use for each line and just leave the popular ones.

0

It just occurred to me, a lot of lists I see, that have the same action for multiple items, have their actions listed at the top of the list. You can then select the item(s) (or in this case reports) you want to run and click the 'run report' button. Could this work for you?

enter image description here

0

It looks like you want your users to know they can take action without bothering them with a bunch of buttons.

If there is a lots of items I think it's probably better not to show the buttons since it adds useless shapes and informations. Otherwise, if you'll have a short list, then it's ok to display the buttons for each of them.

There is an other solution that Scoop.it is using. In each of their content there is a green square with an icon on the top right which expand to show the words "Scoop.it!" on hover (take a look at the screenshot below). If you don't want your users to ignore the fact they can interact with the items, you could try to add something like this.

Scoop.it button on hover

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.