Product filter user testing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Noonday Collection, a fair-trade jewelry company with over 200 products, needed an improved e-commerce product filter beyond what their current template allowed. The design process involved researching and testing filter interfaces from major brands on desktop and mobile with real users, resulting in a customized, user-friendly filter that enhances the shopping experience.
- Collect input with in-person usability tests
- Design an effective product filter using a data-driven approach
Observing real users navigate a digital product is one of the most reliable methods for identifying usability issues. By watching users follow instructions as they use product filters on 4 big brand e-commerce websites, I was able to design a product filter for Noonday Collection that solved the problems encountered in the usability tests.
"it feels overwhelming”
“how do you remove a filter?”
“I wish you could clear all”
- Sort and filter should be adjacent. They’re related actions and separation isn’t expected.
- Instant feedback is essential post-click. Loading begs the question “did I select it?” and “is it doing anything?”. Loading without feedback also creates opportunity for additional clicking with unintended results.
- Provide a “Clear All” link. Clearing filters one by one is ok, but takes longer. A “clear all” is expected.
- Filter application should occur immediately post-click, prepare the user to browse, and display the applied filters. Additional clicking to shop, and scrolling to see selected filters is both frustrating and time-consuming.
- Altering applied filters must be intuitive. Applied filters must be large enough and spaced far enough apart to make tapping easy.
- Browser “Back” link should load previously filtered options.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.