The design of your eCommerce site has to be clear, consistent and appealing. The modern user knows the difference between excellent and average design and finds it easier to place trust in something that looks professional. Quality design establishes trust, but it needs to do more than that. It needs to be engaging, be persuasive enough to keep users interested, and encourage sales as soon as your users land.
Design does not need to be complex, but it does need to display your products, services and brand in a way that is easily understandable while converting leads into sales. Some businesses make the mistake of placing too much focus on their homepage; as of 2019, most new visitors will enter your site on a product page, while loyal customers are more likely to use your homepage.
Your understanding of graphics and how they should be used is essential to the success of your eCommerce website. Let’s go through all of the aspects you should take advantage of.
Visual Hierarchy
Visual hierarchy refers to the way features (text and graphic instances) are arranged on a page to imply different levels of importance. Understanding visual hierarchy is essentially understanding how users see things. Users have a typical way they like to view a page and it’s recommended you design your website with this in mind; it’s recommended you work with user habits rather than against them.
Visual hierarchy involves a set of basic principles that every designer should know: such as size and scale, rule of thirds, rule of odds, spacing etc. For experienced designers, these principles should all be a given. The most important considerations are those specific to your customers habits. For example, Western users are likely to begin viewing your page from the top-left, given that’s how they read. Therefore any text elements should be aligned to the left margin of your page, while any elements you use to provide balance on your right margin are better off being visual.
Whitespace (or negative space) is an aspect you should always keep in mind. When it comes to filling in space, less is more. Over-saturated pages are confusing, intimidating and immediately feel like hard work for the user. White space helps make an image stand out, usually this image will be a product—it’s up to you to decide which image will best provide an answer to a customer’s problem.
Encouraging A Sale
Persuasion is a delicate concept, if it’s over bearing your customers will run for the hills, if there’s none, customers are unlikely to convert. Persuasion needs to be subtle. All graphics, icons and symbols should guide customers towards making a purchase. When done correctly, your site itself becomes your most useful conversion tool.
Color is one factor that influences how customers perceive your brand while navigating your site. Color can both trigger positive and negative emotions, so you need to get the balance right. Red, orange and yellow are warm colours that give off a friendly vibe, blue and green induce calm. Although, this should always be considered within its context: red for a safety service means danger rather than comfort. In any case, it’s highly recommended some form of color is used as it increases a user’s willingness to consume a piece of content.
Shape is also important, a symmetrical design can suggest formality, while an asymmetrical design can be quirky and curiosity inspiring. Although, no designs are usually entirely asymmetrical. Asymmetry can be used as a point of difference to bring attention to an area of a page.
Images make content more relatable. Users only retain only 10% of the information they hear, when pairing the same information with an image, users retain 65% of that information.
We touched on this earlier, consistency is what will maximize your sites selling potential. Every individual product image on every page matters, imagery is often what makes your site most memorable and helps establish trust. Trust is what turns a lead into a sale.
Design and SEO
Images, videos and GIFs all encourage engagement and are especially useful to drive social media campaigns. There benefit also extends to SEO, as long as you optimize them, so here’s how.
All images, videos, infographics, and GIFs can all be optimized to better user experience and increase SEO rankings. GIFs are best left to thumbnails as their file size is large and there is no efficient way to reduce it without losing significant definition- in fact you’re probably better off using an embedded video clip over a GIF. Images and videos slightly increase the load time of your page—they need to be compressed to reduce their file size without losing perceivable image resolution. Search engines prefer high resolution images. However, only designers and other visual art professionals can usually spot the difference between high resolution and the highest resolution possible. Images should be compressed to the point where perceivable image quality is not reduced for the average user, and loading speed is maximized.
Accurate alt text is another form of optimization and is important to help users understand your content. When relevant and appropriate, include keywords in an image’s alt tag and file name. Keywords help your images appear on SERPs, but do not stuff keywords into meta content, especially if the keyword is irrelevant to the context of the image.
Design Influences Your Conversion Rate
All graphics have a potential role in creating a conversion. Static images of products are still important, video descriptions of products in use are very popular and can increase the trust users have in a brand. Compared to simply uploading images, video descriptions (especially descriptions unique to a brand) take time to develop and have become a great feature to stand out from your competitors.
When it comes to product images, it’s the more the merrier. Close-ups, long shots different angles, and images that pay attention to a specific feature are important and help build user confidence. Imagine a user finds a cheaper priced product on Amazon, but the listing only has one partially blurry stock image of the product; even with a lower price, they might find it very difficult to trust the seller. We are visual creatures and users want to know exactly what they’re getting, even if it means adding an additional image of the back of that shampoo bottle, you’re building trust.
A/B Test Your Design
A/B testing (or split testing) helps you discover what is encouraging conversions and what isn’t. Don’t guess—this will only stunt the progress of your website and result in inconsistent measurements of how effective a design feature is.
A/B testing means comparing two different versions of a site and measuring which version gains better results. Before testing it’s important you determine what “better results” actually means. Does it mean more click throughs, email sign-ups, pageviews or conversions? Having a clear idea of what better is will help you make confident changes later on.
What should you A/B test? There are countless things to test: banners, hero images, product images, calls-to-action, buttons, colour and shape. You shouldn’t change them all at once, as it makes it harder to determine what design elements have had a positive or negative effect. The variety of things you can test explains why this is something you should be constantly doing.
If you ever find a change that you can’t quite make sense of, or would like to view or implement previous version of website design, this article on viewing a cached version of your website will show you how to view previous versions of your site, even if they’re years old.
Finding The Time
There are multiple facets of graphic design to consider when creating a website. Regardless of what you’re working on, getting things right will take time and even when your design is performing great, industry trends and user expectations can change very quickly. If you don’t have designers or web developers to rely upon, it can become time consuming. eCommerce platforms like Shopify can help you implement design changes without having design experience yourself, while less restrictive platforms such as Magento will require more attention and if your design or development team isn’t big enough, they may become a burden to maintain. If it all becomes a bit much or you simply want to speed up the progress of your web design, we recommend you hire web design experts from CodeClouds.
Design Success is eCommerce Success
Hopefully this article has provided just the right amount of persuasion for you to believe that graphic design has a big influence on the success of your eCommerce website. Position your images appropriately, make use of whitespace, optimize for SEO and test it, test again and again and again. The more thorough you are, the more likely you are to see success. Good luck!
