Bulk Action - Table component usage

[ishah-twilio]

Hello,

I'm working on Bulk action feature which requires filtering of thousands of data records. We like to use the Table - paste component for the data table.

Questions I like guidance or help with:

1. Are there any concerns with how I've used the Table components?
2. Accessibility for multiple rows for one record?
   1. Action performed on / by (date & email)?
   2. Requested changes?
   3. Updated results and progress bar?
3. Status labels and what component can I use?
4. Progress bar? Replacement? What component can we use?

More details shared in the signup sheet (with abstract and invision urls and code sandbox.)

[kate-porter]

Hi @ishah-twilio - before we provide feedback, can you let us know if this current design has gone through usability testing, and if so, what the learnings have been so far?

[ishah-twilio]

Content has gone through the 1st round of usability study with a design which opened the feature in the modal window. Content of the feature was well received though discoverability of the feature was hard.

I have updated the signup sheet with research summary for more details.

[kate-porter]

Super helpful, thanks for providing that research summary. Will you have the opportunity to take this new design through usability testing?

[ishah-twilio]

Yes. We are planning to take new design to small set of users next week. Ishita

[kate-porter]

Awesome 🙌

[kate-porter]

This code sandbox is awesome, by the way! Thanks for putting this together.

[kate-porter]

Hey @ishah-twilio - we've reviewed this as a team. We will discuss in more detail during office hours, but wanted to share our feedback here to make the conversation efficient:

Are there any concerns with how I've used the Table components?

• No major concerns here. We do generally recommend against having actions inside of tables (like anchors, buttons, etc.), because a keyboard-only user will have to tab through every single action on every single row to get past the table. That said, using the Paste table is the best option for now. If possible, it would be great if you and your team could plan to migrate this to our Data Grid component in the future. The Data Grid component will let keyboard users navigate through it more like you would navigate through an Excel spreadsheet. Check out this discussion for more info.

Accessibility for multiple rows for one record?
- Action performed on / by (date & email)?
- Requested changes?
- Updated results and progress bar?

• On the "Action performed on / by" column:
  • It looks like this column is going to be sortable - will it sort by email address or by date? We would recommend splitting these into separate columns—especially if you want to allow sorting—as they are both distinct data points in this table. One is not supplemental information to the other, so putting them in the same cell may make the data harder to interpret.
  • If you eliminate sorting, and in your usability testing users can still scan the table by date or email, it may be fine to leave as-is.
  • Also, it's unclear if the email is supposed to be a mailto link, and what use case that serves.
• On the "Requested changes" column:
  • Including multiple rows here makes sense since they are related to one another, however, the column heading "Requested changes" seems like it could be unclear. In this context, it could seem like we are requesting that the user make changes. Something to keep an eye on in usability testing.
  • You also may consider not truncating the fleet name here, and wrapping it instead. That seems like it is important information for the user at this point in time, but with the truncation, most of the fleet name is hidden.
• On the "Updated results" column:
  • Using multiple lines here seems fine generally, though the progress bar seems like it might not be offering very precise information.
  • You might consider consolidating the information in this column with the status column, by perhaps placing the status icon next to text that reads something like, "20 of 20 SIMs successfully updated", "3 errors detected. 10 of 30 SIMs successfully updated.", etc.

Status labels and what component can I use?

• Related to the feedback above, you could place the status icon next to plain text that tells the user the number of successful updates, errors, etc. For example, "⚠️ 3 errors detected | 10 of 30 SIMs successfully updated". Placing the status inside of a badge doesn't seem necessary, as it takes up additional valuable table real estate.

Progress bar? Replacement? What component can we use?

• Related to the feedback above, you might be able to remove the progress bar all together and be more explicit in the text in the table instead. But, if you hear from users that they do want to see a progress bar, this can be composed with Box.

Misc. feedback

• One additional piece of feedback - you might try putting the actions on the right into a menu rather than listing them out within the table. This will give you some table real estate back while allowing you to more explicitly describe the actions (e.g. "View error logs" vs. "Error logs"). Check out this example.

And as I said earlier, this codesandbox is so great! We were all geeking out over it in our team Slack. 🤗 We'd love to hear more about your experience building this during office hours if we have time.

[richbachman]

Hi @ishah-twilio I updated the dependancies in a forked version of your code sandbox, so the Table now has the correct styles: https://nf900.csb.app/

[serifluous]

Following up on office hours:

Statuses

• Statuses on both the Action history and SIMs tables should appear roughly similar (either as badges or icons with labels). While they do communicate different things on each table, the different visual style doesn't quite explain what makes them different, so it's probably more useful to communicate that with copy rather than just color/icons. If you do decide to use badges, we recommend following the style used in the new Console nav and syncing with Priyanka, who's put together badge styles in recent work.
• If you're worried about not having enough the right icons you need to scale with the number of statuses that might exist, it could also be worth considering whether every status needs an icon. You could try adding an icon to only the statuses that customers are most likely to scan the table for (though I'd definitely recommend doing more usability testing on this option).

Table actions bar

We also left a few comments on your Invision link on the table actions bar, so you can take a look there!

[ishah-twilio]

Hello Team / @serifluous

I was hoping to get your feedback on updated design for Bulk actions / Data table Filter - Search design.

Based on collected feedback from DSys, crit and clinic and BU + Usability studies. I have updated design as attached.

Questions I have

1. Search for Data table filter.

~ What component can we use? Does DSys have any guidance on the placement or component that we can use? Can we use restyled console.zen master header search component?
~ Guidance / Feedback on the placement of Search vs. filter.

2. Select all. We like to build select all as button - dropdown menu component. Paste library does not have existing component for the proposed designed. We will be testing this with next round of usability. Any suggestion or improvements that DSys can suggest before going for usability study.

I will greatly appreciate if you can give your feedback by Wednesday (11/4) since I have Usability feedback sessions on Thursday.

Thank you.

[aayushpi]

Hi @ishah-twilio. Good luck on your feedback session! The team will not be able to give feedback on this task over the week, given other commitments and time-off. Please share your findings with us.

[serifluous]

Generally, I'd recommend that, if the Paste library doesn't have it yet, you should test with something that can be built with Paste unless you already have data showing that a few explorations with Paste implementations are negatively affecting the user experience.