ninavizz
commented
2 years ago I would also like to add, that the animated hand-drawn icons on the "Submit Expense" page—where there is a binary choice for users, and it's spelled out quite clearly which is what—are seriously cute, and imho an acceptable, playful exception to the above ask. The icons on the tabs and in the privacy bubble above, got to go, though; and the "i" icon needs to be replaced with something much clearer, and to more users (not just people with perfect vision).
Betree
Memo-Es
Problem
Your icons are decorative and pretty, but fail to clearly communicate a semiotic to quickly inform my behavioral choice in the context of executing a task. I'm a gigantic fan of freehand/hand-drawn illustration, and wish there was more of that on the web! Functional icons to inform user behavior are just not the place for them.
In the image above, the drawings are fun and playful and add to the vibe of the experience wonderfully, when they precede the H2. In the tab, however, they confuse my decisionmaking in navigating to where I'm trying to go. I'm not casually consuming content, I'm in Open Collective to execute tasks. The "i" icon to the right of the H2 is illegible, and I can't even tell if it's a mistake on the page or an interactive element.
The boring envelope on the "Contact" button is honestly the only 100% clear semiotic that serves a functional purpose, of all the icons above. The "Expense" I'd argue should be either a clock or a receipt (with a torn paper edge), but then that limits the scope of what is being sought. Maybe a file box? The paper is not awful, but has me thinking that's a print button or an export to PDF button.
Semiotics are also especially challenging in global projects, because what may be clear to users in one culture, is unlikely to resonate with users in many other cultures.
Solution
Don't use hand-drawn icons. Keep the hand-drawn illustrations in areas that are for consumption and not decisionmaking; but restrict icons to crisp/clearly rendered forms that communicate clear semiotics—because icons are supposed to serve a functional purpose. Users do not "look at" or "study" iconography; iconography needs to very quickly communicate a thing to guide behavior. They're not flourishes or decoration.
The icons on the tabs are pretty, but have confused me more than they have ever helped me. I often pause and wonder "WTF am I going to the right place?!" from them; they do not help me in executing my tasks. Gnome's Tango icon set also often fails, for the same reason.
Font Awesome are the icons I see most often in FOSS projects, and I am not a big fan of them—mostly because their rounded terminals on lines and rounded corners on boxes make them harder to interpret at smaller sizes. Font Awesome's balance of negative and positive space is very poor, and for legibility, that matters. Google's Material Icons family is my favorite, because it is both open source, rigorously tested with users, and highly legible. Google is evil, but their open sourced design assets are some of the most well studied and resourced open source design materials available. Please use them.
Related: I never noticed the blob in the blue message was a lock, before—nor did I ever notice the blue bubble communicated basic visibility permissions (opening a different Issue, for that). Freehand styled illustrations are for marketing, learning , or generally decorative content. Not for 24x24 or smaller images, and never for functional iconography.
Triage Template (core team only)
This template is for members of the team to triage for prioritisation. For more guidance see https://www.loom.com/share/369ab467fbc64dec848085d38ff57ca0: P1 high frequency, high impact P2 low frequency, high impact P3 high frequency, low impact P4 low frequency, low impact Examples of high impact - a problem affects users during an essential process (expenses and payments > onboarding and registration > contributing) with no workaround. High frequency - >10% of users affected (measured as a proportion of total potential users for this case).