Visual design of data landing page

[jenniferthibault]

Style wireframes from https://github.com/18F/openFEC/issues/1596

[jenniferthibault]

Alrighty! I have a few desktop options going that I've uploaded on InVision as well as a stab at a mobile layout. There are some guide comments already in there, and I've posed a few open questions. Would love feedback from @noahmanger / @onezerojeremy

The major differences are:

The intro/header space:

This is a new format idea that would let us keep a header feeling, but make it take up much less space. Whatever happens here, would be the pattern for other landing pages as well (Reg/Reporting, Legal Resources). The image is a placeholder, but I'm aiming for a more textural feel than something specific or identifiable.

This layout buys back some space, but uses the header space to prioritize a feature instead of introducing the rest of the page.

and the graph color scheme:

This option uses aqua and grey colors from the existing palette, and I think would give us the most flexibility on interior pages where we may need more colors on maps. I think this will be the most functional, still feels neutral, and still keeps it brighter than grey only.

This option uses just aqua colors, which mitigates risk of anyone associating aqua as positive and grey as neutral or negative.

Open questions:

• In the Advanced Data section, if we include the mega menu, do we need all of these categories expanded? Could we embed the child elements in an accordion to get back some space on a very long page? Or do we even need it on the landing page at all?
• Mobile First off, I don't think this is all that great, it's a loooooot of page scrolling. What can we do to improve this? Would we consider dropping the Candidate, PAC, and Party overview lists from mobile? Anything else we can condense or use other UI elements to present better?

[noahmanger]

Re: Advanced data: I'd be interested to see how this works as it's own page. Seems like with it in the menu, maybe we don't need it here, which would cut down on space considerable (and also give us a nice, single place to direct people to for advanced data).

Re: Colors: the aqua + gray combo definitely makes for clearer distinctions, but I agree that it may be misleading. @shawnbot do you have thoughts?

Re: Mobile: I don't think we should hide things, but maybe there's other ways we could lay it out. I'm seeing more and more instances of mobile UIs making use of swipe-able panels that scroll horizontally (with dots below to signal position). That might be something to consider.

I'll put more granular thoughts in InVision.

[shawnbot]

These look really great. The only thing I would suggest is reordering the colors in the stacked bars to maximize the contrast between adjacent ones, for instance:

If the gradient-like sequence is intentional (to me it conveys the sense that candidate contributions > PACs > party committees > other), though, then it would make sense to keep the order as-is.

Also, if the colors in the stacked bars correspond to different types of contributions, then the colors of the dots alongside the totals on the left should match the bars. (Forgive me if I'm responding to the wrong thing here!)

[noahmanger]

Oh nice! That really helps. Yeah, the colors are meant to match the categories on the left. I think breaking them out makes it clearer that they're signifying categorical differences rather than a range.

[onezerojeremy]

Very nice indeed!

Made some comments in the Invision, but also just seeing the header with the search, which I like because it moves the search up front and center, and gets folks to the increasingly charming charts faster.

And now I see that indeed I mistakenly commented on ux things in Invision when it was really about graph color scheme. Apologies.

Are we planning on other visualizations besides the stacked bars? Is that more of a Noah question?

[jenniferthibault]

Oh, sorry @onezerojeremy ! There are three pages to that mockup (use the right arrow inside InVision to get to the next pages) and UX thoughts welcome here as well, better now than later :)

@noahmanger you may want to take a look at Jeremy's comments in the screens as well.

[jenniferthibault]

Alllllrighty — Looking at the discussion in InVision, I think it's clear that we need to get something out and in front of users, rather than further refining at this stage. With that in mind, here's my proposal for what we should move forward with, based on feedback here and in discussions with our team & FEC about all dashboards:

I've uploaded it to InVision here:

Changes

