fecgov / openFEC-web-app

DEPRECATED See https://github.com/18F/fec-cms for fec.gov's code
Other
43 stars 31 forks source link

Design election pages to use new layout templates #2200

Closed patphongs closed 7 years ago

patphongs commented 7 years ago

So that users can browse election pages in a format that is more consistent with other profile pages and can main sections on page more easily.


screen shot 2017-07-17 at 1 29 17 pm

Follow-up from #2167

Completion criteria:

jenniferthibault commented 7 years ago

Once we began digging into this issue there were a few more UX-level questions to answer than the straightforward adoption of an existing page template (which is what I thought it was originally). Some of the following design work is still wireframe-y, but I wanted to get some ideas out for others to see.

Specific design notes

It feels helpful to add context about the election

Having an intro or overview about the election you're viewing gives some context to the candidates you're able to compare. What if the first tab was About this election which would tell you who is currently in office, when they were elected, and when the next upcoming election for the seat is, as well as linked to compliance and reporting information (which matches up nicely to what we've planned to do for the changes to the election comparison tools).

screen shot 2017-07-31 at 11 27 19 pm

Though this doesn't necessarily have to be the first tab

About the election might make sense as the last tab in the list, since people will frequently be coming to these pages from a specific candidate's profile, and the ability to compare candidates' financial summaries may be top of mind. screen shot 2017-07-31 at 11 37 21 pm

It feels helpful to be able to start another election search from these pages without returning to the menu

But it also feels that that feature shouldn't be a primary call to action if you've already navigated to this page. I've tried out the use of a small accordion with this feature, positioned where users are familiar with finding filtering or navigation tools as a first hypothesis

screen shot 2017-07-31 at 11 27 09 pm

In order to accurately frame what are going to find in the other tabs, it feels helpful to position the other tab labels around the candidates specifically, instead of the elections generally.

For example, using the label Candidate financial summaries instead of Financial summaries, which feels like it might contain more broad election trends screen shot 2017-07-31 at 11 32 12 pm

Without testing these specifically, it's hard to know if the individual tables should be changed at this point

Responding to completion criteria 2 above, I don't think we can know that at this stage. I'd propose holding on that question to see if the other changes make improvements.


Next steps:

noahmanger commented 7 years ago

Nice. A few thoughts:

  1. I really like the "about" tab but I think your second version makes more sense: I'd put it last and position. It's supplementary info, not the most important info for understanding what's on the page.

  2. For tab language, what about using the word "Compare" in trying to speak to the mental model of these as a comparison page? "Compare candidate financial totals", "Compare individual contributions to candidates"

  3. I really like bringing the election lookup tool here and think the side bar accordion is clever. The other idea I as toying around with was to put it in the breadcrumb bar, which mirrors the placement of the legal resources search. Something like: image

Wherever it goes, I think we'll want it to be in the same place across all comparison pages (US > State > District)

  1. Don't worry about adding additional tables. I started some of that stuff in my comparison concepts which is good enough for now.
jenniferthibault commented 7 years ago
  1. Agreed, the "About" tab feels better when it's not the landing tab
  2. I initially leaned in the direction of adding "Compare" before each item as well, but if we need to do that for almost all of them, maybe it's better to add it to the page title? "New York district 7: Compare candidates" ? I would appreciate some help from a content designer on this if we can get it
  3. Thanks for exploring those options, I went down the same path! Ultimately it felt tense to put it so close to the universal site search bar, so I'm interested in trying out the accordion, which we'd also be able to use on profile pages

Next steps

So this is carrying over to sprint 3.3

noahmanger commented 7 years ago

Resolved by https://github.com/18F/openFEC-web-app/pull/2231