Why “good/bad” design guides aren’t always good for: Iconography
Something you can find on Instagram or design blogs across the web are examples of the “right” and “wrong” way to design. While, yes, there are plenty of tested and proven patterns which often perform better than others, it can still be overly simplistic to tell product designers (especially young designers) “here’s the only correct way to layout a form, a card, use color or typography” etc.
Design is not a one-size-fits-all solution.
I’ve collected some examples of this, but have redacted the identifying account info out of respect for the content creators.
“Any customer can have a car painted any color that he wants so long as it is black.” — Henry Ford
Using the right icons isn’t that “simple”
I came across these two Instagram posts from designers talking about proper iconography usage. There are certainly usability considerations when using icons in button containers or tabnavs and other UI patterns. However, to speak broadly that icons should not be colorful or abstract is to ignore iconography as part of a product’s brand identity.
Unique visual brand identifiers
While simplicity in design is often a powerful tool in guiding customer behavior, adding visual uniqueness can also help your brand stand apart from other products. For example, below we see how high profile companies have leveraged iconography to reflect their brand identity. Using overly simple shapes like mentioned in the above Instagram post is important in some contexts and harmful in others. Be sure to examine what’s best for your brand and the contextual use of the icon before following rigid “right/wrong” suggestions.
Using iconography with buttons
Now you can argue that the example above is more illustration than icon, but these two spaces often overlap. Notion and Facebook (among others) both use mixed color complex symbols for navigation. This can be a powerful way of helping customers quickly identify an object through color and symbol.
Creative solutions for iconography
These two Instagram posts caught my eye specifically because there are ways to mitigate the two issues surrounding their proposed “right” way of designing with icons.
What does that icon mean?
As a general rule, I agree with the designer’s suggestion that when in doubt add a label for clarity. There are more than just two solutions here.
What if you paired the tabnav icons with labels and then removed the labels after the customer hits an engagement benchmark? Meaning, you start out using labels and after you know the customer is familiar enough with your product you trigger an event to hide the labels and voila — you’ve satisfied both use cases.
What about revealing labels on hover or active? You can show an icon’s label upon tapping/clicking it, giving in-the-moment context to that button.
There are other ways to solve absent label situations as well like on-boarding coach marks or long-press gestures allowing a customer to hide/show labels, albeit there is a cost to overloading on-boarding instruction.
The idea here is to think of creative alternate solutions for UI challenges rather than be put into a “right way/wrong way” solution box.
Devices and context with iconography
The example above might lead a designer down a path of settling for using an overly simple icon when she/he/they may prefer a more descriptive icon/illustration. Responsive icons are an adaptive solution for progressively showing the right icon in the right context.
Sharing knowledge with the design community
Spreading knowledge about design is important. It helps us designers grow. Where we need to be cautious is when we using absolutist language surrounding “right way / wrong way” design solutions. Design is a complex and evolving practice which means we continually learn about what is working well, but also consider where and when we need to bend the rules or think of solutions which haven’t yet been tried.
A better approach for content creators is to discuss why certain design approaches were successful for their product vs applying a universal truth across all products and patterns.
Thank you for reading, friends!
