5 ‘Product Table’ Design Examples

Also referred to as: B2B Product Table, Product Data Table, Product List Table

What’s this? Here you’ll find 5 “Product Table” full-page screenshots annotated with research-based UX insights, sourced from Baymard’s UX benchmark of 251 e-commerce sites. (Note: this is less than 1% of the full research catalog.)

As observed during Baymard’s large-scale of usability testing, “Product Tables” are highly effective because they allow users to quickly scan, evaluate, and compare a wide array of complex product information to zero in on the most suitable products.
Therefore, consider using a “Product Table” instead of a “List View” on desktop to display search results and product lists for extremely spec-heavy products such as B2B electronic components and machinery. During testing, nearly all the manufacturer and distributor sites tested presented search results and product listings in a “Product Table”.

More ‘Spec Sheet’ Insights

In practice, “Product Tables” are optimal for supporting desktop users in evaluating and comparing extremely spec-heavy products because they allow users to view even more product attributes than is possible with a traditional “List View”. Additionally, “Product Tables” allow users to more efficiently and effectively compare the highly specialized and often complex attributes across multiple rows of products to quickly identify which items to examine more closely and which they can skip.
Learn More: Besides exploring the 5 “Product Table” design examples below, you may also want to read our related article “B2B Electronics Sites: 2 High-Level Takeaways from 2,500+ Hours Testing”.
Get Full Access: To see all of Baymard’s product page research findings you’ll need Baymard Premium access. (Premium also provides you full access to 150,000+ hours of UX research findings, 650+ e-commerce UX guidelines, and 275,000+ UX performance scores.)