Facet amounts made scannable by order of magnitude

Faceted search and facet amounts are one of the functions that makes searching in huge result sets bearable. And having the facet amounts explained with numbers to tell how many results each facet contain is a must. Problem is, it’s not very readable or scannable. This is an easy problem to fix.

Facet amounts as numbers

The facet numbers contain good info, but are not easy accessible for the user. with no alignment, and crunched together with the facet name.


Graphs on the other hand are visual representation of numbers, are easy for the eye to scan. You don’t need to read and process to understand the size relations between the columns/rows shown below.

Could graphs help us explain facet amounts

Did you have to read the numbers to understand the size relations?


The good thing is that we can achieve the same thing for our facet numbers by using the order of magnitude for each facet. Just right align the facet numbers and you’re pretty much there. If you’re lucky, you only need to add a small amount of CSS.

Facet amounts scannable by order of magnitude, kind of

Right aligning the numbers better show the numbers order of magnitude.


So, how could this be done better even better? Maybe by showing the numbers as bars with evenly spaced steps for each order of magnitude? I’ll test out the next chance I get. In the mean time, Photoshop will do:

Facet amounts scannable by order of magnitude, even better

Do we need the numbers at all? Maybe just to explain what the bars actually represents?


What do you think? All comments are welcome!

Article written by

Espen Klem
Interaction designer with a love for log reading, statistics and mind-bending, user friendly concepts.

Leave a response

XHTML: These tags are allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Couldn't connect to server: Connection timed out (110)