Published on | Prototyping: From UX to Front End — Medium Whitney Blankenship

I do ridiculous amounts of online shopping. Every day I’m on this or that site, looking for everything from plungers to boots to fancy stamps to light bulbs.

I would order everything online if I could.

Today alone, I was delivered 6 packages (it’s 100% true, the delivery guys were chatting at my front door). I also hate online stores with bad user experiences. It’s the absolute worst.

If I’m on your site and I can’t find what I’m looking for in under 30 seconds, I’m gone.

If I’m forced to create an account to order, I’m out.

If you don’t let me pay with PayPal and I have to get my wallet out? Forget it.

The fact is, there is absolutely zero obligation for a customer to stay on your site for any reason. Unlike in a store, a customer might feel rude if they just turn around and walk out while a salesperson is talking to them. In the ecommerce world- it’s commonplace to abandon at any time for any reason, or sometimes for no reason at all.

Given the flighty nature of online shoppers, you can’t afford to have friction in your UX. The slightest obstacle can be enough to make someone bounce from your page without purchasing. As the average ecommerce conversion rate is only 1–2%, this is not something you can afford.

I’ve compiled the top 5 most common UX errors that online stores just love to make, and how you can avoid them for a great user experience.

Mistake 1: Not Making Speed a Priority

Have you ever gone to a site that had a gorgeous design but ultimately was unusable?

Speed is everything today, and having a site that is beautifully designed but never loads means that no one is ever going to see your site, much less purchase from it.

According to Soasta’s State of Online Retail Report, even 100 milliseconds more than the optimal loading time will drop conversion by 2.4% on desktop, and 7.1% on mobile.

Source: Soasta

If you thought that was scary, look at what one second does. That’s a 21% conversion drop on desktop, and mobile isn’t far behind.

It might be nice to have an animated header or video background, but if it slows your site by even just one second, take it to the chopping block.

So while you’re spinning image carousel and parallax scrolling might be pretty, chances are, it’s costing you tons in potential conversion just by slowing down your site, even on desktop. Even then, it’s probably not translating well on mobile at all.

How to Know if Speed is Killing your Conversion Rate:

You can check this in your Divvit account with the analytics tab. Choose channel group, then device in your dimensions. In your metrics, choose the following:

Visits
Average Visit Length
Bounce Rate
Failed Discovery Rate
Checkout Abandonment Rate
Conversion Rate

Now you should have something that looks a bit like this:

This will show you if your UX optimization is working for your customers. As we can see in the above example, bounce rate looks okay (perhaps a bit higher than average for a few devices, but nothing too alarming), but we can definitely see issues in the discovery rate.

This is showing that something is going wrong while users are browsing through your site. By testing your UX, you can understand what’s causing friction and why. Go through your site and time the exact loading speed as you navigated through the discovery and checkout process.

Another way you can test your overall site speed, is by using Google’s PageSpeed Insights:

Even Google isn’t immune from mobile optimization

What’s cool about Google PageSpeed Insights is that you get clear indicators as to what could be slowing your page speed down, and how to fix them.

How to Fix Speed Issues

One of the biggest things you can do to fix speed issues is to make every element on your store as light as possible without compromising on quality.

What do I mean by that?

Images tend to take up the most server space for a site, and will be what takes the longest to load. Use the smallest pictures that you absolutely can without destroying your product photos.

For example, if you’re using an ecommerce platform that will automatically showcase your photos in a certain size, upload the photos in that size.

This will take the heavy lifting off of your site in resizing the image each time it loads (Note: make sure that your customers can still zoom in to your photos to see your products clearly. I said don’t sacrifice quality here).

Another way to lighten up your site is to remove unnecessary code. Obviously, this is something you should only do if you know what you’re doing. Otherwise, get a professional to help.

Mistake 2: Neglecting your Navigation

Navigation is everything. If your customers can’t figure out how to go through your site, your beautiful product photos and lightning fast site don’t count for anything.

Here are a few things you can do when optimizing your ecommerce site’s navigation:

Make your internal search bar prominent:

This might sound like a no-brainer, but it’s very important for navigation. Test out your internal search frequently to make sure it’s pinging your products the way it should. Try out common typos that users might make to avoid the dreaded “no products found” page.

Another thing you can do is to add suggested products, like best sellers, to the “no products found” page. Having nothing but a blank page can be a kiss of death for a potential conversion.

