UXD - Display NC names on hover via pop-up modal

[cottonchristopher]

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

1. 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...

1. Ensure all Hand Off Materials are filled in
2. Add the "ready for dev lead" label
3. Leave a comment saying "This ticket is ready for engineering hand off."

[cottonchristopher]

Merging this ticket with: #1808

[cottonchristopher]

Ready for Design Lead, please add the appropriate size level label based on review

[ryanfchase]

Added some links to usability test presentations, referencing users that are asking for this (or similar) feature

[Joy-Truex]

Inspiration Research: Weather.com, LA city, California

Screenshot

Iteration 1:

NC Label

Hover Popup

[ryanfchase]

@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 ![Image](...) 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>

![Image](...) <-- an empty line above and below

</p>
</details> 

[Joy-Truex]

@ryanfchase Do you know if this ticket is in development? This will impact my work on the hover popup. Thanks!

[ryanfchase]

@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:

• Clear District Council search box field on deselect #1699

[Joy-Truex]

@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:

• Clear District Council search box field on deselect #1699

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...:(

[Joy-Truex]

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)

[Joy-Truex]

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

[Joy-Truex]

@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:

• Clear District Council search box field on deselect #1699

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

[Joy-Truex]

Here is where we can find the specifications for that design update

[ryanfchase]

Here is where we can find the specifications for that design update

A dev ticket has been opened to implement this design: #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