User Experience Ecommerce Design Trends In 2016
Here’s a question: if you had to choose between a site that sells a lot and a site with a really distinct design, what would be your choice?
If you’re an ecommerce owner, I’m sure you’d go for selling lots of merchandise.
On the other hand, if you hope to become the next hot rockstar designer in SF, you’d go for design, I get it.
But if you’re a savvy marketer, you’d probably try to get the best of both worlds.
Wait, that’s impossible, right? No, not really. In fact, there’s a kind of web design that helps you sell more, and you need to master it.
Both marketers and designers need to know as much as possible about this kind of design.
It’s called user experience design (or just UX).
Stick around as I discuss 10 modern trends that will help you improve your customers’ experience (leading to more sales), while allowing you to have a distinct and avant-garde design.
“User experience begins with the very first impression of a product or brand”
Let’s talk about first impressions… What do you think when you land on a slow, bloated and clunky website? You’re just dying to push the back button, aren’t you?
Even if the site looks and loads fine, there are other reasons that could make you leave in a hurry: shallow or snappy content, bad grammar, typos. Even trying too hard to sell you things that you’re not interested in might trigger an instant negative reaction to the site.
As with a job interview, that first impression does on you matters a lot. ‘Cause if you push the back button, you may well never return.
This has been important for any kind of website for a long time, but it’s critical for ecommerce sites.
Imagine you land on an online shop with the intention of purchasing something. A few seconds in, you realize that the damn thing is sloooow.
Now, you’re not only angry for the precious seconds you’re wasting – you also doubt that the payment process is going to be a smooth one. What if the site freezes just when you’ve entered your credit card info?
That fear prevents a lot of sales from happening on a site that’s not as fast as users think it should be.
And how fast is that? Very fast. Lightning fast, as a matter of fact.
I won’t bore you with a thousand stats to prove this point, but I’ll give you this:
In 2011, studies showed that you had no more than 10 seconds to convince your user to stay, before they hit the dreaded back button.
Now, most experts believe that 10 seconds is a very generous estimate. Four or five seconds is the available window in which you either win the customer’s attention, or you don’t.
Ecommerces are special in one more way. You can influence your user’s first impression, even before they visit your site for the first time. How is this possible?
Well, ever felt inclined to shop at a site after reading some glowing online reviews? Or after a friend recommends buying there?
Turns out that you might like a site more if you’ve been prepared to like it by your friends, influencers, etc. So make an effort to give a spotless first impression, both on site and off site, and your users will be more likely to stay around for a while.
So main takeaway: be fast and always be awesome – especially on a first date.
As I outlined in my post Web & Graphic Design Trends To Watch In 2016, there are two big styles that are shaping web design right now and aren’t likely to fade away for a while: flat and material design.
They have quite a few things in common, the most important being that they create minimalist websites and apps, as well as minimalist user experiences.
Like it or not, users are now very familiar with minimalist websites. In 2016, your site will be compared with these big two trends. It’s good to stand out, but right now is not a good time to have a cluttered or noisy design.
Furthermore, there’s a third trend that also has its base in minimalist design: it’s grid or geometrical outlines. They’re all about order and ease of navigation. A user knows what to expect when everything is based around grids.
This is critical for ecommerce. The less cluttered and how to figure your design is, the easier for your customer to focus on what you want him to: your products.
Removing distractions (as well as unnecessary steps in your sales funnel) is simply essential to sell more. Remember the quote: the user will always follow the path of less resistance.
So by offering fewer elements to focus on, you eliminate the guess work for the user.
How do you make something stand out more? By creating space around it. This space around your focus point is what we call negative space – or white space.
It’s easy: the more space around an object, the more your eyes are drawn to it.
Until a few years ago, web publishers had an irrational fear of “white space”. They wanted to use every available spot of real estate on a website – leading to designs that looked like this:
Apologies for such a horrible view. Now get it out of your head and let’s move on.
White space lets your designs, and your users, breathe. Look, we’re all busy, and we want to go around our business quickly and move on to the next thing. We’re already overexposed to visual information as it is, so if you want us to focus on something, it’s got to be something simple, clear and easy to digest.
That’s just impossible, if you don’t properly use negative space.
Classical web & graphic design states that “negative space adds an air of elegance, making minimalism the preferred style of high-end and exclusive brands.”
In my opinion, that is no longer the case (as white space & minimalism can fit and benefit non-exclusive brands too) – but the opposite is certainly true: if your design is too busy and cluttered, it will make your brand look bad.
Using cards is a classic design technique. So classic, that even your parents may feel a certain familiarity with a modern website/app if they are presented with a card UI.
After all, they used to play with this kind of format when they were kids:
Not to mention, that people have handed out business cards for hundreds of years. Talk about a timeless classic.
So no wonder they are all the rage now for UX design – they don’t demand any learning from the user. Plus they actually enhance user engagement.
For many, cards are the new creative canvas – as opposed to web pages. The web, and our smartphones, are already taken over by card design. Google Now, Windows 10, Twitter, Instagram.. They are all made of cards.
As an ecommerce business, one of the best steps you can take to improve user experience is moving all your products to a card UI. Want to make a special offer? Put it in a card to grab your customer attention. Cards enhance engagement.
If you need some inspiration, look no further than Pinterest. There’s literally millions of cards – and a lot of them are products. Think about how you would make your card stand out from the crowd on a popular Pinterest panel.
In fact, Pinterest is a perfect example of the kind of UX design I’m talking about: minimal, grid based, plenty of white space and it uses cards. What’s not to like?
In high street shopping, you rely on eye-popping displays to catch your customers’ attention. On ecommerce, things aren’t different.
We humans are visual creatures, so it would be silly not to leverage that when we’re trying to sell. For years, most sites have been focusing on adding more and more eye-catching pictures to the product page.
Currently, best practice says you should feature no less than 10 large size pictures (at least 800×600), and give the user option to focus on details.
Some products (like sneakers) are usually featured with a 360º degree view – which is nice. But there’s something even better, and that’s a video of your products.
Show a short video of someone touching, wearing or trying out your product and you’re guaranteed to shorten the gap that separates you from making a sale.
I said at the beginning how a good review can do wonders for your online shop or products. Well, a video review can have that effect – on steroids.
Shopping is also known to be a very emotional decision, so what can stimulate your customer desire more than seeing that awesome product live, in the hands of someone else?
Do you know how Apple fans rave about the awesome little details that all Apple products have? They love the microinteractions.
Microinteractions are the building blocks of user interaction. On every device, every time you change a setting, you’re using a microinteraction. Whenever you favorite or ‘like’ something, that’s a microinteraction too.
Creating good microinteractions is not easy. Good microinteractions separate good products from bad.
The Hamburger Menu, Facebook’s Like, Autocorrect and Autocomplete are all iconic examples of microinteractions.
Use the ones that users know and love, and build upon them to create new microinteractions that will make your site feel more personal.
Above all, make sure they have a single purpose. That purpose must be relevant and necessary for your site or app. Never add anything because you’d like to have a fancy button or function. That’s, in fact, the worst you could do to your user experience!
Animations are a great touch that, if used right, add richness to the user experience of your site.
Moreover, animations are now easier to implement than ever (thanks to CSS and the rebirth of GIFs), and you don’t need to detract from a minimalist design in order to include them on your site.
Just keep them gentle and to the point. Above all, make sure they don’t add to page load speed, as that would negatively affect user experience.
Treat them the same way you treat microinteractions: use them if they really enhance the experience of engaging with your site, not for the sake of it or because everybody else is doing it.
Lastly, we have the long scroll and lazy load trend – as opposed to the multiple clicks and pagination style that used to be everywhere not long time ago.
Why long scroll? The way we use our smartphones has turned scroll into the new click. Who would have thought six years ago that scrolling was easier than clicking?
Also, every time we click on something, the browser must load a new page – making the user wait. And users hate to wait.
Lazy load takes away most of the burden of waiting for content to load, as all the content that’s not visible right now is loading on the background and ready to pop up as soon as the user scrolls down.
If still in doubt, remember this:
“Users will always choose the path of least resistance”
– Paul Boag
Paul Boag is one of my most admired UX experts. He says that if we want a real competitive advantage (over other ecommerces on our niche) we must focus on simplicity.
And I think that’s a nice way to wrap up this post. :-)
Did you enjoy this post?
Never miss a blog post. Subscribe below to get more posts like this sent straight to your inbox as soon as they're published.