Date: 18.08.2020

Platform: Web

Designer: Kalacheva, Dasha, Klymenko, Hanna

Intro

The primary goal of an engagement card should be to drive the user towards career or skill progression.

All cards divided by a simple rule – if user needs to perform an action on the card - it is an actionable card, if not – it is a non-actionable card.

The homepage supports the following card types:

• Guidance cards - FYG (For your Guidance) cards
• Recommendation cards - FYI (For your Information) cards
• Social cards - Celebratory cards
• Organization cards - FYR (For your Reference) cards
• Guidance cards - FYG (For your Guidance) cards
• Recommendation cards - FYI (For your Information) cards
• Social cards - Celebratory cards
• Organization cards - FYR (For your Reference) cards

Usage

Use engagement card to provide emphasized information to user or engage user to an action. One engagement card is related to one specific content (for example, Goal Card is describing only Goals).

• Use Actionable card pattern when user needs to perform an action.
• Use Non-Actionable card pattern when user does not need to perform action or need more information to perform action.

as a Quick Action.

Structure

The engagement card has 3 parts: Header, Content Area and Footer Area.

The card height is flexible and adjusts depends on a content.

Collaboration with User Assistance

Always consult your User Assistance (UA) colleague for any text that appears on an engagement card. Please include UA early in the design process and stay in touch throughout the design and development cycle.

Card Header

The title is mandatory and represents the card’s “point of view”. It is a natural language reflection of the annotated view.

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.

Card header can have a title icon to represent the title. Title Icon is optional.

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 is mandatory and is reserved for module content. Content appears in the following order, under the title, from top to bottom.

• Sub-Title is optional.
• Primary Information is mandatory.
• Secondary Information is mandatory.
• Tertiary Information is optional.
• Link to module page is optional. There can be up to two links.
• 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:

• View All or View # of Stacked Cards (mandatory ONLY for stacked cards)
• Primary Action Button is optional
• Overflow Button is mandatory. Overflow Button will contain secondary and extra actions for a card.
• 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.

Scrolling

No scroll allowed for engagement card.

Behavior and Interaction

Overview

All engagement cards will have interaction layers ().

For Responsive Web Engagement Card is clickable.

Engagement cards (on homepage) represent the first layer (bite), which provides the most required information necessary to perform a task.

Use snack when more information needed to perform an action. Clicking on an "View more details icon" - will open the dialog (snack), to see the additional card content. Snack layer may include Go to Meal Links. By Clicking on Links user will navigate away from the Homepage.

Meal is a module page. To navigate to a module (meal) user clicks on a Go to Meal (GTM) Link. Engagement card may have up to two GTM Links.

Use Cases

If there is layer, each card may have:

• At least one meal link + Overflow Button
• One primary action + one meal link + Overflow Button
• Max two meal links allowed if no primary action present + Overflow Button

If there is a layer, each card may have:

• No primary action and no meal link, Overflow Button is mandatory
• No primary action and no meal link on bite layer. Up to 2 Meal links is allowed only inside a snack layer. Overflow Button is mandatory
• One primary action + Overflow Button

A dialog over a dialog as a pattern for warning, error messages, or something similar is not permitted. Consider using the Fiori:

1. Message Strip which can be inside of the Quick Action or Snack dialog
2. Form Field Validation which brings the warning even closer to where it’s happening as it is shown in-place

Stack Card

A stack card is a collection of engagement cards. These quick view cards are displayed in the object stream (overlay). The advantage of using stack cards is that users don’t have to leave the homepage, and therefore don’t lost their focus.

• ALL engagement cards can be stacked
• Total number of engagement cards on the page should not exceed the max limit of 8
• The sequence of the cards will be defined based on the use case priority and context of usage
• The next card in queue will be displayed only after performing actions on the available card
• The expanded view/behavior of the stacked cards remains the same as defined in Fiori Stack Card guidelines

Responsiveness

Responsive design is supported by a responsive grid.

The responsive grid positions UI elements in a 16-column flow layout. It can be configured to display a variable number of columns depending on available screen size. With this control, it is possible to achieve flexible layouts and line breaks for large, medium, and small-sized screens, such as desktop, tablet, and mobile.

All cards are designed for both Desktop and Mobile.

Resources

• https://zpl.io/V1Gye5E (for those who have Zeplin license. If you need to be invited to the project please reach out to Kalacheva, Dasha)
• https://scene.zeplin.io/project/5eb467fea0d4bf7974d1764a (no license needed)