22

Considering I have a grid with a number of buttons for actions the user can perform. It looks like this.

Button grid

I have a number of similar grids in the system. I am wondering peoples opinions on if I should.

  1. Leave as is
  2. Have one button with drop down list of the various options. This will mean the row height is lower.
  3. Something else.

This is a screen that the users don't use on a regular basis, maybe just once per day on average. Speed (1 vs 2 clicks) is probably not a major problem.

  • 1
    I always saw this implemented with dropdown. I always made a design like that to minimize cognitive load. In your example, the page cluster a huge amount of buttons... – Madalina Taina Jul 24 at 16:43
  • As others have said in their answers, you should expand on who the users are. If this UI is part of a flow certain users are expected to go through dozens of times a day, I would favor the current state since it allows executing the actions in only a single click as opposed to 2. – mowwwalker Jul 25 at 1:25
  • 7
    The least you should do is to keep button order as consistent as possible. That means the "View" button should not be offset by the possible existence of an "Edit" button. (View/Edit is fairly harmless to mis-click, but muscle memory should never risk causing a click on "Irrevocably Destroy".) – KlaymenDK Jul 25 at 8:53
  • Depending on other requirements, you might think about grouping/reordering the items based on status, which seems to be determining what actions are available, whether in the same grid or into separate grids. – AsheraH Jul 25 at 9:24
  • What's the significance of the teal buttons? Are the white buttons disabled, or just less prominent? – Jon of All Trades Jul 25 at 21:40
29

There's a similar situation at the Youtube Studio Video Editor that can help you getting ideas, a mix of icons, drop down options menus and interactivity.

  • Each row has two icons: the select icon on the left and the view green icon with options
  • A Watch in Youtube icon and the three dots options menu appear when hovering the row
  • Clicking the three dots options menu shows five options:
    • Edit
    • Get link
    • Promote
    • Download
    • Delete

enter image description here

6

From an accessibility point-of-view I strongly advise you to only have one interactive element per table cell. It greatly improves navigating the table with screen-reader. At my place of work we had a similar table; some of the cells would be read aloud by the screen-reader for 10-20 seconds due to all the various content in the cell and in its table header.

4

As is: ugly but functional. I think it would read better with the same array of buttons on each line, with the useless ones greyed out. It's just easier to deal with tabular data when every row has exactly the same form. I'd also style them smaller, though if it is Bootstrap it's a bit of a pain to do this. (Why oh why did they remove btn-xs ?)

Drop down: if the act of selection triggers the action, then this interface will have a higher incidence of mistakes because operating a drop-down is physically more error-prone. If it's select an action followed by clicking a button to make it happen, that's fine.

3

You could put al the options in a context menu and disable the ones that can't be used at that point due to the status of the item. This way the user always has the same list of options (and you might can explain why an option is disabled).

Also isn't it posible to make the view option not a button but just a click on the row itself?

3

Without further context it's hard to answer your questions. How do users use your table? How often do they interact with it. Is it clear to the users what actions are possible in the different states?

Here are some thoughts, without knowing the context: As is, might not look very pretty but it has some advantages compared to a dropdown. It is clear, that not all actions are available in all states. All possible actions are visible at a first glance. The user can click directly on the desired action without clicking a dropdown first. If you change this you would have to consider these advantages. But there are some drawback as well. The UI is very cluttered. There is a lot to process for the user.

The question is, what is the goal of this table. Should it help the user to be very efficient in performing the task. Should it help to give the user a fast overview over states and interacting with items is secondary and not always necessary.

I would say maybe you can use a mix of solution 1 and 2. Have the most used action available and add the not so often used actions in a dropdown. The difficulty might be, that the main action is not always the same depending on the state of the item.

But at the end your users will know best. So what I would do is testing this with a simple prototype and testing it with real users. You will not need the test it with a lot of users to see which solution will work best in your context.

3

We can discern three types of action on an order. Split those, and group actions within a type.

Viewing

First of all, I would give the button for the only option that the orders have in common, which is to view them (I'm assuming here that there's no objection to viewing a new order), its own, more predictable location. Now it's jumping all over the place, depending on the other options available.

Editing

When editing an order, the user first needs to see what's in there. So remove the edit button here and make the edit option accessible from the view screen.

Processing

Now we're left with sending, resending, recieving, cancelling, and uncancelling. You can use a dropdown, but these are a bit more finicky than regular buttons, so perhaps a grid of five buttons would be best. Don't hide the options that are not available, but disable them, so each button will always be in the same location.


View first, Action later

Or, as per Annemiek's excellent suggestion, make viewing available by clicking on the row. Remove all buttons and relocate them to the view screen, if an extra click per order is not a problem. That depends a bit on your users. It does create an extra check, sort of, because a user has to view an order first before acting on it.

2

I have a number of similar grids in the system

The screenshot you shared has different actions on each row. Having all these buttons / actions available upfront on each row is not a good choice in terms of visual clutter, cognitive load for the user and also from an accessibility standpoint like Tobias mentioned. If there is one action which is present on each row and user performs that action frequently, you could keep that button on the row and rest of the secondary actions can be grouped inside a kebab menu (Three vertical dots icon)

  • I would also suggest adding some visual flair to each row (either the status text or the row's background color). Canceled could be red, received could have green, sent as blue, etc. I think this would help strengthen the association of the status with the available options in the menu. Green only has "view", red only has two options, blue has a bunch of options, etc. – GammaGames Jul 24 at 15:43
  • Yeah, Workday Canvas design system used something along the line: design.workday.com/components/containers/tables . But we have to keep in mind that relying on color alone to show status is bad practise from an accessibility standpoint. – Sooraj MV Jul 25 at 8:30
  • I use semantic-ui which has colored rows, but I agree that it would not fully accessible (especially to the blind) and you'd still want to do the regular accessibility features. I see colored rows more as a little bonus for a majority of users, not necessary but a nice little quality of life improvement. – GammaGames Jul 25 at 14:18
1

You can keep on hover actions for each row. So once the user hover on some row, he will see a dropdown option, which provides list of actions.

  • 2
    I'm sorry, I am strongly against hover actions -- while it makes (most of) the items visually cleaner, it also does a good job of hiding possibilities which you should not want to do. – KlaymenDK Jul 25 at 8:55
0

It seems confusing to have different options for each items in this view. Typically in a grid or list, the user expects the exact same interface for each element.

You could keep the "View" button (maybe convert it to an icon, but that's not important), since that action is available for all items and move the other options into whatever UX elements are exposed when the user "View"s the item.

Additionally, viewing is not a destructive step, whereas the other actions do some kind of work, which may not be reversible. Imagine the user trying to cancel ORD-123455 in a list, sandwiched between ORD-123545 and ORD-213455. By adding an additional action between viewing an item and acting on it you add a small amount of friction, but also give the user more confidence that they have the correct item selected.

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.