Salesforce Certified User Experience Designer Practice Test - Questions Answers, Page 9

Styling hooks are CSS custom properties that allow developers to customize the appearance of base and custom components in a consistent and supported way. They work with web components and shadow DOM, which provide encapsulation and modularity for LWC. Styling hooks use the--sldsnamespace and follow a naming convention that reflects the component, category, property, attribute, and state of the element being styled. For example,--slds-c-button-brand-color-background-hoveris a styling hook for the button component, brand category, color background property, and hover state. Styling hooks can be declared in the CSS file of the LWC or in a global CSS file that affects all components on the page. Styling hooks are not standard CSS properties, but custom ones that are defined by SLDS and applied to the components using thevar()function.Reference:

Styling Hooks - Lightning Design System

SLDS Styling Hooks | Lightning Web Components Developer Guide | Salesforce Developers

--dxp Styling Hooks | LWR Sites for Experience Cloud | Salesforce Developers

The Salesforce Lightning Design System (SLDS) styling hooks use standard CSS properties to easily style base and custom components. Salesforce documentation states that ''SLDS styling hooks are CSS classes that give you access to the same styling used in the Salesforce Lightning Design System. They make it easy to style base and custom components with the same look and feel'' [1].

[1]https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_slds_styling_hooks

Dynamic Forms is a feature that allows users to customize the form fields and sections displayed to users on a page layout. Dynamic Forms can be used to create user-centric, intuitive, and dynamic record creation screens for custom objects, such as Appointment.When creating a record using Dynamic Forms, the UX designer should consider the following two aspects12:

The use of tabs when creating the record is not allowed. Dynamic Forms does not support the use of tabs within the form, as tabs are not compatible with the record creation process. Tabs are only available for viewing or editing existing records, not for creating new ones. Therefore, the UX designer cannot use tabs to separate the fields for different record types or software options on the record creation screen.

Fields can be organized into sections. Dynamic Forms allows the UX designer to group fields into sections, and place them anywhere on the page layout. Sections can have labels, collapsible headers, and visibility rules. The UX designer can use sections to create a logical and clear structure for the form, and to show or hide fields based on user input, data, or profile. For example, the UX designer can create a section for each software option, and use visibility rules to display only the relevant section based on the user's selection.

The following two aspects are not true when creating a record using Dynamic Forms, and should be disregarded:

The form will not be available on mobile devices. Dynamic Forms is compatible with mobile devices, and the UX designer can preview and test the form on different device sizes and orientations.The form will automatically adjust to the screen size and layout of the mobile device, and provide a responsive and consistent user experience3.

All software option sections of the form will always be visible. Dynamic Forms allows the UX designer to use visibility rules to control the visibility of fields and sections on the form. Visibility rules can be based on user input, data, or profile. The UX designer can use visibility rules to show or hide software option sections based on the user's selection of the record type or the software option.This can reduce the clutter and complexity of the form, and provide a personalized and flexible user experience4.Reference:Get Started with Dynamic Forms Unit | Salesforce Trailhead,Salesforce Dynamic Forms: Overview & Deep Dive Tutorial,Dynamic Forms and Actions FAQ | Salesforce Help,Create Dynamic Forms with Visibility Rules | Salesforce Trailhead

The Salesforce Lightning Design System (SLDS) is a collection of design resources that help create consistent and beautiful user interfaces across various platforms. The SLDS includes base components, tokens, design patterns, icons, fonts, and more, that follow the design principles and best practices of Lightning Experience. The SLDS can be used on the following three platforms:

Visualforce: Visualforce is a framework that allows developers to create custom user interfaces for web and mobile applications on the Salesforce platform. Visualforce pages can leverage the SLDS styles to match the look and feel of Lightning Experience, without writing any CSS code.By adding the attributelightningStylesheets='true'to thetag, Visualforce pages can automatically transform the standard Visualforce components into their SLDS equivalents12.

Heroku: Heroku is a cloud platform that supports various languages and frameworks, such as Node.js, Java, or PHP. Heroku applications can leverage the SLDS resources, such as the base components, the tokens, and the design patterns, to create web applications that have a consistent Lightning Experience look and feel.Heroku applications can also use the Lightning Out feature to embed Lightning components into their pages, and use the Lightning Web Components framework to create reusable UI elements34.

Azure: Azure is a cloud platform that offers various services and tools for building, deploying, and managing applications. Azure applications can leverage the SLDS resources, such as the base components, the tokens, and the design patterns, to create web applications that have a consistent Lightning Experience look and feel.Azure applications can also use the Lightning Out feature to embed Lightning components into their pages, and use the Lightning Web Components framework to create reusable UI elements56.

