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.
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.
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
Cheers,
Adham
P.s. I didn’t realise that this “in progress patterns” space existed, so I’ve subscribed to notifications.
Hi @adham , thanks for your feedback! We’ll definitely implement those updates to the Waratah and review your other suggestions. Greatly appreciated!