Show distances from location searched (not just center of map)

[fancyham]

During our meeting, it seemed the general expectation was that the distances shown on the list of locations were from the address the user entered into the search field. However, that is not actually the case one the user has panned the map.

How it is now

Currently, the distance shown on the list for each location is from the center of the map, not from the address the user has entered.

This can be misleading, especially as the user pans around or broadens their search area by zooming out and panning.

Discussion

One part of this problem is that we currently do not put a marker on the map of the user-entered address nor their current location.

A second part of this problem is finding user's expectations and the processing power required to meet it.

A third part of this is what users expect the list order to mean. Is it: "locations on the map in order of distance from the user-entered address, even if that address is currently off the screen"?

Solutions?

• First, confirm this is an actual problem (even amongst our internal team), and if this is an problem we want to address.
• Show a special pin at the user entered address
• x Nope — we will use a normal pin. : Show a blue dot at the user's geolocation-obtained coordinates, displaying the light-blue 'uncertainty' circle, if the device reports location error-bounds as may be the case if geolocation is obtained via wifi base station (ala Google or Apple Maps)?
• Program the changes

A short-term solution might be to remove the distances once the user pans the map or if user did not enter a location.

Long term:

• How important and accurate is the distance number that we're showing? (distance seems to be as-the-crow-flies, not actual transit distance (car, walking, etc.))
• Look at how Google and Apple do it to leverage their design patterns. (they don't usually show distance and when they do, it's transit)

[entrotech]

Yeah, the logic here is somewhat of a historical remnant from before we implemented the "Search the Area" button, when the center of the map always was the "user's location". Now we need to keep track of the user's location (starting point or origin) separately from the center of the map. we need to re-examine how the interaction works. Maybe:

• The location drop-down sets the user's location or origin, and when first selected, also centers the map on this point, and shows a "you are here" marker on this spot.
• Once the user uses the "Search this Area" button, the location drop-down still shows the user's location, and the "you are here" marker still shows this spot (which may or may not still be in view on the map), but the map center is moved.
• If the user pushes the "re-center" button, the zoom level is not changed, but the map is re-positioned such that the map center is moved back to the "you are here" location, but the zoom level is not changed.
• If the user has disallowed location in their browser, then the location will be the adddress they have selected, or if they have not selected an address, it will be the default center of the tenant area (downtown LA for the Los Angeles tenant).

[fancyham]

Yes, your interaction outline sounds good to me with some comments below — definitely want some marker of the user-submitted location on there.

Might consider if we can/should separate the “search for address” from the geolocation button, which is how the Google and Apple Maps apps work.

Ideally we could have two different types of indicators since that’s what folks are used to (see below):
A) User entered address (pin)
B) Geolocated (blue dot)

Bullet 3 could be a separate chunk as we don’t have a ‘re-center’ button (yet).

Bullet 4: If the user disallowed the location earlier, then it’d be nice to ask again if the user requests geolocation, then cancel out and keep map unchanged (as opposed to changing location to middle of LA) if they deny it once again.

[fancyham]

Related to

• Separate User location from map center. #995

[souronion]

Based on John and Bryan's comments above, I worked on the following four cases:

1. Geolocation disabled + no user-entered address

• The map is centered on the center of the tenant area.
• Distances = distances from the center of the tenant area.
• Question: Should we hide the distances in this case? Knowing how far the food banks are with respect to the center of downtown LA doesn’t seem very helpful to the users. It may also confuse them as some people may think it’s the distance from their current location.

A screenshot with the distances removed.

2. Geolocation enabled + no user-entered address

• The map is centered on the user’s current location, marked by a blue dot.
• Distances = distances from user’s current location.
• As the user pans the map, the blue dot stays at the user’s location. Distances always refer to the distances from the blue dot (even when it’s out of view).

3. Geolocation disabled + user-entered address

• The map is centered on the user-entered address, marked by a red pin. The user’s current location is not shown.
• Distances = distances from user-entered address.
• As the user pans the map, the red pin stays at the user-entered location. Distances always refer to the distances from the red pin (even when it’s out of view).

4. Geolocation enabled + user-entered address

• The map is centered on the user-entered address, marked by a red pin. The user’s current location is marked by a blue dot.
• Distances = distances from user-entered address.
• As the user pans the map, the red pin stays at the user-entered location. Distances always refer to the distances from the red pin (even when it’s out of view).
• Priority: User-entered address > User’s current location.
• When the user taps the “re-center” button, clear the user-entered address and re-center the map on the user’s current location. Distances = distances from the user’s current location.

