Let’s do a recap of what we’ve talked about before before we get rolling on the next installment:
Some industry stats that underscore the importance of paying attention to the design of your online store, plus a few core design principles to keep in mind throughout your entire site.
Introducing the five different types of shopping behaviors you’ll see in your prospective customers.
We spent a little time getting to know the likes and dislikes of the first two types: the Hunters and the Researchers.
Your goal when they’re in this mindset is, of course, to convince them they’re getting the best deal possible. How? Glad you asked.
It’s surprisingly simple. Show them the money!
The best thing you can do for this mindset, design-wise, is to clearly distinguishing sale items in some way, especially if you can show them how much of a discount they are getting.
It’s a no-brainer to do this on the product detail page, but think about how you can implement this on the product list page as well. Just be careful about taking up too much space like the example in the top left, crowding the page and subsequently defeating the purpose of having that information there in the 1st place.
If you think it’ll be useful you can also create an entire top-level category for discounted items, make sure you’re highlighting it in some way so that it stands out.
Another thing that attracts the bargain hunters is coupons.
So if you offer them make it easy for them to find and apply the codes. Emphasis on the FIND, because as soon as they see that lil’ “enter coupon code” box, the most typical behavior is to open a new tab and start googling for any code floating out there.
So don’t give them a reason to leave if you don’t have to. Show them a coupon code somewhere prominent or…
The point here is to convince them that whenever they shop with you there are no savings left on the table.
Give them the ability to add one straight from the ‘add to cart’ panel. The point here is to convince them that whenever they shop with you there are no savings left on the table.
Now on now to the trickiest of all shopping behaviors:
When customers are in this state of mind, you need to be prepared to play the long game. So you’re shooting for such a great UX that they want to come back when they’re in hunting mode. So how are we going to do with this with your design?
It’s all about giving them enticing and intuitive ways to get deep into your catalog.
It’s all about giving them enticing and intuitive ways to get deep into your catalog. This means both your navigation and promo areas should serve as springboards into your catalog, the easier they are to find, and the more intuitive they are to the way your customer thinks, the better the odds of them remembering you when it’s time for them to come back and do some buying.
It helps to view yourself as a curator of a gallery.
And your products are all the works of art. In order to keep your visitors coming back you need to think of creative ways to package your works of art into collections so that it feels new & of course enticing.
And to keep things fresh you could vary the criteria you use to make these groupings, making sure, of course that the groupings are intuitive to your target customer.
So in addition to the standard product classifications, so maybe you curate a seasonal collection of products…
…or maybe group products by gender or by brands for example. I’m sure there are a million and one ways to do this so have some fun with it. But of course… test them.
One go-to place for facilitating discovery is through the Homepage hero area, usually populated with a number of different promos in a carousel or slider format. There’s been a lot of discussion about their usefulness. And while there’s no clear consensus, opinions seems to range from them being at best kinda useful to at worst harmful to your SEO, UX and site performance.
If you want a listing of reasons to NOT use a carousel just go here.
BUT, you should know that 52% of the Baymard Institute’s Top 100 ecommerce sites still use them. So if you have your heart set on using a carousel you’re in good company. And here are a few tips for making them as useful as possible:
1. Give Them the Reins
Make it easy to navigate between slides, even if you make it auto-rotate give the user the ability to stop, and go back when they want to.
2. Make the first slide count.
There’s a high probability that most visitors won’t see past the first slide, so don’t be shy. Make your most compelling case with an appropriate call to action on slide one. That being said…
3. Make them want more
Encourage them to see the other slides, like in this example, by using large thumbnails and a limited number of slides that you can easily change by rolling over them. This makes browsing them much less of a time investment and increases the chance the viewer will actually do that.
Of course, the story’s a little different on mobile. If you’re using an accessible, light-weight carousel plugin, then interaction with mobile carousels are actually higher than on desktop. The theory being that the physical action of swiping to forward the slideshow is easier than moving a mouse to a small arrow on desktop.
But I’d still recommend limiting the number of slides to less than five and focussing on the first one being your best sales pitch.
Now. If you’re up for taking the static plunge, then think about having some fun with that area. Here REI’s making use of the fact that there’s no carousel by putting the promos in an irregular and unexpected shape which increases the chance of people looking at it.
So which will work best for you? I dunno, maybe you should test it!
Another great place to help browsers sample your wares is the Category Page headers. A lot of times this page is where browsers will land to skim the surface of your catalog so they’re a great way to give them a taste and encourage them to dive in… If used correctly. If not, you’re just pushing products down the page just to tell people where they are.
So make that area work for you. For example, if you have promotion going that’s relevant to that category then this is a great place to feature it. And why stop at one? Best Buy’s using the space to highlight three promos. Yes they’re pushing the hunting-relevant content further down the page, but this layout tells me that they’re betting that most of their traffic to this page is either browsing or bargain-hunting. And they’re saying they’re willing to make that trade off.
Or use it to highlight a buying guide which will satisfy those eager researchers or browsers.
Just don’t throw up a static image, make it do something for your customer.
So that covers some basic behavior-specific design tips. Stay tuned as next time we’ll delve into the product detail page and see how simple adjustments to the look of this most important page can can have a huge affect on your conversions.