Last Update: Sept 11, 2022

Platform: Web

Designer: Gregory March

Nudge Pattern for "My Team" Card

Home Page with Nudge Pattern for "My Team" Card.

Intro

The Nudge Pattern indirectly pushes the user to make a decision or take an action. It proposes adaptive designs of the decision environment as ways to influence user’s behaviour and decision-making. (Also see https://en.wikipedia.org/wiki/Nudge_theory)

It can be used to launch the app or navigate to the page content. Nudges are a way of making application content available to end users in a consistent manner. A nudge can show details about a single app or page, or contain related information from multiple sources.

Cards introduce users to the content in the underlying source. Make sure that your card focuses on the most relevant content.
Use cards if supportive visualizations and meaningful navigations are helpful for users.
Don’t use individual branding.
Avoid unnecessary white space on the card.

The nudge pattern was developed for b2211.

The chapter describes the use of the nudge Concept in a SuccessFactors specific interpretation. It is also advisable to read through the Fiori Guideline Chapters for Recommendation and Situation Handling.

Usage

You want to give users easy access to an app or page that is relevant for a business task.
You want to nudge the user to take a certain action, giving a preview of the most important content for the task.
You want to let users complete a simple action right away, without navigating to the underlying app.

Structure and Components

On web, there are 3 components involved in this pattern:

Card: the component that represents the "Bite" layer.
Dialog: the component that represents the "Snack" layer.
Page: the component that represents the "Meal" layer.

Behaviour & Interaction

Cards on Homepage can have one of three interaction patterns:

Bite-to-Snack: The Card doesn't have a destination page. Instead, the only additional context provided to the user is through the Snack layer.
Bite-to-Snack-to-Meal: The Card has a destination page, and the user can progressively gain more context through the Snack, and then Meal, layers.
Bite-to-Meal: The Card has a destination page, and the user must navigate to it in order to complete the task.

Dialog Window for taking an action "Pending Tasks".

Entry Point: Home Page with Nudge Pattern for "My Team" Card.

Responsiveness and Adaptiveness

The responsive behaviour for nudge pattern depends on the container control of the host environment (for example, SAP Fiori launchpad). The size of the card adapts dynamically to the size of the container.

Card is responsive to the screen size.