Change filter based on UX test

[jdrubin]

During the first round of Top Task Testing, we looked a lot at the filter feature that appears on many pages.

Closed

Open

Our test found some issues around discoverability and affordance. I can think of two fixes that are hopefully easy that can address some of these concerns:

1. Change "Show" to "Show Filter" Problem: Our tests showed that people looked at the "Show +" text on the filter, but then kept moving because they didn't see the word "Filter" - even though it's located on the left hand side.

Solution: Given that people's eye's gravitate towards buttons anyway, I think adding "Show filter" could aid in the discoverability of the tool:

2. Make it clearer that the Topic drop down is actually a drop down Problem: Participants often didn't click on the Topic box, or when they did they said they expected something different. I think that's because it's not clear there are topics inside it - people didn't understand that "choose up to five" meant there were options below.

Solution: I think all we need to do is use the combo box that we've used on OAH and other pages.

So it would look like this:

What do you think?

[jdrubin]

@ielerol Lorelei, is this change good to go? Thanks.

[ielerol]

I think we need some more eyes on these recommendations. @marteki are any of these suggestions inconsistent with changes you'd like to see made to the filter?

@nataliafitzgerald these are small tweaks that seem to me like they should be easy to make in line with our standards, but do you see anything you have concerns about?

[marteki]

None of these are inconsistent with changes or issues I'd like to see made.

My previous project team wasn't able to test the filter specifically, but participants did engage with filters at various points during the testing sessions. We also explicitly tested pages that used expandables; they suffered from a similar lack of recognition about the need to click to reveal more information, and also have the call to action being labeled with only a "Show" rather than something more complete or explicit.

I'm in support of adding the downward arrow to the... topics filter option field? (I can't find documentation currently on the Design Manual for this specific field and how it should interact, so I'm guessing at the official name.) I feel that is a much clearer indicator of what's about to happen to the field (a dropdown is going to appear with options) rather than the text field indicator that we currently give.

[jimmynotjim]

The filter option field is the mutliselect (though that should not be the final name because it could easily become a single select) we created as part of v1 and has never made it to the Design Manual or Capital Framework, though I'd like to see it get there.

[nataliafitzgerald]

@jimmynotjim If we do find ourselves in a place where we're moving the filter into Capital Framework or making these updates to the codebase in which this now lives (cfgov-refresh?) I have some visual bugs that I'd like to see get fixed as well. These improvements are detailed in the Platform repo and include indenting items with multiple lines (like we do with bullet lists), and topic tags breaking at greater than 29 characters (where the tag breaks to 2 lines sometimes leaving just the X on the second line).

[kurzn]

@nataliafitzgerald it will be good to understand what design tweaks you're thinking as we start getting into CCDB 5.0, which will have lots of filter elements on it.

[jdrubin]

All, sounds like @marteki is OK with the decision to make changes. @ielerol - since @nataliafitzgerald @jimmynotjim and @kurzn seem to have input as well, I'll schedule a meeting for us all to review the test findings and next steps.

[jdrubin]

Good call yesterday. Here is our list of "to do" items for the filter:

1. Change title of widget form "Show" to "Show filter"
2. Adding pop up calendar, and possibly data validation, to Date Range
3. Make it clear that the Topic field has a drop down, probably via an arrow on the right
4. Per @nataliafitzgerald - make sure all items under Topic are indented so they are left aligned
5. Also per Natalia, to stop topics greater than 29 characters from breaking onto 2 lines, allow for the width of these tags to expand to accommodate higher character counts (perhaps they can expand to the width of the input field).
6. (I didn't have time to cover this yesterday) Currently, the Item Name field doesn't search the contents of the Topic field, even though people may be thinking in terms of topics. Let's have that search look for topics as well.

Any I missed?

[schaferjh]

This work is being addressed by one of our cf.gov teams!