hackforla
Usability: The map's filter buttons' 'hover' state looks too close to the 'selected' state, leading to some confusion
Overview
When using a pointing device (mouse/trackpad) on the map screen, the new filter buttons at the top of the map are great, but an issue is that the 'hover' state looks a lot like the 'selected' state, leading to a bit of confusion or unexpected UI.
(video has sound)
https://github.com/user-attachments/assets/2d360055-dc8a-4944-8bcc-f6e6e9191e0e
Consider: Should we have more differentiation between the hover state from the selected state, and if so, how?
What is the user trying to do?
- Selecting and deselecting filters
- Needs to know what filters are currently selected and which are not
How many people are / will be having this problem? Anyone toggling filters
Discussion and possible Solution(s)
- Perhaps selected state has much thicker outline?
- Perhaps remove hover state tinting altogether?
- If we have a hover color, it needs to work when selecting and de-selecting a filter.
What device is this happening on / what is the user’s context?
Resources/Instructions
- How this problem is addressed elsewhere (possibly screenshots)?
How do other sites do it? Our filter buttons are based on Google Map's filter buttons — How do they do it? Would it make sense to copy their design patterns?
- Things to think about?
- How do others solve this?
Since this is CSS, you might try creating your own custom CSS locally to override the site's — that way you can try out different colors, styles, etc. without asking a dev to do it. Then pass the changes to the devs once design is done.
Action items
- [ ] (optional) Confirm this is a problem. Ask a few people to try this out — is this actually an issue? What problems are they having?
- [ ] Design with alternate colors/design for the filter button unselected, hover, selected states
- [ ] Devs build it
- [ ] Test it
- [ ] Release
