Visual design of raising overview page

[noahmanger]

Using the wireframes from https://github.com/18F/openFEC/issues/1620 and https://github.com/18F/openFEC-web-app/issues/1188, it's time for some visual styling.

[jenniferthibault]

Splitting this to two issues: one for each page.

[jenniferthibault]

Alright y'all, I'm super stoked to show you what I've been working on based on the wireframes.

There are two fundamental questions that I need your help with:

1. Is a long page form appropriate for this, or would it be useful to split the graphics among tabs?

• Do we want all graphs viewable on one "page" through scroll, or are we willing to require click-through to see the second & third questions, not leaving the page, but moving through a nested element?
• Do we think we'll lose more people to scrolling, or clicking?

2. Should we make use of ample tooltips, or should we use them sparingly?

• Nick Bristow's note on accessibility of tooltips indicates that it's better practice to have the information already available, rather than hide/show it with tooltips. the mockup with sparing tooltips below places more content on the page with tables, and uses cross diagram-to-table highlighting to show what is selected. It may sometimes require that a table row below the scroll bar line is raised up when a state is selected.

The two are not mutually exclusive, but to keep the mockup count low, I combined them in pairs. You can get a feel for the full interactions in the linked InVision mockups below, but I've also made quick gif videos showing the BASIC differences. Please do go to the InVision links for the full context, these are greatly pared down. Most areas on the Raising screens are hot-spotted, except dropdown items, because I wasn't sure what the other options to choose from were.

Long page, frequent tooltips ↗️

Tabbed page, sparing use of tooltips ↗️

cc @noahmanger @onezerojeremy @emileighoutlaw @jeanninehunter (Thoughts from all other folks welcome at this point too! I just want to specifically put out the bat signal for experience design)

[emileighoutlaw]

I'd like to hear other folks weigh in on scrolling vs. clicking.

My feelings:

• Clicking is a bigger ask, BUT
• Tabs make the information feel more manageable (less overwhelming)

Tooltips:

• The diagram-to-table highlighting is a very clear interaction to me. Losing the tooltips doesn't feel like a loss of information to me.
• A nice thing about no tooltips is that when I click, there's no additional content to read. (Down with words!)

Content notes

On your question about the "For all groups..." microcopy:

• I think we should include "all elections" and eliminate the "For all groups." My gut is that people will mentally default to all groups (or they won't really understand there are tons of groups), unless we specify otherwise. That would leave us with this content: "All elections, 2015–2016."

Other thoughts

Which I'm happy to implement myself once we start getting this into the code. (This is more for visibility and in case y'all have thoughts.)

I think we should aim for consistency in using either 2015–2016 or 2015–16. My vote is for 2015–2016.

Feedback chart: How about we make “none of those” (which rings funky in my ear) into “none of the above" which is a familiar pattern for most folks?

I'd like the headers to be declarative, rather than questions. And I think there are a couple copy changes we could make to make them more readable:

Who’s raising the most How much candidates for president have raised

Where individual contributions come from The individuals who have contributed to all candidates and committees

How big contributions are (this one maybe needs more thinking) How much PACs that are Super PACs have raised, broken down by size of contribution.

You might also like (instead of ...learn more?) Compare how candidates raise and spend money

[jenniferthibault]

Hello friends, reviewers, and fellow designers, In order to move this forward and to also make progress on the spending page, I'm pulling this into a synchronous feedback session for two reasons:

1. The change in titling format from question to statement differs from the direction we set through the discovery work on this feature, and would have implications for the design decisions here.
2. I'm not really hearing enough chatter on the two primary questions posed above to lead to a conclusion, and carry the design forward. I think that's because it's hard to be among the first to put a choice in in issue, and then hard to follow with a different opinion. I think a discussion-oriented session will let us talk through the pros and cons of both.

I think a 1hr meeting will be well worth the calendar sacrifice, and will help us talk it all through & make decisions. Invite coming!

[jenniferthibault]

Thanks all for combining your brainpower this afternoon! My take-aways from our discussion:

Page format

