Designing a product page is never an easy task. There are so many of them out there that it’s difficult to design something different yet familiar. One design element that can help you stand out is the icon. Seemingly small and unimportant, the purpose of icons is to convey messages in milliseconds.
Icons don’t just make product pages look nice – they also have a crucial persuasive function that operates on a psychological level. They’re there to help consumers process important information in the blink of an eye.
Let’s explore the purpose of icons and how you can use them to enhance your product pages.
Be Intentional and Strategic
Before you start using icons on your product pages, approach them like you would any other design element. Consider these key questions:
- What is the message that needs to be communicated? List out all the specific information you want to convey. That might include the fact that you accept certain payment methods, your guarantees or warranties, and so on. Can they fit into an icon?
- How will the icons fit your overall design?
- Will you be placing them in the menu or on the page?
- Will there be a difference between the desktop and the mobile version?
- Where on the page will they have the most impact?
Remember, the purpose of icons is to make the page more user-friendly. You don’t want it to distract from other elements on the page. Don’t use icons if they are not necessary and if the text would convey your meaning better.
Use a Single Design
The design of your icons needs to be tied to the rest of your page. You might find random icons that look nice in isolation, but that doesn’t mean they’re a good fit for the page.
For instance, if you’ve chosen a blue and white color story with accents of grey, suddenly using green icons will only be distracting. A glaringly different font won’t work either.
The font, the imagery, and the overall style need to fit the design as well as your brand’s messaging.
You also need to consider recognizability. Some icons are simply ingrained in customers’ minds already. Suddenly swapping a familiar icon with one of your inventions might not work as well as you’d hoped.
For instance, here’s Joi’s Almond Base page, which has managed to keep its icons recognizable yet still matching the website. They match the navigational menu font in style, and they don’t draw attention away from the Add to Cart button or the rest of the page. These icons will instantly evoke familiar emotions and thoughts without asking the user to a lot more than a couple of glances.
Communicate Selling Points
Your icons should also be able to convey information that may not be as familiar to your visitors. This is typically information such as:
- Why the visitor should be interested in purchasing your product
- What makes your product different
- The main features of this product are
If you can distill this information into an icon instead of using words (and often many of them) to emphasize your main selling points, you will be saving the customer valuable time. Plus, you’ll be reinforcing your message further, not to mention boosting conversions.
Of course, not all messages can be conveyed in icons. Sometimes you’ll just have to use them as an illustration rather than a replacement for a certain idea.
Let’s look at this Apple iPhone page. They use icons in several different ways.
First, in the phone comparison section, they use them as a means of communicating product features. Even though they spell them out as well, the icon is enough to understand certain product specifications.
Nearer to the center of the page, they also have a different set of more illustrative icons. There’s a box to symbolize delivery, a dollar sign for payments, and two people to represent communication.
Both of these approaches work well for different purposes – you just need to identify the right one.
Use Them to Overcome Objections or Concerns
You never really know who’s behind a brand, and words on a web page are just words on a webpage. How is a first-time customer to know they will like your product in person?
Well, icons can also help overcome certain concerns a shopper may have about making their first purchase from your website. You can use them to encourage a more profound trust in your brand and gently nudge visitors to conversion.
Here is an example on MVMT’s Reveler Slim Everscroll page to illustrate that point. They have four icons below their products that are aimed at inspiring trust: worldwide shipping, free returns, a two-year warranty, and secure checkout.
As these are the four areas most consumers have concerns about, their effective icons have instantly lifted a lot of fear and anxiety about purchasing from this website.
Create Emotional Reactions
Another amazing way to use icons on product pages is to evoke emotional reactions. The better you manage to connect your products to certain emotions, the more likely you are to inspire conversions.
If you are a brand selling toys, you want your website design to evoke a sense of fun and adventure rather than be very neutral and bland. On the other hand, if you are selling jewelry, you want to convey a feeling of luxury, as opposed to a carefree atmosphere.
The purpose of icons should play into that too, with the way they a.
Here is an example from Herbal Dynamics Beauty’s vitamin K cream page. Their icons are likely to have rather strong emotional reactions, mainly thanks to the bunny. It appeals to our sympathy for cute animals and makes us more likely to purchase a cruelty-free product. The other two icons also evoke feelings of trust, with their references to natural ingredients and reliable scientific processes.
Use Them With or Without Text
Finally, you can choose to use your icons with or without a textual accompaniment. While the purpose of icons is to replace text where possible, there is also a case for using them with text to keep the page cleaner.
The icon will sometimes serve as an illustration, as we’ve already mentioned, especially when it’s not a globally recognizable one. In this case, some text might come in handy.
This way, you can also overcome any language or cultural barriers that may arise if you are targeting an audience that does not share your worldview. The heart icon quite clearly equals adding to a wishlist or marking a post as a favorite to everyone who is used to social media. However, an older audience might not understand the reference.
Understanding The Purpose of Icons
Icons can add an entirely new layer of communication to your product pages, helping visitors understand more about your products, your terms of service, and your brand as a whole.
Remember to keep your design uniform, not to force icons where they don’t belong, and to always refer back to that essential website design maxim: know your target audience and what it wants.
Grow your e-commerce website with Rain Retail Software.