Calendar tweaks based on usability testing 5/12

[onezerojeremy]

Based on unsolicited feedback and unprompted testing of the calendar feature during usability testing on 5/5/2016, where the user mentioned that the calendar grid view was overwhelming and hard to read, we tested some tweaks on 5/12.

findings:

• overwhelmingness largely solved by defaulting to the list view, which provides a . Recommended to leave the grid view as a secondary option such that advanced users who use filtering and scan, that want to can use it.
• "calendariness" less apparent in calendar's list form. consider design and content tweaks to enhance the appearance that the list is a calendar.
• "more information" buttons should exist only when there is more information to view about an event.
• page reload should not switch between view.
• event tags should either look less like a button or provide act on user clicks.
• consider where in "Registration and reporting" should link to which calendar views. The calendar is a utility that is serving at least two very different uses:
• it is providing an access point for commission events for folks likely to attend these
• it is providing a list of deadlines for filers It is not the case that every filer is also a likely attendee, and testing this week revealed that at least one user, who was not attuned to the fact that the calendar served both uses, did not go to look for deadlines there.

tagging @emileighoutlaw for content help @ethanheppner @noahmanger @jenniferthibault anything I missed?

[jenniferthibault]

Calendar design changes

• Makes day groupings more visually separate
• Adds tooltip for explaining tags (though I'm not 💯 on what goes in here for each, it could be an opportunity to link folks to other sections of the site)
• Puts list view in default toggle placement
• Drops "list" and "grid" from toggle, hoping to nudge it down in the hierarchy

Functionality changes

• [ ] Don't activate the Learn more link unless there is more to learn.
• [x] Switch default view to list view always

Registration and reporting cross-linking:

Currently, at the bottom Help section of the essentials pages for each registration group type, we have a link to the pre-filtered calendar events that apply to them:

https://beta.fec.gov/registration-and-reporting/essentials-corporations-and-labor-organizations/

We could go a few steps further in surfacing this info by moving (or repeating?) that card prompt to a few other places within the templates: (note, I'm pointing out places here so that we can decide where it makes sense, but have not mockup up anything different in the designs. These are just screenshots of the site as it is now)

In/below the resources panel of each essentials page, bringing it to users attention sooner https://beta.fec.gov/registration-and-reporting/essentials-corporations-and-labor-organizations/

And even maybe as a smaller icon/button link combo on the Reg/Reporting landing page section itself:

Thoughts on all of the above? If we agree or define the reg/reporting page link suggestions, I'll mock them up.

[noahmanger]

Love these changes. I have them all implemented except for the tooltips on the categories. Would this be a better use of the glossary rather than tooltips? Feels more like a definition rather than an explanation of data or interaction (which is what we use tooltips for), but that might get cluttered with all those book icons.

Question: what do you mean by " Don't activate the Learn more link unless there is more to learn."?

+1 to adding more calendar cards on the other pages. I remember this from way early wireframes and would love to introduce it.

[emileighoutlaw]

Hello hello! Great stuff in this issue.

Calendariness

We are pretty hemmed in in terms of what changes we can make to the content (since it's currently being filtered directly from their data tables. This is something we'd like to change in the future. We're already in the process of adding a little microcopy — for example held today to the end of elections and due today to the end of reports. But did you have any other things in mind for making things more calendar-y? If not, I can keep thinking on this!

Calendar tooltips

We'll have glossary definitions for many of these (but not all). We haven't yet been able to get a "Communication Cost" definition up, but this might be a good nudge to do that. We also don't have a generic "Election" definition, but I feel confident we could rustle one up.

If we want to have some specialized content for the tooltips, I could write that too. For example, we could have this for IEs:

These are 24- and 48-Hour Reports. Filers add up (aggregate) the money they spend on independent expenditures to determine whether they must file these reports. They aggregate on a per-election and per-office basis within each calendar year.

If we like that idea, I can open an issue specifically for tooltip content, and start working on things in that. I don't have a strong gut feeling which is more useful to readers— a definition of the term or more of an explanation of what the deadline means.

Re: Learn more: I do like having the idea of linking out to Registration and reporting content, but I'm getting a little stuck trying to figure out how we'd do that. For example, the content that applies to IE periods changes, depending on the type of filer.

Here's SSF: https://beta.fec.gov/registration-and-reporting/independent-expenditures/ Here's party committee: https://beta.fec.gov/registration-and-reporting/party-committee-independent-expenditures/

Because of that, I'm not sure how we'd handle a "Learn more" link. Open to thoughts, if anyone has ideas! I will also keep mulling.

Registration and reporting

I like the idea of repeating the calendar card below the campaign guide for each type of registrant. If we did that, would we also move it out of the footer on https://beta.fec.gov/registration-and-reporting/ ? It seems like having it both places might be confusing.

[jenniferthibault]

@noahmanger @emileighoutlaw

On tooltips vs glossary:

• I think tooltip with custom definition as @emileighoutlaw suggested here is a better fit. (see third point)
• We don't have to include "learn more" in the tooltips, unless it's relevant to specific report types
• The categories used in the mockups are bad examples of what's confusing about these tags: the more confusing ones look like this (screenshot taken on the live calendar now):

By "Don't activate the Learn more link unless there is more to learn." I mean...

• There are cases where we have a Learn more link for an event, but clicking it brings you to an FEC page that says something like the information isn't available yet We watched one frustrated user go through the event details and click Learn more and exclaim, "I just had to go through all that, and I couldn't even get more information?!"
• This example is easy to find by filtering to any type of Meetings, but there may be other instances

I'll mock up the reporting side additions next.

[noahmanger]

Sorry, lost track of this. A couple follow up questions:

• On the tooltips, can we stick with our current pattern with the info circle, that looks like:
• I'll need content for these tooltips
• Unfortunately the "Learn more" links come with the data we're getting, and we can't tell if there's actually info there or not. So this would be a good thing to pass to the FEC and ask them to not include the links if there's nothing to show.

[noahmanger]

Also, assigning to myself.

[jenniferthibault]

Yep, same tooltip style is fine!

What's the mechanism for passing that info about "Learn more" on to the FEC?

[jenniferthibault]

Though, late observation — I thought the tooltip point should be directed to the ( i ) icon, not to the checkbox?

[emileighoutlaw]

I think the most confusing tags are the report code ones, right? I believe those should be going away entirely with Lindsay's calendar updates.

Here's what I think we could add content for:

• IE periods
• Election
• Executive sessions
• Open meetings
• EC periods
• Roundtables
• AOs and Rules

Do we want content for all of those? If so I'll get a doc going today.

[noahmanger]

Remaining criteria for completion:

• [x] @emileighoutlaw has content written
• [ ] Add tooltips to all categories

[emileighoutlaw]

Content is moving forward here: https://github.com/18F/fec-cms/issues/337

[jenniferthibault]

A thought/question: Is it possible that there are different deadlines that can be assessed & filtered by each of the reg/reporting groups? If yes, then we can make a link right on the landing page from each section. If not, it doesn't make sense to have the same link repeated for each section:

Here's a couple of approaches, with different levels of priority to the deadline link. (Sorry about the yellow background, old artboards, and I didn't realize it until I screenshotted)

A: Secondary button, creates perception of high priority

B: Icon & link, creates perception of mid-priority

C: Card, creates perception of high priority

If we are able to embed the link at that interception point, I keep looking at the layout of the essentials checklist pages, and not finding a great place to integrate a card or new element, so I'd like to keep the calendar placement in the footer.

(future styles)

[emileighoutlaw]

Edited (because I hit send by accident).

I am really digging the prioritization of Option A. I think that options B and C are less noticeable to the point that I fear people wouldn't see them at all. Ensuring people get filtered to the right option of the two buttons (I believe) is solvable in how we label the buttons.

"Reporting deadlines" sounds a bit too much like content, and not a calendar. Meanwhile, "get started" feels very weird, when it's next to any other option.

My proposal [More information] ........... [Reporting calendar]

Or something close to that. Curious to hear what other folks think, too!

[LindsayYoung]

Is the learn more link comes from the data and the same links that are broken on beta are broken on fec.gov, tell me if there is a case that doesn't fit that discription.

Example: http://www.fec.gov/calendar/calendar.shtml?&day=16&categoryId=-1&eventId=4495

[onezerojeremy]

Ok. So we know from testing that people go looking for reporting deadlines on the registration and reporting side. So we know we need to support this behavior. For me, the real question now is one that I have a hard time answering at the moment, which is this: What is the priority of this task? How often do people seek reporting deadlines? The answer to this question will help us determine the visual priority of it on this page. My inclination is to probably start with the minimally visually prioritized solution and see if that is enough to get people there, because it is my sense that getting people to reporting deadlines is not the primary action of this page, but again, that's because I don't really know the answer to the question.

I'll see if i can snoop anything in analytics tomorrow about how many people look for this kind of information.

[jenniferthibault]

That is all the things I couldn't properly articulate about why I made three different versions!!! I also don't know the answer to the task priority question.

I am very down with that approach (start minimal (B, above), add priority if you find it's needed). Let us know what comes of analytics, plz!

[onezerojeremy]

Ok to the analytics! Not surprisingly, the answer is a bit complicated, but i think there might be a signal here. bear with me, working this out as i go, my methodology is rough and flawed at best. I'm making assumptions left and right; if i make assumptions about the data you disagree with, it's not out of malice and y'all feel free to call me out on it. Seems like there are at least two relevant pages that seem to have similar goals to what our page is trying to do a. the filing info page and the compliance main which links to campaign guides. (note to self: we should also look at search) we see:

1. the existence of the reporting schedules on the filing info page! {3,005 clicks}
2. campaign guides {2,818 clicks}
3. forms for each of types {2,597}
4. toolkits for each of the types {522 clicks}

Let me know if yoozles feel like there are other relevant links!

So! It looks like if we are just including one link to all the deadlines, it's is the most popular single link.

But if we are dividing out by our 4 committee types (I'm not going to bother with the relative difference between our possible committee types, and i'm including non-connecteds even though they aren't live yet), each one garners ~1,484 clicks to the various resources we're colocating under our committee type links, and ~751 clicks to the respective deadlines. So they are a bit more than half as clicked, which would indicate to me that we might be ok starting off with a more minimal approach. But maybe I'm biasing this and not thinking of something. So I could be convinced otherwise.

Another approach would have them listed on each of the specific committee pages, but I think I'm against that because I think we've heard that journalists use them and they may not know which of the committee types they are looking for and keeping them on this page might be better for them (totally just guessing now). This would at first glance be an argument for a single link, but I'm inclined to believe that the primary user of the deadlines are the committees themselves, so making it easier for them seems paramount. But I could be convinced otherwise.

I'm using may 2015- june 2016 as the date range for the click counts

[emileighoutlaw]

I never cease being amazed at how thoroughly and well y'all think through things. I think Jeremy's analytics analysis makes a good case for starting with a more minimal approach and adjusting if we see cause to.

Content-wise, I still want to rethink the "Get started" button text. People aren't really getting started so much as reading more about what to do. So this is another plug for making that button "Learn more" or "More information"

[jenniferthibault]

Thank you for digging in to that, Jeremy!

This raised a new question for me, that I didn't realize I was unclear on before. Are we able to sort the calendar to views relevant specifically to each type of reporter?

I.e., is there a way to do this:

Corporations and labor organizations: Reporting calendar for this type (url goes to presorted view for stuff relevant to just this type)

Nonconnected committees: Reporting calendar for this type (url goes to presorted view for stuff relevant to just this type)

Or can we only do this:

Corporations and labor organizations: Reporting calendar (url goes to unfiltered calendar)

Nonconnected committees: Reporting calendar (url goes to unfiltered calendar)

?

I had been working on the assumption that we could do the first one, which DOES feel helpful to split into four links. The second one feels less helpful, and slightly misleading. By that I mean, if we have four separate links, they feel like they should go different places, not all to the same.

@emileighoutlaw you have full license on the Get started button text. I remember reading somewhere that action-oriented words are better for conversions (source: dubious, I am not a content designer). I.e., Learn more is a do-able, imperative thing, More information doesn't give an idea of how much "more" or if it's necessary or optional info. If you decide, I can implement.

[emileighoutlaw]

Let's go with Learn more (You're absolutely right about action-oriented)

[onezerojeremy]

What is next with this? I see that I've been assigned by @noahmanger, but I'm not precisely sure what my next action is.

The question @jenniferthibault asked appears to be an API or functionality question, if I'm reading it correctly; happy to coordinate on the answer (or try to ux-design a solution from that) but need a little guidance on next steps. 😬

[noahmanger]

Ok, here's what I understand the task to be:

In order for filers and non-filers alike to be able to find filing deadlines, create alternative pathways to a pre-filtered view of the calendar with relevant deadlines.

Criteria for completion:

• [ ] Users can traverse from an "Essentials" page to a calendar view filtered to be as relevant as possible*
• [ ] Maybe: raise the prominence of the calendar card on the Registration and Reporting landing page
• Note on pre-filtering: To @jenniferthibault 's questions: we won't be able to filter to an exact list of deadlines, as those depend on the state that the committee has activity in or what kind of activity they're doing. But I think we can create some customization:
• Candidates and candidate committees: Calendar shows Monthly and Pre- and Post-Election deadlines if it's an election year (all candidates file monthly in election years, correct?)
• Political party committees and Corporations and labor organizations: Calendar shows Quarterly deadline, Pre- and Post-Election deadlines, EC, IE and FEA periods

How does that sound?

[onezerojeremy]

sounds good! Clarified yesterday evening off-hub that this is in fact an IXD task. On it!

[onezerojeremy]

Ok, from a bit of poking around analytics, FEC classic and campaign guides I suggest the following:

• [ ] implement Jen's design :b:, linking:
  • candidates & candidate committees to Monthly & Quarterly and Pre- and Post-Election deadlines
  • corps & labor unions to Monthly & Quarterly deadline, Pre- and Post-Election deadlines, EC, IE and FEA periods
  • party committees to Monthly & Quarterly and Pre- and Post-Election deadlines
  • nonconnected committees to Monthly & Quarterly deadline, Pre- and Post-Election deadlines, EC, IE and FEA periods

(this is almost exactly what @noahmanger said above, with the one addition that it seems any of these may be monthly or quarterly filers. If there is more information that we can bring to bear on this, I'm all for leaving off quarterly)

• suggest we leave alone the calendar card for now, to see if this change gives us enough prominence. Basically because the architecture of the page is about the different types of committees, and given that we can route to a bit more specific information based on the type, we may as well. May well want to test this with journalists who may not know what kind of filer they are looking for to see if it confuses them.

why:

• of the four types we list, candidate & candidate committees, corps & labor unions (SSFs), party committees, nonconnected committees, each appears to be able to choose between monthly and quarterly filing, except perhaps during in election years, when some have to file monthly. My guess is that if you're a monthly filer it's probably easier to keep track of when you're filing (same day each month), so probably it's the quarterly that trips people up but I have no data on this. At any rate, without knowing which way they've chosen to file, it seems like what yuns have suggested is right on the money.
• • extra bonus thought Since we know that House & Senate candidates are only required to file quarterly, dropping the default of monthly for candidates after the general would save most users a click after November, until 2020, which probably adds up to a lot of clicks. Given how infrequently this changes it seems silly to code a conditional around it; it'd be cool to set a reminder to create an issue that suggests that?

[jenniferthibault]

This helps me understand so much!

👍 ⚡ 👍 ⚡ 👍

[noahmanger]

Wow I totally missed Jen's designs somehow. Sounds good @onezerojeremy . I'll move this to me to implement.

[noahmanger]

I got this started here: https://github.com/18F/fec-cms/pull/370

A couple things:

• I like what you're thinking re: customizing the filters based on the year, but (wears PM hat) that seems like something that should be a future enhancement rather than something to spend time on now
• @jenniferthibault can you send me the calendar icon in a circle? I'd rather have a separate $calendar-circle asset than generate the circle background with CSS