Ashley Halsey
Category: Design Tips
The design of an online platform is an important factor, including every aspect of the site. Even the smallest choices like the icons can contribute to the usability, the behavior of users, and the feel of the site. Icons are small images used to communicate a message to the users. Icons are completely embedded in modern web and application design and some icons are standard. Here are some factors to consider when thinking about how to apply icons for the user experience (UX) for your next project.
Different Icons and How they Affect UX
Some icons are easy and essentially universal. For example, a house-shaped icon means homepage to all internet and mobile users, and shopping carts represent the checkout and purchase of a product or service. This isn’t the time to try to be creative as you’ll only succeed in confusing your users.
You can start running into trouble if you’re using easy, universal icons with conflicting messages. For example, a heart icon could mean that you like something, or that you’re saving something to your favorites, or it can indicate your preferences to tailor content. Similarly, a star icon could mean favorite, or bookmarking something or giving it a rating. There are also a lot of differences between iOS and Android devices.
Some other interesting icons that can now seem outdated or old-fashioned include the save icon that’s usually referenced by a floppy disk. For younger generations, though, a floppy disk doesn’t mean anything concrete. Even the telephone symbol might evolve as people move away from seeing the old-fashioned receiver.
But the floppy disk icon, even though floppy disks are far out of use now, still holds a lot of value. You see, the floppy disk icon symbolizes saving something and it doesn’t mean anything else. However, a star or a heart that would replace a floppy disk can also mean many other things. For example, stars and hearts are used to liking something or bookmarking something. So, there’s a certain universality to the floppy disk icon where no one even sees the floppy anymore – they see a save button. The same goes for the old-fashioned phone. It means calling someone, despite the fact that those kinds of receivers are far out of date. These are the cases where the symbol outlived the actual thing.
Finally, some other types of icons are unique icons that represent a specific function unknown to other standard applications. This can include viewing upcoming vacations, sharing a certain audio file, looking at order history, or more. What’s difficult here is that an icon which can make sense to the designers that know what it is don’t mean anything to a standard user.
Jessica Fraser, a marketer at Writinity and Last Minute Writing, says that “there are some key things about icons that can indicate what they’re for and improve user experience. This includes the placement, the desktop labels, the memorability, and branding.”
Using recognizable icons
The best value for icons is the recognition aspect, that can globally be recognized. There are already global symbols that mean the same thing everywhere, like hazards and chemicals, traffic instructions, and more. Thanks to the internet, icons like emojis have been part of this global language. This language is truly independent of country or spoken language – everyone can understand. By using these symbols, your website can attract global users.
Labels and Icons
Labels actually diminish the impact and usability of icons. Users typically don’t test out each icon to find out what they all do, because they want to clearly know what action an icon will accomplish before they step out of their comfort zone. Use icons that set clear expectations for your users, and use text labels if needed. Many designers don’t like using labels because they can defeat the purpose of the icon and can look cluttered. Instead, Monica Bridges, a business blogger at Draft Beyond and Research Papers UK, says “they’ll add icon instructions and coaching screens. This can be a good way to showcase different icons for unique features, but shouldn’t be a workaround for using complex design ideas because many users will skip tutorials.”
Labels are a bit tricky when it comes to apps and websites. There is not a lot of room, especially when something is viewed on the phone. So, the fact is that the labels become a bit unnecessary. This can be solved by using the more universal icons like the home and search icon, as well as heart or a star for favorites, the bell for notifications, a figure of a human for the user profile, etc. But, if you have some industry-specific pages that need more specific icons, it can be more difficult. This is where it would take some user testing and receiving feedback from users on what kind of icons they would expect. An easy way out would be using emojis – and also very fun for the user – if it fits your brand.
However, if it doesn’t, it can be harder to find a solution.
Icon design
User interface elements like icons need to be easy to use, understand, and access. The best practices for icon design include keeping them simple and avoiding complexities. They should also be consistent throughout your icons. Think about your color palette and limited colors. You can repeat certain elements to create the repetition that will improve the user experience. White space draws the user’s eye to the icons so they can properly communicate to the user.
When you look at your smartphone, you will likely see a myriad of colors. App icons are often very colorful and the colors are bold to grab the attention of the user. Of course, there are icon packs that you can download as well, that would eliminate all of those colors and leave you with simple lines that distract you less.
But the designers created those bright icons for the purpose of driving you in. However, once you enter any of those apps, you can see that the in-app icons are very muted. They are almost always in a black to white scale, often dark grey or just accepted. Sometimes they do have some color, but it’s only one accent color that works well with the app in general. The thing is, the very point of that is not to drive attention away from the content. Content is supposed to take center stage, while the app itself should be in the background, only a carrier. Keep this in mind when designing.
Take Pinterest as an example. The icon is bright, bold red. However, once you enter the app, you can see that all of the icons are grey. What the designers wanted to achieve is the effect that those icons are there, available if necessary – in case the user needs them – but they are not distracting them.
The Pinterest icon which symbolizes the home page, in this case, is the only one that has color and that’s only once you click on it.
Different app handle this in different ways. Instagram doesn’t have labels for its icons – but then again, they are pretty obvious. YouTube and Pinterest, on the other hand, label their icons, but in small, unassuming font.
Icon examples
Some great icons are the big clear icons used by Buddha Pizza, that move when hovering over them.
Kinsta also uses simple icons with labels as well as movable illustrated icons.
The mobile app Calm uses visible icons that are clean and work well with the background.
If you look at Instagram, one of the most popular apps in the world, you’ll see that the icons are quite minimalistic and simplistic. Thin dark grey lines define objects such as home, search, add, heart and profile. Once you actually click on any of them, they become darker and more well-defined while the others fade in comparison.
This design is very zen and easy to understand for the users. Home and search icons are very obvious as almost every app or web page uses them as symbols. The add button is obvious as well and it takes you to a page where you’re supposed to add your own photos and videos. Finally, the heart button shows who liked or followed you – this may be a bit specific to the Instagram language, as you heart things instead of liking them. And of course, the profile icon is a silhouette of a human, so it works very well and people know what it is right away.
Other apps follow a similar pattern when it comes to icons. They are prone to using what’s familiar and what users already know to avoid any confusion. You can go to the YouTube app and see that there’s actually a home button as well. However, the icons that come after are different. A flame symbolizes trending videos, subscriptions are symbolized by the play button which looks stacked. The inbox button borrows from G mail and email services in general, offering a simple envelope. The library button is another play button, stacked in the form of books almost.
Check out our freshly made articles for you!
Top 10 Best Free Script Font for Your Design
