Reduce height of hero

[edmullen]

Summary

This is a suggestion. I'm dropping it here to not lose track of it.

On the legal side, I've observed users missing the content below the hero because it outside of the viewport on desktop. I think the visual impact of the hero could be retained while reducing the height to provide greater indication that content is available below.

We're using the primary hero styling because I wanted consistency with the other second levels. I think reducing the height some could prove beneficial across the site, so I'm pitching that idea here.

cc @jenniferthibault @manger @adborden

[jenniferthibault]

Seeing similar patterns on the data side, and our latest mockups for the data landing page also hint toward a smaller hero space. Looking at work @emileighoutlaw is doing on the copy for the Reg/Reporting side in https://github.com/18F/fec-cms/issues/283 also supports a faster experience over the hero area.

I'm assigning this to myself, and backlogging it until next sprint.

[edmullen]

I wanted to follow up on this after a couple more rounds of testing that indicated a shorter hero would help people see the down-screen components better on desktop. Specifically, on the legal resources landing page, moving the nav and content area higher will help people understand that the page is not only about search, though that should remain prominent.

[jenniferthibault]

Alrighty, I have a redesign for the hero template that I'm excited to show you all. Here is your link to an InVision display! First, per usual, I will make you read through some thoughts on the rationale behind the changes 😁 🚨 long post alert 🚨

• My goal for this template is to keep a recognizable, distinct feel to the top of each main section's landing page. This will help give users a sense of their position within the site, and I hope to create a sense of "intro to something"-ness, when a user recognizes this pattern.
• For heroes that direct the user toward an action (like the search on Data and Legal), changing the layout from vertically centered and stacked to side-by-side columns and flush left allows us to both introduce the section overall and introduce the targeted interaction. Side-by-side also allows us to save vertical space.
• I'd like to introduce this slice of a textural images to the hero template (photo is still a placeholder for now, but would be unique for each!) purely with an aesthetic motivation. One of our early visual identity design goals was to encourage information to be visually presented, through photos and graphics. So far, we're heavy on the graphics. While these images won't add narrative to the design of these pages, I think they will help us nudge the design maturity forward a bit, and will ease the transition between future pages, which could be more apt for photos. Having a small slice of image here will help tie these in better. (And I think it really livens things up without too much vertical space sacrificed. It should be about the height of the breadcrumb space).
• Move the "What does it mean to register and report" text up to the hero intro area of the Reg/Reporting page: we are able to jump right into the content faster. We lose a place for the "Already registered?" search box, but would love to think through alternative placement together later on. It also addresses this issue on balancing the space on that page. Thoughts @emileighoutlaw ?
  • 
• Legal resources: Dropping the "We’re designing a new way to get legal resources." alert from the middle of the page allows us to keep a consistent template. I'm wondering if you'd be up for this @edmullen , since there are other contextual ways to give feedback?
  • 
• Note: all copy that I've inserted is for placement only! Would love @emileighoutlaw 's thought on the hero intros for each section.

Desktop template

Tablet template

Mobile template

And because it's hard to see the real size here, here is your link to an InVision display again! Feel free to comment directly on that, and/or discuss here.

cc @noahmanger @emileighoutlaw @edmullen @adborden

[emileighoutlaw]

Yay, Jen!

Already registered box

I'm still not convinced this has been a useful addition to this page (especially now that people will be able to search candidates and committees from the mega menu).

Can we validate or invalidate my hunch with analytics?

Content thoughts

I like the consistency of language of "Find details on..." that we have in Legal and Campaign finance.

Campaign finance

I'm eyeing the introductory sentence now that you've moved it to the same level as the search box— it feels both broad and hard to parse somehow.

Our search bar already has "candidates and committees" in the placeholder. Could we winnow this sentence to something like:

Find details about fundraising and spending in federal elections. (I'm feeling a little subversive here, but I'm wondering what would happen if this text even went away completely? With the header and the placeholder text, I feel like we've already pretty much conveyed what's in the intro sentence?)

Speaking of placeholder text, the word "profile" is throwing me— I like it in our mega-menu, but it doesn't feel like the right word to have in this box. Could it be:

Search candidates and committees

Law

Does this encompass all of what our legal section should do?

Find details on the laws and regulations governing campaign finance activities

I think it's meatier than this, right? It's law, regulation, court cases, Commission opinions, Commission rules, enforcement actions

[edmullen]

Thanks for all this @jenniferthibault. I appreciate the narrative.

PHOTO

I agree the photo treatment enhances the overall aesthetic and makes it feel more rich — rich like chocolate, not rich like affluent.

ALREADY REGISTERED BOX

In reading about this in the other issue, I was thinking this could be accomplished inline within the body as a simple link to the committee search page. Almost like an "Already have an account?" link on a signup page. So instead of a fixed module, where appropriate just include "Already registered? Find your committee" link. So that would be in support of removing, though my assessment is just intuition, not based on users.

SEARCH

Retaining the search within the hero space concerns me for a couple reasons.

1. Mixing concerns

Now that the hero is smaller, it feels a bit like we're mixing concerns, positioning the user within the site and promoting a first action. Given the reduced space, this feels more tense now.

One possible route: I wonder if search could be shifted into the white space of the page right below the hero, similar to this, but with reduced negative space:

I think that could be made to work well with the new results format:

2. Unified search

I think eventually there's going to be a need to grapple with search across all the things. Not because users will be looking for content from multiple sections, but because the won't know which one to choose prior to a localized search. (I'm not suggesting we should abandon localized search.) Once all the prose content @emileighoutlaw is working on launches, I think there will be a real need for users to be able to skip navigation and find what they need through search. The new results patterns are not in conflict with this. Fixing the search within the hero feels less flexible and more brittle now.

So I fully understand the role of a local search at the content type level and don't see that ever going away...

...but I'm less clear on search at the major section level, where on the data side, it's essentially providing the ability to search some of the content within the section. This is sort of an incomplete thought. I'll think about it a bit more and follow up.

[jenniferthibault]

On search

Separating the search from the hero space makes a lot of sense to me: in our current version, where the hero space takes up so much vertical room, you need to embed an action or else it's not clear what you can do. In this template, with a shorter hero, more of the page's functionality will be visible, so we can separate the intro from the first interaction. To keep clear of universal search vs search within each section, I think adding the section's icon within the search bar is helpful. I made a quick icon for the legal side to demonstrate the concept, but we can keep working on that separately.

On making the entire landing pages identical

I do not think that all landing pages need to be totally identical in format because they're all serving different goals right now, and the designs reflect that. It's nice to build parity when goals are close, like Reg/Reporting & Legal, but no need to force it when it doesn't fit. (So no need for a side menu on the data page). For now, the goal of the design is to let users realize they are on a section landing page using just the hero space alone. If we do it well, and don't send mixed messages on other pages of the site, I believe it will work.

On content

If it takes some thinking & exploring, @emileighoutlaw I'd like to open a new issue for to work out of specifically for that. I'm finding it hard to track design and content feedback for this all in one place, even though they are certainly related. https://github.com/18F/fec-style/issues/356

Here's an InVision display with the new mockups, and also copied below. The pink is to signify that that part of the page is not part of the hero template. If you're all 👍 with this concept, I'd like to move this forward to implementation, and find photos for each section.

[noahmanger]

That all makes a lot of sense to me. Thanks!

[edmullen]

I like all this too!

[jenniferthibault]

Thanks for the feedback, all! Moving it to implementation in https://github.com/18F/fec-style/issues/370

[noahmanger]

Closing this since it moved to implementation.