mail
mail copied to clipboard
nextcloud
Confusing search icon (needs to be replaced by a more suggestive one)
Is your feature request related to a problem? Please describe.
In my opinion, the button below is confusing. The icon used suggests more a "settings" notion of the current application or account, or the current folder, but has nothing to do with the notion of search (or filter). Instinctively, when I look for a search or filter button in an interface, it looks like a magnifying glass or a funnel, but certainly not like the icon currently in use.
Describe the solution you'd like
We need an icon that really suggests the notion of search or filtering. Here's a test I've done with my browser's code inspector. I've replaced the tune icon with a magnifying glass icon directly suggesting the notion of search. It could also have been a funnel icon suggesting a notion of filtering.
I also modified the tooltip, thinking it would be clearer that way, but that's a detail compared to the icon problem. Depending on what the design team says, I may open a PR.
@nextcloud/designers
Describe alternatives you've considered
No response
Additional context
No response
The icon was spec'ed at https://github.com/nextcloud/mail/pull/6546#issuecomment-1193940095.
@nimishavijay shall we replace the icon?
I think a filter icon would be the most proper here https://fonts.google.com/icons?selected=Material+Symbols+Outlined:filter_alt:FILL@1;wght@400;GRAD@0;opsz@24&icon.query=filter&icon.size=24&icon.color=%235f6368
Let me know which icon to use and I'll change it. The filter icon was there before the settings icon: https://github.com/nextcloud/mail/pull/6546#issuecomment-1193887676.
Filter icon makes sense here. Originally the settings icon (MDI "tune" icon) was used for parity with Gmail, but you're right, Gmail's search flow is different (entirely new screen shows up with search results , so that button was used to "tune" the search). Over here since the current view is just being filtered it makes sense to use the filter icon 👍
I think a filter icon would be the most proper here https://fonts.google.com/icons?selected=Material+Symbols+Outlined:filter_alt:FILL@1;wght@400;GRAD@0;opsz@24&icon.query=filter&icon.size=24&icon.color=%235f6368
@marcoambrosini do we use Google icons set ? In any case can you tell me where to find the name of the icon to replace it in the source code ? (for the PR)
@marcoambrosini @nimishavijay I would say the "Filter List" icon is better and more symbolic than the "funnel" looking filter icon: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:filter_list:FILL@1;wght@400;GRAD@0;opsz@24&icon.query=filter&icon.size=24&icon.color=%235f6368
@Jerome-Herbinet it seems to be called "tune" or "tune-icon", that should help finding it in the code:
Hi @st3iny @marcoambrosini @nimishavijay I've noticed in NC 30 31 that the icon is a sorting icon ... instead of the one used in this "merged" PR. IMO, the magnify icon was more understandable.
@Jerome-Herbinet thing is that usually the search icon is on the left of the search field as decoration. If it's just a search icon on the right, it might not be obvious as clickable. Hence this might di the job better as an "Advanced filtering" icon.