6

I have a table that users need to scroll through and carry out specific actions. The actions are things like "Remove", "Flag", "Send to", but in the mockup below they're just Action 1, 2, etc.

Right now the idea is to have an 'action panel' to the right of the table, and when a row is highlighted, the options become accessible.

What are some other potential ways to present these actions without the use of a UI element external to the table?

I'm considering the use of contextual hover links (last mockup below) but this feels more like a navigational tool, than one with which to carry out the main action of this part of the interface.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Is your tool mostly for desktop users or mobile use also? Who is your audience? – Pdxd Mar 26 '14 at 14:14
  • Desktop. Highly technical users. Sys admins, network engineers, etc. – dennislees Mar 26 '14 at 14:46
3

Why don't you have the actions show up inline?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This will help it appear as though the actions effect each row in the data and not seem too disconnected.

Also, here's a solution if you have bulk actions:

wordpress

EDIT:

  1. REMOVE can be handled with a bulk action as per above.
  2. FLAG can be an icon on the left.
  3. SEND TO can be handled with an accordian flow:

How wordpress handles inline within the table - they use an accordian option to expand and reveal advanced option on a per row basis.

wordpress 2

I find these solutions to be quite efficient when it comes to functions users will be using over and over.

  • The inline actions create either an empty table col, which affects the balance of the design, or, if the items are visible (but inactive) you get a lot of repetition and visual clutter. Good shout on the WP bulk actions. – dennislees Mar 26 '14 at 14:51
  • I've clarified my answer. Are there other specific actions that you will have? I feel that it may be resolved on a case by case basis if you split your functions between bulk and single actions. It may be a scenario where you can't fit all the beans into one can. – Pdxd Mar 26 '14 at 15:02
  • I should have given more information. We've actually designed most these interactions already, but the complexity in the design meant that developers and PMs pushed back and asked us to provide UI and interactions that were more appropriate for prototypes. I appreciate your input, and have given your answer an upvote, but it's not 'the' answer. The accordion option, for 'Send To', for example; seems good, but that UI is more complex than less complex (to build) and it's not optimal for situations when there are many many 'send to' actions in the table rows. It's not very repetition proof. – dennislees Mar 26 '14 at 19:41
  • Thanks Dennis. That's great feedback. I have +1 your question as I'm curious to see what option works for you. – Pdxd Mar 26 '14 at 20:33
1

An old and common approach is to use a button bar (you know, the thing before tool bars and ribbon bars).

In terms of usability we want to reduce the mouse-movement from an item to the desired action. For this several enhancements are available out there (for sure, all with some trade-offs).

  • Inline buttons which appears only on click on the row (preferable on table with a lot of 'viewing' use cases and less 'doing' use cases). See image below
  • Inline buttons always visible: your proposed solution. This is fine and can be used on heavily-based 'doing' use cases. Consider you need ~80% more vertical space for this.
  • Separate columns for actions: depends on how much actions do you have. Usually icons are used to save space, but still you need to reserve horizontal space which is usually the most critical part of a table.

A general consensus is that mouse-over should be avoided for action buttons in tables, as screen-readers will not recognize them and it is not clear what you can do there. My personal opinion is, it is not that bad if the use cases are not really important, but you need to reserve the space anyway, so you don't have any big advantage except of less clutter.

left: button bar, right: inline buttons

1

Another approach that can be taken is a variant of where you started. Keep all possible actions visible, but enable and disable based on user selection. If they are true radio selections then make them buttons themselves versus adding another choice and then a button to take action.

This will allow for both bulk and single row based actions. The user can scroll the table selecting many items, could even add a selected item count in the action panel, then the user only clicks the action button that is both enabled by business rules and the desired outcome for those objects.

This will also remove any visual clutter and the user will always know what actions can be taken based on what they have selected. There could also be tool tips for the disabled actions to explain what business rule disabled that button.

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.