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

Videos and screenshots

Google's solution

Screen.Recording.2025-02-07.at.6.32.21.PM.mov

Our current solution, which has problems with hover states

Screen.Recording.2025-02-07.at.6.34.33.PM.mov

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?
• (in progress) Design with alternate colors/design for the filter button unselected, hover, selected states
• Devs build it
• Test it
• Release

[whitneywind]

@fancyham Is this ready for dev now or should a designer work on it first?

[fancyham]

Here are two videos (also added to the issue at top) showing Google and our solution. Would it be easy to copy Google's design pattern here? Perhaps it's already part of our Material Design library?

Google's solution, hover states work as expected:

Screen.Recording.2025-02-07.at.6.32.21.PM.mov

Our current solution, which has problems with hover states -- 1) can't see hover when trying to de-select. 2) Hovering makes it look selected when it's not:

Screen.Recording.2025-02-07.at.6.34.33.PM.mov

The proposed change would be:

1. If this button is in its white "not selected" state, then hover state is a slightly darker grey, and (optionally, if it's part of Material Design) a bit darker/bigger dropshadow
2. If button in its light blue "selected" state, then hover state is a slightly darker (more black, if using the HSB color scale), with (optionally, if it's part of Material Design) a bit darker/bigger dropshadow

What do you think?