• Uses the hero template from #330 which moves the search functionality out of the hero space
• Integrates Profiles, Advanced Data, and Election search into the main body of the page
• Adds accordion element for the About this data feature, so that there will always be enough space to provide all the detail needed.
• Adds Explore this data button within that functionality, so that users can find the raw data in the data tables
• Removes Get started buttons in favor of more obviously linked headlines, using »
• Changes the framing of the feedback box to be easier and faster for users to engage with. To discuss this element in detail, and to see it's full interaction please go to issue #357. (Since this is a mini interaction of its own that is certainly worth diving into in detail, I think it's worth separating from here to continue working on it so that it doesn't block the page from moving forward. For the purposes of this page's design, all we need to know is that there will be a feedback mechanism in this box.)

Next steps:

• I believe that the graphics are entirely ready to implement, since I didn't change anything within them, and didn't hear any style change requests beyond the colors in the last round.
• Layout and order of the rest of the page: might want to hold slightly, in case folks have thoughts on what they're seeing here.
• Copy: @emileighoutlaw do you want to edit copy when implemented, or start a separate issue to discuss anything?
• Please chime in if you do have thoughts. If you've seen this, but don't have anything you want to discuss more or add for now, please give the issue a 👍 so I know you've seen it and signed off.

[shawnbot]

I love it, @jenniferthibault!

[noahmanger]

I'm really digging this. Only minor style I'd like to see is for the bar chart: we need a separate style for "in progress" (which would show some bar activity, i.e. for those committees who have already filed within that quarter) and a style for a quarter yet to come.

[onezerojeremy]

start with people

The people and pacs are at the bottom and I would advocate strongly for them to be up top. I know they aren't visually engaging charts, but I don't think the content of the graphs are the ones we should lead with on the data landing page. Thinking of a novice user, starting with data they can easily understand the impact of (such as which candidate is raising or spending the most) is critical. To put it bluntly: As someone who only has a passing understanding of campaign finance, I don't know why I should care that PACs outraised or outspent Party committees, but I know why I should care that candidate X has outspent candidate Y, and I can probably get from there to understand why it matters that PAC X has outraised PAC Y.

explore this data as secondary cta

On the charts themselves, while I understand it conceptually, I feel that moving "explore this data" button under the "about this data" drawer will have the effect of hiding it. From my perspective, "Explore this data" is probably the secondary CTA, only after one of the exploration CTAs baked into the charts themselves, and should be given more prominence than being only accessible after clicking "about this data".

other thoughts

I like the two cards for election and advanced data, though i'd swap them so that folks reading in an F patter will trip over it before advanced data.

Where does "Fundraising Overview" go?

[emileighoutlaw]

Working on content here: https://github.com/18F/fec-style/issues/360

[jenniferthibault]

@onezerojeremy that's for unknowingly setting things up so that I could get some additional context into this issue :) I kind of forgot that your hiatus from this project was smack dab in the middle of when we set the goals and wireframes for this page.

