Open ryanfchase opened 6 months ago
added "Research potential solutions" as an action step
This ticket is ready for picking up @Joy-Truex @allisonjeon
Iteration 1:
@pogwon please provide Iteration 2 if available -- otherwise an ETA of when you will have it ready, thanks!
Iteration 2:
@ryanfchase For one of the designs for Iteration 2, we are exploring a change in cursor state to indicate that the zoom feature is disabled. Is this a realistic solution that the dev team can implement?
@ryanfchase For one of the designs for Iteration 2, we are exploring a change in cursor state to indicate that the zoom feature is disabled. Is this a realistic solution that the dev team can implement?
@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 I think the change in cursor state you're looking for is the CSS rule cursor: not-allowed
(MDN):
https://github.com/hackforla/311-data/assets/9038965/f83360b2-04f1-400d-b6d1-6c05f4a015d8
This is a native/cross-platform solution that is a lot less work than replacing the cursor with an image asset.
I'm guessing that we would add these controls with Mapbox's NavigationControl. If that control doesn't give us the option to limit zoom + set the not-allowed cursor out of the box, then we can style the cursor with CSS based on mouseover events: https://github.com/mapbox/mapbox-gl-js/issues/1353#issuecomment-406748057
@pogwon following up on @aqandrew's comment, I think we can move forward with cursor: not-allowed
cursor state for this deliverable.
If this is sufficient, please move the ticket to "In Progress" or "In Review", thanks!
Edit: hit "comment" too fast...
@ryanfchase Sounds good - thanks! Going to ask for feedback from the design team one more time at this week's meeting before deciding on the final design for handoff.
ETA for Completion: Wednesday June 26, 2024.
@pogwon I've moved this to In Progress
since you've provided an ETA -- thanks!
Third iteration with notes Link to Figma File
Final designs with notes Link to Figma File
This ticket is ready for engineering hand off. @ryanfchase
Thank you @pogwon -- I'll get this converted to a dev ticket.
@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...
[User] can't scroll out too far or scroll away too far while an NC is selected.
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).
In order for me to fully consider this ticket closed, Designer will help confirm the following:
@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.
@Joy-Truex @allisonjeon
I've been reviewing the Mapbox docs, and I just want to share a few highlights:
Some links I used to compile these notes:
```js 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()); ```
@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.
@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:
Zoom features are disabled while locked into a neighborhood council.
To enable zoom features, please exit by clicking out of the selected area.
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.
Sorry, I was out sick for last week's meeting. I don't have a problem with removing the pop-up text completely. But a potential issue that may arise is displaying only one available option within our current designs could be confusing for users (SS shows how it would look if Zoom in is available but Zoom out is disabled)
This probably won't be an issue if users mainly use the scroll wheel or pinching to zoom but it could be confusing if they rely on the zoom buttons. There are some new potential button designs I am considering that I can have ready by the end of this week (Friday, September 20) that may look clearer when only one option is enabled.
@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?
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: https://github.com/hackforla/311-data/issues/1700#issuecomment-2138382290 - Added zoom in & out controls - Suggested a "locked in" zoom level when a NC is selected - Added indication that zooming is disabled by making the controls disappear when NC is selected - Received feedback from design team for iteration 2
Iteration 2
Link to notes: https://github.com/hackforla/311-data/issues/1700#issuecomment-2168920133 - Changed colors of the zoom buttons for better accessibility - Explored a popover feature that explicitly describes disabled status and how to enable zooming - Exploring a change in the cursor to indicate a disabled status
Iteration 3
Link to notes: https://github.com/hackforla/311-data/issues/1700#issuecomment-2192835113 - Finalized cursor states after feedback - Changed colors of popover for better consistency with design system
Final Iteration
Link to notes: https://github.com/hackforla/311-data/issues/1700#issuecomment-2193702141 - Modified design to make it a tooltip instead of popover - Changed the position where tooltip would appear
Hand Off Materials
Figma Section Name: ⭐⭐⭐ Handoff
Before Screenshot
No NC Selected (no zoom controls present) ![image](https://github.com/hackforla/311-data/assets/6414668/c12279c6-c667-4153-876c-bfe2770a9916) With NC Selected (no zoom controls present) ![image](https://github.com/hackforla/311-data/assets/6414668/f9d47392-7394-4443-83bf-9a754cc68077)
After Screenshot (Finalized)
Designer Resources
Iteration Dropdown Copy/Paste
```
```
Iteration X
Link to notes: `REPLACE WITH COMMENT URL` `REPLACE WITH SCREENSHOT UPLOAD`
Instructions for Engineering Hand Off
To Start Engineering Hand Off... 1. Ensure all Hand Off Materials are filled in 3. Add the "ready for dev lead" label 4. Leave a comment saying "This ticket is ready for engineering hand off."