2

As a business application, the data table must provide:

Actionable data including opening the property, delete, export, send email.....etc, and usually viewing the property is the most important action item among these.

Therefore, I came out with these below solutions to let the user manipulate the data table as efficient as possible:

<1> Place all the actions in the context menu opened by right-clicking enter image description here Advantage

  1. All actions can be present in the same place (context menu)
  2. Right-clicking on the row provides a whole-row-space that allows users clicking on

Disadvantage

  1. Clicking on any of the actions at least takes two steps

<2> Place all the actions in the overflow menu opened by left-clicking on "more button" enter image description here Advantage

  1. All actions can be present in the same place (overflow menu)
  2. A more Button provides a much clearer hint or guide that tells users it's clickable

Disadvantage

  1. Clicking on any of the actions at least takes two steps
  2. Clickable area is smaller than the first one

<3> Make one of the cells become an anchor, place the secondary remaining actions in the context menu enter image description here Advantage

  1. Link appearance always provides the most clarity of the clickable hint
  2. The most important action item could be accessed only by one step by left-clicking

Disadvantage

  1. There will not always be a specific column (like ID) that could be the identity for the whole row
  2. Clickable area is smaller than the first one

<4> Make the row become a left-clickable area, place the secondary remaining actions in the context menu

Advantage

  1. The most important action item could be accessed only by one step by left-clicking
  2. Left-clicking on the row provides a whole-row-space that allows users clicking on

Disadvantage

  1. A table row is not a clear, obvious hint that tells users it's clickable

*Clickable area will be really small if going with approach <2> or <3>. Because in order to make the data be viewed as much as possible in a limited container, each of the row is really squeezed

I couldn't decide which approach I should go with...please anyone kindly give me any suggestions or a new idea !!! Thank you so much.

2
  • 2
    I would step away from the right clicking concepts, as that's not common for web and not easy to discover on desktop or touch screens.
    – jazZRo
    Commented Sep 3, 2020 at 15:22
  • I have often used your options 3 and 4 together: a visible link which can also be copied into emails etc. and making the whole row clickable. I sometimes added double-click behavior to get to an Edit Row page. Commented Jun 16, 2021 at 22:43

1 Answer 1

1

There's another option like the one used at Youtube Studio: the main action buttons appear when hovering the row, this reduce the clicking to just one step.

enter image description here

2
  • Hi Danielillo, thanks for your kind advice >_< Actually, this kind of thought also showed up in my mind once, but mostly the height of the row is 18px and the width of the cell is usually less than 100px. Therefore, placing many icons within the row really makes the clickable area become an obstacle for the users Q_Q
    – Lora Lin
    Commented Sep 4, 2020 at 2:55
  • Pixel height, width and content is never an obstacle to a good graphic designer, maybe you need one? 😜
    – Danielillo
    Commented Sep 4, 2020 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.