4

Background:

I'm designing a search UI for power users and I'd like to visualize the selected criteria and result counts. The list of actual search results are shown below in the UI.

The user can add search terms that are then AND'd together. The search terms are built with a UI and represented as text.

For simplicity, here I'll abstract the items that are searched to the alphabet A..J, and search terms to things like "letter is between A..F".

When the user adds search terms, he/she should be able to see which terms narrowed down the search results. I'm thinking of a funnel-like approach, something like this (but with proper graphics of course):

All items:                  ##########   10/10
    letter is between A..F: ..######..    6/10
AND letter is between C..D: ....##....    2/10

This first one was easy, because the items in C..D are also in A..F. So far we could visualize this the same way as eg. SEO funnels, that's why I've centered the graph above. But problems arise when a latter search term finds items that are already filtered out. Below I'd like to be able to show the user that the term "F..H" found three items but only one that was also in the resultset restrained by the first term.

All items:                  ##########  10/10
    letter is between A..F: ######....   6/10 => 6/10
AND letter is between F..H: #--.......   3/10 => 1/10  <-- how to visualize this?
AND letter is between H..I: --........   2/10 => 0/10  <-- how to visualize this?

Of course, the real number of results may be thousands, and the items don't necessarily have only one possible sorting.

Is it possible to visualize this data so that

  • the visualization is easyish to grasp (or ignore in cases where the user is not interested)

  • works quite ok when the resultset changes are relatively big or small, eg. 100% => 1% or 100% => 98%

BONUS:

The user can also add search terms that are OR groups. These OR groups are then AND'd to the master list. How would you visualize this?

All items:                      ##########  10/10
AND letter is between A..F:     ######....   6/10 => 6/10
AND ONE OF THESE:
  *    letter is between F..H:  ###.......   3/10  dim/indent/etc this line?
  * OR letter is between H..I:  ###.......   3/10  dim/indent/etc this line?
=====>                          #---......   4/10 => 1/10
1

What you are trying to do is show the magnitude of flow or the transfer of flow within a system. In your case, search results Between A to Z, where the sub systems can be A to D, E to G, H to Q, Q to Z; and by using a funnel you can show with hierarchy how you got the 100% for A to Z from the sub systems.

I'd argue you that this type of a visualization deals with relationships and hierarchy, meaning my go to choice would be a Sankey Diagram.

here's an example: enter image description here https://flowcharts.llnl.gov/

enter image description here http://bost.ocks.org/mike/sankey/

And ofcourse, there's no limit on what you can do with the concept, for instance I made this one to add attributes of venn diagrams to the sankey diagram; there by showing relationship between systems that make up the funnel.

enter image description here http://bl.ocks.org/Rayraegah/73a55147d6962f4636f6

0

Why not use the Venn diagram. Easyish to grasp, a bit harder to ignore if big. Scalable if you include the result counts and if there isn't that many search terms.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Or if the search terms return results that have been already filtered out.

mockup

download bmml source

BONUS

Using color to differentiate between logical groups you could add OR groups as well.

mockup

download bmml source

You really need a legends for that one. Also having animation to show the sequence search terms are processed could help the comprehension.

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.