Usability: Change color of map's filter buttons' 'hover' state. It looks too close to the 'selected' state, leading to some confusion

[fancyham]

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)

Screen.Recording.2024-10-28.at.4.52.08.PM.mov

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