[Lightning Stylesheets for Visualforce | Salesforce Trailhead]1

[Lightning Stylesheets for Visualforce | Salesforce Developers]2

[Build Apps with Lightning Design System | Salesforce Trailhead]3

[Lightning Web Components | Salesforce Developers]4

[Salesforce Lightning Design System for Azure Web Apps | Microsoft Azure]5

[Lightning Web Components and Azure | Salesforce Developers]6

The one token and one utility class that should be suggested to the developers to ensure custom components respect the density settings are: varSpacingMedium. This is a design token that defines the medium spacing value for the vertical and horizontal spacing between elements. This token can be used to adjust the spacing according to the density setting of the user. For example, if the user prefers the Comply density setting, the token value will be 16px, and if the user prefers the Compact density setting, the token value will be 8px. slds-p-around_medium. This is a utility class that applies the medium padding value to all sides of an element. This class can be used to add padding to the custom component according to the density setting of the user. For example, if the user prefers the Comply density setting, the class will apply 16px of padding, and if the user prefers the Compact density setting, the class will apply 8px of padding.

The two UX design principles that are key to creating excellent mobile user experiences are:

Consistency across device experiences. This means that the design of a mobile app or website should match the design of the desktop version, as well as other platforms and devices. Consistency helps users to recognize and trust the brand, as well as to navigate and use the product more easily.Consistency also reduces the cognitive load and confusion for users who switch between different devices12

Prioritization of content and UI elements on the screen. This means that the design of a mobile app or website should focus on the most important and relevant information and actions for the user, and eliminate or minimize the unnecessary or secondary ones. Prioritization helps users to achieve their goals faster and more efficiently, as well as to avoid distractions and clutter.Prioritization also improves the readability and usability of the product on smaller screens34

https://uxcam.com/blog/mobile-ux/ https://uxplanet.org/mobile-ux-design-key-principles-dee1a632f9e6

A service-blueprinting workshop is a process that involves mapping out the flow of a service, identifying the touchpoints, actors, processes, and systems that are involved, and highlighting the pain points and opportunities for improvement. A service-blueprinting workshop is a collaborative and creative way to redesign services with stakeholders, as it allows them to see the big picture, empathize with the users, and co-create solutions. A service-blueprinting workshop is suitable for Cloud Kicks (CK) after they have finished conducting research and synthesizing the findings, as it will help them address the issues uncovered in the study and design better service experiences for their customers.Reference:Service Design Service Blueprints,How to create a service blueprinting facilitation guide,Workshop exercise: Service Blueprint

In-app feedback is a method of collecting user feedback within the context of the product or service, without interrupting the user's workflow. It allows the UX designer to gather insights from a specific set of users at scale and measure their satisfaction, preferences, and pain points. In-app feedback can be implemented using various techniques, such as ratings, reviews, comments, suggestions, polls, or pop-ups .Reference:

: User Experience Designer Certification Prep: Module 3: Conduct User Research

: User Experience Designer Certification Prep: Module 4: Analyze User Research Data

To restyle a Lightning Experience model to meet brand guidelines, the designer should use design tokens and find the appropriate component blueprint. Design tokens are variables that store visual design attributes, such as colors, fonts, and spacing. They allow the designer to customize the appearance of Lightning components without writing any code. Component blueprints are design specifications for Lightning components that provide guidance on how to use them, what properties they support, and how they behave in different scenarios. They help the designer to choose the right component for the model and apply the brand guidelines consistently.Reference: : Design Tokens | Salesforce Developer Guide : Component Blueprints | Lightning Design System : UX Designer Certification Prep: Designing with Lightning Components | Trailhead

According to the SLDS documentation, icons require a containing element with the class slds-icon_container for accessibility support. If the icon is used without a visible, descriptive label, a title attribute is needed on the containing element. The title should describe the icon. For example:

<span class=''slds-icon_container slds-icon-utility-announcement'' title=''Description of icon when needed''> <svg class=''slds-icon slds-icon-text-default'' aria-hidden=''true''> <use xlink:href=''/assets/icons/utility-sprite/svg/symbols.svg#announcement''></use> </svg> </span>

The title attribute provides a tooltip for the icon when the user hovers over it, and it also helps screen readers to announce the icon's meaning. The other attributes (href, class, and for) do not provide this functionality.