The responsive design revolution is truly upon us (if it hasn’t already happened!), and even though e-commerce websites haven’t picked up responsive design quite as aggressively as in other industries, it’s becoming increasingly popular.
So far, most of the responsive design thinking has revolved around covering the range of experiences from mobile to desktop. Yet little attention has been paid to the opportunities for expanding that range beyond the standard desktop screen, to create an experience optimized for modern large-scale displays.
When done right, filters enable users to narrow down a website’s selection of thousands of products to only those few items that match their particular needs and interests. Yet, despite it being a central aspect of the user’s e-commerce product browsing, most websites offer a lacklustre filtering experience. In fact, our 2015 benchmark reveals that only 16% of major e-commerce websites offer a reasonably good filtering experience.
Given the importance of filtering, we — the entire team at the Baymard Institute — spent the last nine months researching how users browse, filter and evaluate products in e-commerce product lists. We examined both search- and category-based product lists. At the core of this research was a large-scale usability study testing 19 leading e-commerce websites with real end users, following the think-aloud protocol.
When e-commerce search works, it’s fast, convenient and efficient. It’s no wonder that so many users prefer searching over clicking categories. Unfortunately, our recent large-scale usability study and top-50 benchmark of e-commerce search finds that search often doesn’t work very well.
On-site search is a key component of almost any e-commerce website. That’s why we at Baymard Institute have invested months conducting a large-scale usability study, testing the e-commerce search experience of 19 major e-commerce websites with real-world end users.
Product findability is key to any e-commerce business — after all, if customers can’t find a product, they can’t buy it. Therefore, at Baymard Institute, we invested eight months conducting a large-scale usability research study on the product-finding experience. We set out to explore how users navigate, find and select products on e-commerce websites, using the home page and category navigation.
The one-on-one usability testing was conducted following the “think aloud” protocol, and we tested the following websites: Amazon, Best Buy, Blue Nile, Chemist Direct, Drugstore.com, eBags, GILT, GoOutdoors, H&M, IKEA, Macy’s, Newegg, Pixmania, Pottery Barn, REI, Tesco, Toys’R’Us, The Entertainer, and Zappos. The pages and design elements that we tested include the home page, category navigation, subcategories, and product lists.
Touch devices have rightfully been praised for generally being much more intuitive than the decades-old computer mouse and keyboard. Users interact directly with touch interfaces, which narrows the gap between human act and software response.
Yet typing on mobile devices — in particular on smartphones — is quite the horror story. It’s slow, painful and error-prone. The obvious culprits are keyboard character size and proximity of the keys, but there are many other important aspects to consider.
Everyone is talking about mobile. Some e-commerce websites are venturing into it. Mobile commerce (also known as “m-commerce”) has immense potential, exhibiting a 86% growth rate and hitting $25 billion in 2012 (set to reach $86 billion by 2016, according to eMarketer).
It’s also a whole new platform, with new interaction methods and usage contexts that introduce a host of limitations and pitfalls to watch out for when designing and running an m-commerce website. With few best practices yet established, m-commerce is, to a large degree, unchartered territory when it comes to actual implementation.
Editor’s note: Welcome to Smashing Magazine UX Design Q&A. It works like this: you send in questions you have about UX Design, and each month we’ll pick a handful of questions asked by our readers about best practices in designing smart and usable experiences.
They will be answered by Christian Holst, a regular author here on Smashing Magazine and founder of the Baymard Institute. Prior to cofounding the Baymard Institute in 2009, he worked as a usability engineer in the hearing-aid, credit-card and consulting industries.
Welcome to a new column in the UX Design section on Smashing Magazine! Each month we'll pick a handful of popular questions asked by our readers around good practices in designing smart and usable experiences.
They will be answered by Christian Holst, a regular author here on Smashing and founder of Baymard Institute. Prior to co-founding Baymard Institute in 2009, he worked as a usability engineer in the hearing aid, credit card and consulting industries. If you have any questions that you would like me to tackle for a future Usability Q&A column here on Smashing Magazine, please ask them in the article's comment section!
A year ago we published an article on 11 fundamental guidelines for e-commerce checkout design here at Smashing Magazine. The guidelines presented were based on the 63 findings of a larger E-Commerce Checkout Usability research study we conducted in 2011 focusing strictly on the checkout user experience, from “cart” to “completed order".
This year we've taken a look at the state of e-commerce checkouts by documenting and benchmarking the checkout processes of the top 100 grossing e-commerce websites based on the findings from the original research study. This has lead to a massive checkout database with 508 checkout steps reviewed, 975 screenshots, and 3,000+ examples of adherences and violations of the checkout usability guidelines.
Error pages for form-field validation are dreadful. You’ve just filled out 20 form fields, yet you get the same bloated page thrown back in your face because a single field failed to validate. I clearly recall the often loud sighs of despair during our last usability study each time a test subject encountered a validation error page.
We reflected on this problem and got an idea that we call “error fields only” — which is exactly what this article is about. Before exploring this idea, let’s look at three traditional types of validation techniques: “same page reload,” “optimized same page reload” and “live inline validation.”