UX research 2018-1 - Filtering interface with performance meter

Subject: There is a list of results, block of content, that are measured by category and filterable by clicking on the meter or/and by clicking on buttons to apply filter by another category.

Test information

Wireframe tested

Desktop view:

Desktop wireframe

Mobile view image:

Mobile wireframe

HTML source code

Technical implementation notes

The results, as showed in the bottom of the screen capture, was showing more information when the user click on the expand/collapsae link illustrated with the arrow.

The data was loaded from an external JSON file.

Each meter for the category A was also a link to apply filter.

Between the displayed result and the filtering options, there is a tag cloud allowing to remove a previously applied filter.

Task results

List of recommendation


Filters don’t appear to affect display

Whath out for false floors!

Context: Desktop view with a descriptive box of [category B] between [category B] and result items

Search isn’t apparent

Issue found

Reset filters

Hard to pick out relevant information

Information hidden behind details/summary

Filter [category A] flags were very successful

Results layout - simpler?

Layout issue - smaller screens or bigger fonts.

The [category B] that span on multiple row and kept in 3 column do not reflow well when the items in the columns are not in the same height.

The effect is:

Mobile layout - pretty clean

Other issue (but not found in usability test)

Several Style guide issues

Proposed improved wireframe

Visual of the improved layout improved layout


That new layout has been used like that since March 2018, (consider today as end of June 2018) and we received a lot of positive feedback. The subject matter expert that sponser the content with that layout seems to be happy with the design and with it’s effiviency for their audience.