Collab space: Banner Alternative

This is an open space for collaborating on an alternative banner pattern. To join in the conversation please add a comment below.

Banner Alternative

Background:

The current Hero banner pattern allows you to use a simple tagline and description, as well as imagery to call out specific information, or promote an area of the site. However the current banner does not allow for separate CTA text to the headline and can pose issues with images not fitting the required ratio. Therefore we have looked at an alternative banner design when the current hero banner does not allow for effective communication to users.

Overview

The Banner Alternative features a headline and optional description and CTA button to allow for flexible communication to users, as well as a squarer image space to make image selection easier more effective in supporting the banner message.

When to use the banner alternative:

Use to promote a product, service or area of information to your users when text, alternate to the headline, is required to describe/highlight the desired user action, or when there is no call to action.

Do:

  • Use when separate call to action text is required
  • Remove the description and/or call to action when not required by the user
  • Use descriptive and concise CTA text to communicate a users action on selection
  • Use when a full width image would hinder the effectiveness of the banner message

Do not:

  • Use for sites or products with large volumes of content where users may search for a variety of options, consider Hero search

Interaction Design & Usability Research

  • Homepage banners create a focus point for users visiting a site to learn the key product, service or piece of information. It confirms to users they are on the correct site where they will find value, and helps them dive deeper into the content.
  • In a 12 column grid the content area would be 7 columns and the image would be 5 columns, with the image extending to the edge of the viewport on the right.
  • On small screens the image is hidden to bring banner text to the top and reduce scrolling.
  • CTA button has a hover, focus and active state to show you can interact with it.

UI Design

Proposed solution of:

Light option:

Dark option:

Credits

These awesome collaborators have contributed insights, knowledge, and time to the information above:
Web Consolidation Team

1 Like

Banner update

We’ve been looking at how we can make the new hero banner flexible for different use cases and wanted to share our progress. Looking at the different goals of NSW Government products and services, flexibility in the way we communicate to users is crucial.

Therefore we are looking to build three variants of a hero banner to give this flexibility, these include:

Introductory
Displays a headline and description. Use to introduce and give further context to the service or product. This option may feature an image where it is relevant and impactful.

Call to action
Introduces a primary call to action button. Use to highlight the primary task or piece of information and allow the user to take quick action. This option may feature an image where it is relevant and impactful.

Featured list
Displays a list of linked content. Use to surface high priority information that is relevant and valuable to the user in order for them to deep dive quickly. Can be used when a product or service has multiple high priority goals. Images and call to action buttons not featured with this option so the list content remains the point of focus for the user.

We’d love to hear your feedback on the proposed designs and usage guidance, please share below.

Nice work @amy.howard,

Here’s some feedback based on what we’ve built:

  • Suggest updating Waratah watermark to 20% tint of black as per brand guidelines (although I think the navy tint looks nicer) - https://www.nsw.gov.au/nsw-government-brand-guidelines/graphic-element

  • Suggest cropping the Waratah watermark at its half way point as per brand guidelines.

  • Suggest increasing the text width from half to 2 thirds when there’s no background image. We often have long headings which would result in a very tall hero banner.

  • Suggest decreasing letter spacing of H1 to allow for long headings.

  • Suggest including a min-height for banners that include a background image to ensure that the image doesn’t get cut off at a strange place. We set ours at 350px.

  • Suggest including Waratah watermark on top of background image as per brand guidelines.

Hope it helps :slight_smile:

Cheers,
Adham

P.s. I didn’t realise that this “in progress patterns” space existed, so I’ve subscribed to notifications.

1 Like

Hi @adham , thanks for your feedback! We’ll definitely implement those updates to the Waratah and review your other suggestions. Greatly appreciated!