Also, add some autocomplete if you can. This will show your customers the potential products they could find and make the internal search process a bit easier.

Make sure your menus are logical:

Your site should have a hierarchy, and that hierarchy should reflect how your products are broken up in a logical way.

But don’t make this your customer’s life:

Image source

There is nothing more frustrating than trying to click on a category just to have the hover menu disappear.

A drop down menu can display your site’s hierarchy easily while still being visually appealing as long as it functions correctly.

Take Walmart.com for example, they use a large drop down menu that shows more detailed categories as you mouse over. You can get a glimpse for the entire structure of their site and categories and easily find what you’re looking for.

Use product categories:

Product categories make it simple to find your products quickly and filter out what a customer isn’t interested in.

Only create a category if it helps your navigation. Some products might fit into one or several categories, but try to be strict with it. Ask yourself if this is really what your customer is looking for. Categories mean absolutely nothing if each category shows the same exact products- it defeats the purpose.

Use Breadcrumbs:

Breadcrumbs show the overall path from home > category > subcategory > product page. Just like Hansel and Gretel, leave breadcrumbs so your customer can find their way back through their navigation:

This shows you each category and subcategory that the product falls into, and typically, it also shows you the journey from the home page to the product.

Say your customer wants to pop back to the accessories to see more, or maybe they just want to go back to the Men’s category. You should make that as easy as possible by providing the links back at the top left of your site throughout its navigation.

Offer your customer the chance to filter your products:

Whether they want to filter by color, size, or maybe even brand, offering your customers the chance to filter through your products lets them find what they’re looking for quicker.

Using filters helps target down your products into just what is most relevant for your customer, while still offering plenty of choices.

I should point out that there IS such a thing as too many categories. Sometimes those categories can be replaced by filters. A/B test everything and see what makes the most sense to your customers.

See a running theme? Your navigation shouldn’t hinder your customer in any way- it’s supposed to help them achieve their goals in as little time as possible. Reducing friction makes the journey from discovery to purchase fluid and simple.

Mistake 3: Leaving Mobile out of the Mix

One of the biggest mistakes you can make today is not prioritizing mobile in your UX. Mobile browsing has officially overtaken PC browsing worldwide, and while customers may not be purchasing as often on mobile, they’re certainly browsing your products on it.

In fact, 52% of users who had a bad mobile experience made them less likely to deal with that company. What’s even more damning is that 61% of users who don’t find what they’re looking for on a mobile site will leave and look for another site to accomplish their task.

Which means you’re sending your customers into the loving arms of your competitors.

The good news is that a lot of the optimization techniques that I’ve already mentioned apply to mobile too. Getting your site as light and speedy as possible, and reducing the size of your page helps it load quicker- which is extra necessary for fickle mobile users.

A lot of your ecommerce platforms will offer responsive design to respond to the mobile optimization question. Responsive design takes the content that you already have on your site and resizes it so that it adapts to mobile and tablets easily.

There’s definitely a great argument for responsive design, but ultimately, it’s a bandaid. Fixing the actual issue would be to create a site that is completely designed with mobile in mind. Mobile sites are lighter, faster, and when done well, don’t compromise on your content.

Regardless of how you choose to tackle mobile UX design, there’s a few things you should do to keep your site as mobile-friendly as possible.

Make sure your menus are adapted for fat thumbs:

No one wants to have to do the pinch and zoom to click on a link. Seriously- don’t do that.

You can always use the hamburger as an alternative:

Note that the menu is out of the way so you can clearly see the products and offers, and easily findable in the standard top left-hand corner of the screen.

It’s also easy to access drop down categories from the main categories with just a tap. Walmart’s mouseover dropdown category menu won’t work on mobile.

Also notice how each of the categories is large enough to be clicked with a thumb. You don’t have a lot or precision on mobile, so making the buttons large enough to tap is crucial.

Be true to the desktop version of your site:

A huge mistake when optimizing for mobile that I often see is offering a watered-down version of your desktop site as your mobile site.

Mobile users are just as important as desktop users, if not, more so.

Your full site should be featured, with all the information that’s available on your desktop version. You just need to figure out how you’re going to arrange it so that it looks and functions well on a variety of screen sizes.

There should be cohesion between your mobile and desktop design and branding, and while mobile prioritizes discovery for many, that discovery will fail if you don’t include all of your information.

