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