Adding a supporting documents

[lgalloherran]

Hey team!
I'm working on improving the 'add supporting document' feature when a user creates a bundle.
Currently we are managing a 'one-page' experience that changes depending on the type of document and we are thinking of switching to a step-by-step experience. We want to make sure the flow is clear and acessible.
https://www.figma.com/proto/19GxmZa01LDz8LX4u3afQR/Provisionally-Approved?page-id=1090%3A20351&node-id=1262%3A44734&scaling=min-zoom

[SiTaggart]

Hi @lgalloherran

Thanks for submitting early. To help prep the conversation a little are there any areas that you are concerned about the most and would like us to focus on? The more specific and focused the better for the short 20 minutes that we have.

Thanks

[lgalloherran]

Concern areas:
1. Use of a drag-drop option for uploading documents: Is there a pattern for this? Is it a good idea form the accessibility perspective?
2. Use of a progress bar: Is there a component for a progress bar? What happens if the number of steps are dependent of the user choices on a given step?

[serifluous]

Use of a drag-drop option for uploading documents

There's no universal pattern for this right now, but it is on our roadmap as a component ("Dropzone"), and it's come up as a requested pattern ("Drag and drop"), too.

Re: accessibility, if you have a drag-and-drop area, and still also have a button on the screen that opens a file selector, it's usable.

My recommendation for now would be to use the Salesforce component as an engineering reference for an accessible drag-and-drop file uploader, and borrow visual elements from SendGrid (as seen on https://mc.sendgrid.com/contacts/import/upload-csv):

In order to use Paste tokens to compose this, you'll need to use a solid (instead of dashed) border, though.

Use of a progress bar

For a progress bar, do you mean the steps you're showing at the top of this page? https://www.figma.com/proto/19GxmZa01LDz8LX4u3afQR/Provisionally-Approved?page-id=1090%3A20351&node-id=1233%3A49852&scaling=min-zoom

If so, you can reach out to Ishita, Margot, Charlene, and Angela, who are working on a Wizard pattern. You might be able to align to the new pattern, depending on when you need to ship this feature.

Another option is borrowing elements from the design linked in Discussion #1352, where steps are shown in a vertical list, rather than a horizontal one. The feature doesn't exactly match your use case, but it could be more flexible if you need to give the customer more details, explain why certain steps might be skipped over, etc.

It could also be worth considering whether there are other places that progress stepper could be shown. Putting it where it is right now at the top of that form could make it seem like those are multiple steps the customer needs to do to submit the regulatory bundle form, and not steps that Twilio needs to do before the bundle can be approved.

[lgalloherran]

Hey Sarah, thanks for the advice about this designs. I think I got enough feedback for now to continue, so I'm going to cancel the OH spot. :)

[SiTaggart]

For some extra detail on the file uploader accessibility requirements (I haven't looked at the mocks so I'm not saying you missed any particular one, it's a generic list):

• Make sure it's focusable, by using the html file input you provide a focusable element and keyboard interactions to uploading a file
• Make sure to design all interactive states, including a focus state for keyboard users
• All visual states should pass the usual color contrast requirements that any other control needs to meet
  • text is 4.5:1 contrast ratio to it's background
  • the visual indicators used to show the controls bounding box should be 3:1 to it's background
• Make sure there is a visible label similar to any normal input control. The label should describe the field or data you want from the user, not just the drag and drop interaction.