4

Scenario:

  • A website has a list of ~10,000 books
  • A user would like to discover a book they might enjoy via genre (there are 15 to choose from)
  • He ticks a checkbox to show only books that include the genre "thriller"
  • Too many books appear that also contain the genre "horror" (the user doesn't like horror)
  • The user would like a way to exclude "horror" from the returned list of thrillers.

I'm looking for a non-clunky way of allowing the user to exclude genres that preferably doesn't clutter or interfere with the "include" list (it is a solid, simple UX that is to be considered primary method of filtering). I would also like to avoid having to list all 15 genres again in another checklist. There are other type of common filters as part of the same UI (length, sort by, keyword search) however I only need help with the above.

My only thought it to maybe keep the excludes initially hidden unless activated somehow.

The area in the UI is a full-height sidebar ~250px wide and is independently scrollable.

1

Use a 3-part control next to each Genre:

  • Include
  • Exclude
  • Don't Care

At the top also have a "All" selection so the user can easily mark all as "Include" (and then manually Exclude or Don't Care some), "Exclude" (and then manually Include only the ones they want), "Don't Care" (and then manually pick & choose).

It could be 3 buttons, but that takes a lot of space. Alternatively, a slider that changes color might work well - Include = green, Exclude = Red, Don't Care = yellow.

  • This works well. My thought to avoid 3 buttons would be to have the 3 states rotatable per click. eg: No click - No preference. First click - Include. Second Click, Exclude, Third click - back to No preference. Not immediately intuitive just by looking, but quickly understood after a bit of interaction. – Mr DC Jun 12 at 12:40
0

What about a word cloud, as in the following mockup:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Upon clicking on a particular genre in the word cloud it gets crossed out or greyed out to allow the user reverse their choice should they change their mind.
Selecting another genre in "Specify genre" list generates completely new search results with new word cloud.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.