Selection state in tables #1508
-
|
Hello! I'm working on the Versioning & Updates page in Flex. My redesign includes a table of versions and a static panel next to it with more information about the version that has been selected. I have seen other patterns have a blue text link when viewing more details for an item in a table. We chose not to do this since our design doesn't take the user anywhere else or open anything (no modal, no slide in panel, no nested page). We also didn't want to confuse the user into thinking clicking the version would take them to docs or install the version. We ended up making the whole row selectable. On hover the whole row is grey, and when selected it is blue. Based on your selection the content in the static panel will change. Looking for general feedback/advice on this direction, or if there is another pattern we could utilize. Thanks! Here is the prototype, somewhere in here is an example of the selection and hover states. Also attaching a few screens.
|
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 2 replies
-
|
Hi @sharfatehi Generally speaking you can't really make table rows clickable. There is no mechanism to achieve this using accessible UI patterns. You can make things in the row clickable, as you mention having seen in other areas. From a fairly static mock it's a little hard to fully grasp the interaction. Is selecting the row just a means of showing more detail about that version? If so, I'd suggest using something like vertical tabs https://paste.twilio.design/components/tabs#vertical-tabs. This should work pretty well with the data you're displaying as you only have 2 columns too. Let us know if that helps |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the feedback @SiTaggart ! What are we currently doing around selection states? I couldn't find anything specific to table selections. I am considering just doing the text link but also adding a selection state to the row to make it clear that the content in the panel is related to the version selected. I dont think tabbing will work, we will be adding more columns to the table in the future, we also have a concept of "older versions" we need to consider, and lastly the versions list can get very large so a tabbing structure might not work in this case. |
Beta Was this translation helpful? Give feedback.
-
|
The current model we're using for table row selection is a checkbox or radio button in the first column. That enables a non-visual mechanism to perform the action and communication selection to assistive technology. But I'm unsure if "selection" is the interaction you're after. What is the default state of the page? Is the card on the right shown? What version is it showing? Maybe if you could help me understand what the primary intention of this part of the UI is for the user that might help. Is their primary intent to view a different version? Is their primary intent to install a different version? I understand the concern about wanting to add further columns, in that situation you might need to consider how that works with showing the card on the right. Are the columns going to squash in such away the information won't be easily consumed? How many columns does it take to make it difficult to see the data I'm wanting to see as a user? How many columns are essential to performing the primary intent? Depending on the primary intent, you might explore something like a link style button as the version number, that performs an action like opening a modal to see the full details of that version, or slides in a side panel. That might help accommodate the extra column data? There are a number of options, it just depends on the specific purpose of what fits best. To recap:
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the quick and detailed responses! The default of the page would be the latest version available to update. The idea was to keep the panel ever present so the user did not have to click into anything to see more details. I think i might try option 3, at least that would be a more recognizable pattern. By default could I have the panel open when you land on the page? How do we indicate what row is selected? when the panel slides in? |
Beta Was this translation helpful? Give feedback.
-
|
Like I say, the only way we suggest displaying selected state in a table row is with either a Checkbox or Radio button in the first column right now. If that changes in the future we'll let you know. |
Beta Was this translation helpful? Give feedback.
The current model we're using for table row selection is a checkbox or radio button in the first column. That enables a non-visual mechanism to perform the action and communication selection to assistive technology. But I'm unsure if "selection" is the interaction you're after.
What is the default state of the page? Is the card on the right shown? What version is it showing?
Maybe if you could help me understand what the primary intention of this part of the UI is for the user that might help. Is their primary intent to view a different version? Is their primary intent to install a different version?
I understand the concern about wanting to add further columns, in that situation you migh…