Card status variant: Questions / Answers

[tbaker1026]

Ask questions on error states
Experimental Design Request

Some questions to start but feel free to add additional input / ideas

• What kind of statuses do your products show in cards?
• Success, error, missing, incomplete, Action needed, etc.
• What are the requirements for the data in the card? (Tag, heading, error text or alerts, action link?)
• Where in your products are you using cards with statuses today or plan to use them? (provide links or designs)
• How many card statuses load on a page?

Notes

• Mention which product and team you are on
• Subscribe to this discussion thread to follow along (over to the right under Notifications)

[jfinnerty13]

In profile and My VA we typically use slim alerts in the cards, including errors, warnings, info, and success messages. Have there been considerations on all the different alert options for the cards? Just want to make sure we have consistency within the experience so all messaging looks roughly the same. If the team needs examples feel free to reach out. Thanks!

[jfinnerty13]

Every card = one data set :)

You can check it out any time in staging btw using any LOA3 users to get an idea of how it's working currently. Recommend checking out the Contact information page. @jeana-adhoc

[jeana-adhoc]

Thanks!

[jeana-adhoc]

Hi @jfinnerty13 - Thank you for your patience with all my questions. I want to make sure we've explored all the possible use cases before we begin building.

It took me a bit to find a profile where there was missing contact information. I did find this situation...

It's identifying information on file, and the user clicked continue while the mobile phone was still missing. The three headings on the page is very similar to the old prefill pattern.

Do you know if there are any plans to update this section to be more inline with this pattern "Help users... update their prefilled information"

[jfinnerty13]

Hi @jeana-adhoc - it might be easier to meet - the only place I've ever seen that screen is from My VA welcome flow which is owned by the IIR team - but you mentioned you got to there from the profile. Can you tell me how to recreate that screen please? Thanks.

[jeana-adhoc]

@jfinnerty13 - thanks for reaching out. You're right about conflating that screen with Profile. I'll reach out to IIR

[fiorella-io]

One use case for our team is a way to handle missing required information. This design has been provided by the patterns team

[Mottie]

We're using this experimental design in our Dependency Verification (21-0538) form (original Figma design) which matches the experimental design request, but we implemented another design which includes an error alert at the top of the page to allow listing multiple errors on the page

Implementation issues:

• Adding the thick red border and additional left red border requires custom CSS
• The tag component doesn't provide alternate background colors, so we didn't include it in our implementation.
• Design needs to include focus management. On continue, where should we move focus? To the alert (in our design), or the card, or the error message inside the card?

[jeana-adhoc]

We're creating the component for this reason that will resolve your issues particularly for prefill :D

@Mottie - Do you have screens for what this looks like when you have multiple cards in error state?

[Mottie]

[tbaker1026]

Updated the original discussion thread with new questions.