311-data
311-data copied to clipboard
hackforla
Display NC names on hover via pop-up modal
Overview
We need to display NC names on-hover over unselected NC, so that users can have the necessary information to increase functionality and ease of use ( knowing NC names)
Action Items
- on-hover (over un-selected NC), display pop-up modal with NC name
- [ ] Address the problem overview with possible design solution(s) in a comment
- [ ] Complete Design Iterations section below
- [ ] Document user interaction in Figma
Resources
v1.2 Moderated Usability Study
- October '23 slide indicating need for on-hover display
- August '24 slide indicating user clicked on boundary line to see NC name
Design Iterations
Please move ticket between In Progress and In Review to assist PM team
Iteration 1
Link to notes: REPLACE WITH COMMENT URL
REPLACE WITH SCREENSHOT UPLOAD
Hand Off Materials
Figma Section Name: REPLACE WITH SECTION NAME
Before Screenshot
<>
After Screenshot (Finalized)
REPLACE WITH SCREENSHOT UPLOAD
Designer Resources
Iteration Dropdown Copy/Paste
<details><summary>Iteration X</summary>
<p>
Link to notes: `REPLACE WITH COMMENT URL`
`REPLACE WITH SCREENSHOT UPLOAD`
</p>
</details>
Instructions for Engineering Hand Off
To Start Engineering Hand Off...
- Ensure all Hand Off Materials are filled in
- Add the "ready for dev lead" label
- Leave a comment saying "This ticket is ready for engineering hand off."
Merging this ticket with: https://github.com/hackforla/311-data/issues/1808
Ready for Design Lead, please add the appropriate size level label based on review
Added some links to usability test presentations, referencing users that are asking for this (or similar) feature
@Joy-Truex Thanks for your work on this. Should we include your screenshots as "Iteration 1" in the original post?
Also, a tip on pasting images in dropdowns, the  line needs to have an empty line above and below it. For some reason the image doesn't know it should render unless it's got some buffer lines.
Example:
<details><summary>Details</summary>
<p>
 <-- an empty line above and below
