Thoughts Design Solutions Previous Thought Next Thought

Dating Advice for your Online Store, Pt 3

We're back with more advice on how to get your online store into long and meaningful relationships... With customers.

dating_advice_ecommerce_part3 (3)


Let’s start with the Hunting mindset. As I mentioned in the previous post, your goal is make sure these customers can find the product they want, vet it and get to checkout as quickly and easily as possible. Remember the hunters typically know exactly what they’re looking for – either because they’re replacing an item or they’ve already done all their research.

dating_advice_ecommerce_part3 (4)


So of course, priority number one is you need to make it easy to search.

Since hunters know what it is they’re looking for, they’re more likely to skip over navigation and jump straight to typing in the name or even SKU if they’re that savvy.

dating_advice_ecommerce_part3 (5)


So make sure they can find your search box.

A good rule of thumb on desktop for the search bar location is up top and close to the left.

In this example they saw an increase in conversions just by moving the search bar out of obscurity and making it easier to spot, by making it larger and more prominent. But one word of caution though…

dating_advice_ecommerce_part3 (6)


Like most things, bigger isn’t always better.

Going overboard with the length of the search box itself runs the risk of it looking just like a white box or a banner, making it blending in with the surroundings as you see here.

dating_advice_ecommerce_part3 (7)


But if you insist on over-compensating, then really emphasize it’s search-box-ness and make it instantly recognizable.

So think about highlighting the boundaries of the search bar and putting some instruction text inside it like you see in this example. Milliseconds count, so you don’t want there to be even a moment of doubt as to what that big white box is for.

dating_advice_ecommerce_part3 (8)


The same goes for Mobile – make sure it’s easy to find, usually as a bar on the top or as an icon on the top right. Which might seem like a no-brainer but you’d be surprised…

dating_advice_ecommerce_part3 (9)


And to be safe, don’t hide it behind a menu – that’s one more unnecessary tap, if they even know to go looking for it there in the first place. If you’re interested in more on mobile navigation, check out this article from Linda Bustos.

dating_advice_ecommerce_part3 (10)


Aside from searching, the next most important part of the hunting process involves narrowing down the options. So your job is figure out the best way to facilitate that filtering process for customers.

dating_advice_ecommerce_part3 (11)


Here’s the standard left column arrangement. This is the most popular placement for filtering so far since it gives the most space for longer lists of criteria. Therefore that’s where people expect to find it.

BUT be careful…

dating_advice_ecommerce_part3 (12)


It can get overlooked. Just like banner blindness happened to the right column, there’s a chance that the left column can get overlooked if it doesn’t stand out or you’re filling it with ads and newsletter signups. Don’t muddy the waters.

As you can see in this example, most of the attention is going to the center of the screen where the products are, as well as the sorting functionality. Which brings me to my second note of caution..

dating_advice_ecommerce_part3 (13)


Customers can also confuse “sorting” with “filtering” since they’re both functions that manipulate the way the product list is displayed.

So when they see an unmarked set of dropdown menus, typically right above the product list, they’re thinking “these are my options to narrow down the list”. And they focus on these when really, they’re looking for the unmarked functionality over here to the left.

dating_advice_ecommerce_part3 (14)


So how do you combat that? Well, the easiest way is to design your left column filters in a way that highlights them so they’re hard to miss. For example, labelling the functionality with a bold  “Filter by”, differentiating it from the “sort by” feature in the middle.

dating_advice_ecommerce_part3 (15)


You can also give it a different visual treatment so that it doesn’t get lost on the page. Here REI’s using background colors to draw customer attention to the filtering options.

dating_advice_ecommerce_part3 (16)


There’s another way to consider too. If you’re 80 to 90 percent confident that certain filtering options are critical to the hunting process for a product list, then you could take them out of the left nav and put them front and center above the list. Here Amazon is using the “Format” criteria in their Movies & TV section, because they’re sure that these options are critical for people hunting in this section.

So if you know there’s a set of options that gets used consistently when hunters are filtering down in a particular category, this might be an option for you. But don’t take my word for it. You should test it out!

dating_advice_ecommerce_part3 (17)


When it comes to placement, on desktop if you use left nav filtration, make sure it’s aligned with the product list . Otherwise the lack of proximity breaks the association between what they are doing on the left and the results that are showing up on the right and makes the UX seem awkward and adds unnecessary friction.

dating_advice_ecommerce_part3 (18)


Also, if you have more than eight items in a list, whether it’s categories or filter criteria don’t list them all, because after seven or eight items in a list, the whole thing just blends together into a wall of text and it becomes unusable.

dating_advice_ecommerce_part3 (19)


While your hunter’s filtering away you have to decide the best way to display those products on the category pages and search results.  

A Grid or a List? Even if you give them a choice to toggle between the two, you still need to pick the default display. So which is more suitable? It depends on how your customers make their purchasing decisions…

dating_advice_ecommerce_part3 (20)


If you sell products where your customers make decisions based on specs then a stacked layout would be the more useful default, as it gets as much of the decision-making details upfront and center

HOWEVER just know that the hunter’s attention wanes as you go down the list, so limit the number of items per page.

dating_advice_ecommerce_part3 (21)


If, however,  you sell products where how they look is the most important factor to customers, then a grid might be most useful, as this increases the number of products the hunter can skim through on one page.

So. It’s very important that you have high quality images to show them off since this is how your products will be judged. Also I’d follow Lowe’s example shown here and reduce the number of specs shown per product in order to maximize the space benefits of the grid format. This will make it easier for customers to skim through the list.

dating_advice_ecommerce_part3 (22)


So which is better for you? I don’t know. Why don’t you test it?

dating_advice_ecommerce_part3 (23)


And while we’re speaking of product lists; since researchers, that other customer type we’re getting to know today, aren’t looking to buy right now, it’s even more critical for this state of mind that you take some care in how you display your products.

dating_advice_ecommerce_part3 (24)


Regardless of which display type you decide to go with as your default, make sure to show the right amount of info for each item on these listing pages.

dating_advice_ecommerce_part3 (25)


Too little information, like this example that only shows the product name and the SKU, causes pogo-sticking (you know, where they bounce back-and-forth between the detail page and the list page) which in turn reduces the likelihood that they’re going to convert, especially when you’re on mobile. More on pogo-sticking here.

dating_advice_ecommerce_part3 (26)


On the other hand, TMI causes scroll-fatigue as each item takes up so much space on the screen. It also makes product comparisons harder since you can’t fit more than one or two items on the screen at the same time.

dating_advice_ecommerce_part3 (27)


Also, remember visual hierarchy applies here too. If you need to show a lot of technical specs to help the researcher then make sure they’re laid out in an easy to scan manner, like the example shown here. Use bulleted lists and a simple clear information layout.

dating_advice_ecommerce_part3 (28)


In this example there are so many colors and text sizes that it results in an unclear information hierarchy so it’s hard to pick out what’s important. Remember what I said about things competing for attention?

dating_advice_ecommerce_part3 (29)


Well imagine all of that multiplied when you have a whole page of these items. Comparing products becomes unnecessarily difficult. Which means, they’re gonna bounce.

So, that does it for the Hunters and Researchers. I hope you’ve got a better understanding of what your store needs to deliver to keep them interested.

Stay tuned for next time when we’ll dive into design tips for the Bargain-hunters and those ever elusive Browsers.

Andrew Davies

Drew's degrees in Illustration, 2D animation and Broadcast Design, and his volleyball skillz mean he can get your design done and play well with others at the same time. He’s the Creative Director at Paragon and will call you out if you start hanging out with shady-looking fonts and messing around with whacked-out color palettes.