Design improved raw efiling data interface based on usability testing

[noahmanger]

So that users understand the difference between raw efiling data and processed data, improve the UI based on usability findings.

---

For background, check out previous usability findings here and here. Basically, the "electronic filings" data and "processed data" is mutually exclusive and serves different purposes, so we need to make sure users understand this difference.

There's a few aspects we should address in this design work:

• What do we call each? "Electronic filing" data is confusing both to power users and novice users and doesn't communicate what it actually is
• What language do we use in the tooltip? Is a tooltip even the right method?
• How do we better communicate the fact that some filters don't apply to the raw data?

cc @nickykrause

---

Completion criteria:

• [x] New designs to be implemented next sprint

[nickykrause]

Asked my critique group about this. I'm going to drop some thoughts from them in here, so that I don't forget:

Corey: The placement of the tooltip suggests that it will provide some boilerplate information about data types, not necessarily that it will provide clarification around the meaning of processed data vs. eFilings. For that reason, I wouldn't have clicked it. My impulse is to put the descriptions next to the words, or the tooltips next to the words.

Heather: Those two buttons -- for processed data and efilings -- don't convey "single-select" to me. They don't look like you can select one or the other; I would have thought you could select them both. Perhaps something more like a radio button would make it clearer that you're toggling between two options that are mutually exclusive.

I pointed out that the whole display is controlled by the toggle, which may make it different, in some way, from the other kinds of controls in the filters panel, which refine what is displayed rather than "replacing" it completely. Responding to that:

Stephen: Yeah, I was thinking that -- Maybe it would be clearer if you could do something with the header. Something to communicate that you're not just looking at "Filings data," but at "Processed Filings" versus "E-Filings"

Heather Another thing on that point would be maybe to look at the model on analytics.usa.gov, where there is a control at the very top, which changes everything you see below.

I raised the point about how some of the filters become grayed out when a user moves from making processed data refinements to the eFilings view. I explained that usability testing revealed, at least for one or two users, that they would prefer to see no results at all than to see them grayed out.

Corey: Seeing no results might be more "honest" -- the grayed out filter is difficult to notice.

[agreement]

[nickykrause]

I made some changes for folks to check out. I am welcoming all comments, of course, from @jenniferthibault ⭐️ , @noahmanger 🚀 , and @emileighoutlaw 🌲 , but I'll also tag these icons in spots that might interest you specifically.

Issues observed in usability testing

• Users -- even power users -- have trouble understanding the difference between processed data and electronic filings.
• Some users do not notice the toggle between processed data and electronic filings , or do not understand that it will behave differently than the other filters (i.e., that the two options in the toggle are mutually-exclusive)
• Some users do not notice that certain filters become "grayed out" when toggling from processed data to electronic filings, and, if they do notice, some users become confused as to why the filters are disabled. Furthermore, users struggle to "re-enable" the filters, because they don't realize that the eFiling toggle is the control for that function.

---

What I did

As mentioned above, I talked to my critique group and gathered some input about how the interface might be adjusted to alleviate the issues. I took a combination of their suggestions to draft the changes outlined in the images below. I have highlighted the changes with pink stars.

Item 1: How to handle the control Suggestion: Radio buttons with descriptions

I have used radio buttons :star:, which (hopefully) clarifies that the options are mutually-exclusive. This approach also allowed me to put short descriptions of processed data and electronic filings directly alongside the buttons, and to eliminate the tooltip 🌲 :

As far as I know, we don't have a pattern for radio buttons yet -- if that's not the case, please let me know, or if there are some concerns with using them. :star:

Also, in case it is hard to read, here is the text for each item: 🌲

Processed data Processed data has been reviewed by the FEC using a multi-step process, which can take days or weeks.

Electronic filings Electronic filings data has not yet been processed by the FEC. This is the most recent data available.

Another option for the titles/descriptions might be something like this, although these are slightly longer: 🌲

All processed data This includes all data that has been submitted to the FEC electronically or on paper, and which has been reviewed using a multi-step process.

Raw electronic filings This data has been submitted electronically but has not yet been processed by the FEC. It is the most recent data available, but it excludes paper filings.

---

Item 2: How to display results Suggestion: Return zero results when processed data filters can't carry over, and display a message

In order to reinforce the idea that the processed data and electronic filings are mutually-exclusive, and that the same filters do not necessarily apply when switching between them, I am suggesting that we return no results rather than "gray out" the filters.

Here is what I mean. The first screenshot here is an example of would happen (and what currently happens) when a user is viewing processed data and applies filters for 2007-2008 and Romney for President, Inc:

Once the user toggles to electronic filings, I am suggesting that all the filters remain available, but that zero results are returned :star: :rocket: (This is not what happens now):

As you can see in the screenshot, the filter for 2007-2008 remains available both at the top of the table and on the side, in the filters panel.

This screenshot also suggests that we could display some kind of short message to the user 🌲 :

Electronic filings data is not available for previous years. Try removing the date filters or switching to processed data.

The user could then switch to processed data, or, as is shown below, they could remove the 2007-2008 filter:

