Remove the button and link options from the hero module

[nataliafitzgerald]

Remove the button and link options from the hero module

User story Updates to hero graphic guidelines #461

Issue

The primary function of a hero is to orient the user and provide the big idea of the page. A hero graphic appears on landing and sub-landing pages. In the Design Manual and in Wagtail we include options for including a button and a call to action link within the hero module. I question sending users to a different page on our site within the hero. We appear to be moving away from doing this but our pattern (and Wagtail) still allow for the option. If including a button or link no longer aligns with our content strategy, I recommend removing these options.

Background

• I believe we included the button option because of "Submit a complaint." And since the existing page isn't built in Wagtail it does not stand as a blocker. This page is currently being redesigned and it will no longer have a button in the hero area. https://[GHE]/flapjack/wagtail-documentation/issues/41 The existing page is not built in Wagtail.
• I do not know of any Wagtail pages that include a link in the hero area.

Discussion

I'd love to hear thoughts from a UX and Content Strategy perspective. @marteki @kurzn @sarahsimpson09 @ielerol

[sarahsimpson09]

@nataliafitzgerald I agree 100%. Heroes should be used to add context to the page, not prompt users to go away from it. Even on pages where the point of the page may be a tool or document to download or click over to, if that link is all the way up in the Hero, there's probably not much point in the rest of the page.

If stakeholders find they need something similar to this capability, I think the easiest suggestion for an alternative would be the featured content module (while following the DM guidelines that it shouldn't be directly below the hero).

[ielerol]

I agree, in general it doesn't make sense for the first thing people see on a page to be a prominent link somewhere else.

It looks like the Paying For College hero has a couple of links embedded in the intro text, but there's a lot going on in PfC that doesn't match our current design standards, and if/when we redesign that tool I'm sure we can find a better way to handle those links.

[kurzn]

I totally agree as well. When redesigning the new submit complaint landing page, we came to the exact same conclusion, which is why we removed the button from the hero.

[nataliafitzgerald]

@marteki @keelerr @schaferjh - What are your thoughts?

[marteki]

I agree with removing the options from our guidelines for heroes, for all the reasons stated above. I particularly agree with removing the idea of immediately driving people to a second page as the primary action for a page.

[schaferjh]

There was also an idea from long ago that a hero could also be a super-featured piece of content (a la "don't go any further, this is the thing we want you to see/do!") but I agree in general that that's not a great use of a hero and am supportive of removing the options from our guidelines.

[nataliafitzgerald]

Thank you all for posting your thoughts! It sounds like there is widespread support for this change. I'll start working on adjustments to the guidelines to reflect this change and follow up with a draft of that for review.

[keelerr]

WAIT! WAIT! WAIT!

I have a new use case. Perhaps.

In general I agree with the logic that we don't want to immediately direct people away from a page they just landed on. However, I am working on a campaign page where the site visitor is coming from an ad. In my mind, this campaign page needs to direct the site visitor to another page (the info they really came for) as quickly and as easily as possible. We lured them to our site, now let's not make them work harder to get to where they want to go.

Please don't make this adjustment before we can at least discuss this particular scenario. Though, you may convince me that a link in the hero IS NOT a good idea.

Will tag the relevant parties in that issue. H/T to @Scotchester.

[kurzn]

@keelerr I wonder in that specific scenario if you could use something like the new complaint landing page uses? Because if you're directing them away that quickly with only a sentence of explanation, what's the point of the rest of the page?

[nataliafitzgerald]

This change has been approved by @caheberer and @schaferjh, so I'm going to move forward. The inline links in Paying for College wouldn't be possible with our current hero pattern (as it is currently designed). We can continue to discuss the niche use case for marketing pages.

[nataliafitzgerald]

I've been working on this update as part of the overall hero page updates. Here's the content related to buttons and links (contained within "Content guidelines --- Purpose"):

"Since the goal of the hero is to get the user to continue reading the page, don't include links or calls to action within the hero. If there is content that needs to link elsewhere for explanation, place it underneath the hero within the main content area."

Can be seen in on the page here: https://nataliafitzgerald.github.io/design-manual/global-elements/heroes.html

[nataliafitzgerald]

Design Manual has been updated (updates have been merged).

@jimmynotjim @Scotchester - Are there any CF updates that need to be made to remove these options from the pattern? I will handle any Wagtail updates on the Platform Team side.

[jimmynotjim]

@nataliafitzgerald yes, there's some clean up to do in the styles and documentation, but nothing that will hold up cfgov-refresh since the CTA was optional anyway. I'll be working on making those changes soonly.

[nataliafitzgerald]

Ok @jimmynotjim - In that case I'll go ahead and close this issue. I am keeping the user story open because of post-release tasks that we talked about tackling. That's issue #461.