Feature audit: Facility Locator

[melwoodard]

New patterns

1. Custom dropdown with legend icons

2. Disabled text field state

3. Boundary around an application 'chrome'

4. Outline alert message style

5. Contact links with icons

6. Self-contained scrolling list

Inconsistencies / bugs

1. Page headings are h3 - should be h1

2. Dropdowns are missing ^ carat when opened

3. Page heading isn't flush left with the rest of the content

4. Contact / directions links should be underlined to match the standard text link style

5. Back link uses a different carat icon than seen in Rx, SM

6. Sidebar heading should use h4 highlight class

7. Mobile tabs are different than style in Rx, Claims

8. Truncation in the Service Type dropdown is too severe - still room for ~8 more characters (more on full-width mobile view)

For discussion

1. Is there reason for the grey background around the search chrome? Secure messaging's search / navigation functions don't have one - should these two align more in their visual treatment?

2. Another instances of bolding / not bolding with labels, but this time in reverse - the label is regular, the value is bold. Don't know what the solution is here, but adding this to the plate

3. Back link vs. breadcrumbs - while a "back to results" link is very useful for search, having it below the breadcrumbs seems to clash - plus the breadcrumbs should also list the current page, in this case Tahoma National Cemetery.

4. Should website and directions links use the external link icon?

5. Disclaimer - should this use the yellow alert style? (documented here)

6. Location detail pages could benefit from more spacing to separate sections and types of content

[melwoodard]

@gnakm @NatalieEMoore I'm working through an audit of all the new features we've released to capture new UI patterns and manage consistency. Would love your feedback on the inconsistencies / for discussion sections above. I haven't looked at any of the existing FL bugs, so some of these may have already been captured in issues. Thanks!

[NatalieEMoore]

@melwoodard 1-8 for bugs looks correct, they are bugs. I can add separate issues on the vets.gov/website repo if that makes the most sense @gnakm?

for discussion, # 5, I do think the disclaimer should be the same across the site so adding yellow may be a good idea.

[gnakm]

@melwoodard Thank you for another thorough audit. I filed most of the bugs. Please check my thoughts in bold!

Inconsistencies / bugs

1. Page headings are h3 - should be h1 Filed issue here

2. Dropdowns are missing ^ carat when opened Filed issue here

3. Page heading isn't flush left with the rest of the content Filed issue here

4. Contact / directions links should be underlined to match the standard text link style
   So the hover gets really... not so pretty with the icon. What are your thoughts on just underlining the the numbers and not making the label clickable?

Right now:

Possbility?

5. Back link uses a different carat icon than seen in Rx, SM Related to no. 3 in discussion section below

6. Sidebar heading should use h4 highlight class Filed issue here

7. Mobile tabs are different than style in Rx, Claims Filed issue here

8. Truncation in the Service Type dropdown is too severe - still room for ~8 more characters (more on full-width mobile view) Filed issue here

For discussion

1. Is there reason for the grey background around the search chrome? Secure messaging's search / navigation functions don't have one - should these two align more in their visual treatment?

We actually tried it without the filled in color and there wasn't enough contrast, especially with the map on desktop. Not sure if this has to align with secure messaging. I see it more as each tool need slightly different treatment for visual balance on the page.

2. Another instances of bolding / not bolding with labels, but this time in reverse - the label is regular, the value is bold. Don't know what the solution is here, but adding this to the plate

Another thing we went back and forth on but glad you flagged it now that we have more tools.
Filed issue here

3. Back link vs. breadcrumbs - while a "back to results" link is very useful for search, having it below the breadcrumbs seems to clash - plus the breadcrumbs should also list the current page, in this case Tahoma National Cemetery.

I think we should get rid of back link the way we aiming to do for Rx and add title of Facility location in breadcrumb. @melwoodard Let me know what you think and I'll file an issue.

4. Should website and directions links use the external link icon?

Yes it should! Filed issue here

5. Disclaimer - should this use the yellow alert style? (documented here)

Context: We went back and forth on this because when we had it as the blue information alert box, users missed it. It's actually an on going problem we have with the blue information call out box all across Vets.gov. A handful of us agreed that the white box was a lot easier to see but we actually never tested it. @NatalieEMoore I think we talked about how this is not really an alert but informational. I defer to you. If yellow box makes more sense, I will file an issue!

6. Location detail pages could benefit from more spacing to separate sections and types of content

Agreed! I think Ben was using the same components for results listing for detail page but we should definitely tweak this. Filed issue here

[melwoodard]

Thanks Gina!

• Contact info - making just the phone numbers link makes sense to me. In that case the labels for "main number" etc should probably also be bold for consistency.
• Back link vs. breadcrumbs - agreed to standardize on breadcrumbs
• Disclaimer alert style - I think the difficulty is that while it's not intended as an alert, the icon still makes it feel that way. The issue with a blue box is it gets overlooked, and the concern with a yellow box is it could be too strong. How would you judge the relative importance of seeing this messaging? Do you think we could get away with just bold text rather than pulling it out into a box?

[melwoodard]

Update: @gnakm ok, I'm gaining some sympathy for the outlined box :)

I'm finding a similar scenario in the alert we're adding for signing into Rx/SM about needing an MHV account. A yellow alert feels too strong here, and potentially annoying since a returning user could use this path regularly to get to the Rx / SM apps (rather than sign in through the nav).

Thoughts?

[NatalieEMoore]

For number 5: Gina wrote, "Context: We went back and forth on this because when we had it as the blue information alert box, users missed it. It's actually an on going problem we have with the blue information call out box all across Vets.gov. A handful of us agreed that the white box was a lot easier to see but we actually never tested it. @NatalieEMoore I think we talked about how this is not really an alert but informational. I defer to you. If yellow box makes more sense, I will file an issue!"

Can we do testing? I think it's both an alert and information. How is it being shown across the site currently? @gnakm @melwoodard

[melwoodard]

I think testing would be valuable - another thing to think about in the case of FL is the placement of the alert. I can see how it could easily be dismissed as an ad or something irrelevant when it's toward the end of the content.

We're using the blue background style across the site, in two flavors - a short and sweet banner with the (i) icon used for brief alerts, and a lengthier callout used to explain eligibility for a particular benefit.

Alert:

Eligibility:

[gnakm]

Notes from usability testing when we tested with blue box:
Theme: The call out box on the facility details page was consistently missed or skipped
Recommendations: Do have a list of known services on each detail page, along with a message (not in a call out box) about why not everything is there, and what to do to find out.

https://github.com/department-of-veterans-affairs/vets.gov-research/blob/master/Projects/FacilityFinder-Login_10-13-2016/FacilityLocator-Login-SummaryFindings.md

[gnakm]

@melwoodard How about using the white box with outline for informational call outs? I think they stand out more and I agree, looks less like an ad.

Current:

Potential:

I think leaving the blue for longer content works because it works better in a long body of text. It's more a matter of making sure that we have consistent information in those boxes (i.e. are you eligible? Who is covered).