While the left-column refinement had been an industry standard in ecommerce, some major players, such as Overstock.com had adopted a page-top refinement bar instead. The page-top refinement allowed for more products visible 'above the fold' and gave the page a cleaner overall appearance.
To test the horizontal page-top refinement, we planned to bucket only those visitors to our "Outlet" site into the A/B test. The overall conversion for Outlet was larger than the inline goods, but the traffic numbers were less, approximately 30% of our total traffic visited Outlet. The Outlet-only approach allowed us to run the test with less initial development:
With horizontal refinement, there were more products visible on page load. The vertical orientation, however gave the refinement more room to 'breathe' and better readability.
As an online shopper, I want a better way to see the breadth of products available, because my screen space is in short supply.
After the numbers reached statistical significance, we found that the horizontal refinement had about 25% fewer clicks per session, resulted in fewer product views per session, and had nearly 10% lower conversion.
After the month-long test period, the horizontal navigation was removed and the control was turned back to 100%.
Although development and design went smoothly and quickly for this project, the actual design of the horizontal refinement was severely blocked by the limitations that came along with the legacy code running refinement. A better separation between the display / code layers would have gone a long way toward more flexible layout options. Additional features such as multi-select, search-within, and sliding range selectors could have made a difference in the outcome of the test.
The initial user story for this project may have been a misdirection. Instead of a better way to see the 'breadth' of products available, the focus should have been on finding the fastest ways to narrow the products available.
