Experience Customization

Use Experience Customization to establish the foundational settings that align how a user interacts with the application:

• Localization & standards: Setting language, time zone, and regional formats for currency and numbers.
• Visual accessibility: Configuring high-contrast modes, display density, and specific UI treatments (like date formatting or name display) to meet regulatory and power-user requirements.
• Role-based personalization: Tailoring the interface and feature set based on specific job responsibilities.
• Governance & privacy: Establishing data-sharing levels, security permissions, and communication preferences.
• Communications: Selecting notification channels and where alerts appear on screen.
• Workspace structure: Initializing team spaces, naming conventions, and project templates from the start.

This pattern is built on the Wizard structure:

1. Workflow title: A clear title that frames the guided setup (e.g., “Customize your experience”) and remains consistent across steps to maintain context.
2. Step title: A concise label for the current preference category (e.g., Regional settings, Display preferences, Governance & privacy).
3. Stepper (optional): Shows progress across categories; hide the stepper for single-step configurations.
4. Content area: The selection controls for the step and, when needed, real-time previews of changes. For “Dynamic live preview,” use a split view where the preview container takes ~50% width and updates in real time.
5. Button bar: pPrimary navigation/actions (Cancel, Previous, Next, Finish). Keep actions consistent to support a predictable setup flow.

There are three ways to present choices, depending on the number of options available and how much visual guidance the user needs to make a decision:

Use components like Toggle button, Radio button, Switch, or Dropdown for functional changes where the outcome is already understood. This pattern is essential when dealing with a large volume of options or high-density layouts where space is a priority. For example, when there are more than five selections, a Dropdown or Combo box component is preferred to keep the interface organized and prevent the user from being overwhelmed by too many visible choices.

Selectable card to provide a clear representation of a final state, such as a specific page layout or notification position style. This pattern is ideal when the product goal is to help users visualize the difference between choices through images or icons. Because cards occupy significant screen real estate, consider this pattern only when there are limited number of options—typically between two and four selections. If the list grows larger, it is often better to revert to a standard form control to maintain usability.

For high-impact choices that require the most significant visual validation, use a split-view layout where a visual preview container takes up 50% of the screen width. This container updates in real-time to reflect the user’s choice as they make it. This approach is best for complex configurations where the user needs to see the immediate effect of their selection on the overall environment before committing to the change.

This following examples demonstrate how selection patterns are applied to specific user workflows, ranging from functional settings to high-impact configurations.

This example handles global settings like language selection, time zone, and currency formats to ensure the interface meets regional requirements. These controls help user quickly align their workspace with their local environment.

This implementation focuses on functional efficiency for settings with many options. Using the Combo box allows users to filter large lists, while a Switch is used for simple on/off actions like “Automatic translation.” These controls are ideal here because they are compact and familiar to suers who need to make quick, functional changes.

This example allows users to select their preferred notification position, but this card selection style can also be used for density changes, high-contrast modes, notification positions, and data table treatments like “zebra mode.” Using cards here is effective because it helps users visualize the impact of these changes on the UI layout before they are applied.

This example is for choosing how numbers and currencies are displayed, such as switching between abbreviated or standard formats. It allows users to see exactly how their data will look before they save the changes.

This layout uses a split-view where selecting an option on the left immediately updates a preview card on the right. This provides visual certainty, ensuring the user is confident in the final output and reducing the need to go back and fix formatting later.

This example shows when a user chooses a selection that isn’t recommended by the business accessibility standards. This pattern utilizes cards for high-impact visual decisions but provides active guidance when those choices depart from the recommended baseline.

This pattern is used for critical choices—like establishing security tires or data-sharing levels—where a selection is mandatory to proceed. Card are used here to give these distinct categories more prominence, ensuring the user makes an intentional choice based on clear, descriptive information rather than a simple list item.

This setup ensure that mandatory requirements are met without stalling the user’s progress or using unresponsive components. By avoiding disabled state and hidden interactions, the interface remains fully navigable and transparent for all users.