January 25, 2017 - No Comments!

Bringing ecommerce search and filter UX to content

In the realm of ecommerce, search and filter has gotten very, very good.  Best practice has consolidated around a few simple principles that many people expect as standard.  Yet when it comes to content sites like blogs or news, the same easy filter style has not been adopted widely.  It could be.

For ecommerce, a good search and filter experience usually operates like this (I'm assuming a desktop environment for this discussion):

  • Show the user all possible options from the get go (don't require drill down of categories first to see what's inside), usually down the left side
  • As user makes/removes selections, update the relevant item set of products that apply (don't require an extra interaction first like clicking "Search" or "Apply" to show impact of new filter choices)
  • Emphasize the context of applied filters by showing what has been applied
  • Give user multiple ways to remove any applied filters

Here are two examples of a good search and filter experience.

REI search

Product search on REI.com.


Seamless search

Seamless search - on Seamless.com.

Pretty straightforward.

Now consider a blog or news site.  Instead of the product categories above, we have subject categories and/or tags.  The problem with platforms like WordPress is that you cannot easily do a compound search selecting more than one filter category (or tag).  In the ecommerce setting above, this would be like if you could only make a single filter choice.

But why couldn't all available categories and tags on a blog be made available in a familiar left side search UX so that users could find exactly the content they want?  It would not be hard to do.

Search experience on blog

What if you could search for blog posts like products?

We should be able to make our searches for content every bit as precise as product filtering.  No doubt, this is coming soon.

Published by: Win Goodbody in Interaction Design, Usability
Tags: , ,

Comments are closed.