Update Facility Locator mobile map design for usability testing

[xiongjaneg]

User story

As a front end engineer, I need to know the requirements for building the staging prototype for Facility Locator mobile map usability testing.

Resources

Review or discuss with Alexis:

• Research Draft Plan
• Draft Conversation Guide

Design

Per comments on #14912 we need to incorporate the following into the design

• Add the segmented button group from USWDS.
• Make the numbers on the map interactive.
• For the location that's selected, the information should appear underneath that map.
• add TTY numbers to the results
  • see #13939
  • Jordan has shown what this could look in the Sketch file
• if possible, account for scenarios in which pins are overlaid or very close together? (most common in searches in a urban location and "Community pharmacies" as the Facility type) created new ticket for this
  • Example 1: Results E/F and I/J in Spokane search for Community pharmacies (on desktop)
  • Example 2: Results A/B in Search for All in network urgent care in zip code 59860 (on desktop)

Facility locator Figma file

Acceptance criteria - S102 (3 points)

• Convert Sketch components to Figma components in Figma file
• Add accessibility and design annotations to the mobile map design
• Review with accessibility
• Review with @ALogsdon3 moved to separate ticket Update Facility Locator mobile map design for usability testing #16855
• Review with engineers

ACs - S103 ( 3 points)

• Updates are made to design based on feedback
• Link to the updated design is added to Build a staging prototype for Facility Locator mobile map #14514 for when engineers can pick that ticket up

[thejordanwood]

I converted this to a Figma file. Please look at the Mobile Map page only, other pages haven't been updated to the new Figma components.

@laflannery @ALogsdon3 I've added annotations to the mobile map design. Can you look this over and comment any other annotations that would be good to include for the prototype? I want to make sure I didn't miss anything relevant to accessibility or research.

[aklausmeier]

Things to consider:

• This research will use a staging "prototype" which means it is possible we will get participants who show up using the desktop version whether on laptop or a tablet
• Perigean research recruitment for accessibility in H/F has shown it's very difficult to recruit mobile participants with assistive technology - this may mean we have to broaden our scope to beyond just mobile
• We can discuss this in the next UX Sync

cc @ALogsdon3 @xiongjaneg @thejordanwood @mmiddaugh

[laflannery]

@thejordanwood Added comments

[ALogsdon3]

@xiongjaneg for this AC, can we make this a ticket for me next sprint? 3 points to be on the safe side:

• Review with @ALogsdon3

Suggested title: Review FL mobile map Figma annotations for inclusion in prototype

I already discussed this with @thejordanwood :)

[xiongjaneg]

Sounds good, thank you. I'll add to the draft sprint plan.

New ticket #17074

[jilladams]

Since we broke review cycles out of this ticket for at least Alexis's feedback, I updated ACs in ticket body to reflect that changes after reviews will also happen next sprint. FYI @xiongjaneg @aklausmeier

[mmiddaugh]

@thejordanwood @aklausmeier two thoughts after viewing the annotated design in UX sync just now:

• for the sake of accuracy, when the facility type is "VA health", the user will select a service type from the drop down box (rather than entering in free text) - in other words, the example shown in the design isn't a valid combination of parameters.
• When you add the list view to this design, I'm wondering about the expected behavior if the user toggles between the list and map views (for example, what happens if the user selects a result in the list and then switches to the map tab - should that location get focus in the map?)

[laflannery]

@thejordanwood Added 2 more comments to the Figma file that I realized I had missed

[thejordanwood]

@mmiddaugh @aklausmeier

• Thanks for calling that out. I pulled from other mockups in the file that show the plain language search we want to have in the future. I've now updated the prototype annotations mockup to show the search in its current state.
• I'm interested to see how participants use the toggle in testing. We've discussed making changes to the mobile map, but none to the list view. Currently, users aren't able to select the items in the list view at all. @aklausmeier and I can discuss this further to determine what interactions we need to include in the prototype.

[thejordanwood]

@mmiddaugh @aklausmeier @xiongjaneg

@aklausmeier and I have discussed what interactions should be included in the prototype. The summary is:

• We're inclined to run usability testing to see if interactions between map/list view is a real problem to solve.
• While we're waiting on testing: @xiongjaneg can you open a ticket to look into the feasibility of switching between map and list views while retaining the selected location? Specifically, I think there may be a technical limitation that could prevent us from selecting a location in the map view, then switching to that selected location in list view. List view usually sorts by distance. If a user selects a location on the map that's far away, how would that be sorted in list view?

---

For more context, I did some research to see how other sites (Google, Yelp, Airbnb, and Zillow) handle interactions between list and map views. This a quick summary of what I found:

Map to list view: On these sites, the map selection would be lost when switching to list view. This is where I think the technical limitation may come in. All of these sites sorted their list view by distance like we currently do on FL.

List to map view: These sites didn't have a clear path for a user to navigate from list to map view. Some had a "Directions" button on the list view that would switch to a map view, then give you directions from your current location. We already have a version of this with our "Get directions on Google Maps" links.

[xiongjaneg]

@thejordanwood #17174 stubbed for your additional comments

[thejordanwood]

@aklausmeier I wanted to leave a note here on this:

if possible, account for scenarios in which pins are overlaid or very close together? (most common in searches in a urban location and "Community pharmacies" as the Facility type)

I think we may already solve for this by having the zoom in/zoom out feature on our map. If pins are too close together, the user is able to zoom in on the map and have the pins space out. Just wanted to leave that thought here so that it didn't look like I was forgetting this.

If that seems like a good solution to you, then this ticket is probably ready to close.

cc: @xiongjaneg

[ALogsdon3]

@thejordanwood Thanks for this comment. I am including a question about this in the conversation guide because @mmiddaugh identified a use case where the pins are directly on top of one another, even at full zoom. Try doing the search for Task 3 on your phone and see if you can see both results at 65 Broadway or both results are 30 Broad St.

[thejordanwood]

Thanks @ALogsdon3! I see the problem now.

I'm not sure this is a design issue and we may need to create a ticket for an engineer to look into this. Ideally, the pins would still be separated somewhat, like this Google Maps example of Dr. Michael Kolin who works at Manhattan Sports Medicine.

Can we ask an engineer if something like that is possible on our map @xiongjaneg? I'm assuming they'll need a ticket for that work.

[xiongjaneg]

@thejordanwood I'll create a ticket for that. I think we have a similar ticket to do some other exploration, so both could likely go around the same time. Thank you!

Done - #17231

[thejordanwood]

Reviewed this with @aklausmeier. Since engineering tickets are open to look into pins overlapping and map/list view interactions, this design ticket can close. We'll create any other design tickets as needed once we get more information from those engineering tickets.

cc: @xiongjaneg