Feature: Visually indicate which item in the results list matches with which map pin

[fancyham]

Context

With our split-screen view that shows both a list organizations and the map, it’s impossible to tell which pins correspond to which list item.

This makes it difficult to pick and choose an item, and to identify items.

How is it now?

How it is now:

Our list and map are pretty independent of each other: Hovering a cursor over a list item has no effect on the map. Hovering over a map pin isn’t reflected by anything in the list.

Proposed new feature

We want to help users match up the map pin with the listing, and vice-versa. This is a challenge with Mobile since there are no hover-states.

Action items:

• Design
  • When hovering a cursor over a list item, highlight the corresponding map pin. This will help food-seekers know where a service is located.
  • When hovering over a pin, highlight the row in the search results. Perhaps scroll to that item, if that’s possible.
  • On mobile, there is no way to hover, so replace the ‘Details’ button with a ‘Show on Map” button, which when tapped, highlights the map pin. Or perhaps make the background of the row into this ‘show on map’ button, and make only the text and icon link to the organization’s detail screen. See Bug: Hard to get to org details. Entire search result row should be a button #1652 for more info.
  • Number the results and the map pins, similar to Yelp
• Development

This will require a new highlight state for the map pin, and for result rows.

Quick mockup:

Here’s how Yelp does it — we could do something similar.
https://www.yelp.com/search?find_desc=tacos&find_loc=San+Francisco%2C+CA

Discussion

An added benefit of numbering our pins is that our search results become printable!

References:

Related issue

• Highlight pin when cursor hovers over a listing in organization list #1120

[fancyham]

Here’s an idea where the row background is tappable to highlight its pin on the map, but the text and icon (only) are clickable to get to the org detail:

It should probably activate on a ‘touch-down’ event, so that if someone touches and drags to scroll, they’ll see the corresponding pin of the item they touched highlight on the map.

This could reduce the number of buttons. Test to see if it makes sense to users, though.

Showing using the not-often-seen split-screen view for tablets:

[fancyham]

This is being addressed in this design issue:

• Visual refresh/redesign of public Food Oasis UI #1874

[fancyham]

Hi @qiqicodes - is this currently in active development now? We are working on some new design refinements.

If there’s a dev currently working on it, let us know and we’ll connect the dev and designer to each other so they can sync up. Otherwise, we’ll keep refining the design.

[fancyham]

This issue is related to

• Feature: Enable user to tell which item in the results list matches which map pin #1710

[fancyham]

Hi @ihorng could you add your most recent sketches (the latest from two weeks ago) and update here plz!

[ihorng]

I've reiterated the design options for the map pins on the map/listing page with the secondary researching finding in mind. I didn't get a chance to ask for user feedback yet but will do it soon:

Figma link: Under "Ideation 2", "Map Pins" section:
https://www.figma.com/design/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?node-id=7680-4680&t=DbrdsLlMx0rp0E8l-1

[fancyham]

Per our discussion, and re: 'would we have to number all 604 pins?' (the current # of results today)... the short answer is 'no' because that's way too many and no one would want that, anyway.

However, some solutions to making our results easy to understand:

One option we might consider is limit numbered pins to the closest 20-30(?) results and then no more numbers. The user would see a 'search again' button when they pan around the map to refresh the numbering.

This problem is similar similar to Apple Map's new "Search here" button... they have a similar system as us in that they dynamically load new pins onto the map as you pan around to distant locations... but if you pan only a little, it doesn't. Their new "search here" button restarts and re-orders the search results using the currently viewable area of the map. That might be a possible direction for us.

https://www.macrumors.com/how-to/use-search-here-feature-apple-maps-ios/ (archive.org link)

This is also related to the problem where we currently show the total number of search results (currently "604 results" on desktop).... that 604 number is too high to be useful per feedback from users. Breaking down to 20-30 at a time might be better to prevent cognitive overload.

• Search results count needs to be more useful for food-seekers #2216

We might also consider pagination as part of this.... perhaps showing batches of 10 or 20 at a time in the text results or even on the map?

The overall goal is to make it easier for people to make sense of what they're looking at.

[fancyham]

@ihorng When you have a chance, please add screenshots of the design options you tested, link to the poll, and the results! Thx! (uploading screenshots to the comments are best but if you also link to Figma, please do that 'right click on the Figma Section/object > Copy > Copy as link" so that the link jumps directly to the item you're referring to)

[ihorng]

Design options tested: https://www.figma.com/design/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?node-id=8415-26334&t=b6iL4lisnWpKKj4l-4

User testing results: https://www.figma.com/design/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?node-id=8415-34025&t=b6iL4lisnWpKKj4l-4

https://app.lyssna.com/tests/81ee6e561cb1/results/c41e2f625555

Interactions & details about the updated designs:
Figma link: https://www.figma.com/design/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?node-id=8415-39151&t=b6iL4lisnWpKKj4l-4