In usability testing we see that spec sheets on the Product Page can be immensely helpful to both users considering spec-heavy products, users with a high level of domain knowledge about a specific product type, and users trying to decide between different products of the same product type.
However, our large-scale Product Details Page usability testing consistently shows that many spec sheets suffer from design flaws that hamper users’ ability to use them effectively.
In fact, our Product Details Page benchmark shows that 50% of e-commerce sites have spec sheet designs that are difficult for users to scan. This ensures that most users will have to work harder to find the information they’re looking for, while others won’t be able to find the information at all, which can lead users to discard perfectly relevant products.
In this article, we’ll discuss 4 test findings from our Product Page usability study related to spec sheet scannability, including:
When users are presented with unorganized or ungrouped specification sheets, getting an overview and locating specific specs becomes very difficult.
In fact, during testing even relatively short spec sheets became unscannable when they were presented as a “wall of specs”. This forces users to spend more time trying to find specifications they’re interested in, instead of spending the time interpreting the relevant specs and how they impact their purchasing decision.
Yet our benchmark reveals that 23% of e-commerce sites don’t group specs semantically into sections.
Spec sheets of just medium length (for example, anything more than 20 specs) need to group the specifications into sub-sections of related information, each with a title.
The groupings and titles was shown in testing to allow for much faster scanning but also have the benefit of making the overall spec sheet less intimidating (by breaking up the “wall of specs”).
Furthermore, grouping the spec sheet into sub-sections ensures related specs are always presented near each other, further improving scannability. For example, including all specifications related to the dimensions and weight of a product in a “Dimensions & Weight” sub-section allows users to quickly access that content when first browsing the spec sheet.
Finally, specification grouping titles should be tailored to the type of product they describe. Hence, the specification grouping titles will need to differ across the product types sold, for sites that sell a diverse set of product types (e.g., titles in spec sheets for fridges will differ from titles in spec sheets for drills).
In a spec sheet, all information is not of equal importance. Most product types will have a few critical specs that most users will seek out.
While the most sought-after information in the specification sheet will vary across industries, it often is the same within product categories. Hence the sequence in which the groups of specifications are listed can be optimized, so that the most sought-after specifications are presented first.
In addition to helping users find important product specifications quickly, identifying the most important specifications is also a highly valuable asset if implementing truncation of the spec sheet.
For specification sheets exceeding two full viewports, consider if a summary of the key specifications should additionally be provided.
However, if using a summary, make sure the specifications contained in a summary are also repeated where applicable in the overall spec sheet, to ensure users can find them if they skip over the summary.
Furthermore, specification sheets that are shorter than two viewports will likely not require a summary of key points, but instead can rely only on a prioritized display sequence of the spec sub-sections.
Despite the benefits they offer, only 3% of sites use a summary to highlight the most critical product specs.
During testing it was clear how spec sheets without any horizontal styling made it difficult to trace the spec label to its associated value. The distance between the two simply makes it needlessly difficult and error prone for users to trace unstyled horizontal lines, especially given the often somewhat small font size used in spec sheets.
This stands in sharp contrast to the behavior observed in our eye-tracking study, where subjects at the sites that used horizontal shading (like alternating row colors) were able to both much more quickly and reliably trace the horizontal lines when associating the specification labels with values.
Background colors, icons, and lines are all techniques that can be applied to spec sheets to make the information more readable. An added bonus with some styling tools like icons is that they can give life or add visual interest to an otherwise dull and text-heavy list.
Our benchmark data reveal that 23% of sites don’t use such visual aids to help users scan and interpret the spec sheet.
In testing, a two-column layout was shown to make it much harder for subjects to locate and interpret information, when compared to a one-column design.
This tracks with our general findings on multi-column layouts for forms, where we found they should generally be avoided due to being prone to misinterpretation.
The most severe usability issue with using a multi-column format for spec sheets is that some users are likely to completely misinterpret the two-column specification sheet as a comparison sheet — rendering the data included almost useless. In other words, a user may think she is viewing specs for two different fridges, as opposed to looking at the specs for a single fridge.
Yet our benchmark reveals that 20% of sites use multiple columns in the spec sheet.
Instead of using multiple columns to conserve vertical height, consider truncating parts of the spec sheet in its default state. (See our article 6 Guidelines for Truncation Design for more on truncation designs in general)
By its very nature the spec sheet is difficult content to scan, as users must skim through very text-heavy content. To ensure users are able to use the spec sheet as efficiently as possible, and to avoid the issue of users discarding products because of design flaws with the spec sheet,
Lastly, beyond the 4 above items, the specifications in the spec sheet itself needs to have a uniform and consistent structure acrosss all products, which will require e-commerce sites to Post-Process Vendor-Supplied Product Data (something 52% of sites currently don’t).
Having highly scannable spec sheets will allow users to focus on what’s most important — evaluating whether a product meets their needs — instead of how to read and interpret a difficult-to-scan spec sheet.
This article presents the research findings from just 1 of the 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” product page user experience.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
I’d like some clarity on your REI eye-tracking study. Is the idea that providing visual distinction for ‘rows’ and ‘columns’ is helpful (vs having no visual structure dividing things neatly into rows in columns), or is this specifically stating that zebra striping has a measurable effect? All information I’ve seen previously has shown that zebra striping does nothing for the eye, if you your research shows something to the contrary that is truly noteworthy and needs its own article!
Hi Anthony, can see the example here is slightly unclear because the REI example use both alternating row colors and different column colors. What we saw in testing across sites was only that alternating row colors provide to perform better (than have no shading or divider lines – which makes it more difficult for users to trace the spec type/label to the correct spec value))
Thank you for the great article. What‘s about mobile?
Hi Katharina, all 4 principles would apply to mobile as well, you could argue some (like grouping specs semantically) are even more important on mobile since getting an overview of a long list is even harder on mobile.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 email@example.com