</p>
</details>
@ryanfchase Do you know if this ticket is in development? This will impact my work on the hover popup. Thanks!
@ryanfchase Do you know if this ticket is in development? This will impact my work on the hover popup. Thanks!
The link goes to a figma section for #1699, is that the ticket you refer to?
If so, the work is completed and the ticket is closed:
- https://github.com/hackforla/311-data/issues/1699
@ryanfchase Do you know if this ticket is in development? This will impact my work on the hover popup. Thanks!
The link goes to a figma section for #1699, is that the ticket you refer to?
If so, the work is completed and the ticket is closed:
No unfortunately not! the ticket i'm referencing is the content of that frame, not the label which seems to be incorrect, but I cant find the actual correct ticket
can you let me know if we have something in development to change to what is in the frame? I was asked to work on this (independently of a ticket??) when i first became a lead so i cant find or recall the exact trail...:(
Iteration 1.1
After some exploration, I have come up with this option for showing the NC label upon hovering over a NC.
View 1
Zoomed out and hovering over a not-selected NC (in this case Pico Union)
View 2
Zoomed in and hovering over a not-selected NC (in this case Wilshire Center)
Iteration 2.1
After some exploration, I have come up with this option for showing the NC label upon hovering over a 311 ticket.
please note that this shows the location labeled as opposed to previously when it was unclear to some users what NC a ticket was in
@ryanfchase Do you know if this ticket is in development? This will impact my work on the hover popup. Thanks!
The link goes to a figma section for #1699, is that the ticket you refer to? If so, the work is completed and the ticket is closed:
No unfortunately not! the ticket i'm referencing is the content of that frame, not the label which seems to be incorrect, but I cant find the actual correct ticket
can you let me know if we have something in development to change to what is in the frame? I was asked to work on this (independently of a ticket??) when i first became a lead so i cant find or recall the exact trail...:(
FINALLY FOUND THE TICKET!! 1669 Any idea what became of this? I'm having trouble following the trail as to if it ever went to dev and why? @ryanfchase
Here is where we can find the specifications for that design update
A dev ticket has been opened to implement this design: https://github.com/hackforla/311-data/issues/1870, I've left a question for design leads.
@Joy-Truex let us know the status of this ticket. Does it need review, or is it ready to be closed and ready for dev? I'll add this to the upcoming agenda to make sure your work on the SR details design is properly wrapped up before it is implemented. Thanks!
Edit: updated my questions several times, lol
@ryanfchase the implementation of #1870 solves for the issue when there is a SR to hover over, however not when the user is trying to identify a NC independently of a SR
I also have created a design for this second instance but I want your opinion on whether this is out of scope for this ticket.
Design
@Joy-Truex I think it is within scope? see "Show NC names while users hover over the NC district area on the map" from our 2024 usability test presentation.
But let's put this on tonight's agenda just to confirm
if confirmed in scope please note need additional information from dev team about how to confirm what zoom % the label appears at!
Hey @Joy-Truex !
Just to clarify before our meeting, is the current ask from DEV the following?
- Provide zoom % for when the 2 types of popups appears.
Type of Popups:
- Show NC name on hover when
zoomed out. - Show NC name on hover when
zoomed in.
yes + how i would indicate to the team what level i want the NC popup to appear at as it doesnt make sense to show up when its all the way zoomed out and only should start to show up at a certain point.
@ryanfchase this seems to be trapped in questions. Can you please review? To remind you of where we left off: https://github.com/hackforla/311-data/issues/1807#issuecomment-2623391927
the design is basically completed just need to know how to specify for the dev handoff. Thank you!
ETA for answering this will be 2/23, so sorry for the delay -- needing extra time this week.
@Joy-Truex speaking from a dev perspective, specifying different hover behaviors based on zoom level adds a large degree of complexity. It is technically feasible, but we now must internally maintain "states" of the map that the user is not aware of. Also, most map applications with popup-labels will concede that there will be a level of zoom where the labels can block other map content. Maps with clustered data points are the only visualizations (that I know of) that "get out of the way" depending on zoom level.
A couple of alternatives if that doesn't work for you:
- we can allow users to toggle NC names on hover, e.g. as part of a setting. I know this would be the first type of control that is a "user setting", but this lets us provide the on-hover labels and also lets the user get rid of it if they don't find it useful.
- if the user has not selected an NC already, hovering over an NC can populate the Neighborhood Councils dropdown, perhaps with reduced opacity to suggest that the user can select this NC
So am I correct in assuming that the popup hover label would appear at any zoom level?
Mockup Screenshot
Zoom Out, Zoom In
As the resident data visualization developer, yes, that is typically the behavior for labels on-hover. They will appear at any zoom level.
Thank you! I have asked for some quick feedback from the design team, is it alright if I give a final response after GM Wednesday? Feel free to assign back to me and thumbs up if so :)
No problem, let's do this instead. This can stay in Questions, and I'll add a couple labels to indicate that its awaiting team discussion -- and I'll keep ready for design lead so that we know its not needing input from another team
Regarding display NC names on-hover over unselected NC:
After discussing with the design team, I have determined that it makes sense for the NC label to appear at any zoom level.
It may be a bit clunky to use at a fully zoomed out perspective, however this is partially addressed by the max zoom out being preset & the fact that users can zoom in more in order to be more precise as needed. Benefits include consistency with other map UI's and scalability/ease of use on a larger scale use for users who are looking for a less-precise view.
Ryan (dev lead) to make a ticket where we QA the live version of the modal with the design to ensure that:
- [ ] the modal matches the design
- [ ] the modal meets requirements
Once this has gone through QA ticket (to be made following return to 311Data from TDM hiatus) it will be prepared for handoff.
@Joy-Truex I'm needing help getting a recap on this ticket. So, it looks like the work completed for this ticket is completed (you provided screenshots here and here). And we decided that this hover modal should appear at any zoom level (citation here, where you mention tradeoffs and benefits). Is that all correct? Did you have a link to your work in Figma?
Finally, I am happy to move forward on a QA ticket for the NC Details Modal (we even made note of it at the previous GM). Can you explain why it blocks the completion of your work on this ticket? Perhaps I missed something, but I am not seeing a reason why we cannot hand this off to dev and do the QA work simultaneously.
NC Details Modal
Based on a Slack Huddle with PM and Design Lead, we agree that there are two concerns addressed by this ticket:
- Hovering over a service request on the map, which results in SR Details Modal displaying the NC name
- Displaying NC names when hovering over unselected NC regions on the map, which will result in that NC name appearing in a modal.
The designs for the SR Details modal was completed in previous tickets (design + dev), but Design Lead notes that there are still discrepancies remaining between the design specification and the current implementation. We have decided to create a new ticket for the design team to list all of these discrepancies, and another dev ticket will be created to fix them.
- design follow up ticket: https://github.com/hackforla/311-data/issues/1979
- dev follow up ticket: https://github.com/hackforla/311-data/issues/1980
The designs for NC Name-Preview modal are present within this ticket. The designs are completed, and the work is ready for dev hand off.
- dev follow up ticket: https://github.com/hackforla/311-data/issues/1981