B2B Electronics Sites: 2 High-Level Takeaways from 2,500+ Hours Testing

Key Takeaways

  • Our new research has uncovered 1,100+ usability issues specific to B2B Electronic Components and Machinery sites
  • The research has resulted in 275+ guidelines that describe the issues, as well as design patterns verified to perform well for users
  • In particular, the research provides insights on the content and features B2B Electronic Components and Machinery sites need to provide users to ensure they’re able to make a purchase decision

At Baymard our research team has spent 2,500+ hours usability testing and researching Business-to-Business (B2B) Electronic Components & Machinery website features, layouts, content, and designs — leading to our new study on B2B Electronics Components and Machinery UX.

The research is based on more than 168 qualitative user/site usability test sessions following the “Think Aloud” protocol (1:1 remote moderated testing).

As the sites are geared towards specialists and industry professionals, our participants were all B2B industry professionals experienced in engineering, purchasing, or manufacturing electronic components and machinery.

The research focused on 15 U.S. and global manufacturer and distributor websites offering electronic components and machinery:

Manufacturer sites: Analog Devices, Microchip Technology, Microchip Direct, STMicroelectronics, STMicroelectronics eStore, TDK Corporation, and TE Connectivity.

Distributor sites: Arrow Electronics, CoreStaff, Digi-Key Electronics, Farnell/Newark/element 14, Future Electronics, Mouser Electronics, RS Components, Ltd., and TTI, Inc.

During testing the users encountered 1,100+ medium-to-severe usability issues.

These issues have subsequently been analyzed and distilled into the 275+ UX guidelines found within our B2B Electronic Components and Machinery research study (all of which are available as part of our Premium research findings).

The 275+ guidelines cover most aspects of the online exploration and purchasing of Electronic Components and Machinery, at both a high level of general user behavior as well as at a more granular level of specific issues users are likely to encounter.

In this article we’ll introduce 2 high-level UX findings for B2B electronic components and machinery sites:

  • The “Product Table” is critical to get right to ensure a high-performing site
  • Product details pages need extensive and specific info to allow users to make purchase decisions

The B2B Electronics “Product Table” Is Critical to the UX

The backbone of a great product-finding experience is a well-designed layout of lists of products.

Extremely spec-heavy products like B2B electronic components and machinery typically have many complex attributes that factor into a user’s purchasing decision.

Therefore, the layout or “View” used to present the product listings significantly impacts the site’s overall performance.

I can scroll through, and it will show me some of the attributes of the part — probably the same attributes as when I click into the part — which helps a lot“, explained a participant (a computer engineer) as he scrolled horizontally in a “Product Table” at Newark. As observed during 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.


Testing confirms “Product Tables” are optimal for supporting desktop users in evaluating and comparing extremely spec-heavy products such as electronic components and machinery because they allow desktop users to view even more product attributes than is possible with a traditional “List View”.

(Note: while mobile users weren’t tested — see note at the end of this section — it’s likely that on mobile sites “Product Tables” will be much less useful, and therefore a traditional list view layout is recommended.)

Additionally, “Product Tables” allow desktop users to more efficiently and effectively compare the highly specialized and often complex attributes across multiple rows of products to quickly identify suitable parts for their projects.

“Oh wait, how do I? [Sighs] I see that there’s another column here, but I can’t seem to get to it because this sliding bar seems like it’s maxed out. That would probably be a problem because I can’t get to it. So, that’s not helpful.” This participant (an electronics engineer) spent nearly a minute trying to identify how to scroll horizontally in the “Product Table” at Microchip Technology because the horizontal scrollbar was attached directly to the bottom of the table and, therefore, only visible after scrolling vertically. After he scrolled to bring the additional columns into view, he had to scroll back to the top of the table.

“I can’t really tell what type of footprint it is, and I don’t know the other things. Some other sites I’ve used give you [more] information — ‘input current’, ‘output current’, the maximums, — all that information will be on the same page.” After scrolling the entire length of the “Product Table” at Future Electronics, this participant (an electronics engineer) shopping for DC/DC power supplies missed the off-screen columns containing her desired product attributes. She resorted to opening individual datasheets to verify the details instead.

“It’s good. It’s clear. I know that I can keep scrolling to the right to find all sorts of details. I know that on the very right, it’s going to have the ‘size’ [and] ‘temperatures’ somewhere there. That’s a big one for me. It’s easy to scroll this way.” This participant (an electronics design engineer) easily located the horizontal scrollbar, which was affixed to the bottom of the screen while the table was in focus, to view additional attribute columns in the “Product Table” at Digi-Key Electronics.

Now, it’s important to remember that “Product Tables” are information-dense and frequently require vertical and horizontal scrolling to evaluate and compare products.

As such, the visual design of the “Product Table” itself can significantly impact users’ ability to efficiently and effectively scan the product data.​‌‌‌‌‌‌‌‌‌‍‌‌‌‌‌‌‌‍‌‌‌‌‍‌‌‌‌‌‌‌‌‎

Therefore, it’s important to make it easy for users to navigate the table; for example, by providing “sticky scrollbars”, persisting column headings as the table is scrolled vertically, and optimizing the table for scannability.

“They’re all out of stock”, complained a participant (a senior hardware engineer) viewing “Logic Gates” in the “Product Table” at RS Components, Ltd. He clicked the “Add to Cart” button displayed in the “Product Table” item details for an out-of-stock part, then navigated to the cart where he discovered an estimated replenishment date: “Okay, it’s at least giving me a date.” Requiring users to open a product details page or add an item to the cart simply to learn if and when a part will be restocked needlessly increases the time and effort required to identify suitable parts.

Additionally, during testing, participants were unable to effectively evaluate and compare items in the “Product Table” when important attributes or thumbnails were not included in the item details.

