< Back
Pagination Redesign
Problem Statement
The main issue with the initial pagination on the site was that the visual indicator that lets users know how many items are currently displayed on the screen looks very similar to how links look on the page making it confusing. Which is the case of the underlined blue 10 in the image —>
Initial Design & A/B Testing
I designed this concept and submitted it for an A/B testing process to see what users thought. The idea was to provide options that solved the issue but also that were easy to implement and did not require much change in the existing code.
The results were a little inconclusive and instead provided some feedback which suggested I needed to go back to the drawing board. Basically users were not really happy with either option and those who picked were a little divided between the two options. [Option A] although considered to be very obvious, it felt bulky and even confusing. [Option B] was considered more visually appealing but not too far from the original issue we were trying to solve.
Second Round of Testing
A came back and generated 6 new concepts for the new pagination UI, this time most users selected option 1 which became the official interface. In this case, changing the way I was highlighting the number of items per page from a square to a rounded and smaller pill-like shape gave users both an obvious and clear understanding of the choice that is currently selected as well as it made it not too distracting or confusing as it was the case of the original design and the initial AB testing options.
