Great eCommerce design isn’t one-size-fits-all, which may make it hard to define, but you recognize it once you see it. an equivalent is true for bad design: your shoppers won’t be ready to pinpoint what is wrong with the design of your store, but it’d have them checking out the exit button all an equivalent.
The good news is we have seen it all and, more often than not, the planning mistakes that make a web store look unprofessional or untrustworthy are often easy to repair.
Here are the highest 10 design pitfalls that new (and experienced) merchants often make and the way to avoid them.
Embedded text on images
Images that have text embedded into them are a standard issue in online stores. the matter with them is when a web store is viewed on a smaller screen, sort of a mobile device, images will automatically resize. If there’s text embedded within the image, the text could be stop or resized to be too small to read.
Use the image with text options available in your Shopify theme to showcase your text on top of your images. Doing this may ensure your text and image both resize accordingly and keep your online store looking great on any screen size.
In the eyes of the web shopper, the standard of a store’s imagery directly relates to the standard of the business. It’s important to know that visitors to your online store expect you to believe your products and branding enough to take a position in making them look good.
As a rule of thumb, Shopify recommends using images that have a minimum of 800 x 800 pixels. this may offer you images that will be zoomed in without compromising quality. Find the newest image size recommendations from Shopify here and countercheck that each one of your store images follows these guidelines. Mismatched image types
If your online store is employing a mixture of original photography, vectors, stock images, 3D images, gradients, or icons, consider paring back what percentage of different image types you’re using. stick with one or two different types to avoid muddling the visual language of your brand and ultimately taking the main target far away from your products.
Not enough white space
When designing a web store, it’d be tempting to squeeze images and text together, throwing the maximum amount of information as possible at visitors. Doing this leads to sensory overload and makes it really hard to know, from a visitor’s perspective, what to specialize in.
White space refers to the visual perception between images or blocks of content, where there’s nothing. This space provides a visible rest for visitors and allows them time to specialize in and absorb the content that’s on the page.
Make white space your friend when designing your online store and experiment with using quite you would possibly think is important. Consciously incorporating white space into your design will force you to make a hierarchy of data, which can help streamline your branding and hone in on what the most message of your store really is.
Inconsistent aspect ratios
An image’s ratio refers to its width versus height ratio. for instance, a square image will have a facet ratio of 1:1 while an oblong image may need a facet ratio of 1:3.
Aspect ratios are important to think about when designing a web store’s product pages particularly because they dictate what shape your images are going to be, and whether all of your images will look equivalent. As a general rule, product listing pages should have images with an equivalent ratio for a clean, unified look.
Here’s the way to work with aspect ratios in your Shopify store,
Overuse of popups
Popups are often an incredible tool for customer engagement, but there’s a time and an area for them. If your online store has quite two different popups, a popup that fires immediately when a visitor involves your store, or a popup that fires quite once during an equivalent visit, you would possibly want to rethink your popup strategy. the simplest popups are wont to encourage email signups, let shoppers realize a promotion, or to supply an exit-intent offer to stay visitors shopping.
To understand how a popup is perceived by a client, imagine them as a salesperson during a brick-and-mortar store. they will be helpful once they provide useful information here and there, but will drive customers out of a store if they begin to pester shoppers.
Learn more about the way to use popups effectively in your online store here.
Hard-to-read text or buttons
There’s a reason that the majority text and calls-to-action online are highly contrasted to their background: it makes it hard to miss. If your online store’s background and content are an identical colour, there’s an opportunity that some people won’t be ready to read what’s on the page.
When designing your online store, fiddle with the brightness of your screen and confirm your written content and buttons can still be clearly seen at different levels of sunshine. Not only will this help make it easier for your customers’ eyes to travel down the page, but it’ll also take into consideration shoppers with visual accessibility concerns.
Not having a transparent aesthetic
What does your brand look like? Whether it’s playful, modern, artisanal, or industrial, once you nail down the design of your brand, you ought to apply that idea to everything else in your online store.
This aesthetic should influence your font choices, visuals, and color scheme to supply a cohesive and immediately understandable brand. Every design choice you create in your online store should relate to your brand’s aesthetic.