Visual communication is one of the main aspects of any website. It is important for the user to be able to properly navigate through each web page without frustration. Getting, and keeping, the attention of the user can be difficult, but it’s not hard to achieve. This can be accomplished by the use of clear and functional icons throughout your website. Yes, they are pretty and fun to look at, but they do serve a purpose. Here are some explanations on why:
Why are icons important?
The first thing users do when visiting a website is quickly look through the page for the most visually appealing content. Icons can help out by drawing the user’s attention to what you want to promote. They are recognizable and seen almost everywhere. Icons are useful in way where they can give direction and even separate text to make it less intimidating. The webpage will be more organized and professional. They support the content by summing it up with an image that represents the paragraph. Even though smaller icons are less distracting, they still share the same level of impact as larger icons. Using icons increases readability and makes your website more appealing.
What is considered a well-made icon?
There’s no strict set of rules to making an icon, but there are some things a designer should keep in mind. Icons are used to translate a meaning or to direct an action. Successful icons get right to the point, are easy to understand, and highlight information clearly. Consistency is the most important facet to making a set of icons. It looks unprofessional and sloppy if the icons are mismatched or different in scale. And, if they are all the same size with the same amount of negative space, it shows the user you care about the user’s experience. Icons shouldn’t have a lot of detail or any over the top styling. Sticking with the key elements is always the best idea. Just remember icons must also match your brand.
These icons are a good example of what icons should represent. Each icon is recognizable and easy for the user to comprehend. There are no excessive styling and detail. Basic shapes and silhouettes are really all you need to get your message across.
Adding text can also help your user identify your icons once their eyes are drawn to them. This helps clarify any possible confusion, as well as providing a set definition for that icon. The next time they visit your site, they won’t need to look for the words, just scanning for the image will do.
Here’s an example from our site at Shero Designs.
As you can see our icons are minimalistic and eye-catching. The colors help draw the user’s eye, while also differentiating between each image. The blurb on the side relates to the icon and quickly expresses what the icon’s trying to convey. These eliminate confusion, and increase the user’s ease and navigation of the site.
What can make an icon confusing to the user?
Icons should be simple and easy to comprehend. If a user is having difficulty understanding the meaning of the icon, there is a good chance many others are not as well. Some users are not experienced enough with icons and the metaphors they provide. For example, most users understand that a house icon means that it will redirect to the home page of the site they are browsing. If an icon does not have a real life object (shopping cart, magnifying class, floppy disk, etc.) associated with it, there’s a good chance the user might interpret the icon differently. The designer must be careful not to use too much metaphoric imagery since it might not represent the same thing to everyone. A way to avoid this is to add text next to the icon. It still makes the page interesting, but it’s more functional for the user now.
Shown below are a few examples of icons that could potentially confuse the user. Not everyone will be familiar with the message they are trying to portray. These icons aren’t necessarily designed poorly. The main issue is that they aren’t as functional for the user. Adding a few words next to the icon to provide context can help to make these less confusing, and provide greater understanding in the future.
Conclusion
Icons make your website easier to navigate and look less intimidating. Using icons appropriately will help make your site more visually appealing as well. Stick to easy metaphors that are well known and try to not confuse the user with overly complicated imagery. Always remember icons must match your brand and remain consistent throughout your website.
Graphic Designer
