UX for Table Filter sections (Office hours: Sept 29, 2020)

[vankhoawin]

The specific questions I have are...

• Migrating some table filters from the legacy React Components to Paste

Before:

After:

Background: Was going to migrate this page to Paste but was wondering if 1) there were any UX improvements that could be made at the same time and if 2) there was a generalized DSYS way to handle filter sections. We arbitrarily stuff a few options into these Selects, when there really could be multiple Inputs as the filters are all independent. We also will be working on migrating another page with more complex filters, so this question is pre-emptively setting up to tackle that migration as well.
Stage of design: N/A
Research: N/A
Link to page: https://www.twilio.com/console/phone-numbers/incoming

[kate-porter]

Hey @vnguyen94 - thanks for working to make UX improvements to this! 🙌

This will definitely be easier to talk through live, but I've got a couple of functionality questions in the meantime:

• Is there a backend technical constraint around how many items you can filter by in a single query? Looks like the frontend limitation in the current implementation is two - sounds like there might not be a reason for that but I wanted to check.
• Is there some sort of logic behind how the items in the two dropdowns are grouped right now? I don't know enough about the product to make sense of why some things are in the first dropdown and some are in the second.

[vankhoawin]

Is there a backend technical constraint around how many items you can filter by in a single query?

there is no backend limitation; the frontend limitation I'm assuming is how to maximize customer value while minimizing visual clutter (unfortunately i currently don't have any data on whether customers mostly search by single or >2 filters on the public API).

Is there some sort of logic behind how the items in the two dropdowns are grouped right now

To leave out the technical details, the first dropdown deals with the resource properties, and the second with subresource properties -- but this is pretty opaque from the customer's perspective imo.

[serifluous]

Some quick UX improvements right off the bat:

• The Filter button could be a secondary button and be placed closer to the form fields. It's competing with the "Buy a Number" button right now, which is appropriately the primary action on the entire page.
• It'll be helpful to add labels to each form field, and pull the form fields out of the gray box. Right now, it's not immediately clear that the form fields are filters at all, or what they're filtering. You could try using this current work on Messaging as a starting point: https://share.goabstract.com/20c4a326-a22f-406d-b12e-b32777ac005e

For your second question, it'd be great to talk through the more complex filters you've got coming up. My first thought is that you could align to something similar to what Messaging Insights is doing for filters, but it might not work for every use case: https://www.twilio.com/console/sms/insights/delivery

btw since Numbers just hired a new PD, it'd be great if you could see if they'd be available to come to office hours with you tomorrow, too!

[richbachman]

Hi @vnguyen94 I threw together a CodeSandbox example of the Messaging Insights filters built with Paste. This is just presentational, but maybe it'll help you along with the Paste migration.

https://zrfp5.csb.app/

[serifluous]

And here are a few screens that were thrown together really quickly a few months ago on the DSYS design side for the Buy a Number page:

• https://share.goabstract.com/1608e68d-fcd5-430d-84bf-25e7905f7448?collectionLayerId=95806cea-6278-483c-829d-544b5f03a968&mode=design
• https://share.goabstract.com/1608e68d-fcd5-430d-84bf-25e7905f7448?collectionLayerId=bace7b31-669b-482c-8f4d-ce42119c9b27&mode=design

I definitely would not use this as prescriptive. They were created to demo the checkbox components, but feel free to use them as a starting point!

[vankhoawin]

Thank you both so much 🙏 this and the office hours is more than enough to solve my current tasks.

[vankhoawin]

@ramoneguru you should get access for this too