Thursday, December 5, 2019

buttons - Table with actions per row


One of the pages in our web app includes a table that typically has a few dozen rows for each user, and it takes most of the page's width (5-8 columns).


For each row, users can perform 3 possible actions.



What's the recommended way to let users perform these actions? We've considered a few options:



  1. 3 small action buttons on the left-hand side of each row 1

  2. 3 small action buttons on the right-hand side of each row

  3. Drop down with the three actions

  4. Other approaches?


I saw other questions with a great discussion on How to avoid repetitive actions in table rows?, but in this case, I'm more interested in the right place to put them.


Thanks!


Option 1 Illustration



Option 1 Illustration



Answer




3 small action buttons on the left-hand side of each row



With a LTR languages, one can assume users will first inspect the row (starting from the left) and only then decide to take action.


So placing the buttons on the left side is somewhat counter-flow.



3 small action buttons on the right-hand side of each row




Pros:



  • Buttons are easily accessible. This is important if user perform a lot of these actions (a lot being that the main point of the table is to allow users to act on records).


Cons:



  • More likelihood for errors (small buttons in close proximity).

  • Small buttons will have icons, which have second-degree semantic.

  • Takes more space than a dropdown.

  • Not scalable - there's a limit to how many buttons you can put.


  • More visual noise.



Drop down with the three actions



Cons:



  • Requires an extra click.


Pros:




  • Dropdowns can use text, which is clearer than icons.

  • Less visual noise. Users only see actions when they need them.

  • Takes less space.

  • Can easily scale, even to dozen of actions.



Other approaches?



At least to combat the visual noise / space issue, you can only show these actions on hover (although such design won't work on touch devices). Like in Googles' Inbox:



Screenshot of Google's Inbox



I think it really boils down to how often these actions are used. In some systems, users must take action on each record, which means the extra click of a dropdown can reduce efficiency. But on systems where actions are less common, dropdowns are a good solution - reducing visual noise and saving space.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...