The effectiveness of any ecommerce design comes down to its ability to clearly communicate with its users. Regardless of how amazing your product offering may be, if your users are presented with an overly complicated design, it will hinder their experience with your brand and they’ll likely leave without making a purchase.
Icons are a good option for designers looking to provide users with a greater sense of guidance when interacting with their ecommerce site. But don’t let their small stature throw you off — icon usage requires the same attention to detail and thoughtfulness as every other element in your design.
That’s why we’ve put together this brief article on iconography and ecommerce. Read on to discover some simple tips to get the most out of icons in your ecommerce designs.
Why use icons?
Good iconography serves a very functional purpose in your ecommerce design: it acts as a sort of mental heuristic that helps users process on-page information more quickly and easily.
When used correctly, icons provide users with a visual cue as to how they should behave when interacting with your website. Since icons appear on almost every website, there exists a certain degree of familiarity among users, which can be leveraged to simplify your communication process and enhance your user’s on-site experience.
Some ecommerce-specific situations where icons are commonly seen include:
- On sale items
- Newly released products
- Add to cart buttons
- Add to personal favorites buttons
- Customer service chat buttons
However, one of the most well-known ecommerce icon commonly used as a behavioral cue is the cart icon.
Most users will instinctively recognize and understand what the cart icon signifies within the context of an ecommerce store. They know that clicking the icon will take them to the shopping cart, allow them to review their selected items, and finally continue to checkout. If a cart icon were to take a user to another page, say your contact page, it would result in a disorienting experience for your user.
This is because our personal experiences with UI and UX patterns have taught us that a shopping cart is a symbol for the cart page on an ecommerce site. The direct symbolism of icons work well online for the most part, but there are times where it will not, and it will be up to you, the designer, to make that judgment.
Here are a few things to keep in mind when using icons in your ecommerce design.
You might also like: 12 Incredible Resources for Downloading Icon Packs
1. Be strategic about how you use icons
You should plan out your website’s approach to iconography just as you would any other part of your design. Before starting to design or incorporating icons into your site, take a step back and try to answer the following questions:
After you’ve gone through some of these questions, capture and communicate these rules in your website’s brand style-guide to ensure that your icon treatment is consistent when updates are made to your design.
2. Stick to a single icon style
It’s important that you maintain consistency and cohesiveness when integrating iconography into your ecommerce design. Designing for uniformity will help avoid any unnecessary confusion for your users that could arise when too many icon styles are in play.
Whether you design or purchase your icon set, this is best achieved by ensuring the style of your icons within the set is consistent, and that the style also stays true to the overall visual identity of your brand. Work within your existing brand color palette, and lean on established guidelines when incorporating icons into your design. For example, your icon family should use the same line weight that you’ve incorporated across your site — if you are using bold fonts for text, try to match that line thickness within your icons as well.
Doing so not only keeps your site design cohesive, but it also gives you the opportunity to carry aspects of your brand logo through to your icon treatments — ultimately giving you more moments of delight for your users.
Every icon featured on Code & Quill’s ecommerce site follows the same visual guideline that is applied to their overarching brand. This homogeneity results in a design that feels more professional, while creating a cohesive browsing experience for the user.
3. Pair icons with contextual copy
While icons can be powerful elements of communication on their own, they do not always rival the effectiveness of well-written copy. An icon can be a great signifier of what a user is looking at, but icons that are not globally recognized can be confusing and alienating at times. Try pairing your icons alongside relevant copy in order to provide the greatest amount of context to users.
By pairing icons and text together, you’ll also create an elegant solution for transcending any potential language and cultural barriers. The visual context provided by icons can help position your web content in a way that is more accessible to all users regardless of their background.
Just make sure you have a good sense of who your site’s target audience is. The meaning of an icon can differ between users based on their personal experiences and cultural backgrounds. For example, a shopping cart icon might signify “Cart” to a North American, but it may not resonate the same way with a user from Asia or Europe. Pairing your icon with simple copy will help eliminate any of these misconceptions that could occur from cultural differences.
Apparel brand Herschel has strategically integrated icons in their global navigation menus to act as a contextual cue for their collection page buttons (shown below). The combination of text and icon quickly communicates their various product collection types in an elegant and simple fashion.
This treatment is followed through within their collection pages, where individual product types are associated with specific icons. Given the similarity of Herschel’s product offering, these icons would be far less effective at communicating collection types were they not paired with copy.
4. Use icons to simplify product pages
Iconography offers designers a visual-first way to approach the decluttering of product pages. Since simple product pages are more likely to result in conversion, it’s important for your designs to only present the absolutely necessary information needed for a user to make a purchasing decision. Icons paired with brief copy can be a great solution for distilling long copy into a digestible format and cleaning up the design of your product pages.
Warby Parker uses subtle icons to showcase product variants on the product pages of their eyewear (shown below). These miniature buttons provide users with a clear understanding of what color options are available, without ever actually having to click them.
Rather than opting for lengthy descriptions, MVMT Watches incorporates icons into their product page designs to offer additional context and recognition to their social proofing. This text-icon combination helps declutter their product pages, while still effectively communicating the information necessary for a user to make an informed purchasing decision.Read more
Design with icons in mind
Icons can play a powerful role in your ecommerce designs. They allow you to succinctly communicate with your users and subtly guide them along the path to conversion. But it’s important to carefully consider how these small elements fit into the overall style of your website. Follow some of our tips above to leverage the power of iconography in your next build.
Check out these additional resources for more icon design insight:
