Last Update: August 14, 2023
Platform: Web
Designer: Tina Marseille
Intro
A banner is a heading appearing at the top of landing pages or homepage. It is a visually attractive and decorative area with a picture and reduced amount of text and controls that are accessible and is legally complained to WACG 2.0. Purpose is to carry a headline with any pictures.
Usage
Banners can provide static or dynamic information strategically positioned in the header of a homepage to grab users' attention. Through banners you can:
- Users are received and addressed by a personal salutation:
- Banners can provide personal information about an employee.
- Recommendations for topics, products and training courses are offered to the user.
Types
Banners are distinguished by various functions:
- Static Image – with textual information and charts
- Dynamic images (within an image carousel)
- Image(s) with interactions via buttons or menus, icons and links to trigger navigation
Static image with interaction
dynamic image within carousel
Structure & Components
A banner is usually positioned on a significant part of the UI. In SuccessFactor the banner is located with a defined distance between header and content. The banner covers the entire width of the screen. The structure of banner images can be quite simple to complex depending on the elements on the banner image.
Behavior & Interaction
From static and dynamic banner images actions can be started. Buttons, menus, icons, and links on the banner image can be used for instance to trigger navigations.
Responsiveness & Adaptiveness
The banner should behaves according to the responsiveness specifications. The following examples displays the responsive behavior for the screen width: XL (1440px), L (1024px), M (600px) and S size.
Application-specific examples
Banners are used in SuccessFactors in three modules:
- People Profile Banner (Landing Page)
- Homepage Banner (HXM Suite Homepage)
- Learning Banner (Landing Page )
Banner in Homepage
Banner in People Profile
Banner in Learning Homepage
UX Writing Guidance
When creating a banner text:
- Keep the text short, clear, and precise.
- Don´t use abbreviations or synonyms.
- Use no more than 160 characters of full sentences with periods.
- Use the active voice and imperative mood.
The following links point to:
- a chapters in the Frontify UX Guideline for additional information: About UX Writing
- the page: SAP SuccessFactors HXM Suite - Product Assistance: SAP SuccessFactors HXM Suite
For questions to the UA Team, please use the following DL:
Accessibility
The banner component was developed in accordance with the product standards assessibility standards and is therefore 100% assessible as a component: https://www.figma.com/file/hvBFMT0PpUlahPAuKE2LhI/SF-Web-Stencils-V-1.31?type=design&node-id=26668-75209&mode=design&t=sWV5yEWbjyf2HDfK-4
Resources
Fiori Design Guideline: Link to the chapter of block layout: https://experience.sap.com/internal/fiori-design-web/block-layout/#top
SF Web Stencils Horizon Template