This is an open space for collaborating on an alternative banner pattern. To join in the conversation please add a comment below.
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.
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.
- 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
- 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.
Proposed solution of:
These awesome collaborators have contributed insights, knowledge, and time to the information above:
Web Consolidation Team
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:
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.
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
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!