Last Update: May 24, 2022
Designer: Mengxiao Han, Nedda Ren
Status: Developed in 2105
Intro
The primary use of this pattern is to perform add action within the Avatar Group.
It is specifically designed for the Welcome Dialog used in Dynamic Teams when team lead successfully creates a dynamic team in the SucsessFactors app. The app will guide the team lead to add team members to the dynamic team. This action is considered as one of the primary actions for the scenario.
Usage
This pattern can be used when there is a need to perform the add action on the Avatar Group.
- The avatar group is used to display people information
- Add action needs to be performed along with the Avatar Group
- The avatar group is not used in the design
Structure & Components
This pattern is available for web responsive designs.
It has 4 visual states: Regular, Hover, Down and Disabled outlined as below.
Behavior & Interaction
Clicking on the button it will trigger a dialog:
Application-specific examples
Types
This pattern is created and used in Dynamic Team. Example flow can be found here in the Figma file.
Different types will be discribbed in the Figma file: https://www.figma.com/file/ljYtfYZSptVuRgSOv6Piz1/B2205-Dynamic-Teams?node-id=42%3A23843
UX Writing Guidance
Use a verb in the imperative for all actions (for example, “Save”, “Cancel”, “Edit”).
For common actions, use the standard action labels defined in the UX consistency product standard for terminology (UXC-015).
Do not combine questions with “OK”/”Cancel” buttons. Avoid Yes/No buttons.
Like “OK”/”Cancel” buttons, “Yes”/”No” buttons force the user to read the whole message text.
For showing more information, use:
- Show More
- Show Less
- Show All
- Show Details
Confirming Actions
Use a verb to confirm actions ( “Save”, “Apply”, “Filter” … ).
Use to confirm the information displayed on the screen. For example, for the Warning message "You have unsaved changes. Any changes will be lost.", use "OK" to acknowledge that there are unsaved changes and to go on, or "Cancel" to not continue and keep working on your changes.
OK is often used to close personalization dialogs to confirm the current personalization. In most cases a specific verb (e.g., Save, Apply, Filter) is preferrable.
Use for error messages.
Do not combine questions with “OK”/”Cancel” buttons. Avoid Yes/No buttons.
Reason: Like “OK”/”Cancel” buttons, “Yes”/”No” buttons force the user to read the whole message text.
Accessibility
Do not change the text or icon of a toggle button when it is pressed. Screen readers announce the “pressed” state for the action. If you use a different text for the pressed state, the screen reader announcement doesn’t make sense.
Do not change the text or icon of a toggle button when it is pressed. Screen readers announce the “pressed” state for the action. If you use a different text for the pressed state, the screen reader announcement doesn’t make sense.