Summary: Dissecting the anatomy of specification sheets on ecommerce platforms. Using Amazon as a case study to illustrate common pitfalls and practical advice for crafting more user-friendly tables where users can compare multiple items.
My UX Roundup newsletter for December 18 included a story about the Baymard Institute’s UX guidelines for ecommerce product pages. Since their article was overwhelming (there’s a lot to be said about product page usability), I focused on one point that was easy for me to visualize: showing the size of products in context.
A second point also deserves its turn in the spotlight: the terrible usability of specification sheets on most ecommerce websites. These comparison tables are not just a problem for ecommerce, but also for many information-dese sites that present information tables.
Amazon.com is loved for excellent product selection and fast fulfillment, but let’s put its web usability under the microscope, focusing on specification tables. (Corporate design discussion by Dall-E.)
Amazon.com Bad Example
Let’s review an example from an Amazon.com product page. Many sites make similar design mistakes, but I pick on Amazon for two reasons:
Amazon is giant enough that they can take it and also big enough that they are fair game for a usability critique. A small site with one or two UX professionals on staff and a handful of engineers might have equally bad design, but it would be unfair of me to pick on them since the team is probably doing the best they can with limited resources. Amazon has close to infinite resources, so when they make a mistake, they should be hammered.
Amazon is not a role model for usability that other websites should emulate. Amazon has a huge product selection and speedy fulfillment. But UX-wise, many design elements of Amazon’s website are distinctly suboptimal, especially compared to the designs fielded by domain-targeted vertical ecommerce sites. Many stakeholders think that because Amazon makes a lot of money, their design is worth copying. Pinpointing weaknesses in Amazon’s user experience is a service to the community. I’m giving my UX friends in other companies a counter-argument when their stakeholders suggest, “Let’s just copy Amazon.” (Or Google, which is also often wrong, especially in its enterprise apps and dashboards. They make all the money from search, which shows in the usability of everything else.)
Amazon.com is not a role model for usability. Don’t copy its web design for your website without a thorough usability analysis. (Design debate by Dall-E.) I just noticed that the male designer has 3 hands. Let’s hope this boosts his productivity in Figma.
Here are the two specification tables on Amazon’s product page for a USB stick. These two are not actually next to each other on the product page, but I have removed all the page elements that are not part of my current analysis.
The top table lists detailed specifications for one specific product. The second table contains a comparison between this product and similar products. (Source: Amazon.com.)
Usability Problems Galore
Several of the usability problems described in Baymard’s article are apparent in these two screenshots:
The top spec sheet is not scannable, and the list of items is disorganized. A better list would include subheads for major categories, such as size, hardware compatibility, and performance. For example, the information that this is a USB stick is scattered across 3 different list elements that are not grouped together.
Specification labels are unexplained. What does it mean that write speed is “10x”? Ten times what? (And read speed is missing, though that’s often the most critical performance parameter.) In the comparison table, what is considered basic vs. everyday vs. advanced applications? Baymard suggests using tooltips for label explanations, and at least for a desktop UI, that’s probably a good solution.
The comparison table specs have not been harmonized but are sometimes not comparable. For the read/write speed, the first product has no speed given, the second has “10x faster,” and the last two provide estimated megabits per second. Note that the comparison table lists read speed, whereas the individual-product spec sheet provides write speed. This further complicates comparisons. The third stick is stated to be compatible with mobile devices, whereas nothing is said about mobile for the other products. Does this mean they are incompatible with mobile or is mobile considered part of “& more” for the first two items?
Poor users, trying to read & understand Amazon’s spec sheets and comparison tables. (Image by Dall-E.)