311-data
311-data copied to clipboard
hackforla
Create button to reset selection mode and recenter around all boundaries
Overview
Users are getting lost in the map when selecting an NC, we need a way to quickly reset to the app's default state
Action Items
- [x] Address the problem overview with possible design solution(s) in a comment
- [x] Complete Design Iterations section below
- [ ] Document user interaction in Figma
Resources
V1.2 Moderated Usability Study
- October '23 slide indicating users expected a control for seeing entire map / attempting to unselect by zooming out
- August '24 slide indicating users expected a control for seeing entire map
Design Iterations
Please move ticket between In Progress and In Review to assist PM team
Iteration 1
Link to notes: https://github.com/hackforla/311-data/issues/1817#issuecomment-2439233373
Hand Off Materials
Figma Section Name: REPLACE WITH SECTION NAME
Before Screenshot
REPLACE WITH SCREENSHOT UPLOAD
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."
Ready for design lead input. Please add:
- any further required information
- any possible blockers
- remove
Size: Missingand add appropriate size
After using different websites as examples and looking up best practices, most of the research for resetting filters seems to be within the context of e-commerce, but I think that's the closest we're going to get. I am designing a couple options and will have them ready by 10/16's meeting for a round of feedback.
After discussing with design team, two designs (top left and bottom left) seemed to make the most sense, so I will be going forward with those (along with seeing if any research favors one of them more) to finalize designs and make a decision.
While working on second iterations, a lot of research shows that placing the clear/reset all buttons so close to another frequently used button (i.e. near the dropdown button for the neighborhood districts) could cause errors with users erasing accidentally erasing all their selections when they mean to only remove one. Are there designs that show what the dropdown would look like with multiple NC selections that we can use? @Joy-Truex @allisonjeon
@ryanfchase At the last meeting before the break we talked about the possibility that at this time we don't have the option to view multiple neighborhood councils at once. Can you confirm that we're assuming correctly about the current functionality going into the launch?
CC: @pogwon @allisonjeon
@ryanfchase At the last meeting before the break we talked about the possibility that at this time we don't have the option to view multiple neighborhood councils at once. Can you confirm that we're assuming correctly about the current functionality going into the launch?
CC: @pogwon @allisonjeon
Yeah multiple NC selection is not slated for launch. Certainly there is buzz around such a feature (we used to have a mockup for this, there are old email communications marketing this idea). Let's explore this post-launch.
@pogwon with Ryan's additional context added, my recommendation would be to add a "clear" button by the boundaries menu and/or a "reset all" button by the filters text. feel free to comment on the figma file/here with your thoughts!
I'll work under constraint that only one NC at a time can be selected then. Including a 'reset all' by feels like it could be confused as applying to all filters (NC, date range, and request types), so I'll probably go with a button within the boundaries menu. I will update with designs, potential edge cases, and notes about interaction/behaviors by the end of this week. @Joy-Truex
@Joy-Truex Decided to go with the 'reset' button within the Boundaries section. Updated with notes, interactions, and possible edge cases for handoff.
Screenshot of design:
FYI - After getting feedback with Bonnie, we should leave tickets ready for hand off in the "Questions" column with "ready for dev". I can explain motivation for this tonight, or at the upcoming product planning meeting.
Nothing needed from design team right now. This ticket is still ready for engineering hand off.
Closing this ticket as the dev ticket is being put together now. Thanks @pogwon !