Last Update: Sept 08, 2022
Platform: Web
Designer: Lase Bayudan
Intro
Bite-Snack-Meal is an interaction pattern that task objects follow primarily on Homepage.
An interactive task first appears as a card, or "Bite" on Homepage. This initial layer gives the user a quick summary of the task and any actions that the user can take on the task while on Homepage.
If the user wants to see more information in order to take action on Homepage, they can reveal the task's "Snack" layer. This second layer of information gives the user more context about the task, so that they can take action on it while on Homepage.
If, for any reason, the user must see all the details of the given task, they can navigate to the task's "Meal" layer. This final layer of information is the destination page of this task, where the user can see all the details associated with this task so that they can take action on that page.
Usage
- The task is actionable from Homepage and a user may want to view more details about the task in order to be more confident about taking action.
- The task is not actionable from Homepage and requires the user to view more details before taking action.
- There is no additional information that is valuable for the user to take action.
Avoid
Creating an experience in which the Bite does not have a click destination, as doing so would break the user's expectation to click on a card and see more details.
- Note that there are some exceptions that have made it to implementation and have non-clickable cards.
- EC alert
- Anniversary/Bday, KR Success Celebration social card
- Award - But, moving forward, it is better to maintain consistency of the interactions and avoid creating a non-clickable card.
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.
On mobile, there are only 2 components involved in this pattern:
- Card: the component that represents the "Bite" layer.
- Dialog/Full-screen Modal: the component that represents the "Meal" layer.
Note: "Snack" layer is inherently shown first through the "Meal" layer by way of a mobile device's more limited viewport.
Behavior & 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.
Responsiveness and Adaptiveness
Card is responsive to the screen size.
- Max width: 388px
- Max width: 324px
Dialog follows Fiori's Dialog component behavior.
All components of this pattern follow Fiori's Content Density pattern (Cozy and Compact).
Accessibility
Accessibility of the Bite (insert image of a11y annotated Bite)
Accessibility of the Snack
Examples (Application-specific examples)
Approval Bite on Homepage, Approval Snack on Homepage, Meal Page
Engagement Card on Homepage, Engagement Snack on Homepage
Resources
SAP My Home also uses parts of the Bite - Snack - Meal pattern what was discribed in this chapter. It is therefore interesting to take a look at this approach as well: My Home