16 Ideas To Boost User Experience On Your Shopify Store

User Experience is a “done-to-death” topic. Millions of words have been written on it. And people continue to write more about UX every single day. Take this piece that you’re reading for example.

Posted 6 years ago by Jonathan Kennedy

The reason there’s so much emphasis on UX is simply because it is so important.“Design is not how it looks like and feels like. It is how it works.”– Steve Jobs.

Anyone visiting your Shopify store is having an experience. If it’s bad, they won’t stick around. They won’t come again. They won’t buy from you. They won’t trust you.

It’s true. UX impacts all of these:

• Conversions – great user-experiences often convert into more sales.
• Cost of conversions – if there are fewer hurdles in the way of conversions, your cost goes considerably down.
• Trust – people subconsciously begin to trust stores which offer them a seamless, happy experience.
• Loyalty – great UX converts into more chances of customer loyalty and referrals.

So how do you make sure your Shopify store has one of the best user experiences for your visitors?

Here are 16 ways to do that:

1. Make use of your brand colors – but soothingly

Flashy colours may look great on pamphlets but they cause our eyes to recoil when we see them on websites.

The reason websites like Facebook, Twitter, Shopify look good are because they use a soothing color scheme derived from their logo.

It is subtle but very efficient. You have this sense of oneness on the website that nothing comes across as odd or revolting.

This makes for a very seamless user experience.

2. Optimize “above-the-fold” content

It may not be the most-visited page in your shop but your homepage is definitely one of those places which reflect your brand completely.

The best homepages are a mix of artistic flavour and scientific optimization.

Homepages have one goal – get people to stick around and click on some part of the website. All your optimization should go towards this.

Ideally, put that most important piece of goal-driven content above the fold. Yes, people are less bothered about scroll these days (one statistic says people scroll within 3 seconds of landing on a page) but it is always good to catch your visitors’ attention at the first second.

3. Use decent fonts, good font-sizes and contrasts

Every one of us is turned off by small fonts. We don’t want to squint to read.

For readability, it is good to have normalized font-sizes – web designers say that a minimum of 16px is good for readability.

Font-size is not the only thing that decides how readable your store is. There are other factors.

Font-size: make it big enough so visitors can comfortably skim through the textLine-spacing: Spacing between two lines plays a crucial role in making text readable. Too little or too much and it’s going to be very bad. Contrast: A light grey text on a white background will not be as good as dark grey / black text on white background. Contrast is another of those features that can make your store easy on the eyes. Good fonts: Fancy fonts can look good for a short while (or in short supply) but they won’t work well when there is a lot of text. Find fonts that are standard. Have a look at fonts used by Apple, Shopify, Google… they are very regular, standard and do not draw attention to themselves in fanciful ways.

4. Make your CTAs stand out

Your CTAs are the gateway to your bread-n-butter.

If people don’t find them (or don’t find them enticing enough), they are not going to click on them. If they don’t click on them, you are not going to make sales.

Here are some pointers to making CTAs stand out:

• Contrasting colors: If your website has a specific color theme, make sure your CTAs have a complimentary color that contrasts well. It should totally stand out.
• Make them big enough: CTAs that blend with content will be super-hard to find. Make CTAs look bigger – by making them a button, or having a well-spaced border around them. Also, adding icons makes it even better.
• Optimize the text on them: Always tweak the text on CTAs to something that’s unexpected but enticing. “Click here” is completely boring. “Get $50 off” is click-worthy.
• Position them correctly: Center-aligned CTAs and right-aligned ones work better (because of the way our eyes track websites).
• Pad them in white-space: If you put a lot of surrounding content around your CTA, there’s a big chance they will simply get lost or not find enough attention. It is always good to have a lot of white-space around your CTAs. This automatically draws a lot of attention towards them.
• Keep testing: Keep testing, tweaking and changing all of these parameters mentioned above.

5. Optimize loading speed

None of the UX optimizations matter if your Shopify store does not load quickly.

Fortunately, Shopify’s platform offers a great level of optimization. It is then up to the theme you pick to load content lightning-quick.

There are lots of tools to test how fast your shop loads under different internet speeds. Test them out and optimize your Shopify store to load quickly.

6. Optimize for mobile experiences

This goes without saying. At the turn of 2016, we saw mobile internet traffic exceed desktop internet traffic. By now, the difference is huge.

Most themes are designed to be responsive so they will work on mobile phones.

