Filtering for Reckon One list screens


Date: November 2016 – 2017 (Not released yet)
Client: Reckon
Description:
My Role: User Experience Designer
The Brief: To make filtering and sorting in Reckon One list screens more obvious for users.

Discovery and Research

We had been receiving consistent feedback that the filtering options on list screens were either hard to find, or getting complaints that users couldn’t filter lists. At this point, the filtering buttons would only show when the user hovered over the column titles for the list screens. So as a quick agile step, we altered it so that the buttons would always show. After that, I got feedback around the fact that:

  1. Users didn’t associate the icon with filtering
  2. Users still thought that they couldn’t filter list screens.

So while it made the icon more obvious, it still wasn’t good enough.

Ideation 1

The quickest thing to look at was to change the icon. I played around with a few ideas with different icons, but I felt like it was just adding visual noise that wasn’t necessary.

Icon idea 1 - filled arrows

Icon idea 1 – filled arrows

Icon idea 2 - double arrows

Icon idea 2 – double arrows

Competitor analysis

Competitors seem to have their filters accessed in one place – either always showing above the grid, or all options appeared after clicking on a button. I also had a look at Excel, which many of our users are familiar with to either analyse report data or used Excel for accounting before moving to Reckon One. Excel uses a prominent filter button, which made me think that a similar concept could be used.

Ideation

filter button

filter button


I discussed the idea of having a filter button with the Reckon One Product Owner and he suggested that we simplify the screen even further by showing the filter options when the show/hide columns button (wrench icon next to the add button) was clicked.

So I did that, but when I moved it to a laptop for user testing I realised that the drop down was too long, and was getting cut off. This would mean that users would have to scroll to access all of the filter options.

Filter drop down

Filter drop down

So I then changed it to a vertical layout to tackle this issue.

Vertical filters

Vertical filters

User testing

I wanted to find out if it was obvious to use the wrench icon to access the filtering options. I also wanted to see if removing and applying all filters here was what users expected.

User testing results

Fortunately participants found that accessing the filtering by the wrench icon to be intuitive, and having the ability to add and remove all filters here was expected.

Results

This is currently in development, therefore I do not know what our users think of this yet. I will update when this improvement is released.

Want to find out more? Get in touch.


Related Posts