In fact, Google recently announced that during 2018 or 2019, it will start prioritizing mobile sites over desktop sites to respond to the rising mobile browsing habits of consumers. This means that the time to get your mobile site ready is now.

Earlier, we looked at how to check if slow loading speed was killing your conversion rate, and you can check this via mobile too. In the Analytics Explorer tab of your Divvit account, simply use the metrics and dimensions we used earlier, and filter for mobile:

The failed discovery rate here means that there’s a serious issue on mobile and there’s something that needs optimized. It could be speed or it could be usability. You can also use the PageSpeed Insights tool by Google to check mobile speed which will give you options on how to optimize.

However, if your mobile speed is good, you’ll need to look further into your UX functionality. I’ll get to how you can do that in a moment.

Mistake 4: Having a Complicated Checkout

Have you ever shopped on an ecommerce site only to find the most complicated checkout system ever? It’s a pain.

The entire theme of UX optimization is removing friction between the time the customer lands on your page and when they hit the “purchase now” button. You want to remove as many obstacles as possible.

Make it part of your logical navigation:

For example, your customer’s cart should be easy to find and throughout their navigation, it’s extra nice if they can see how many items are in their cart (which helps them know that the product they added was counted correctly).

They should be able to consult their cart at will and be able to easily navigate back to the product category they were purchasing from.

No surprises:

It’s also great to have an estimation on shipping. Add a zipcode or city calculator so they can see exactly how much their order will cost before they start the checkout process.

61% of cart abandonment comes from surprise fees. Take the surprise out of the equation by showing your customer the total cost before they checkout.

Forcing a user to create an account to check out:

Each time I order from an ecommerce site for the first time, nothing irritates me more than a lengthy sign up when I’m just trying to get my products.

Offering a guest checkout or allowing someone to create an account by connecting their social media account in one click saves everyone a lot of time and headaches. It’s a great way to get the identification you need about your customers without forcing them to do something they’d rather not do.

Again, the idea is to remove obstacles. Forcing an account sign up is definitely an obstacle that can cost you conversions.

Offer multiple payment options:

I hate it when sites don’t offer a type of virtual wallet, like PayPal for example.

“What? You mean I actually have to get my card out and type in the number?”

Bummer.

Not offering the kind of payment solution that your customer prefers can be the difference in a purchase on your site or your competitors. Remember that especially on mobile, customers want the experience that’s as quick and fluid as possible.

Offering a checkout that doesn’t require them to fill in long, complicated forms is part of removing the obstacles I talked about earlier.

The checkout is the holy grail of the user experience, and when a customer gets there, you don’t want anything to change their mind.

Mistake 5: Forgetting the User in User Experience

No matter what you do, make sure the user is at the center of your ecommerce site design.

What do I mean by this?

I mean keeping the way the customer will interact with your site at the base of how you do e.v.e.r.y.t.h.i.n.g.

But how do you know what your customer will like? How do you know where their pain points are?

Ask them.

They might not answer directly, but by putting up a small survey that they can complete before checkout for a discount code or loyalty points is a great way to incentivize your customers.

Alternatively, you can A/B test your site at each step to figure out which UX aspect works better for your particular customers.

Maybe your site doesn’t have a lot of traction yet- that’s okay. Even if you have no customers to ask, talk to your friends and family.

What I like to suggest is to find the person in your social circle who is the least proficient at computers and internet. Have that person walk through your site and navigate through a purchase.

If the most non-tech savvy person you know can easily complete a purchase, you know that your UX is, at the minimum, easy enough to be understood, and will be simple across the board.

Another great way to test your UX is to have someone navigate through your site and vocally narrate each step that they take in moving through your site. Record this and look at it later.

Count the amount of steps it takes for a customer to decide on a product and purchase it. If it’s the first time you’re doing this, chances are, you’ll have too many steps.

When you’re optimizing your UX, keeping the user at the center of your processes from beginning to end will guarantee that your site will function smoothly for your customers. In an industry with so much competition, you can’t afford to have anything less than the absolute best to stay ahead.

Creating an amazing user experience will help you keep that advantage.

What do you think is the most important aspect of creating a great user experience?

Originally published at www.divvit.com.

5 UX Errors that are Secretly Killing your Conversion Rate was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

5 UX Errors that are Secretly Killing your Conversion Rate

Cool stuff, every week

More Articles