Consider a world devoid of icons. Blank doors in public restrooms cause confusion and humiliation, as in “oops, wrong room!”
It is dangerous to cross the street without a green guy. The apps we use become more or less worthless unless a large amount of text swiftly swaps in.
Icons are just ubiquitous in our culture, and many have become so ingrained that we can’t picture life without them.
The human brain and icon design
Humans are designed for consistency, as we highlighted in our earlier article about consistent product design. Seek it to lessen cognitive load and even for physical health.
We’re also visually oriented, having exceptional image processing skills – even when the visuals are abstract. It’s kind of in our DNA, considering that our primitive brains began functioning with visuals long before words were even considered.
As a result, the average person can recognize a symbol far faster than they can read the same words.
UI icon design
You should comprehend the anatomy of an icon now that you understand the many types of icons. This is useful when creating your own icons. It’s also useful when assessing the appropriateness of an existing icon set you’re contemplating employing.
Because not all icons are the same size and form, putting them all within a standard-size container makes a developer’s life much easier. However, to avoid the icons appearing to be all various sizes, make sure they are all the same size within the container in at least one dimension.
Grids may appear inflexible (or confusing) to people who haven’t seen them before. However, consider them as a starting point for constructing your icons. They lay forth certain guidelines for keeping your design components consistent. You’ll spend less time attempting to make sure your icons all work together. It does make fewer mistakes if you use grids.
Padding will be an issue within your container and grid. Padding is the inner space between the icon and the container’s border. It has tweaks for each icon to ensure aesthetic consistency.
When developing an icon, the grid provides a fundamental structure to work from, whereas keylines provide a more subtle direction. The keylines are like a beginning kit for making your icons, and they generally include a square, rectangle, and circle. They assist you in maintaining consistent visual proportions in your symbol designs while without limiting your originality.
Another important factor in developing aesthetically consistent icons is border radius (the amount by which edges are pointed or rounded). If one of your icons has crisp, sharp corners, make sure all of your other icons do as well.
Icons are more analogous to road signs than pictures, and they should ideally express a concept in a clear, simple, and memorable manner.
Universal icon design
Some icons are considered ‘universal.’ Xerox’s trash can and its coworkers, as well as an envelope for ’email’ or a house for ‘home,’ are wonderful examples.
We grasp their intended function regardless of what language we speak or whether we can read or not, as long as they are employed as planned.
Their original metaphors are on their way out (how many young digital natives have ever sent a real letter? ), but they’re ingrained enough that all users can grasp the activity they express.
However, common symbols are not always universal icons.
There’s considerable disagreement over how many really global symbols exist – somewhere between 16 and 25, depending on who you ask, and we’d err on the lower side.
Consider the seemingly simple act of like or bookmarking an item or piece of information to show a symbol that is extremely popular yet surprisingly sophisticated.
The heart emblem is well-known, yet its use is far from universal.
- We frequently ‘heart’ a tweet on Twitter to indicate our support or agreement, with the added benefit of storing it to our ‘loved’ tweets. A list of ‘likes’ is available to anybody who views a public profile, not just the owner, which is why technologically ignorant politicians frequently get themselves into trouble by sending out inappropriate hearts.
- A ‘heart’ donated to a beautiful scenery or someone’s fine supper on Instagram does not preserve the photograph publicly or privately; it only indicates approval.
- However, on Airbnb or eBay, we ‘heart’ a house or item to save it for later, breaching the informal rule that hearts are for public replies and a star emblem should be used instead for a private bookmark.
What about conceptual icon design?
Testing with real users, like other aspects of product design, is non-negotiable.
Typically, icon testing seeks to determine recognizability, or what people believe the symbols to be – ‘is that a garbage can or a letterbox?’ and comprehension, i.e. what they interpret the symbol to do-‘if it’s in the trash, is it gone forever, or can I take it back out?’
This form of testing is especially crucial when icons must reflect an idea rather than a simplified representation of a real item.
A handful of our team members recently evaluated a clickable prototype for a product with the brand name ‘finding the path.’
They came up with a compass icon that would direct users to their personalized plan to explain the notion of ‘navigation.’ However, during testing, it was revealed that consumers believed this was where they browsed the site, or that it even prompted them to search the web.
Unexpected icon usage
Surprisingly, we later learned that in China, a compass is frequently used to mean ‘more possibilities.’
This got us thinking about additional scenarios where symbols symbolize various acts in different cultures, where unanticipated misunderstanding may occur, and where we could find some more examples.
Did you know that in Iran and neighboring countries, a cheerful thumbs up typically implies ‘up yours’?
It is used in the same way as the western middle finger is.
If a platform made this icon available to a Middle Eastern audience, it would be tempting people to express their displeasure with a piece of content by pressing it rather than expressing acceptance! When Amazon first arrived in India (in late 2018), they couldn’t figure out why nearly no one was utilizing the ‘search’ function. Following research, it was discovered that the magnifying glass icon did not resonate with Indian users.
People referred to it as ‘the ping pong paddle,’ not ‘search,’ since they didn’t anticipate it to mean ‘search.’
The bottom line in icon design
Icons are an essential component of making an aesthetically appealing UX design, but they may also significantly improve the usability of a website or other digital product. Consider how various sorts of icons could fit into your design, taking into mind both the overall style and the sizes at which the icons will be utilized.
Understanding the architecture of an icon and how to utilize tools like grids and key lines to make your designs more consistent can make you a far more efficient designer if you’re developing your own icons for a project.