Additional questions: When switching from case 2 to case 4, will users get confused about whether the distances are with respect to the red pin or the blue dot? Should we be more specific when displaying the distances?

Figma file: https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/Fola-Design-System?node-id=2935%3A5

[fancyham]

Love the exhaustive use cases and mockups! Thanks!

From the weekly meeting:

@entrotech mentioned that we don’t currently support ‘live’ geolocation (blue dot moves automatically as user moves), so that could simplify things for us by removing case 4.

Case 2 (geolocation) in this case might be merged into case 3, but with the address field filled out by the computer? I think we’d want to avoid the blue dot in this case since that typically indicates ‘live’ tracking (I noticed that blue dots are usually animated, too)

One question that came up was whether to use the red marker as the center of the map when user didn’t enter anything. For me, I think that your case 1 does it well — no marker needed and it follows in the footsteps of other map apps. ( Or perhaps use a different colored marker to distinguish it from a user-entered address? )

If we want to get fancy, I wonder if we can

• add a ‘satellite photo layer' toggle since landmarks are useful when looking up a location
• add a ‘right-click’ or ‘longpress’ to show a “mark location here” option that fills out the address field

@gigicobos also wondered if we had analytics about how many people use the ‘locate me’

Personally, I use that feature frequently on other sites, often for finding 'stores near me' :)

[fancyham]

Related to / duplicate of

• Mark user's current or searched location on map #929

[Benbaillou]

hi,

Great job again @souronion !!

Following @fancyham comments

• "One question that came up was whether to use the red marker as the center of the map when user didn’t enter anything. For me, I think that your case 1 does it well..." => I agree we can let this case 1 without any marker (like Google maps does)

• @fancyham "Merging Case 2 with Case 3" just to make sure I get it well => do you mean we enable geolocation without a blue marker (because we do not support live geolocation and to avoid any confusion) + we mark the user-entered address with the red marker?

• => do you have any examples (sketches) of your fancy ideas :) ? I like them

Analytics
@gigicobos Unfortunately on Google analytics I haven't been able yet to see how many users click on "Use my current location" => I'll try to dig it.

Questions @entrotech
Just for my own knowledge => How difficult / easy is it to support live geolocation ?

[fancyham]

• @fancyham "Merging Case 2 with Case 3" just to make sure I get it well => do you mean we enable geolocation without a blue marker (because we do not support live geolocation and to avoid any confusion) + we mark the user-entered address with the red marker?

Correct. Geolocation now finds user location and marks that location on the map with the red pin. It basically uses GPS to find a street address or lat/long and in effect, enters it into the search field turning case 2 into a version of case 3.

[gigicobos]

@souronion here are my comments to your questions and mock-up ideas :) :

1. Geolocation disabled + no user-entered address: Should we hide the distances in this case? --> I support hiding the distances in that case.
2. Geolocation enabled + no user-entered address --> All good in this case. I like the mock up.
3. Geolocation disabled + user-entered address --> All good with the logic, just the icon looks more like a selected pantry, like when you select a place in Google Maps. Maybe just a change in the icon that represents the entered address.
4. Geolocation enabled + user-entered address --> I think the 3 cases you've worked on will be great for the users to locate and know the distance to pantries and organizations. This use case #4 might be confusing for users.

We can discuss more tonight.

[souronion]

Thanks for the great suggestions, everyone!! I updated the cases based on our discussion last week.

1. Geolocation disabled + no user-entered address (same as the previous version)

• The center of the map = the center of the tenant area
• Distances = distances from the center of the tenant area
• No marker to mark out the center of the map
• Hide distances in this case to avoid confusion
  

2. Geolocation enabled + no user-entered address (merged with case 3)

• The center of the map = the user’s current location, marked by a red pin.
• Distances = distances from the user’s current location.
• As the user pans the map, the red marker stays at the user’s location. Distances always refer to the distances between the food banks and the user's location.

Change from the first version: Replaced the blue dot with a red marker.

I like @fancyham's suggestion that we automatically display the user's address in the search bar.
My only question is: If the user is in the middle of a road or somewhere without a nice building address, can we always translate their location (longitude & latitude) back into a human-readable address? @entrotech: Could you help take a look to see if we can do this? :)

3. Geolocation disabled + user-entered address (same as the previous version)

