Last Update: Sept. 15, 2023
Platform: Web
Designer: Matthias Stenzl
Intro
The Carousel is a UI component to display multiple horizontally aligned items. The component is used to give the user an overview of a higher number of items in a row, which exceeds the width of the screen. With paginations controls on
both side of the component it allows the user to browse through the set of items by swiping right or left.
Usage
In SuccessFactors the carousel component is used to display a set of cards or a gallery of images in several swim lanes on product landing pages.
Types
In SuccessFactors only one type of carousels is in usage. Due to the different sizes of the items in the carousel, the heights of the carousel might change. Regardless of the size of the elements, the function of the carousel remains the same.
Structure & Components
The carousel component contains four elements:
- Section title
- Card elements
- "View All" button
- Right and left pagination arrows
Behavior & Interaction
Users can cycle through the content to access new navigation points. Each card element within the carousel can be clicked to navigate to a detail page. With a "View All" control on the right end of the carousel, the user can navigate down to a drill-in page on which all items from the swim lane will be displayed.
Responsiveness & Adaptiveness
The carousel component behaves according to the responsiveness specifications and follows the Flexible Column Layout which allows content to adapt to varied sizes and number of columns to utilize available real estate efficiently. The flexible column layout enables a stable representation of the cards width. Min-width of a card(288px) is deducted based on minimum screen width 320px(iPhone SE) minus margins on both sides, which is 16px.
Application-specific examples
Carousels are used in SuccessFactors on the landing page of various modules:
Learning Homepage
Growth Portfolio
Opportunity Marketplace
UX Writing Guidance
When creating a a section title (of swimlanes):
- Keep the section title short and crisp, it can´t exceed one line in length.
- Don´t use abbreviations.
- Don't use synonyms.
- Use active formulation.
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:
Resources
Figma design file: https://www.figma.com/file/G1EAqD7LR0hMa5JD27e87l/LHP-2311-Recommendations---Web%2FMobile?type=design&node-id=19-145&mode=design&t=qs5666LW15dcPMfs-4
SF Web Stencils Horizon Template