Defining Iconography: The Graphic Art That Accompanies Ecommerce

What Is Iconography?

Iconography refers to the visual images or symbols used for identification of a larger concept or interpretation of content. In ecommerce, iconography refers to all images or symbols on your Shopify store, collateral, and various marketing paraphernalia. Icons are usually used in place of words, providing clarity or direction without the use of any text. Iconography is essential for several reasons - here are a couple. 

1 - Using icons can reduce the cluttered feel of a site by decreasing the amount of crowded copy and creating white space. 

2 - The human brain processes icons 60,000 times faster than text. This gives visitors the ability to move through your site more quickly, easily and with less cognitive burden. The importance of iconography simply can’t be overstated; here’s what you need to know.

The History of Iconography

The concept of iconography is an old one, but its modern-day usage refers to a slightly different subset of art. The word iconography comes from the Greek word “ikon.” It has religious origins, and was used to describe objects of devotion from Greek churches. This religious connotation is what shaped the definition of icons as something with special meaning. However, the definition has certainly evolved since then, and extends far beyond religion.

In historic art pieces, icons were translated into symbolism with relatively literal imagery — for example, paintings that used chains, angels, or animals to convey a feeling or meaning. Today, iconography with respect to marketing denotes artistic icons influenced by graphic design. While iconography is still prevalent in traditional art, today’s art of iconography refers to digitally rendered icons used to simplify a brand’s mission, whether that be information or to aid conversion.

How Is Iconography Used in Ecommerce?

With online shopping, you only have seconds to make an impression on a customer — and often, words aren’t the way to do it. Iconography has a huge role in directing traffic and sales. In ecommerce, iconography appears as small illustrations with simple lines and very few colours. 

They’re created by analysing the content of a section or linked page, picking the most important informational concepts, and developing symbols that best represent them. Ecommerce iconography appears in the form of header and footer symbols, illustrated buttons, and informational direction.

Some Simple Iconography Examples

You’re used to perceiving iconography, even if you don’t realise it. Think of your email provider’s homepage. There’s likely something akin to a plus sign for creating an email, a forward arrow for forwarding an email, a backwards one for replying, and a star symbol for favoriting or highlighting important messages. Take a look at your spam inbox — is it represented by a trash can? A warning symbol? On ecommerce sites, these icons extend to buttons that link to your cart, favourite or “hearted” items, personal account settings, and search query boxes.

Some More Complex Iconography Examples

Quality iconography goes beyond the intuitive “my cart” or “my shopping basket” illustrations. These visuals show what words have trouble explaining, especially when speed of comprehension is paramount.

The cart icon is one of the most well-known ecommerce icons used as a behavioural cue.

Most website users will instinctively recognise 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 took a user to another page, it would result in a disorienting experience for your user.

This is because our personal experiences with icons and patterns have taught us that a shopping cart is a symbol for the cart page on an ecommerce site.

Let’s say your Shopify store is for clothing, and you sell a few categories of apparel: tops, bottoms, and accessories. While those words are easily identifiable, the human mind will more quickly process icons for those categories, especially if combined with some form of copy that directs them to a product category page.

You can see how this becomes even more important as categories become more specific. For a store that sells only hats, icons for floppy sun hats, baseball caps, top hats, and bucket hats will help those without a clear understanding of products’ definitions find their desired shopping category.

The Importance of Good Iconography in Ecommerce

There’s iconography, and then there’s good iconography. Defining “good” iconography is tough to describe but easy to notice in practice. If you’ve ever seen a symbol and scratched your head at its meaning, you’ve found an example of bad iconography. Proper iconography checks a lot of boxes.

For one, good iconography is simple, clean, and cohesive. Iconography is often monochromatic or dichromatic, composed of few colours so as to not distract from meaning. Icons should be clear in what they’re conveying, and a collection of icons should be easy to scan. When icons are directly associated with a physical object or action, they’re easier to understand. Additionally, icons don’t have to be boring. Efficient iconography enhances brand identity with consistency. As extensions of a brand or store, a library of icons should be uniform enough that they can be conceptually “built on” to create additional icons as needed in the future.

The importance of good iconography goes beyond clarity on a website. For Shopify stores with products, a visual guide to inventory is unbelievably helpful in increasing average order value, speed of buying, and conversion. For Shopify stores that provide services as opposed to products, icons serve a dual purpose. They’ll help clarify the category of services, of course. But additionally, a well-made icon will convey expertise, knowledge, and importance. Moreover, iconography transcends language; breaking down written barriers in favour of universally-understood depictions makes the user experience more inclusive and innate.

Tips For Using Iconography on Your Shopify Store

1 - Don’t just shoe-horn lots of icons in

It’s important to treat icons as an integral part of your overall site design, not just as an add-on. They have to feel like they fit. Make sure you can answer the following questions before you start:

• What do the icons need to communicate?

• How am I going to weave iconography into my design?

• Do I need icons here or is text a better option?

2 - Ensure the icons are all the same style

This consistency is key to reduce the chance of confusion in users. Make sure they’re consistent with each other, but also consistent in the context of the rest of your site. This will help add to a sense of cohesiveness as well.

3 - Support icons with text where necessary

Sometimes icons can benefit from some accompanying copy to help clarify meaning. Aligning text and imagery can help make your communications clearer, and help navigate cultural differences in your audience so the meaning is clear, wherever your website visitor is.

4 - Implement icons to reduce clutter and free up space

Icons can help you keep things simple with a visual approach. When it comes to making sales, keeping the information to the required minimum helps increase conversions and icons are a great way of stripping out the noise.

How You Can Enhance the Iconography of Your Shopify Store

Iconography falls under the broader spectrum of brand identity and brand marketing. With such a focus on its importance, iconography is often overused by novices: a mistake that ultimately devalues the impact of each individual icon. For adding iconography to your Shopify store, you’ll want experts who know how to design quality icons and use them tastefully and effectively.

At Radiant, our comprehensive brand identity services can include effective iconography for your site and brand assets. Our design team, from a mix of disciplines — graphic, animation, and UI/UX — craft icons that represent your brand and mesh with your logo, typography, colour scheme, and overall visual direction. Through iconography, we help elevate sites to be user friendly for all, and enhance how your store functions for its visitors. Get in touch today to see how iconography can benefit your store’s conversion, or to learn more about the other services our Shopify agency offers!