Based on a recent conference presentation I gave, here is our six-part series on E-commerce Design 101. It’s geared towards busy store owners with little time to dig deep into the minutia of font choices and color schemes, but who appreciate that tending to their site’s appearance is an important, on-going exercise that deserves their attention. Or at least some of it. Sound like you? Great. Come along and learn why E-Commerce and dating really have a lot in common.
First thought: technology is making this a really exciting time to be in the market. Let’s take a look at E-commerce sales figures from the last decade.
That is some picture of growth. Just look at the amount of dough people are willing to drop when shopping online – $341 Billion spent in 2015, and the spend keeps climbing.
But what makes it really exciting…
Whether you’re talking about shoes or dates, or shoes for dates, more and more shopping is happening on mobile. Right now, it’s still fairly small compared to desktop sales. From your perspective, this is a good thing. It’s still the wild west on mobile as everyone figures out what the best practices are so stick with it now and you can stay ahead of the pack or at least keep up with it as it evolves. Look out for some mobile design tips in this series to help you on that front.
As we go forward with this series here’s one thing you need to remember:
Just like dating there are no hard and fast rules. Nothing that works every time for everyone. Life and business would be a lot simpler if it did. Everything I’ll be sharing with you are guidelines and suggestions. Where possible I’ll reference studies and list examples to back these up – that way you can feel comfortable that I’m not just making stuff up.
But at the end of the day there’s no magic pill that’ll 100% guarantee the same results for every business. So that’s why if you don’t remember anything else you read, try and remember this…
Test all your assumptions! There’s way too much data out there for you to continue making design decisions based on a hunch, or because you saw Amazon did it that way or even because some idiot designer told you about it on his company blog. Really. Set some time aside and do some research. Plus, as you’ll see in some of the examples included, just because something is the most popular doesn’t necessarily mean it’s the right answer for you and your store. So however you can, always try and get objective verification for your decisions and test them.
Of course the topic of testing could be it’s own series of posts, so I won’t go into it here now (but that’s not a bad idea for the future). Here are a few resources to get your started.
Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems
Shopify’s Beginner’s guide to A/B Testing
If you just google “A/B testing” or “Multivariate testing” you’ll find plenty of articles and tools to help get you understand the process too.
Before we start diving too deep, it’s good to start with a few general core design principles that’ll apply to any page of your site:
Prioritize Visually
There’s a tendency to want to cram as much content onto a page as possible (particularly the homepage). I understand. You have a lot to sell and it’s all important, right? Take a look at this.
So this is Bed Bath and Beyond circa 2013. Jammed. Even the big stores with large marketing departments can’t help themselves sometimes. The problem with this much stuff to take in is that our eyes don’t know where to go. They’re lost in this undefined sea of stuff.
The thing I want you to remember is
Just because it’s on the screen, doesn’t mean it’ll get seen
Why? Well, because if there’s too much to take in your brain just gets overwhelmed.
It’s like an online version of this crowded storefront. Not only is this confusing to look at, but you’re also sending the wrong signals here. You’re telling your prospective suitors that you’re indecisive and don’t know what they want, and no one finds that attractive.
So how do you handle this?
Well, in design we use something called Visual Hierarchy. It’s basically giving your viewer’s eyes clear instructions on where to go, by visibly making it obvious what the order of importance is.
So compare Bed Bath and Beyond’s homepage in 2013 (on the left) with their 2014 homepage on the right. In the newer design, they’re clearly indicating what area is the most important, then each subsequent area is either smaller in size or lower down the page so they don’t compete with each other. And that’s the main point: you can use size, placement, color whatever you want to create the hierarchy, just make sure the elements on screen aren’t competing with each other for attention.
Now, I can sympathize with how hard this is, just look below at their site now. Which goes to show how tough it is to keep the hierarchy clean and clear. But trust me there are benefits. And I’m talking measurable benefits.
For one, it can have a huge impact on conversions. In this example, this E-commerce store had an existing homepage design not unlike a lot of sites we’ve seen before. Especially if they have a deep inventory. Three columns with lots of navigation options in the left column and lots of promo boxes. So, a bit busy but nothing really egregious. Right?
Well they redesigned it, not necessarily with a goal of making it look prettier, more about removing the clutter. So now you see that have one main call-to-action area, one main value proposition at the top and they also gave the product images space to breathe underneath. What happened? A 35% increase in revenue per visitor. By showing less, they sold more.
If that’s not enough of a reason to simplify, think about the growing number of visitors coming to your site on the unforgiving, teeny weeny mobile screen. Here, you don’t have the luxury of screen width, so most likely your content will have to be stacked anyway So you might as well get into the habit of being brutal with your content priorities.
OK. Time for general design principal #2.
Don’t Fear the Fold
One of the main reasons we’re all guilty of cramming too much content on page is that we’re afraid of the dreaded fold. Now at this point in past presentations I’ve given, I would usually try and convince you that the fold is nothing to worry about.
I’d show you all these charts and eyetracking studies that show that people are willing to scroll, so you have nothing to worry about. Right? Well it turns out it’s a bit more nuanced than that, which is why I’m updating my suggestion a little bit.
So don’t let the fear of your content below “the fold” being forgotten or never seen rule your design decisions. BUT, you shouldn’t ignore the fact that we do prioritize things that are easier to see before having to do anything. So a healthy respect for the fold is in order.
Here’s why:
YES, as far as an actual pixel measurement there are just too many folds for a sane person to keep track of…
And yes, people are willing to scroll, even to the bottom of the page. See these eye-fixations bouncing all over the page all the way down? They’re with you. All the way down.
But…
Only the catch is, they’re only willing to scroll when they have a reason to.
So just like in dating, first impressions really matter. The first thing your visitors see should be something that not only indicates that there’s more content below, something that encourages us to scroll.
As the Nielsen/Norman Group put it…
Which means feel free to be adventurous with your image sizes, but just be careful of a situation like the screenshot below where the design makes you think that the site is done at the fold, but the scroll bar says something different. So, the take away here is you have to give them a reason to scroll. And then they will.
Next time we will look at the next important phase of our dating strategy; understanding who it is you’re trying to attract.
Comments