Like a scavenger hunt, without the funAnalog Devices (ADI) asked us to help them determine how their website might better serve their local needs in the US, China and Japan. Usability research we conducted with customers led to several insights; one of the most significant related to product data: users needed a lot of information to make informed decisions, and the existing site, with information spread across many pages, made it hard for them to find and read that information.
We determined that it was necessary for us to redesign their product pages so that users could easily access all of the information they needed with a few clicks without ever leaving the product page.
The SMAC Stack InsightsWhen designing product pages, review existing page metrics. Entry data, on-page behavior, and page exit data can highlight problem areas and guide user experience considerations.
Our solution: make the page bigger and richerWith limited space on their old homepage,” ADI’s content required visitors to click away from primary information to get the full story. Clicks slowed things down, and jumping from page to page was distracting—leading many visitors to bail before taking action. While some web developers, even today, still believe that anything “below the fold” is terra incognita, we believed that long pages would allow visitors to easily scroll through the whole story, or quickly jump to a key section. To enhance the experience, and keep visitors engage in content, we used a number of interactive tools, such as filmstrips and toggles. To assure visitors saw critical information, we prioritized content with the most important near the top.
Shattering the myth of “above the fold”
To prove to ADI that our long-page format would work, we designed several prototypes, with different combinations of cues, scrolls and navigation, and then went through a series of rigorous A/B tests until we found the winning formula.
With ADI convinced by the test results, we proceeded to refine and complete the new long-page product information page design.
Design engineers like it!
it’s getting results
Our redesign makes it much easier for design engineers to access all of the information they need to evaluate products. Here’s what makes ADIs long-page solution work:
- All the information a design engineer could possibly need is on one well-organized page.
- The page design provides visitors with visual cues that encourage them to scroll down and see everything.
- A persistent navigation allows users to move intuitively through page content.
- Navigation changes color to indicate page position.
- Animated scrolling gives visitors a choice of clicking and scrolling—allowing you to flow through or jump to content, depending on personal preference.