Last Update: Oct 17, 2022
Platform: (Web, Mobile-to follow)
Designer: Clarisse Cornet
Intro
Home Page has three categories of cards:
- Enables action either approve or decline a request. In addition, they can do so with or without comments. They belong under the 'Approval' section
- Both actionable and non-actionable. They belong to to the 'For You Today' section
- There are four types of Engagement cards:
a. Action
b. Information
c. Social
d. Recommendation - Mostly navigational. This is configured by the Admin from the customer. They follow a template and go through a step-by-step creation flow. They belong under the 'Organizational Updates' section
- There are two types of Custom cards:
a. Survey
b. Organizational Updates
Usage
- Action
a. For user performing a task for others, eg. Manager to review their direct report’s performance with Avatar, with/without Stack strip
Access to additional information available to enable action without leaving the current page: Snack layer
Access to information only available in the application/module, navigating away from the current page: layer
Example
b.) For user performing a task for , eg. Employee to do their own performance review without Avatar, with/without Stack strip
Access to information available to enable action without leaving the current page: layer
Access to information only available in the application/module, navigating away from the current page: layer
Example
a. For user viewing a task for , eg. Manager to review their direct report’s performance with Avatar, with/without Stack strip
Access to information available to enable action without leaving the current page: layer
Access to information only available in the application/module, navigating away from the current page: layer
Example
b. For user viewing a task for , eg. Employee to do their own performance review without Avatar, with/without Stack strip
i. Access to information available to enable action without leaving the current page: layer
ii. Access to full information only available in the application/module, navigating away from the current page: Meal layer
iii. Example
a. Single, Multiple + Access to information available without leaving the current page: layer
b. Access to information only available in the application/module, navigating away from the current page: layer
c. Example
- NOTE: Current implementation has 144px image height for Compact, that is aligned with OMP Recommendation card 2305 will put the HP Recommendation card at 182px. Same adjustment will be done for Cozy
- Example
- Survey
- There is only one default image provided out-of-the-box that customers can use. The rest of the information comes from the customer
- Example
2. Organizational Updates (to follow)
Types
- Approval Cards
- Engagement Cards
- Goal Cards, Team Goal Cards
- Spot Award Cards
- Recommendation Cards
- Custom Data Cards
- Capabilities Cards
- Feedback Card
- Quick Cards
Structure & Components
The title of AO cards follow the guidelines for standard titles.
The content area is reserved for assignment owner info, such as AO avatar, name, job role and contact info.
Behavior & Interaction
Example of a simple card with secondary info and when there is no secondary info:
Responsiveness & Adaptiveness
The Assignment Owner Card is 100% responsive.
Application-specific examples
The Assignment Owner Card in SAP Fiori Horizon style:
UX Writing Guidance
When creating a title for a card:
- Keep the card title short and crisp, it can´t exceed one line in length.
- Don´t use abbreviations.
- Don't use synonyms.
- Write titles in headline style.
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
Missing information