We use icons in our content on websites, apps and even emails to improve the user experience and overall design. However, it is easy to misuse icons in design and damage the user experience. Whether that is with using icons that are the wrong size, overcomplicating the icon or using icons that are too obscure to understand.
Size matters
What we mean by the wrong size isn’t that the icon is too big or too small on the page, although that matters as well. It is where the original image was a large image, or a small image, and it has been scaled down or up respectively to fit the space.
The problem with this is that the images often become blurry, and the image quality is sacrificed. The icons below are ones that we use in Sentia. The first icon has been shrunk to half the size of the original which is in the middle and the last icon has been doubled in size. Both icons that were altered have lost their clean lines and clarity. If the images used are not designed for the size they’re being used for; it can lead to a very poor user experience.
Overcomplicating the issue
Other than presenting a design choice, icons and symbols are used to provide information on a feature that we should click on to achieve something, and to do this as an alternative to text.
The human brain can process images much faster than text, so using icons as an alternative can be very beneficial. Yet if they are over complicated, with long complex labels or descriptions or too much detail so you can’t tell what the icon is, it defeats the purpose of being a better option to labelling a button with text.
Comparing these two icons, both are calendar icons, and the image files are the same size, but when it is on the smaller side, the calendar with more detail looses its effectiveness simply because it is overcrowded, squished and too small to try and fit all the detail inside.
Don’t try to be unique
We all value a good, creative approach to a problem, but if the icons used are too obscure or vague, we will never know what the icons represent and will not connect to them. They are meant to provide us with the clues and information to where the menu is or messages or whatever the desired function is.
If users don’t know how to ‘translate’ the icon into its function, it will just be something on the page users will never click on and go to waste.
Conclusion
Icons are a widely used medium as an alternative to text because a picture says a thousand words to the audience. If the correct size is used, the icon is clear and effective and users immediately know what it does, it can be a very effective feature in your website or application
