-
-
Notifications
You must be signed in to change notification settings - Fork 63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve Zoom Behavior on Map #1700
Comments
added "Research potential solutions" as an action step |
This ticket is ready for picking up @Joy-Truex @allisonjeon |
@pogwon please provide Iteration 2 if available -- otherwise an ETA of when you will have it ready, thanks! |
@ryanfchase |
@pogwon I think so, so long as we are provided the entire cursor (the pointer and the crossed out circle) as a single SVG or similar asset. |
Adding labels and modifying board status while we wait for input @pogwon .I shall put everything back when this is addressed 😄 |
@pogwon @annaseulgi Happy 1st day of July break! I mean to do this before break started, please review at your convenience. I'll add it to the 1st agenda of August so we don't forget. In the PM Suggested Changes in the main issue, we noted the following...
I also think that we should be establishing a minimum zoom level. Currently, regardless of NC selection, a user is allowed to scroll too far (e.g. a street corner will take up the entire screen) as well as zoom out too far (we can view the entire Earth as a globe in space). Action ItemsIn order for me to fully consider this ticket closed, Designer will help confirm the following:
|
TODO for dev lead
|
@pogwon @Joy-Truex I'm still working on providing the Mapbox docs that will allow us to convey zoom levels and other map-styling info between design and dev team. I did have a question about the location of the zoom controls. Typically the Privacy Policy modal takes up the bottom left corner of the screen on site-open. I notice that this is also the desired location of the zoom controls, as designed by @pogwon. While not perfect, I think this is fine -- but I just wanted to run it by you both in case you felt strongly about addressing this. I believe Bonnie says we should be encouraging users to deal with the Privacy Policy modal immediately, rather than let it remain open for the entirety of their session. |
I've been reviewing the Mapbox docs, and I just want to share a few highlights:
ResourcesSome links I used to compile these notes:
Mapbox JS for setting max/min zoom level
mapboxgl.accessToken = 'pk.eyJ1IjoicnlhbmNoYXNlIiwiYSI6ImNsN2pvbG8wMTAwOHczeHFuYWNqbDJhaG4ifQ.BEyTQiMJSHPJX7uHLAGzCg';
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12', // style URL
// center: [-74.5, 40], // starting position
center: [-118, 34],
zoom: 9, // starting zoom,
maxZoom: 15,
minZoom: 9
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl()); |
@ryanfchase Thanks for letting me know - I'm personally leaning towards keeping it as is, since you mentioned Bonnie's thoughts about dealing with the privacy policy modal. But I'll ask the design team this week what they think about "locking" a control behind the modal and provide updates. |
Just wanted to share the conversation from Wednesday (8/28/2024). It sounds like we are moving forward with leaving the navigation controls in the bottom left corner as per the spec. We are fine with it being obscured by the Privacy Policy modal since it will be dismissed by the user. I still think I want to review the mapbox documentation and styling capabilities with dev + design teams (I have outlined above). We can make time for that at an upcoming meeting. |
@Joy-Truex @pogwon I actually think we can nearly sign off on this ticket -- I do have one feedback request. In the final frame on @pogwon's hand off screenshot, the pop-up says:
Requested Changes
Any thoughts on removing the pop-up text completely? Especially if we are planning on a "reset all" button in the search & filters modal? I'll add this to our upcoming Wednesday agenda to ensure there is time to discuss this. |
@ryanfchase @Joy-Truex Here are two potential updated designs for the zoom buttons, along with disabled states (for zoom-in and out): I am leaning towards the above design as it is more consistent with other maps' designs (Google, Yelp, Airbnb, etc.) but will also ask for feedback in our UI/UX Slack channel. |
@pogwon thank you! Yeah I think upper design is what I'm leaning towards as well. I think it's easier to distinguish the disabled state. But interested to hear what the others think. |
Looking at feedback, the general consensus was that the top (lighter) design would fit better. There was one suggestion that maybe it can switch back and forth depending on if the map changes from dark to light. I'm not sure if this can be implemented but I think we can discuss it at this week's meeting and make a final decision to move forward. |
After some research into other map behaviors, there are very few examples where zoom buttons change as the map color changes. I think it would be best to move forward with just the lighter designs. I can prepare those for handoff along with different states (disabled, active, hover) and link the Figma file here. @ryanfchase Should the zoom levels we reviewed from the MapBox docs be included in there as well? |
Let's just focus on the lighter design, the different states, and any on-hover info boxes that pop up. I have been able to communicate the zoom levels to the devs -- unless you're comfortable identifying and demonstrating zoom levels with the map. Otherwise, we can stick to communicating it as the following:
If anything is still unclear, please reach out on Slack and we can come to an agreement. cc @DrAcula27 |
Overview
We need to clarify the user's zoom controls, esp when selecting an NC so that they don't get confused when zooming in/out.
Suggested Change from PMs
Action Items
PM Action Item
Resources
V1.2 Moderated Usability Test from October '23
Design Iterations
Please move ticket between
In Progress
andIn Review
to assist PM teamIteration 1
Link to notes: #1700 (comment)
Iteration 2
Link to notes: #1700 (comment)
Iteration 3
Link to notes: #1700 (comment)
Final Iteration
Link to notes: #1700 (comment)
Hand Off Materials
Figma Section Name: ⭐⭐⭐ Handoff
Before Screenshot
No NC Selected (no zoom controls present)
With NC Selected (no zoom controls present)
After Screenshot (Finalized)
Designer Resources
Iteration Dropdown Copy/Paste
Instructions for Engineering Hand Off
To Start Engineering Hand Off...
The text was updated successfully, but these errors were encountered: