Data table action toolbar could have better affordance on buttons

[camilasb]

Title line template: [Title]: Data table action toolbar could have better affordance on buttons

Detailed description

After many user interviews seeing how people struggle with the data table acton toolbar, I started understanding a bit better why.

In the examples we have in the documentation (https://carbondesignsystem.com/components/data-table/usage/#batch-actions), we can see the actions have icons to support labeling, which is a good visual cue - problem is that when we can't reference our action with an icon.

The premise where the actions should be above the table and now below as we always knew is a good concept, although older audience will still struggle with that.

Despite of the fact is a better approach, the affordance of the action buttons in the toolbar are lacking when icons cannot be added to support the labels.

In this example we can see that the visual hierarchy in between the fixed string on the left is the same as the button labels on the right.

Aside of icons, those buttons should be more intuitive when we cannot use them.

Since I'm not a visual designer, it's hard for me to suggest anything in specific, but making it a bit more prominent somehow would really help users recognize better the experience we're trying to provide =)

[Akshat55]

Hi, @camilasb apologies for the late response. Could you please discuss this issue in #carbon-design-system slack channel? You'll be able to get a better response from designers working on Carbon for this issue.

[camilasb]

Okay, let me try =)

[laurenmrice]

Hi @camilasb! For your specific example above, there are some icons you could potentially use here:

• The "Upgrade tier" button you could use the upgrade or skill level icons.
• The "Add extra months" button would be fine to use the default add icon since the action is adding.

If the buttons have no icons, we currently do not have a design in place to better visually distinguish that these are buttons other than the state changes and cursor change to show that they are interactive, whereas the fixed string on the left gets neither of those indicators because it is not interactive. If you know of anyone who has some ideas to improve this situation visually let us know!

[camilasb]

I know it's not exactly beautiful, but we were taught in early stages of computing that buttons have delimitations, hence the lines around them in the example:

We are in the flat design era, but still, affordance and visual hierarchy got a bit lost with that and minimalistic design. I'm not saying we should go back to skeuomorphism, but making it beautiful some times is overcoming intuitiveness, leading to less effectiveness on tasks.

Article: https://uxmag.com/articles/the-nine-principles-of-ux-design-psychology-can-you-predict-the-behavior-of-your-users "4. Make sure that the users understand well what they can or cannot click. Buttons and in-text links should look like buttons and in-text links."

I did a quick test and asked my husband the difference in between those 2 action bars He said: "the first one i know those are buttons, the second they look like text only" - i swear i didnt bias him :)

Anyways, this is all to suggest that we somehow create the proper boundaries in the component so it looks like a button, even when there are no icons as aid.

I will take your suggestion for my case above (thank you for that!), but i hope my issue can help Carbon in any way to improve. :)