[openstreetmap/openstreetmap-website] Fix inconsistent context menu icons (Issue #6485) (PR #6571)

[Pablo Brasero]

pablobm left a comment (openstreetmap/openstreetmap-website#6571)

Thank you for the PR, @aNsHuL5217. It gives us a starting point to discuss solutions. For completeness, here's a screenshot with all the icons, in context, as they appear in production at the moment:

<img width="988" height="460" alt="Navigation menu, context menu, and right-hand sidebar menu, with icons as per currently on production" src="https://github.com/user-attachments/assets/924d68db-66cc-420e-91ab-626b2257c0d5" />

And this is the suggestion offered by your PR:
<img width="988" height="460" alt="Navigation menu, context menu, and right-hand sidebar menu, with icons as suggested by this PR" src="https://github.com/user-attachments/assets/3143e7e1-8432-4b87-8443-3657b1301480" />

Below are my thoughts. Please don't interpret them as "make these changes", but rather as an invitation for everyone to give their opinion.

### Fill vs no fill
The first thing that catches my eye is the choice of `*-fill` icons in an otherwise sparse context. I feel they grab attention too much.

This is an alternative without the "no fill" version of the icons. In my view, the icons are better integrated in their context like this:
<img width="988" height="460" alt="Navigation menu, context menu, and right-hand sidebar menu, with icons similar to those in this PR, but using the no-fill version for three of them" src="https://github.com/user-attachments/assets/57d0be87-231e-4ee6-92bc-a8cc8c7c9a77" />

### "Stop" icon
The second thing is that I'm not sure about the choice of the square "stop" icon for "Directions to here". My feeling is that it doesn't convey the meaning and instead invites to "stop" something (I don't know what).

I understand that you wanted to match the "stop" in the red marker. This is one of those things where perhaps both icons (in the context menu and in the red marker) should change. To what I don't know.

### Different note icon
This PR uses a speech bubble icon for the "note" action. This is an improvement over the pencil icon, in that it's closer to the icon in the side menu. However it's still quite different and it may still lead to confusion.

The one used in the sidebar lives at [`app/assets/images/map-controls/note.svg`](https://github.com/openstreetmap/openstreetmap-website/blob/master/app/assets/images/map-controls/note.svg). Can this one be used there instead? Or is this another case of changing both icons?

### Different query icon
A bit similar to the previous point, but in this case I'm not sure if the new choice of icon is an improvement. This goes from a question mark enclosed in a circle, to a freestanding question mark. I don't see either better than the other, but in both cases they are different from the one in the sidebar, which is [app/assets/images/map-controls/query.svg](https://github.com/openstreetmap/openstreetmap-website/blob/master/app/assets/images/map-controls/query.svg). Again: should we use the same one, or should we change both?

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6571#issuecomment-3606481137
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6571/c3606481137 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20251203/523e9492/attachment-0001.htm>