1. These intro graphics exist to start teaching less experienced users what is interesting and important through graphics. We've intentionally surfaced fundamental pieces of CF data, and broken it down in ways that start introducing concepts and actors, in that order. There's a more comprehensive writeup on design goals and preliminary finding from testing the wireframes in the preceding Wireframe issue.
2. To that end, we wanted to break things down to the most basic concepts of financial activity first, (fundraising and spending), as we heard that was one mental model in which even novice users began to understand the concepts. We had tested two models, one arranged by financial activity, one arranged by actor, and the outcomes led us to decide we would lead through a primary financial activity model, and supplement with actor channels (the three column lists you're suggesting get moved up.)
3. Both the Fundraising Overview and the Spending Overview titles link to pages like this that allow users to pull apart the pieces of each category in order to understand common questions about CF data.
4. You are right that users latch on to the candidate names, which is why (as I understand it) we are intentionally not putting them first in this instance. We don't want to divert attention before we introduce a feature that is built to help people understand what they are looking at.

You'll see more on this in the preceding wireframe issue writeup, but as I understand it, the 1st action we expect users to take is interacting w/ the graph data, the 2nd is diving deeper into one of the Overview page links. The Explore data is a fallback because people expect to be able to always find the underlying data, and it may turn out to be a common action for more advanced users. It's not, however, where we are trying to guide people, it's more of a validation of what we're showing, and option.

In this updated mockup, I've added a style for data that's in progress ( before I didn't know we'd actually be showing data in this column at all), switched the order of Advanced Data & Election Data cards, and moved the Explore data button out of the accordion. My preference is to leave the order of the sections alone for now, since we had evidence through testing the past wireframes that it wasn't problematic. (We may find counter info from later testing, and decide to pivot then).

[jenniferthibault]

tldr: You are right, but we did that on purpose 😄

[shawnbot]

I have one more comment, and it's something that I mentioned in passing to @noahmanger, but now that I'm looking at this again I think it's worth more consideration, especially in light of @onezerojeremy's comment above.

I think it might be worth breaking up the stacked bars into individual charts, and align each series ("Total", "Candidates", "PACs", et al) with the categorical total along the left side. So the total would go first and consist of a bar chart with exclusively black (or whatever) bars, "Candidates" would be accompanied by a dark teal bar chart with the same y-axis ("absolute" scale), and so on.

I assume that the plan is to keep the contribution categories in the same order, regardless of their subtotal. This works for the stacked bars, but for un-stacked bars you might want to order them by subtotal descending, so the most "important" ones are always at the top, but people can still compare them using color.

What do y'all think?

[onezerojeremy]

First: Jen, thank you so much for the write-up of the context! Incredibly helpful. I'm still very much trying to catch up on all the things I missed, thanks for generously and patiently bringing that back in and linking to relevant docs. I'll continue to dig in. Apologies for dragging us backwards to decided design decisions.

1. These intro graphics exist to start teaching less experienced users what is interesting and important through graphics. We've intentionally surfaced fundamental pieces of CF data, and broken it down in ways that start introducing concepts and actors, in that order.

Ah, cool. So one question is: what is important and interesting about the each dataset we're showing (to the novice user)? What are we teaching with each graphic, and how? Probably I missed this stuff in the research, and will keep digging.

On the overview page links as being the secondary CTA, makes a lot of sense! We may want to consider a second plug of those after or in the chart (so there's a natural progression from the thing you're interested in to more about it without scrolling back up). But we can also just hold off on that until we see what users actually do.

[noahmanger]

Good discussion! Thanks for the thorough refresh on the background, Jen, and thanks Jeremy for prodding on this.

To the question as to what each graphic is teaching, what we're intending to do here is introduce people to concepts, pull people in to further lines of exploration, and do so by providing actual data.

The two charts together introduce people to the two main types of activity that you can investigate on the site: money in and money out, and are meant to draw users in to their respective overview pages by demonstrating the kind of content (i.e. visuals) that they can find there, while also providing real information in their own right (rather than just a screenshot of an example)

The page as a whole is meant to also introduce people to the main types of actors. I totally agree that the ranked lists do a better job of illustrating what each of those groups consist of, and I'm agnostic as to whether they go above or below the charts.

In addition to giving people a sense of what each group consists of, the charts in particular introduce users to the relative scale of the three groups and the activity that they conduct. By showing this data over time, we show the way that activity intensifies further in a cycle. It might not be the most critical dimension to the data, but I think it helps orient people to the overall lay of the land.

The question links associated with each chart (which users responded to really well in testing) will be a crucial piece of the overall interaction: while we're not showing all these other ways of looking at the data, the prompts are designed to illustrate the different ways that one could look at it, and then lead people to charts that do just that. I think that the specificity of the prompts will balance out the generality of the summaries. (Though this makes me wonder if we want to find a way to include both the prompts (with dead links) and the feedback tool in this initial release?)

At the same time, I agree that these aren't the most provocative ways to look at the data. But because there's so many different ways to slice and examine the data, I have a hard time thinking of a way to pick one dimension worthy of boosting to the top page, and doing so in a way that doesn't seem arbitrary or that provides a suitable representation of the data contained in the level below.

Final thought: ultimately, this page needs to 1) help people who have a question find the data to answer that question, and 2) give people who don't have a question some interesting starting places. I think the only way we'll really be able to measure both of those things is by trying things out on the live site. Since our partners have said they're down with this version, I'm inclined to want to get it up there as quickly as possible and then possibly test new ideas live or make decisions based on feedback and data we get.

