Action bar for tables



hi all

we want to improve the UX for some tables available on some of our products.

Some background

  • these widgets are used only for back office apps
  • the business goal is to, overall, reduce the time to accomplish the task
  • we did qualitative usability tests with several types of users to define what are the primary actions and the secondary actions
  • the UX goal is to reduce the progressive disclosure effort (the right click is a legacy from the desktop app)

here the low-fi solution draft

Current Situation

Target Solution - Default State

Target Solution - Context Action Menu Open - We collected the secondary actions

Target Solution - Context Action Menu Action - Step by Step approach from the list to a dialog to make all the content and the options more accesible

I’m looking forward to having your feedback
Thanks in advance for your time :wink:


My first thought is to ask whether or not you use custom context menus elsewhere in site. We’ve had problems getting our users to adopt them as it’s not an intuitive interaction on the web and they’re still relatively new on our site.


thanks for your comment @dougcollins

We do use context menus overall the app. The pattern is to delegate the menu to the 3 dots icon above the component (tables, lists and other content types). For some of them, we have too many menu items and that’s the reason why we are thinking to build an action bar with the most important CTAs always available and the other CTAs collected under the context action menu.

We did not run any usability test so far, we would like to have two solutions to perform an A/B test with some beta users.