how icons can improve the user experience
It’s common knowledge that visuals, or a combination of visuals and text, always works better than just using plain simple text. This is because users find it easier to look at a graphical representation of a word and understand what it is, instead of having to find the word among all the content given on the web page.
Icons have long been the choice for representing various menus, functions, and calls to action on websites. And they are quite effective at it too. But how much would you, as a user, prefer to depend simply on icons, or just on text to navigate around a web page? And if you are thinking ‘combination of text labels and icons’, then to what extent would you like to see it on a website?
In this article, we are going to look at how icons can improve user experience; although not just value-wise, but also considering the technicalities such as placement, size, choice of icons, colours, labeling, etc. Let’s take a look.
Use of Icons for Improving User Experience
Assisting in Navigation
This is one of the rather obvious, and important functions of icons. Users who are new to your website or have visited very few times are unaware of the architecture and need help getting around. Many websites make use of icons in the menu section, like the About Us, Contact, Services, Gallery, Testimonials, etc. When designed smartly, these icons are easy to understand and users know where it will take them.
Another icon that’s used very commonly and has become synonymous with the side menu is the hamburger icon, which has three horizontal, parallel lines. Many websites also write the text label, or name, of the menu with a small, downward arrow next to it indicating that it is a drop down.
Some of the very commonly used icons are a magnifying glass for search, an envelope for contact form or email ID, a telephone for the phone number, the shopping cart, the globe for website names, and social media icons for various networks.
Encouraging an Action
You must have seen side arrow icons with the text ‘Know more’ or ‘Learn more’ or ‘Find out’ which take you to the web page of a service listed on the homepage. Let’s take the example of an international examinations website. Their services include not only assisting in exam registrations and supplying material, but also taking lessons, webinars, and offering tests to their students.
All these services will be listed in brief on the homepage, with an icon and a ‘know more’ taking the user to the actual page. To encourage a user to go to a web page, read the content, and possibly sign up, icons are used quite often. This is because the visual stimulus pushes a visitor into action.
The text ‘know more’ will not stand out among all the other content on the website, but a colourful icon will. This is why even call-to-action buttons (CTAs) have icons on them. The sign up/form CTA will have an envelope or a pen next to it, the download CTA will have a box with a downward facing arrow, and so on.
When you want to make an element of your web page stand out and grab the user’s attention, pushing them to take some form of action, you should use an icon.
Highlighting Features
All websites and apps should consider using icons to highlight their features and USPs instead of making the web page text heavy. Imagine the following scenario:
You are on the homepage of a custom designer cakes making company website. They have listed off their features after scrolling down a little. These include their services, lightning fast delivery, money-back guarantee, etc.
– In the first case, they have made use of content to list down their features and explain each one in a line or two.
– In the second case, they have made use of customised icons with a text label to sum up their features in 3-4 words each.
Which one would you prefer to interact with? It doesn’t take a genius to know that any website visitor would prefer the latter. The attention span of audiences has reduced day by day, resulting in more page abandonment than before; if you give your visitors so much information to read about your company, they are going to leave. Period. Icons, on the other hand, are quite interactive and explanatory. Get the gist?
How to Use Icons Most Effectively
As crucial as icons are to delivering a positive user experience, they must be used properly or can have quite the opposite effect. Here are some of the rules to be followed for making the most optimum use of icons.
- Keep them simple. Going overboard with the creativity isn’t the way to go. An icon should be basic and explain what it does.
- Use common standard icons so that visitors find it easy to know what they represent. For example, the magnifying glass icon is used for search; everyone knows that. If you use something outlandish or different, it will confuse your visitors.
- For WordPress themes, there are various plugins that allow you to add icons to the menu, however it might slow down the page load time. A better alternative is to upload the icons in the media gallery or to use icon fonts that let you add vector icons without using plugins.
- If your app is featuring on both, Android and iOS platforms, then use the icons that the platform offers instead of migrating those from the other platform. Using standard iOS icons for the iOS app makes it easy for users to navigate; using Android icons for the iOS app will confuse users. Users are accustomed to a pattern, don’t break it.
- The size of the icons should be just right, not too big or too small. Too small icons, and users may accidentally click on adjoining ones as well. Too big, and they take up more space on the mobile screen.
- Don’t forget to test your icons for recognizability and effect. You can do so on a test group of users, and then arrive at results that tell you whether your icons are relatable, memorable, and recognizable.
And now, we have a little bonus offering for you. Here are two packages of icons that you can use for your websites or apps!
Flatilicious – 1000 Delicious Flat Icons
This is one seriously tasty dish of 1000 flat icons across 28 different categories! No matter what your website is about, this package has the icons for it. You will find arrows, animals, buildings, furniture, nature, emoticons, food and drinks, e-Commerce icons, business and finance…the list can go on.
The icons are already organized in the 28 categories, which means that sorting them out is already sorted out! These geometrically shaped icons come in PNG, AI and SVG formats, with the option to change their colours as well. Use them in your content, menus, videos, banners, ads, or wherever else. Their intentional modern design will make sure they fit in and yet stand out wherever you place them. Click here for more information and a full preview of the Flatilicious collection!
Icontastic Mega Bundle – 5300 Icons
This is a truly iconic bundle of 5300 PNG and SVG flat icons. Now we must assure you, this is probably the best there is out there. You have 391 categories to choose from, wherein these icons are neatly arranged and ready for use.
From colourful to black and white, with categories ranging from business to educational, creative, or just for fun, you will be spoilt for choice. The best part is that you will never run out of icons to use ever again, click here for more information and a full preview of the Icontastic collection!
