Show compass on map

[1ec5]

The map should show a compass indicating the current direction of travel or current heading (if the user is at rest). For example, if the user is facing south when starting a route, they should see “S” on the map so they know to turn around when the departure step says “Head north”.

This compass could have the same size as the map SDK’s built-in compass view, but it would serve a different purpose. The map SDK’s compass primarily indicates that the map is rotated and offers a way to rotate it back to north. By contrast, this proposal is for a view that bears nothing but a single letter.

There are precedents for this kind of display, both in Apple Maps and even built into rear-view mirrors in some car models. In Google Maps, a similar view serves as a toggle for overview mode. So it may be possible to implement this feature without sacrificing any additional screen real estate.

/cc @mapbox/navigation-ios

[akitchen]

Let's get some design input on this before proceeding.

[brsbl-zz]

cc @cjballard

[Cjballard-zz]

@1ec5 @brsbl @akitchen I have a few questions about the compass functionality.

Would the compass be ever-present? If so, would we want it to toggle a route overview functionality? In the last two examples, I replaced our current route overview button, but we could preserve that icon in the trip tray so the user has more of a direct CTA for that (like google).

Or would it only show up when a user is idle and before their first instruction like the screenshot example here? Curious to get some feedback here. These are pretty rough outlines but can attach something more hi-fi once we hone in on a solution.

[1ec5]

Would the compass be ever-present?

Yes, that’s the idea anyways. I brought up the departure instruction as the primary use case for a compass, but it can be somewhat useful throughout the trip. If you know that you’re heading south on a vacation, seeing north on-screen is a bit of a red flag.

If so, would we want it to toggle a route overview functionality?

We do want to retain some UI for toggling the route overview. However, it’s unclear whether we can effectively combine the direction indication with that toggling behavior into a single UI element.

Google’s overview toggle indicates the current direction with an analog design that I think is fairly difficult to use while driving. It spins clockwise as you turn the car counterclockwise and rotate the map counterclockwise – as it should. But there are no labels to use as a frame of reference for those contradictory motions. Also, despite one end of the double arrow being red, I personally don’t see enough contrast to avoid getting momentarily confused about which way it’s pointing.

Apple’s design separates the two functions, albeit inelegantly. The compass indicates the direction with an abbreviation, as you find in some rear-view mirrors in cars. But tapping the compass does nothing; instead, a label at the top of the screen prompts you to tap the top bar to switch modes.

Regarding the mockup above, I appreciate that the “Ŝ” design makes it possible to combine the current direction indication with a hint that tapping it toggles modes. Would this button read “N̂”, “Ŝ”, “Ê”, or “Ŵ”, with the arrow always pointing up? Or would it potentially read “S̬”, “E›”, or “‹W”, with the arrow always pointing northward?

[brsbl-zz]

I'm in favor of the last mock, but I would place the compass as the first UI button on the map, just below the banner, so essentially replace the current route overview button with it (esp. given the route overview button will soon be moved to the trip tray). I think the compass is most relevant in context with the instructions on the banner (i.e. "head east"), so think they should be close together.

Regarding the mockup above, I appreciate that the “Ŝ” design makes it possible to combine the current direction indication with a hint that tapping it toggles modes. Would this button read “N̂”, “Ŝ”, “Ê”, or “Ŵ”, with the arrow always pointing up? Or would it potentially read “S̬”, “E›”, or “‹W”, with the arrow always pointing northward?

I like the idea of the arrow always pointing in the direction the driver is facing. Seems most useful to know which direction you're headed towards rather than what's behind you, etc.

[Cjballard-zz]

@1ec5 @brsbl Definitely. I like the idea of always having it point forward to lessen cognitive load on the driver. Here's a screenshot with those buttons swapped.

[Cjballard-zz]

@1ec5 @brsbl Adding in some additional thoughts here. Thinking this could function in a few ways, one where the compass acts as a toggle between showing letter direction and analog direction when tapped. Would need to add in the route preview icon ideally in the trip tray.