• We're going to lead off with the longform page, and implement scroll & click analytics to track users progress down the page.
  • There was concern that the tabbed interface would be challenging on mobile (we've seen other challenges on mobile for the profile page tabs)

Tooltips

• On spending/fundraising pages, we're going to try limiting the number of tooltips, and instead rely on table/chart pairings with obvious animation/state changes to mitigate change blindness
• We'll keep the tooltips on the landing page for now, and use them as a point of interaction comparison to help understand if we should try to eliminate tooltips from all graphics or charts.

Other

• The accordion panel pattern for the "About this data" section doesn't feel like the perfect solution, but will allow us to gather all the content, and edit it in a later sprint. We will keep an eye on this functionality, and may revisit it's placement. (possibly adding it as a tab on the chart feedback tool)

Next steps for this:

• [x] Jen to mock up mobile interface
• [x] @emileighoutlaw to open up a new content issue

[jenniferthibault]

Hey all, I have some mobile views of the Spending side for you. Seeing these have convinced me that at least on mobile we do need to compartmentalize the graphics. Instead of tabs though, for mobile, I used a call-to-action style drop-down which would be how the user views their selected graphic. For comparison, I've been using EITI's mobile examples: https://useiti.doi.gov/explore/federal-revenue-by-location/

Screen 1: How we could do the mobile version of the landing page without tooltips. You'll also see the drop-down here.

Screen 2: How we could use integrate the feedback module with each graphic. This would be the second screen on all graphics shown. I realize this is less obvious, but I'd prefer not to make it intrusive, considering how much it shows up. Another option would be to make it a modal engaged through a button (?)

Screen 3: Demo of the selection drop-down box with landing page list option

Screen 4: Raising overview, as one long page. this is the thing that convinced me that on mobile, we need to compartmentalize.

Screen 5: Raising overview, compartmentalized. Graphic 1: Who's raising the most

Screen 6: Raising overview, compartmentalized. Graphic 2: Where individual contributions come from

Screen 7: Raising overview, compartmentalized. Graphic 3: How big contributions come are

[emileighoutlaw]

Moving content over here: https://github.com/18F/openFEC/issues/1733

[onezerojeremy]

Wow, strong work Jen! Charts on mobile is hard hard hard, and those look solid.

Quick take (I haven't done a detailed critique). Looked through the screens. I see your point about compartmentalization, and think that it could work.

If I'm interpreting it right, this is our CTA that moves between compartments, right?

If so, even with the dropdown being a nice dark blue, I don't think it's prominent enough. 2/3 of the page content is behind that one drop down. Do we have other IXD patterns in our toolbox for this?

The other thing that I'm curious about is the chart interactions on mobile, especially with the map. I know we are planning on highlighting the row, but I don't think that'll help here without doing something else.

[jenniferthibault]

Excellent points, adn yes you read that right as the CTA between compartments on mobile. I don't think we have ready-made patterns to emphasize is more, but I'll think more on that tomorrow, and hope to borrow your brain on it Maybe Monday?

For the chart/mobile, I was thinking that in addition to highlighting, it could jump you down the page to that highlighted table row. I added some prelim examples of this in the mobile InVision above, but it's hard to get the whole idea across there without interference from InVision's interface.

Looking forward to your detailed critique :)

[jenniferthibault]

I have in idea for how we might improve this (mobile first is paying off already!)

These would be universal changes for all overview categories:

Before

This is what I had before. The totals were part of the "header" area:

• It already felt like the Totals area was getting a LOT of attention for something that's good to reference, but isn't as exciting as the stuff below it.

Proposed change

Move the Totals into a more obvious sub-section of the page that can be navigated between

• On desktop this makes it much more clear that the year toggle controls all space on the page, and bumps it up in priority.
• On mobile this drastically cuts down the space between our 2 high-priority actions (1: switching the year, 2: switching the data question you're looking at)

Here's what would be in the drop-down:

This feels like an obvious improvement to me, so I'm going to start working that into the design mockups. I am still wondering though if it's doing enough to address Jeremy's concern about the compartmentalizing. So while it's a step in the right direction, I'm not calling it done yet.

[jenniferthibault]

@onezerojeremy can you let me know what your timeline is for a deeper interaction review? I'd like to make sure that you get the chance before this moves to implementation

[onezerojeremy]

Will try to get to it later today! thanks for the nudge!

[onezerojeremy]

first: you're right, your change is an obvious improvement! I like it.

feedback widget

For the feedback widget, The second screen approach might work but the dots don't signal that's what is about to happen ( i think dots indicate "more of the same"). We could switch out dots for small icons for feedback and chart, or modal the feedback as you suggested, or even perhaps ditch the feedback on mobile.

nav

A. So on the drop down as nav: in thinking about how it might be too small of a CTA for most of our great top-of-the-funnel content, I did a bit of poking around for alternative patterns:

• web design standards use a menu which i think we could maybe adapt?
• task rabbit has a grid that is vaguely reminiscent of our card pattern which I quite like. it'll use more space, but that's also potentially a good thing as space demonstrates prominence.

B. Possible navigation bug : how do I get to the data landing home? If we stick with the drop down should it be an entry?

map viz

Ok I had thought that a user clicking on the map viz would trigger an off screen action, but now I see that you're using the map click jump the user to the state in the list. That's probably a reasonable way to do it, it just makes it cumbersome to compare two states (which I think is one of the primary use cases of this map), especially if they are a bit farther down the list (they'll have to scroll back up to the map). Another way might be to bring the data to the user: If the list were dot paginated and side-scrollable, you could automatically side scroll the data on screen. Imagine this screen

with 5 entries, and dots below (prompting the user to swipe to see). This is a more complex dev task; there may be other ways to do this that are better that also support looking up two states.

[onezerojeremy]

Also: Other than that, it looks really good to me. @jenniferthibault let me know if you want to hop on a quick synchronous call to discuss these things, i realize that some of them may not make sense, and of course all are just my perspective; won't hurt my feelings if you disregard!

[jenniferthibault]

The designs and thinking are heavily influenced by the same over in https://github.com/18F/openFEC/issues/1761#issuecomment-228498729

While this issue is specifically for Raising, I'm submitting the mockups below as a template format for both the raising and spending pages. Here's a breakdown of the feedback I've heard, and how I did/we could address it:

Structure and Navigation

Feedback: It's hard to navigate between Raising/Spending/Candidates/PACs/Party committee pages once you're in one of them. It requires the user to navigate back to the Data landing page. This interaction is especially challenging on mobile.

• [x] 🔧 Use the side menu navigation pattern established on the Reg/Reporting side (h/t @onezerojeremy )

Grouping section elements

Feedback: Hard to tell if the About this data panel corresponded to the graph above or below it

• [x] 🔧 Move to a button format, keeping "Data" from separate "Documentation"
• [ ] ⚠️ We still need to figure out how this documentation should be broken down, where it should live, and what it should be composed of

Feedback: Need to find a position that clearly adds visual priority to the year selector, group it such that it's clear that it impacts all data on the page, and keep it close to the information it controls

• [x] 🔧 Group the year selector element inside the menu so that all the controls for the page are grouped and related. (hypothesis: users will revisit this component, and the functionality will be easier to find and remember)

Feedback tool

Feedback: On desktop: Feels like a high-priority item taking up a lot of screen real estate

• [x] 🔧 Give the real estate back to the graph & table, and bump it to a horizontal format underneath the chart

Feedback: On mobile: the swipe interaction pattern feels incorrect, because it's different content, not more of the same.

• [x] 🔧 Make the feedback widget a modal triggered by a scroll point for each graph/table combo. Allow the user to dismiss it

Taxonomy 📝

Feedback: Raising overview and Spending overview were confusing when they were acting as both the titles of the graphs on the landing page, as well as the titles of the deeper child-level pages.

• [ ] ⚠️ What should the taxonomy be between the data landing page, the directional button, and these "overview/details" pages? @emileighoutlaw

[jenniferthibault]

I forgot one change!

• [x] 🔧 In order to stick to our principle of "put data in only one place" I've moved the Total spent/raised table off of these pages, and back to only the landing page. Also added a button link to call out the availability of this data. This way, the data exists in one place, but is given a priority link where contextually relevant & helpful.

[onezerojeremy]

^ That's the stickiest widget!

The "total spent button" is essentially a breadcrumb to go to the landing page, but it's not in the place I'd expect it to be. And it's creating a bit of confusion for me with the side nav, which has bits that are on both this page and bits that are on other pages i think (e.g., raising). Maybe we just include the landing page (not named that!) in the side nav? If it were named something that gave it away as having the totals for spending raising etc that might solve the issue. but that's a pretty tricky content ask.

The only other thing i see at current is that chart three is missing it's feedback widget, and in general the feedback widgets could use to be somehow more tied to the charts. (i was not sure if it went with the one above or below)

[onezerojeremy]

oh derp i forgot all the good things:

• love how this is coming together! feels clean and informative and has some places for me to rest my tired eyes and some things to grab them!
• documentation button feels right on.
• i. am. so. excited! to see what happens when we launch this. I think we're going to get a lot more mobile usage! 💥

[jenniferthibault]

Derp, the missing feedback widget was an oversight, not intentional.

On the totals button—funny you say it's a breadcrumb! I think as we were thinking of this page before that would be accurate, but now, the totals is but one graph on the data landing page, within a section (Raising or Spending), it's not the whole section title anymore. That's why I was thinking about it as a feature, not a breadcrumb line. So if it's not a breadcrumb, and more of a feature, does that make it feel more sensible? Or does it not feel like a feature?

[onezerojeremy]

so i guess what i'm getting at is the the totals graph lives on the parent page, which is the "landing" page. On that landing page, the side nav shows "spending" and then on the child page, those all show up again. So what i'm saying is that the totals graph lives above the child page in the IA, because it's on the parent page.

here are two probably not at all helpful images:

[onezerojeremy]

or maybe I should just easier to show the hierarchy as it is in my head:

• landing page
  • spending section
  • spending totals chart
  • spending page link
  • spending page chart 1 (who)
  • spending page chart 2 (operating expenses)
  • spending page chart 3 (where)

in my head (which may be misguided) i see the side nav as mirroring that. Right now it mirrors most of it, but leaves out the totals chart.

[jenniferthibault]

Hmm ok, in my head it looks like this:

• landing page
  • spending section
  • spending totals chart
  • spending page link
  • spending page chart 1 (who)
  • spending page chart 2 (operating expenses)
  • spending page chart 3 (where)

Where the totals chart is on the same level of info as the who/what/where, but we've just made the info available on two different pages. I.e., We started with a pie, cut it into 4, and put 3 pieces on 1 plate, and 1 piece on another.

[onezerojeremy]

Hmmm. What if we just nod to which plate the totals is on in the side nav?

where data overview : spending links back to the data overview page, but the spending category. So people can see the relationship between the plates with pie slices, and which plate they're on.

idk.

[jenniferthibault]

Wouldn't that look like this? (Without the last item?)

[emileighoutlaw]

Hierarchy/side nav discussion

1. What Jen just posted looks like the hierarchy as I imagined it. In my mind, the content in the sidebar should match the buttons on the campaign finance data landing page (for consistency), so it would look like this:

   ... DATA OVERVIEW: SPENDING RAISING BREAKDOWN SPENDING BREAKDOWN

   • Who's spending the most
   • What's spent on day-to-day operating activities
   • Where groups make independent expenditures

2. Is it possible that by having so many navigational options, we’ll add to confusion. I see on this mockup:
   • Breadcrumbs at the top of the page
   • Side nav
   • Button that says < Total spent in all elections (This is the one that feels like it could go away. But if y'all think I'm wrong please tell me! If we keep it, I think we should consider renaming it.)

Re: Jen's taxonomy question to me— I’m not sure what “directional button” means, so I”m not sure how to answer this question :/.

Spending titles and sub-categories

1. The page title should also probably match the button on the campaign finance data landing page and be Spending breakdown, as opposed to just Spending.
2. We spent a long time working on this content, but when I look at the "independent expenditures" breakdown, it doesn't feel like it fits the mental model that novice users have. I know we'd have to show this to FEC, but what would y'all think of this:

Where money is spent to support and oppose candidates A state-by-state breakdown of independent expenditures made by PACs that are super PACs.

Other misc. content notes

In the independent expenditure chart— I think the key should say Total amount spent in state ? Received by state sounds like the state itself received money.

The size and spacing of the “Data” and “Documentation” buttons feel right on to me. But I don’t love the content—the distinction between the two doesn’t seem clear to me. I’d rather it be something like “Source data” and “Methodology,” although I know the “Methodology” piece will depend on how we choose to break down the documentation.

I notice in some places we abbreviate months and other places we don’t. Is this a spacing issue? I think the best pattern for readers would be to spell out our months everywhere. If it’s not possible, we should get some rules on paper for when abbreviations are okay.

[emileighoutlaw]

p.s. I’m feeling a little behind here, so please accept my apologies. But where does the “Key” button go?

[noahmanger]

This is looking really sharp. There's a lot I love and a couple things I'm still stuck on. I was just working through a thought along the lines of @emileighoutlaw 's #2 above, so I'll start with that: I'm struggling with this component a little. As a means of helping people navigate through theses overview pages, I think it works. But here's some things in my head:

• It's definitely breaking with an established pattern we're using elsewhere on the site, where this side nav is exclusively for navigating within a page and then links to other pages are handled as separate cards or callouts.
• As Emileigh noted, It's also competing with the breadcrumbs as a means of showing hierarchy and way-finding
• On mobile, where it's toggling visibility of sections I think there's a few issues:
  • Persistence: I think it's not a great experience to have to scroll back up to the top to then navigate to the next section. I think it would work better to either have it be sticky (and maybe collapsed) or appear at the bottom as well?
  • nav vs. tabs vs. accordions: The main components we use elsewhere for disclosure is tabs and accordions. This introduces a third type, but also conflates it with the established side nav pattern.

I think that this pattern does have potential advantages over the tab pattern, such as the ability to include longer titles and the fact that it works better on mobile. The downside is that it takes up valuable horizontal space on desktop.

One solution might be to just extend the patterns we've been using elsewhere, like this:

I'm happy to work through alternatives, but wanted to see if that makes sense to others.

To your question about taxonomy and how the landing page should figure in:

• I think links back to that page should either be in the side nav in some way (pending figuring out the things I mentioned above) or just rely on the breadcrumbs. Adding that extra button seems like a departure to me.
• I think referring to that page as "Data overview" could work. Other options might be just "Campaign finance data", "All campaign finance data" or "All data". (Not sure if we need to emphasize the "campaign finance" part).

[noahmanger]

[...hit comment too soon...]. Last thought on the taxonomy question, I don't know that we need to specifically call out the section of the page or the figure that we're specifically referencing. I'm not sure we shouldn't, just not sure it's useful.

[jenniferthibault]

Through our discussions & co-design sessions here and in https://github.com/18F/openFEC/issues/1761 we've addressed many of the issues above. Screenshots below, and desktop InVision started here. Mobile InVision coming soon.

There are still small outstanding questions about the specifics of many graphs (what categories we're showing, how we're breaking financial ranges down, etc,). Those are independent enough from the visual styling that I'm separating them into individual issues by graph. https://github.com/18F/openFEC-web-app/issues/1318 https://github.com/18F/openFEC-web-app/issues/1319 https://github.com/18F/openFEC-web-app/issues/1320 https://github.com/18F/openFEC-web-app/issues/1321

Screenshots of the updated design templates:

Desktop

Mobile

A few notes on what you're seeing

Taxonomy shown, Documentation interaction, & mobile feedback box interaction: See https://github.com/18F/openFEC/issues/1761#issuecomment-229712552

Key This defines the colors & abbreviations used in the chart below. I'd like to try it hidden & toggle-able first, but if we find that users are struggling, we can make it always present.

Contribution size/What's spent chart formats Now uses a consistent format to the "who's raising/spending the most" chart, but integrates an accordion-style row component for the extra details in place of a tooltip or screen positioning jump on mobile.

Bottom of page I've added the other two sibling topic pages so that users don't have to scroll back to the top to get to the other sections. If we later integrate a persistent state for the secondary nav, this would maybe be removed.

[jenniferthibault]

Mobile prototype has been updated here

Steps to completion I'd like to separate the remaining interaction questions into issues that aren't about styling and assign to @onezerojeremy or @noahmanger Those questions include

• what is the graphic/map/table interaction on desktop & mobile for
  • "Where contributions come from" topic page
  • "Size of contributions" topic page
• [x] Sign off/ style changes from 18F team

[noahmanger]

This looks A+ to me. I really like the methodology modals (and how you broke those into two columns) and I think the accordion table interaction works really well: it keeps the interaction very close to the data while being a solid, consistent interaction.

The only thing I'm seeing that we might want to tinker with in implementation is the legend interaction. It's a new pattern, so I'd be interested in seeing if we can find an existing pattern that meets the need.

I'd say visual design is done here, so I'm going to close. Great work!