TL;DR: Please keep the critique coming. These have a specific job to do in pulling people further in to the site, but we won't know how well they (or other variants) work until we get something live. And then let's iterate like heck.

[noahmanger]

And @shawnbot thanks for the chart idea! I remember talking about it and then I totally forgot to relay it back. I think it's an interesting idea. @jenniferthibault do you want to take a swipe at that? (Ok if you want to stick to this for now, too).

[noahmanger]

@shawnbot is this the kind of thing you're talking about?

[onezerojeremy]

Thanks Noah! I truly appreciate everyone's patience in getting me up to speed. Sounds like we are ready to start getting something out there and that we've mostly covered the ground I'm hoeing so I'm totally cool w knocking out a prototype version to test! To the users!

But yeah I'll keep asking questions.

On Tuesday, May 24, 2016, Noah Manger notifications@github.com wrote:

Good discussion! Thanks for the thorough refresh on the background, Jen, and thanks Jeremy for prodding on this.

To the question as to what each graphic is teaching, what we're intending to do here is introduce people to concepts, pull people in to further lines of exploration, and do so by providing actual data.

The two charts together introduce people to the two main types of activity that you can investigate on the site: money in and money out, and are meant to draw users in to their respective overview pages by demonstrating the kind of content (i.e. visuals) that they can find there, while also providing real information in their own right (rather than just a screenshot of an example)

The page as a whole is meant to also introduce people to the main types of actors. I totally agree that the ranked lists do a better job of illustrating what each of those groups consist of, and I'm agnostic as to whether they go above or below the charts.

In addition to giving people a sense of what each group consists of, the charts in particular introduce users to the relative scale of the three groups and the activity that they conduct. By showing this data over time, we show the way that activity intensifies further in a cycle. It might not be the most critical dimension to the data, but I think it helps orient people to the overall lay of the land.

The question links associated with each chart (which users responded to really well in testing) will be a crucial piece of the overall interaction: while we're not showing all these other ways of looking at the data, the prompts are designed to illustrate the different ways that one could look at it, and then lead people to charts that do just that. I think that the specificity of the prompts will balance out the generality of the summaries. (Though this makes me wonder if we want to find a way to include both the prompts (with dead links) and the feedback tool in this initial release?)

At the same time, I agree that these aren't the most provocative ways to look at the data. But because there's so many different ways to slice and examine the data, I have a hard time thinking of a way to pick one dimension worthy of boosting to the top page, and doing so in a way that doesn't seem arbitrary or that provides a suitable representation of the data contained in the level below.

Final thought: ultimately, this page needs to 1) help people who have a question find the data to answer that question, and 2) give people who don't have a question some interesting starting places. I think the only way we'll really be able to measure both of those things is by trying things out on the live site. Since our partners have said they're down with this version, I'm inclined to want to get it up there as quickly as possible and then possibly test new ideas live or make decisions based on feedback and data we get.

TL;DR: Please keep the critique coming. These have a specific job to do in pulling people further in to the site, but we won't know how well they (or other variants) work until we get something live. And then let's iterate like heck.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/18F/fec-style/issues/322#issuecomment-221422187

[shawnbot]

Yep, @noahmanger, that's exactly what I was thinking!

[jenniferthibault]

Thanks for the sketch Noah, that's not immediately how I pictured it, so saved a few iterations. One tough thing with that approach here is that it makes a wicked long page if it's all expanded by default, even with shorty graphs. Showing them all at once like this isn't really an option for me, but I wanted you all to see it for yourselves.

If we condense it, it creates a better page viewing experience, but you lose the context that having the graphs separated creates. I've used a slider here, tried an accordion but it didn't make much sense:

The layout area may force us to a horizontal bar chart format, which gains us back some vertical space in the month label space on the axis. We ok with this? (This is kind of quick and sketchy, to get the idea across)

[noahmanger]

Hm. Yeah that's tricky. I think of the three, the first one is the most useful, but I see the height problem. That's way too long. I feel like I've seen this done in a super dense way before. I think we can ditch the x-axis for all but the bottom one, which would buy some room. @shawnbot do you have any examples?

[shawnbot]