Not only should key general attributes like part number, name, price (including MOQ), and thumbnail be included, but so should category- and product-specific attributes that are vital to users’ ability to identify relevant products.

Likewise, product life cycle status, inventory, and lead time are of primary importance for users assessing whether an item meets their current or upcoming product-design schedule.

Furthermore, if attributes are only included for some products, but not all, comparing items in the “Product Table” becomes needlessly difficult.

“So, I want to have ‘Sort Ascending’ — it’s going to show me the cheapest one”, explained a participant (an electronics engineer) as he triggered a tooltip that verified the sort direction for the “up” arrow in the “Price” column heading in the “Product Table” at Digi-Key Electronics. “Okay, this is good…This is what I wanted. So, this is perfect”, he remarked as he scanned the resistor kits in the updated, budget-friendly order. Tooltips are key when it comes to explaining how clicking an indicator arrow will actually sort the “Product Table”.

Finally, the ability to effectively sort and filter the “Product Table” is crucial to users’ ability to use it to find suitable products.

Sorting is particularly popular as a soft-boundary alternative to filtering, with many participants opting to sort the “Product Table” by attributes they can’t typically filter by — namely, price and inventory (“Availability and price are like the two most used sort options here, I’d say”).

Indeed, sorting proved a powerful feature during testing of B2B electronic components and machinery sites and was often combined with filtering.

When it comes to filtering, 100% of test participants filtered — or attempted to filter — items in the “Product Table” (“You need to narrow it down so that you’re not spending hours looking through things.”).

However, the layout and interface styling of “Product Table” filters can significantly impact users’ success at locating suitable parts for their product design.

Fortunately, testing verified the optimal filtering layout for use with “Product Tables” and identified multiple, related interface styling details — as well as features such as including the ability to search — crucial to the successful application of filters to the “Product Table”.

Note: in Baymard Premium you may notice that these guidelines are limited to desktop devices. Although mobile usage is increasing, desktop usage still dominates for complex tasks such as product configuration, downloading technical information, and placing orders. On average, our tested B2B electronic components and machinery sites receive 73% of their monthly traffic from desktop devices, with some sites receiving as much as 83% of all traffic from desktops. Therefore, we only tested participants on desktop devices.

B2B Electronics Product Details Pages Need Extensive and Specific Info

The product page at an electronic components and machinery site must effectively accommodate anything from a simple tool such as a hand crimper or tweezers to an extremely spec-heavy electronic component like a microprocessor.

On top of this, different manufacturers may provide their product information to distributors in widely differing qualities and amounts.

“I’m seeing that this one has 1,000 parts available, and this one only has 30. So right now, this part is a winner, even though it’s almost double the price. This part is the leading candidate at the moment”, explained a participant (an electronics engineer) as he easily compared two semiconductors at Arrow Electronics, favoring the one with a larger in stock quantity.

Therefore, it’s critical that electronic component and machinery product details pages offer extensive information on products — and do so consistently for all products.

In particular, product details pages need to provide datasheets, pricing tables, details on shipping and stock status, and compatible parts info, along with product page “basics” like 1–2 product images, detailed product descriptions, etc.

In testing, failing to provide any of the above often resulted directly in participants abandoning the product, and sometimes the site as well, if they felt that the lack of detailed product information was a sitewide issue.

Furthermore, users at the product page are often at very different stages of their purchasing decision: some users may know the exact part number they need for their project and will want to jump straight to confirming key inventory and pricing details (or even checkout), whereas others are newer to the product domain and therefore need to closely examine the product specs and dive into the manufacturer’s datasheet and additional digital media, such as CAD files and other downloadable technical resources.

It’s key therefore that the product page supports both users looking to move as quickly as possible to completing their order, as well as those who need to explore product details in more depth, by making crucial information prominent and easily accessible, along with providing the product details described above.

The combination of the product page being the centerpiece page in users’ purchasing decisions, the potentially extreme diversity of product types the page must be able to accommodate, and users’ varying use-contexts for the page makes it vital that the product page implementation is “state of the art”.

Otherwise, failure in the product page implementation will often lead to failure in the user’s e-commerce experience.

Help Your B2B Electronics Users Quickly Find and Purchase the Parts They Need

Of all the industries we’ve researched at Baymard, the B2B electronic components and machinery sites have been the most highly specialized.

However, while the B2B product attributes, the B2B user-purchasing preferences, and the B2B terminology vary greatly from B2C e-commerce, we do observe in testing and in our many UX audits of B2B sites that how any user responds to and interprets an e-commerce interface is often consistent across a wide variety of different sites.

This is because user behavior on any particular website — and in particular web interface interpretation — is largely based on common human web behavior.

This is a user behavior that is mainly shaped by the current and prior experiences from the “globalized” interfaces where users spend the majority of their online time.

That said, we’ve identified many, significant areas where the needs of B2B electronic components and machinery users differ drastically from general e-commerce users.

Failing to get this right — as described above for the “Product Table” or product details page — will lead to less efficient browsing sessions, frustrated B2B users, and lost sales, as users abandon a disappointing site for one that better supports their needs.

Getting access: all 275+ B2B Electronics Components and Machinery UX guidelines are available today via Baymard Premium access. (If you already have an account open the B2B Electronics Component and Machinery study.)

If you want to know how your electronic component and machinery website performs and compares, then learn more about getting Baymard to conduct an Electronics Component and Machinery UX Audit of your site.)

Authored by Edward Scott on May 8, 2024

If you have any comments on this article you can leave them on LinkedIn

User Experience Research, Delivered Weekly

Join 37,000+ UX professionals and get a new UX article every week.

A screenshot of the UX article newsletter