Design error and empty states for Facility Locator

[thejordanwood]

Description

Error states should be designed for Facility Locator to show intended behavior. According to #14993, the primary error states needed are:

Error/Empty states:

• Browser isn't allowed to use location and the "Use my location" button is selected
• No location is entered
• Invalid location is entered
• No facility type is selected
• No service type is entered (if required)
• Invalid service type is entered (if required)
• No results are found for the specified service and location
  • This messaging will need to be different on mobile, where map and list views are in separate tabs.
• Map needs to zoom in to search
• Map doesn't display results (system error)
• List doesn't display results (system error)

So current error states are documented on the Facility Locator error states page.

Design

Error/Empty states page in the Facility Locator Figma file

Sprint 104 Acceptance criteria

• Error messages / intended behavior are shown in design file

Sprint 105 Acceptance criteria

• Review with accessibility
• Review with engineers
• Review with UX/UI lead
• Review with PM/PO
• Update CAIA review of design for Facility Locator error and empty states #17388 with any notes needed for CAIAI review

[thejordanwood]

@xiongjaneg I had a request come in a few weeks ago on a FE ticket (#14933) to design error states for Facility Locator. I've been unable to prioritize this request, and wanted to create this ticket so it doesn't get lost.

This may be a blocker for part of the work on that FE ticket. I'll need to do this one sprint ahead of that ticket getting pulled in.

[jilladams]

Thread re: leaving this ticket til Sprint 102 103, updated points to 5, and hope to move the file to Figma beforehand: https://dsva.slack.com/archives/C0FQSS30V/p1705511358426309. (FYI @xiongjaneg )

[mmiddaugh]

@thejordanwood @aklausmeier @xiongjaneg if this issue is pulled in to support design for the mobile map iteration/testing prototype, we really only need a more elegant response for searches which do not return results for the specified service and location. But you may want to review this error state documentation in Github product folder to see what else might ne needed. (Note this was last updated in 1/2022 and likely is incomplete or outdated).

• Additional error states will be needed to support new search functionality (such as situations in which the search terms do not match keywords in the service taxonomy) as mentioned in #14993 but it may make sense to move those into a separate issue which can be pulled in at that time.

The "no results" scenario isn't actually an error state - the system is working correctly and the user has completed all fields. But the message currently displayed is quite lengthy and may not serve Veterans well, especially those using a screen reader. See the details mentioned in #13919 Revisit Facility Locator "no results" error message. We may want to consider what guidance to provide based on the list vs map view (if we're able to display a different message for each).

You can experience this sort of no results scenario in a variety of ways, including

• Location = almost anything + Facility type = Community providers + Service type = Poetry therapist
  • there is almost no way to resolve this scenario - poetry therapy is an extremely rare service type
• Location = Polson, MT + Facility type = VA benefits + Service type = Burial claim help
  • in this case, changing the Service type to All VA benefit services returns a search result
• Location ="Washington" + Facility type = VA benefits + Service type = All VA benefit services
  • in this case, changing the Facility type to VA health returns a search result but really, I shouldn't be able to enter just a state so we may need to work with the engineers to see what options we have for enforcing the appropriate entry.

---

We may be able to close #13919 Revisit Facility Locator "no results" error message as a result of the work done for this one.

[aklausmeier]

@thejordanwood Renamed ticket to include empty states (no results)

[mmiddaugh]

Engineering questions for future discussion

• How does the Facility Locator define a valid location? (What is accepted/expected?)
• Can error messages be tailored to the type of facility/service?
• For which types of "problems" can we show the "We've run into a problem"...message?
• Will error messages be announced by the screenreader as displayed? Or is a different behavior expected? (This one might be for Laura)
• Timing for display of error messages/wait to validate

[thejordanwood]

@laflannery Can you review this? Michelle also has a question in the comment above about how error messages work.

Will error messages be announced by the screenreader as displayed? Or is a different behavior expected? (This one might be for Laura)

[thejordanwood]

@maxx1128 @eselkin Can you review the updates to the error states I'm proposing? They can be found on the Error/Empty states page in the Facility Locator Figma file. Some questions we have in a comment above are:

• How does the Facility Locator define a valid location? (What is accepted/expected?)
• Can error messages be tailored to the type of facility/service?
• Timing for display of error messages/wait to validate

If any of this in confusing (I know that Figma page has a lot of content), then I can set up a meeting for us to discuss!

[aklausmeier]

@thejordanwood reviewed and added comments to Figma

[laflannery]

@thejordanwood I looked at the disabled button and added my comments in Figma. Regarding the question from @mmiddaugh above, the error message should be read exactly as they are displayed visually. A screen reader will immediately hear the error once it appears and then we should make sure to handle the focus so that their next tab stop is into that incorrect field so they can easily fix their mistake.

[thejordanwood]

I'm taking info from some comments in Figma to answer these questions:

How does the Facility Locator define a valid location? (What is accepted/expected?)

This is defined by Mapbox and we're not sure if we get that level of feedback. We may need to stick with the "For better results" message.

Can error messages be tailored to the type of facility/service?

This is probably possible. I'm going to move forward with suggesting different error messages for when no service type is entered and when an invalid service type is entered.

@maxx1128 @eselkin Feel free to add any additional information I may have missed.

[thejordanwood]

@xiongjaneg I've updated the CAIA review ticket with the suggested error/empty states messaging. We've also reviewed this in UX sync, so I believe everyone has had a chance to see this.

I think next steps are CAIA review, making any additional design updates after that, then handing this off to engineering and addressing anything that comes from that.