Note that the user can't add other date filters while toggled to electronic filings.

[noahmanger]

👏 Love it. I really like how using radios allows for descriptive text right there. FWIW, I prefer your more verbose language for clarifying that all processed data includes paper and electronic filings.

Only question: what happens when a filter is applied for processed data that's not available for raw data, but then you toggle to raw data and there are still some results, even though the filter is inactive? Should we instead clear the filter and remove the tag so that it's very obvious it's no longer applied?

[nickykrause]

@noahmanger: Assuming I understand what you meant, I think that is the case that I showed at the end, which is probably lost in the many, many other things that I said 🙃

In the situation where a user selects 2007-2008 and Romney for President, Inc, it is actually the case that one of these filters (Romney for President, Inc) will yield results for Electronic Filings, where the other filter (2007-2008) will not.

Of course, when the user has both of these selected while viewing processed data, there is no issue. When the user toggles to electronic filings, though, the fact that 2007-2008 is selected will prevent any results from appearing. This sequence of events is represented by these two screens:

Having encountered zero results, and having seen the explanatory message, my hope is that the user will understand to remove the problematic filter (2007-2008), which would reveal that there are indeed electronic filings pertaining to the other filter: Romney for President, Inc, as seen here:

So, returning to your question:

What happens when a filter is applied for processed data that's not available for raw data, but then you toggle to raw data and there are still some results, even though the filter is inactive?

This would never actually happen. The fact that there is a problematic filter applied (e.g., 2007-2008) alongside other, workable eFiling filters (e.g., Romney for President, Inc) would mean that no results would be returned. (At least, not until the problematic filter is removed.)

Does that answer the question, or am I missing something? Happy to chat synchronously if it's hard to convey in writing

[emileighoutlaw]

@nickykrause ! I am crazy in love with adding radio buttons and clarifying language outside the tooltip (basically no one ever reads tooltips).

I agree that your verbose version is clearer— when we try to simplify things for users, I think we usually end up with something that's actually more confusing.

I do think we could make a couple small content tweaks for message parity.

All processed data This data has been submitted either electronically or on paper and has been reviewed by the FEC using a multi-step process.

• Started with "This data" so that it matches the raw description
• Took out "to the FEC" after "submitted" because paper filers submit to the Secretary of Senate.
• Q: Can we talk more about the "all" in front of All processed data? When I see an all in front of one option but not the other, that makes me think that Raw electronic filings isn't All raw electronic filings. But it is, right? Would we lose something that you're working toward by making keeping this title Processed data?

Raw electronic filings This data has been submitted electronically but has not yet been reviewed by the FEC. It is the most recent data available, but it excludes paper filings.

• Changed the verb to "reviewed" so that it matches the language in the "Processed" description.

I need to hop to the Content Guild meeting, but I'll circle back around to look at the error messages after that!

[nickykrause]

Thanks, @emileighoutlaw! To answer your question:

Would we lose something that you're working toward by making keeping this title Processed data?

No, we wouldn't! And I think you make a great point about the word "All" appearing in one place, but not in the other. I think I added the word "all" when I realized that the e-filings aren't as comprehensive as the processed data, but it makes more sense to clarify that paper is or isn't included using the descriptions of the data types.

[jenniferthibault]

We do have a radio button pattern! It's near identical to our checkbox pattern:

One problem is that these don't work well with very long inputs.

I might try the following separation instead to keep them decently sized:

For the message in the data table, we could also use one of our alert patterns to communicate the info:

[noahmanger]

Ah ok, I think I understand. But just to make sure, what would happen in this situation:

Processed data, filtering to "Statements of organization":

Switch to raw data. There may still be "statements of organization" in the data, so saying "no data" isn't exactly accurate, but the filter won't work:

Are you proposing in that situation we display no results and show the message? Or is this a different scenario?

[emileighoutlaw]

Filter content

Just to resurface, what we want is:

Processed data This data has been submitted either electronically or on paper and has been reviewed by the FEC using a multi-step process.

Raw electronic filings This data has been submitted electronically but has not yet been reviewed by the FEC. It is the most recent data available, but it excludes paper filings.

Error message

I believe Nicky is suggesting we return "no data available" and provide an error message explaining to folks that switching from processed to raw data is the reason why they got no results.

My question: If we return an error message, would we be returning a custom message depending on which filters were applied?

Filters that would throw errors for electronic filings are:

• Candidate name or ID
• Years
• Amendment indicator
• Form type

Those filters could break down into three custom messages. This is super rough (i.e., not ready to be a content proposal), but very broadly, something like:

Raw electronic filings aren't available for previous years. Try removing date filters or switching to processed data.

Raw electronic filings can't be searched by Candidate name or ID. Try removing the candidate filters or switching to processed data.

Raw electronic filings can't be searched by filing information (including form types and amendment indicators) . Try removing the filing information filters or switching to processed data.

How would we deal with a search that included more than one unavailable filter? For example, if someone searched raw filings for "Statements of organization" as well as candidate ID?

[emileighoutlaw]

Okay — ignore my notes about the error message since we met and they're no longer relevant :)

