last updated: 20.07.2022
Platform: Web
Designer: Nikola Luisa Wenger
Intro
The Expanding Card allows end users to provide additional content or interactions on the expanded card view which is related to an action triggered from the initial (unexpanded) card view.
Usage
Use if
- An action is triggered by clicking a button inside a card
- Before the action is completed you want to capture additional information from the user seamlessly
- Use only where the interactions are simple and the information is light weight
Do not use if
- You want to capture a lot of information that does not fit inside a card. Use a dialog instead.
- Don't use if the additional information is required for completion.
- Don't use cards to place lists and tables in them!
Structure and Components
Anatomy
The Fiori Cards are the basis for this component. We are following the same card anatomy:
Each card comprises two components: A header area and a content area. The header area stays the same for both initial and expanded state. Only the content area changes dependent on the state.
Card anatomy: Header area (mandatory), Content area (mandatory)
States
The Expanding Card can have two states: The Initial State (unexpanded) which is the default, and the Expanded State which is triggered by user action.
The default state in which the card is displayed on the UI.
In this state the card has a button which puts the card in expanded state
For the user optional step where they can provide additional information related to the action. Card has a confirmation and a cancel button. As this step is optional the confirmation is always enabled even if user does not provide any information.
Wireframe of Initial State and Expanded State
Behavior & Interaction
Main Flow
- User clicks button on the card which puts the card in expanded state with a slide down animation.
- User has three options:
- User can provide additional information and confirm the action
- User can skip the step to provide additional information and confirm the action
- User can cancel the action. Card collapses back to initial state with a slide up animation.
- When user confirmed the action the card will vanish and a message toast can be provided if necessary
Cancel Flow
- There are two possible cancel triggers:
- User clicks cancel button on the card which is in expanded state
- User clicks anywhere else on the UI
- Did the user already provided any additional information?
- Yes: Show data loss message box and let user confirm if they really want to cancel. If they agree, the card collapses back to initial state
- No: Card directly collapses back to initial state.
How does the page behave when a card expands?
Cards in the same row keep being top aligned. Other rows are pushed downwards.
Mockup from Growth Portfolio showing expanded card in responsive grid layout.
Other cards inside the carousel keep being top aligned. Other sections are pushed downwards.
Mockup from Growth Portfolio showing initial (unexpanded) card in carousel component.
Mockup from Growth Portfolio showing expanded card in carousel component.
Responsiveness and Adaptiveness
We distinguish between “cozy” and “compact” Expanding Cards depending on the screen size and we are using fixed card sizes.
All cards have a fixed max width. If a screen size is smaller the card adapts responsively to the screen size. If a screen is wider the card does not get wider than the max width. If there is enough horizontal space another card will be added in a second column with a spacing of 16 px.
Cozy (Size S+M Smartphone and Tablet)
Max Width: 396 px
Height: 181 px
Button: Cozy Mode
Max Width: 396 px
Max Height: 430 px
Buttons: Cozy Mode
Cozy Mode, Initial State, Expanded State
Compact (Size L Desktop)
Max Width: 324 px
Height: 171 px
Button: Compact Mode
Max Width: 324 px
Max Height: 405 px
Buttons: Compact Mode
Compact Mode, Initial State, Expanded State
Accessibility
In initial state the Expanding Card has a button which puts the card in expanded state. The purpose of the button and what users can expect when activating should be clearly announced in form of invisible label and description.
Invisible label: “Add skill Machine Learning to your portfolio.”
Invisible Description: “Opens expanded card view.”
Once expanded, an invisible announcement "object <object name> card expanded" can be provided. Initial focus can be placed on the button to confirm the action in expanded state.
Once collapsed back to initial state because user canceled the action, an invisible announcement "object <object name> card collapsed" can be provided. Initial focus returns to button which triggers the action to expand.
Application specific examples
Adding an inferred skill recommendation to your Growth Portfolio