2

I'm working on some tables that use both non-clickable indication icons (the R and the Repeat icons on the left) and clickable action icons (the dollar sign and printer icons on the right). I think users will learn and understand while onboarding that the icons in the gray section are read-only, but they're not intuiting that the icons on the right can be clicked, and will trigger an action later on.

It doesn't seem like a good practice to mix what the user can do with icons in a table. There might be 50+ rows shown at once, though, and it will be easy for the user to scroll away from the header row, so my hope was that information and controls wouldn't depend on them.

Is there a better way to handle these conflicting signals to the user?

Three rows in a table with several icons

2 Answers 2

1

One of the essential characteristics for an element to be interpreted as a CTA is isolation. The more isolated an icon is in a graphical environment, the greater the possibility the user will click on it.

enter image description here

In the example image, those that are defined as non-clickable objects in the description are exactly the ones that have the best chance of being interpreted as such: R and .

Answer to this question (if an element is not intended to be interpreted as actionable): avoid isolating non-clickable elements.

enter image description here

If this is not possible, disguise this isolation as much as possible, for example by integrating the icons into the text or the graphic part of the table.

enter image description here

0

Why to hide the table Header?

It doesn't seem like a good practice to mix what the user can do with icons in a table. There might be 50+ rows shown at once, though, and it will be easy for the user to scroll away from the header row, so my hope was that information and controls wouldn't depend on them.

Here is a link for table design case study https://uxdesign.cc/designing-tables-for-reusability-490a3760533

Refer the section "Usage of imagery and iconography:" for icons representation. The first option by @Danielillo can be found in this case study also.

Table without header and footer will not be a good idea. If the header is present and you go with the suggestion by @Danielillo it will give the user clarity of the icons as well as the data present in the table.

1
  • Thanks for the link, very useful. I will see if we can make the header sticky, right now that's not an option for our design system components but we can request it.
    – Izquierdo
    Dec 16, 2021 at 17:29

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.