But don’t stop with “responsive”. You want a great UX for visitors who see your store on their 5” smartphones. That means you should test, optimize and make the mobile version of your store work exceedingly well.

7. Have an autocomplete search feature

If you think hard, you’ll remember that we no longer type the full search text when we Google for something.

The autocomplete suggestions are usually accurate and we just tap away. Makes search easy and quick.

Subconsciously, people have come to expect this behaviour. It’s not something you must have but it is something that will make user-experience completely seamless for your visitors.

You can use apps from the Shopify apps directory or simply build your own.

Take this with a grain of salt. Having an autocomplete plugin does not make sense if no one uses the search field. But if your analytics tells you that people do use the search bar in your store, plug that autocompletes feature in.

8. Use pop-ups sparingly

Let’s face it. Pop-ups are annoying.

Yes, you still have to use them to get people to subscribe to your list or know about a sale. But do not be the shop that shows half a dozen popups at different intervals.

Anything more than 1 popup to a single visitor means you’re doing it wrong. Find out ways to slide the information into the view without blocking or obfuscating information that the visitor might be reading/seeing.

Use popups sparingly.

9. Organize the main menu based on tests

A big part of user experience is navigation.

A great navigation helps people find things quicker and migrate from one part of the website to another easily.

The main menu is one of the most important places you should optimize.

Typically, you organize the main menu based on the collections and sections of your shop. But this is not enough.

Using tracking/heatmap, you can find out where people click, which section of your website people usually goes to etc. This will give you a lot of ideas on how best to organize your main menu so that it makes it easy for visitors to find what they need.

10. Have a “Quick view” on your products

By now, this is a default feature on most themes for Shopify stores.

A “quick view” is a way to show more details on a product without leaving the main products page. There are multiple benefits to this.

Quick views enable you to have highly-visual collections or search results page, full of product photos and basic information (title, price). The “Quick view” button (and the quick view modal) takes care of showing additional information – product description, add-to-cart button, discounts, shipping information etc.

Quick views prevent having to reload the page every time you want to see a product’s detail. And that tiny experience goes a long way in making people stick to your shop.

11. Have Zoom option for product images

I’m still amazed that many shops slap a low-quality, low-resolution product photo that is 200x200px.

How do you expect people to buy if they can’t even see the product in all its glorious detail?

Don’t just add big, high-res photos of your product but also have a handy zoom feature. Only pick themes if there is zoom in the product image gallery.

Looking at photos are the virtual equivalent of holding a product before purchasing it.

12. Use social signups

Signups are a big spot for resistance. Ask people to signup, and that’s where you will see drop-offs.

These days, many websites have habituated us to an easy way to signup or register – social signups. In this, you simply use your Facebook, Twitter, Google+ or some other such account to signup or register.

Having social signups on your store can greatly improve UX. People will feel come off as less resistive to register if they can get it done in two clicks. No forms to fill. No captcha to decode.

13. Make product descriptions “skimmable”

I can’t emphasize on this enough.

Simply put, bullets! Make your product descriptions sharp and easily-readable.

People just skim through text. Write your descriptions in a way that even if people skim, they get all the info.

14. Use trust signs prominently

Stores have SSL verification certificates and payment-related logos pasted on their footers for a reason.

Having logos for SSL, payment gateways, anti-virus are all good. But you can go a step further by reinforcing them.

You could add them in the product descriptions to remind the visitors that their transactions are going to be perfectly secure.

Trust signs are not just logos of security certificates. A very relatable trust sign could also be a review someone left on your website via their social profile. You should add these in relevant places to encourage visitors to feel secure and comfortable shopping from you.

15. Use videos when you can

Product photos are great. Videos are better.

Videos offer a look at the product in use. And in relative terms so the potential buyer knows how big the product is, and how it looks and works.

It takes a considerable effort to produce product videos but it is worth it, given that 64-85% are more likely to buy after seeing a video.

16. Have different, relevant images for variations

If you have variations on the product, and if the user selects a different variation, make sure the image changes to a relevant one.

This is a very simple one and we don’t see too many stores not doing this but if your store does not do this, correct it.

The reason why having different, relevant images for all variations is simple: at a deep level, it shows the visitor that you care about their experience on your website and on the surface, the visitor gets to see the actual product.

Conclusion

User experience is not just about how beautiful and easy-to-use your online store is. It is more about how good visitors feel, when they use your website.

Hopefully, these 16 pointers will serve as a great starting point to help you optimize your Shopify store for a great user experience.

Here’s to more sales!