Last Update: March 08, 2023
Platform: Mobile
Designer: Anthony Chow
Intro
The Approval Card lets a user (typically a manager type of user) to review information about a request from or on behalf of a subordinate employee and approve or decline such request.
Usage
Example use cases include:
- External Training - a request from or on behalf of an employee who is attending a learning course
- Time Off - a request from or on behalf of an employee who is planning to take leave from work
- Job Offer - a request on behalf of a prospective employee who may be given a job offer
Types
The iOS SF Approval Card, like its Android counterpart, looks the same whether tapping it will lead the user to its Snack layer or its Meal layer. Neither iOS or Android SF Approval Card has a tap/select indicator, unlike their web counterpart. The action buttons only come in one variant regardless of whether or not it includes a comment.
Structure & Components
The approval card has 3 parts: Header, Content Area, and Footer Area
Header
Title: The title is mandatory and represents the card’s “point of view”.
UA guidelines: In a few words, explain the purpose of the card and why a user might want to engage with it. Make sure the title is short enough for mobile display. Titles that exceed two lines are truncated with an ellipsis (…), which isn't an ideal experience.
Title Icon: Card header can have a title icon to represent the title. Title Icon is optional.
Snack layer Icon: Snack layer icon is placed to show that snack layer can be reach through the snack layer icon Snack Layer Icon is optional.
Card Content
The content area is mandatory and is reserved for module content. Content appears in the following order, under the title, from top to bottom.
Secondary Information is mandatory.
Tertiary Information is optional.
Label(s) & Value(s) are mandatory.
- Max 2 if there is a Card Title
- Max 3 if there is no Card Title
UA guidelines:
- Make sure it makes sense when read from top to bottom.
- For the link label, try to follow an established convention such as "View X".
Footer Area
Only the footer area of the engagement card can provide actions.
Footer Area can have:
- Approve Action button is mandatory, but Decline is optional.
UA guidelines:
- Follow SAP UA standards and guidelines for buttons.
- Define a label to be shown above "View All" of stacked cards. In most cases, it can be the same as the card title. If the title doesn't work for this purpose, define a string specifically for View All.
Behavior & Interaction
If approving with no option to comment, the action can be executed directly from the action button on the card. If there is an option to comment, clicking the action button will trigger a menu to approve with or without comments.
Stacked Cards: When there are multiple Approval cards on the Homepage with the similar purpose, they will be stacked.
Responsiveness & Adaptiveness
Application-specific examples
Example: Approval Section with cards in the Homepage
