I am designing a web application which will show rows and columns of data (a table), when the users select (on click) a row within the table, they will get some supplemental data appearing in a side panel. Additionally the users should be able to click multiple rows in order to perform bulk actions e.g. delete entries. At the same time the supplementary data should not appear for multiple rows.

I’m having trouble mixing these two interactions. For example, in the case that the user wants to see the first row and then the second, individually (and in sequence) in order to see their corresponding supplement data, firstly the user will have to select row 1 then deselect it and then select row 2. It just seems a bit clunky.

I thought that if the users single click a row then it will lose focus once the next row is clicked and therefore the row will not be used for performing bulk actions and only to view supplement data. And on a double click the row will be “on hold” and users will be able to select multiple rows by double clicking them in order to perform bulk actions. But my client doesn't really like this method for a web application.

I made a little prototype CLICK HERE TO SEE IT for just selecting and deselecting... it feels like too many clicks.

Any ideas? I’m stuck!!

  • Clicking for singular selection and shift-clicking for multiple selection are behaviours that are common to most operating systems and are, therefore, well know to most users. Find some research and build some test cases to show your client why it's the right way to go. The client's opinion here could harm the usability of the interface so it's up to you, as their UX designer, to make the case for doing it your way. Commented Dec 8, 2017 at 9:40
  • 1
    Thanks for your input Andrew! From my point of view a shift-click for multiple is a bit uncommon in web based applications. It would be fine for a regular OS application, but I feel that with web apps people are less adjusted to using hotkeys etc. But as you said I will just explore my solution and try to back it up as best as I can. Thanks again. Commented Dec 8, 2017 at 10:02

1 Answer 1


If there are two actions on a row both actions should be visible to the user. I see two possibilitys to do so:

  1. you could provide a "marking" element (i.e. a checkbox) in every row. Id the user clicks on the checkbox the row is marked an the actions panel will display the possible actions (even if only one row is marked). If the user clickst on the rows content, the row is selected and the additional information panel is displayed. If the user clicks on a different row, the first will be unselected....

  2. Give the user two interaction types: "Information" and "Action". in "action mode" the rows should look different i.e. add a checkbox so that it is clear that this is the multi selection mode.

Here is an example: LINK

  • Thanks Bruno. My team and I have already decided to go for, more or less, the solution in the first step you mentioned. We did have lengthy discussions about it and we also considered the toggle modes option. We decided on the check-boxes and row content selection as it follows the standard from GMail. I will mark your answer as the answer regardless though! Commented Dec 20, 2017 at 8:09

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.