• The center of the map = the user-entered address, marked by a red pin.
• The user’s current location is not shown.
• Distances = distances from the user-entered address.
• As the user pans the map, the red pin stays at the user-entered location. Distances always refer to the distances from the red pin (even when it’s out of view).

4. Geolocation enabled + user-entered address (now the same as Case 3)

• The center of the map = the user-entered address, marked by a red pin.
• The user’s current location is not shown.
• Distances = distances from user-entered address.
• As the user pans the map, the red pin stays at the user-entered location. Distances always refer to the distances from the red pin (even when it’s out of view).
• When the user taps the “re-center” button, clear the user-entered address and re-center the map on the user’s current location -> Switch back to Case 2

Change from the previous version: Hide the user's current location (the blue dot)

I like @gigicobos's suggestion that we change the icon so that it does not look like a selected food pantry. I'll work on the icon in the following week. :)

[fancyham]

For the question about reverse-geolocating: @entrotech said that how location is turned back into text depends on the service.

Depending on the service, might return an approximate street address, a cross street, or maybe lat/long.

We agreed with @souronion’s suggestion that if the address becomes too complex or non-useful for a human, that we can put a red pin down but leave the address field blank (as shown in scenario 2 above were address field is blank)

[Benbaillou]

@souronion hey - Can you please add a size label to your issue

[fancyham]

@Benbaillou I think that the size estimate is really more of an @entrotech thing at this point since the design is complete and it’s entering development.

(I’ve been thinking of the size as a development estimate, not a design one, BTW — but if we were to have ‘design size' estimate labels, I’d be happy to use them)

[Benbaillou]

@fancyham thank you for your feedback. I withdrew the label 'role design' and I let @entrotech size the issue.

Good idea for the size label per role, we just need to make sure it does not bring too much confusion.

[fancyham]

@Benbaillou I think that UX design is very much part of this. I’m just saying that the size in this issue is primarily determined by how easy or hard it is to write the code changes. The design itself in comparison is relatively easy (and also already complete)

[Benbaillou]

Got it, thanks Bryan for the clarifications :)

[fancyham]

Hi folks from the dev meeting.

As promised, here’s the general gist from the user’s perspective:

It’s like Google Maps:

• By default, map loads centered on the most sensible generic location and zoom level (i.e. LA downtown for LA. This is specified per-tenant). Distances to orgs are not shown since they wouldn't make sense, however, orgs are still listed in order from distance from the center of the most recent search (as would be most logical)
• When an address is entered, we mark that address on the map and distances are measured from that address.

In effect, this boils down to two states:

No-user-address: Address text field is blank or has an unresolvable address:

• Centering the map:
  • We don’t know the user’s location so we start them out at some sensible location and zoom level (specified per-tenant)
  • (stretch goal) the URL specifies the location and zoom level to center on (useful for embedding FO on other sites)
• Distances to organizations are not shown
• If address is unresolvable, display address field text in red to indicate an error

Have-user-address: Address text field is filled with a resolvable address:

• Display a pin on the map at the specified address
• All distances on the org list are shown from this user-entered address (not the center of the viewed map)
• Panning does not move the pin

How does the address field work?

The address text field can be filled by…

1. The user typing into the address field
2. The geolocation button, which reverse-geolocates to an address or lat/long, and puts that into the address field.
3. (stretch goal) the URL specifies an address or location (zip code) or lat/long (whatever mapbox supports)
   Note: If address is unresolvable, display text in red to indicate an error

How does the URL work? (stretch goal)
Putting an address in the URL could allow a third-party site to embed our map and center it on a particular location. Alternatively, (lower priority) we or a third party might also want to specify the user’s address when loading the map.

Note that the URL method could result in either state, depending on how specified:

1. Center the map at this location, but do not enter this into the address field, resulting in No-user-address. (something like: ?center-map-at=“LAX”)
2. Enter an address into the address field, resulting in Have-user-address. (something like: ?address=“LAX”)

Nice to have: URL in browser updates when address is entered (like Google Maps) for easy copy/pasting/bookmarking

In the future, it may be possible to clear the address field, meaning that it might switch states from Have-user-address to No-user-address

Please ping souronion or me if anyone has questions.

[souronion]

Hi team, I just uploaded the red marker's SVG onto the Fola Hfla Share Drive: https://drive.google.com/file/d/17Oh8oQ4m3AEMNrtZxgtLne3_KOaz7lhv/view?usp=sharing