We could also have it toggle an overview pointing north, with a way to resume your current view.

Then mixing the two, you get a Google-like approach that has the compass icon ever-present, and aligns you north when tapped.

[1ec5]

I like the idea of the arrow always pointing in the direction the driver is facing. Seems most useful to know which direction you're headed towards rather than what's behind you, etc.

By convention, a single red arrow in a circle always means north. The compass in our map SDK and MapKit follows this convention, which is based on the traditional compass rose.

Thinking this could function in a few ways, one where the compass acts as a toggle between showing letter direction and analog direction when tapped. Would need to add in the route preview icon ideally in the trip tray.

We don’t really have a concept of a “system tray” at the bottom of the view controller the way the Android navigation SDK does. Currently, it’s a status bar, plus an exit button that takes advantage of Fitts’ law by being the only tappable element in that corner of the screen. To move towards a tray concept, we might need to change the layout and visual treatment more drastically so that the user knows the toggle button is interactive and can still reliably access the exit button.

We could also have it toggle an overview pointing north, with a way to resume your current view.

This is what the overview button currently does, the only difference being the lack of a direction indicator.

Then mixing the two, you get a Google-like approach that has the compass icon ever-present, and aligns you north when tapped.

During turn-by-turn mode, would the compass rotate as the user rotates? (In other words, would the red arrow always point northward?) Personally, I’ve always found Google’s double-headed arrow confusing and would prefer our map SDK’s approach in that case:

A traditional north-pointing compass may defeat the purpose of putting a compass on screen, at least the purpose that started this conversation: making the “east” or “south” in the departure instruction more relatable.

What if we take the second idea in #1217 (comment) but remove the arrow? I think an upright, abbreviated cardinal direction would be reasonably intuitive, especially as the user moves around.

[Cjballard-zz]

@1ec5 Something like this perhaps?

I like that too – I wonder if having the direction ever-present comes at a cost of taking up map space, though. It's especially helpful in points of frustration, initializing a trip and figuring out maneuver direction. Wondering how much benefit a user would receive after that initial step.

[akitchen]

Wondering how much benefit a user would receive after that initial step.

Sounds like a great opportunity for user testing!

[1ec5]

I wonder if having the direction ever-present comes at a cost of taking up map space, though.

This would replace the existing Overview toggle button, so no new screen real estate is taken up by this UI element.

Wondering how much benefit a user would receive after that initial step.

Without user testing, I can only answer in relative terms: the direction is especially useful for the departure step, because the cardinal direction is part of the instruction. After that point, to the extent it’s still useful, that would be for reasons unrelated to guidance. (Route numbers can include cardinal directions, such as “I-71 South”, but these cardinal directions are determined by signage and can sometimes contradict the actual direction of travel within urban areas.)

[Cjballard-zz]

@akitchen @1ec5 Definitely sounds like an opportunity for testing!

[1ec5]

The design in #1217 (comment) is based on the map SDK’s built-in compass design, which is based on this Sketch design. The letter is drawn programmatically based on a localizable string resource, which can we substitute for MGLCompassDirectionFormatter.

[1ec5]

Google’s overview toggle indicates the current direction with an analog design that I think is fairly difficult to use while driving. It spins clockwise as you turn the car counterclockwise and rotate the map counterclockwise – as it should. But there are no labels to use as a frame of reference for those contradictory motions. Also, despite one end of the double arrow being red, I personally don’t see enough contrast to avoid getting momentarily confused about which way it’s pointing.

Apparently Google Maps on CarPlay uses a similar design as Apple Maps: a label that displays an abbreviation of the current direction (e.g., “NW”).

[1ec5]

#1698 added a compass to CarPlay; this issue tracks bringing a similar UI element to NavigationViewController. For consistency, it should be the letter design described in #1217 (comment).

[MaximAlien]

It'd be great to discuss this to align better on iOS and Android side.

/cc @lawsonkight @abhishek1508 @kmadsen