Good usability is important in online shopping. Here’s a little story of how my online shopping journey ended up in a list of usability problems that you should avoid if you don’t want to miss sales.
Some time ago, we needed a new carpet. So naturally, I took to the Internet.
I started browsing through some home decor retailers. I wanted to find inspiration for our dream carpet.
And, of course, to eventually make a purchase.
During my search, I interacted with many kinds of browsing and filtering features. Category listings, text inputs, checkboxes, value sliders…
Search tools and filtering options are an essential part of an online shop’s success. After all, if your customers can’t find what they want, they will leave.
And additionally, the easier your customers’ shopping experience is, the more likely they’re going to convert to sales.
But as I browsed through the online shops and myriads of carpets to find what we wanted, I encountered some problems. Problems like bugs or user interface oversights that made my search more complicated than it should be.
If I hadn’t been as persistent as I am, some of those problems might have even stopped me from browsing altogether. And that shop would have lost a potential sale.
Now, as pursuing good usability is very close to my heart, I wanted to highlight some of the biggest problems that I had when trying to find our dream carpet. I’ll also add my thoughts how each problem could be fixed.
Problem #1: I can filter things in, but I’d rather filter things out
When an online shop throws hundreds, even thousands of carpet options at me, I love using filters. I can just click a condition checkbox (like carpet shape: “Rectangular”) and it would exclude all the products that didn’t fulfil the condition. Leaving me only the carpets I wanted to see.
Choosing what you want sounds very intuitive. However, I felt many times that I actually would have preferred to choose what I didn’t want.
Because there were usually less conditions that I didn’t want than there were conditions that I wanted. For example, didn’t want to see carpets made out of hemp or animal hide, but I wanted to see all the other 10 materials.
But because how the shop’s filtering system worked, I had to click on the 10 materials I wanted. Instead of just the two materials I didn’t want.
Sure, my problem isn’t that big when there aren’t that many conditions. But when there were dozens of conditions and I had to click most of them on, I really wished I could do the opposite.
Suggestion: Let customers choose wether they want a condition to exclude products or include them. Putting on an “I want this!” mark (usually a plus sign) shows products that fulfil the condition. Putting on an “I don’t want this!” mark (usually a minus sign) discards products that don’t fulfil the condition.
Problem #2: I can’t use a category as a filter
Category pages are the most basic way to help a customer find what they want. They are like aisles in the brick and mortar shops.
Example: when I wanted to find carpets, I went to a “Home” category. There, I navigated to a “Home decor” category. And from there, I navigated to “All carpets”. And to see carpets made of viscose, I entered the “Arabic style carpets” category.
However, many online shops seemed to think that something like Arabic style carpets should only be a category. But why wouldn’t it be a filtering option as well?
Because if it were, I could just go to the “All carpets” section and use the filtering tools to see all the carpet categories I wanted in one sitting! I could have chosen to see Arabic style carpets, living room carpets and natural fibre carpets. And not be bothered by bathroom carpets and outdoor carpets.
Suggestion: Let descriptive features be filters whenever possible. You can collect thematic or seasonal categories for your customers’ leisure, but also consider if that theme could be useful as a filter.
Problem #3: No min-max sliders for running values
Min-max sliders are a handy way to set the minimum and maximum values for numerical features, like product length and price range.
While browsing carpets, I always set the minimum and maximum values for carpet dimensions. That way I didn’t have to waste my time falling in love with carpets that wouldn’t fit into our size requirement.
But, a couple of online shops didn’t give me sliders to determine my desired size. Guess what they offered instead?
Hundreds of checkboxes. One for each length and width combo that existed!
Let me demonstrate what it looked like: 60×90, 60×95, 60×120, 70×110, 70×140, 70×150… [insert 200 other size variants here] …240×240, 240×330, 250×350, 300×400.
With that kind of implementation, I had to eye each and every single item and click on the ones that fit within our size requirements! That must have meant 50 clicks at least!
Suggestion: Display numeric filtering values as sliders. Or at the very least as a text box where people can write out their numbers!
Problem #4: Accessibility denied
Accessibility should be a given for today’s website designers. It’s the mindset that guides them to design user interfaces so that they’re as usable as possible to as many people as possible.
With good accessibility, people with impairments (such as weakened eye sight or downright missing limbs) can shop at online stores without needing a human assistant. They can browse and make purchases just as any one of us.
Accessibility empowers people.
Moreover, accessibility benefits everyone. Not just impaired people.
As a power user, I like to switch between the mouse and the keyboard depending on which is more effective for a given task.
When I browsed carpets on this one online shop, I wanted to discard the products that were too small or too big for our size requirements. So I went for the min-max slider to adjust the minimum and maximum size.
However, this particular slider could be adjusted with a mouse cursor only. In many other shops, they would also let me type in the exact minimum and maximum sizes.
But on this shop, I had to drag the slider with a cursor. Controlled by a mouse attached to a wobbly human hand of mine.
The mouse is not ideal for precision-demanding tasks. Keyboard is!
When you can’t control a website with your keyboard, it’s also an accessibility problem. You’re hindering people’s ability to shop on your store!
Suggestion This should be obvious: Always design accessibility in mind. At the very least, make sure all the inputs (links, buttons, text fields) are accessible by keyboard!
Problem #5: I don’t trust color filters!
This last problem is probably on me. Nevertheless, it’s something I encounter every single time I interact with online shops.
I don’t trust the color filter options!
Because I don’t know what happens if I click, say, “Red”. Does that bring up solid red carpets only? Or does it also include ornate carpets that are mostly red?
Moreover, does it include colorful carpets that are overall on the red side as well?
What about clearly multi-color carpets that have red in them?
Speaking of multi-color, what is a “Multi-color” filter supposed to be? Does it bring up carpets that don’t have any dominant color? Who decides when a carpet is a multi-color and when it is more of specific color?
Color is subjective. Each of us sees and interprets them differently.
So, how can I be sure that all the carpets that I would categorise as red are indeed under the red category? Maybe someone has thought some of them as orange?
Too many questions. Too much uncertainty. That’s why I don’t want to use color filters.
Suggestion: It’s better to offer a small range of color filters rather than a large range. If a product falls somewhere in-between two of your color filters, drop it into the both existing colors. Of course, you can also very carefully consider if a new filter would be a better option.