I agree that you could probably limit the x-axis to maybe the top (on top) and bottom (on the bottom) charts to save space. I've seen it done well too, but am having a hard time finding any good examples.

[onezerojeremy]

yeah number one seems most promising in terms of comparison between charts. but probably not as easy as the orig stacked bars.

I think we may have officially gotten to the point where the actual data might help us make design decisions. or if there are corollaries with charts the FEC already has? Just worried that there may be a big enough swing in the numbers to make some of the bars extra small or extra big (we'll def want to keep the same scale between if we want to allow intergraph comparisons). likely this has already been considered, but raising it in case.

possibly these big ones would also make a good detail page.

[jenniferthibault]

Sounds like a clear preference for the first format above, but I noticed that no one actually mentioned why the horizontal chart wasn't working for this, can you elaborate? Both for my benefit (I thought I was really on to something promising there, lol) and for future reference.

Yes, same scale for all graphs.

My strong preference for which we start putting real data into is B below: Two rows of graphs is much more preferable than five rows, and you get the chance to horizontally compare the bar heights of graphs in the same row.

A

B

C

[onezerojeremy]

Cool iterations! Really like where this is headed

imho, the horizontal makes it a tad harder to do visual comparisons between the sizes of the bars in different charts (already challenging), when they aren't lined up. so for instance comparing party committees in apr-June and PACs during that same time is trickier. of these i think A is, at the moment, the easiest to compare.

but that said, if there is natural grouping between them (like ppl are more likely to want to compare PACs and Candidates) to break them into rows, it could work.

could also use total raised as a benchmark: have it as a feature of each graph so you can readily compare it to the category graph

[emileighoutlaw]

I finally have a content draft to be included with this: https://docs.google.com/document/d/1ZuatMQS9VUb0cD_MRqFHZto5Isd4O4rtmFoN7Nk4VXA/edit?pli=1#heading=h.vxepmt9t7xyd

Should I open a new issue, or can y'all pull from here?

[noahmanger]

No need for a new issue. I already have one for implementing the page. Thanks!

[jenniferthibault]

The real data is provided here.

The type of graph we use should depend on what we think we can help teach users about what's important to learn in this data. I think here, that takeaway should be to notice how all types of spending changes from month to month, and what groups usually spend more/less.

That makes me think that an unstacked, but grouped bar chart (like in the google doc, and below) is most appropriate, and that we should drop the "total spent" graph for each category, but keep it in numbers on the left panel as we had:

Before, it feels like the graphs did a better job pointing out how each type of group changes their spending month to month.

[jenniferthibault]

But question on that: if we use this approach, which tooltip implementation would be best for 508 color dependency?

A: one tooltip per bar

B: one tooltip per bar group

[noahmanger]

Love it. This seems really solid. I think the second tooltip option works best as it lets you compare all the numbers to each other right there, and provides a much larger click / tap target than the individual skinny bars.

[noahmanger]

But now would be a good idea to ask @nickbristow . Do the tooltips above satisfy the need to not rely on color to communicate information?

[jenniferthibault]

Noodling about this a bit more, I don't think that Option B: tooltip showing all the bar chart numbers conforms with 508 standards to the best of our abilities, because it relies on the user to match the color dot with the color bar. Technically it looks probably ok, because you can use the numbers on the right to tell which is highest/lowest, but it still looks like the intent is to color code the categories. Option A above is better for this, because it highlights just one bar at a time, so the color-coding is less important.

One way to address this might be this approach, which uses a mini chart, with a border added to the relevant bar in order: This is visually better, but probably technically more complicated.

Bump to @nickbristow : any thoughts on this?

[nickbristow]

Technically, providing the info in another way beyond color, in this case the tool tip. Is enough.

I like patterns, or labels jutting off the top of the bars. Tool tips aren't the best because you can't get the info at a glance.

[jenniferthibault]

Thanks Nick! Sorry for the silence on my end, I was working through the mockups to see how we might mitigate the use of tooltips throughout if we could. That discussion continues in https://github.com/18F/openFEC/issues/1656 , but I think this is otherwise ready for implementation in https://github.com/18F/openFEC-web-app/issues/1229.