[nickykrause]

@emileighoutlaw they might be! I still need to think on it. :smile:

[nickykrause]

Okay, update. cc @noahmanger @jenniferthibault @emileighoutlaw

First: I tried applying the radio button style, per Jen's comment, just to get a more accurate read on what it would look like:

My initial reaction to this style is that, when there are only two items in the list (as in this case), either of them could read as "selected," at least for me. I think it has something to do with the non-selected state appearing "highlighted" by the darker box.

But of course, the styling of the radio button isn't actually the focal point of our discussion, so...

Here's the issue, re-stated:

In our conversation yesterday, we explored the case that Noah described above, where a user might apply a filter for processed data (such as Statements of Organization) which is not available as a filter for eFilings, even though the eFilings may indeed contain Statements of Organization.

In this situation, it would be misleading and incorrect to say that there are "no results" for eFilings that are Statements of Organization, but it is also inaccurate to suggest that the filter is indeed available for eFilings (because it isn't). These circumstances make this use case different than the one I had solved for, where a user applies a date filter (e.g., 2007-2008) that has no relevance to the eFilings whatsoever, and where displaying "no results" is correct.

This led us to ask several questions in our session:

• If these data types are significantly different, with different filters, should the data types even be considered "filters"?
• Do we know if users really need to toggle between these two data types in a manner that retains their filters, especially given that most of the filters cannot be "retained" for eFilings (i.e., they are disabled)?

I once again brought this work to my critique group. Here were some comments:

• The group found it somewhat difficult to determine which of the radio buttons was selected.
• They liked that the explanations appeared next to Processed data and Electronic filings
• They asked if Data type could be separated from the filters altogether, because it is a different sort of control. They suggested potentially putting it at the top of the page.
• They agreed that showing "no results" would be misleading in the case Noah brought up.
• We discussed how to handle the case where filters suddenly become non-applicable. Thoughts:
  • Eliminating the filters completely upon toggling to eFiling would be more honest but may also upset users who had composed complex queries. They should be able to get the filters back when they go back to processed data.
  • It seems like many filters--the majority, in fact--become grayed out for eFilings. This is helpful, in a way, because users will clearly see that filters are disabled, but, then again: If the filters are so different for each data type, then it makes the data types seem more similar than they really are.

So, departing from the previous version slightly, I have been playing with the idea of separating out the "data types" from the other filters, and having the filters change depending on which one is selected.

Here is a sequence of screens showing: (1) Accessing the All Filings page, (2) Applying two filters to processed data, and (3) tabbing over to eFilings, where the filter panel changes and the processed data filters are no longer applied. The idea is that the user could toggle back to "processed data," if desired, and their original filters would still be there:

[nickykrause]

One last thing: The button toggle for processed data vs. electronic filings was inspired by the "Group by" pattern shown on the Committee Receipts pages

[noahmanger]

Oooooh! I think this is really sharp. I think it makes a ton of sense to separate these out in this way, and really like the toggle layout with the help text right there.

Not sure what to do about the icons...maybe we just make the filters icon the top one and don't have a separate icon for 'edit filters'. I'll let @jenniferthibault weigh in on the finer points.

I really like this solution!

[nickykrause]

@noahmanger glad you like it.

The other thing that I think this addresses, which I didn't mention above, is the reality that this toggle pattern needs to be applied on other pages, beyond All Filings. Once I clarified that with you today, I thought: What if the other sections offer greater complexity, in terms of enabled vs. disabled filters? Will we encounter even more weird edge cases about showing "zero results," or trying to show error messages? As Emileigh's comment/question revealed, the combinations of filters could lead to really confusing messages for users, if we lean on messages.

So, anyway, I was trying to find a solution that would be filter and message agnostic (so-to-speak)

[nickykrause]

Annnnnd one more thing: I suppose, in my first and third screenshots, the "Edit filters" panel should actually say Edit filters (1) rather than Edit filters (2), because the "data type" is not technically a filter that can be added/removed.

[jenniferthibault]

@nickykrause awesome work! This feels ⚡️ to me.

The pattern on the Committee receipts page is the real original toggle pattern. It was only in this narrow filter panel that we tried switching it to stacked format. If the text fits inside those toggles here, keeping the horizontal layout would be great! The one difference between the toggle style you mocked up and how it works as implemented now is that the not selected state doesn't reduce opacity—that's a tactic we reserve for making something look disabled. So it would look like this, as styled:

Since the fiddley-bit icon (technical name, yes) is more about the panel of options you can control, I'd leave that icon at the top, and remove it from the "Edit filters" section below, like this:

[nickykrause]

Awesome! I agree with all things you've suggested.

Unless Emileigh has concerns, then I think we have a design!

[emileighoutlaw]

No concerns! <3 This work

[emileighoutlaw]

One tiny content note! We haven't been using periods in our filter added/filter removed copy, a lá:

So I wouldn't use periods for Data type changed and Now showing...

[noahmanger]

We've got a new design pattern! Closing this in favor of implementation issue https://github.com/18F/openFEC-web-app/issues/1734