Pass the Salesforce Designers User-Experience-Designer Questions and answers with ValidTests

The Salesforce Lightning Design System (SLDS) is a CSS framework that helps designers and developers create applications with the look and feel of Lightning Experience. SLDS provides a library of design tokens, icons, components, utilities, and patterns that can be used to build consistent, responsive, and accessible user interfaces1. One of the features that SLDS provides for designers and developers is semantic and accessible component markup. Semantic markup means using HTML elements that describe the meaning and structure of the content, rather than just the presentation. For example, using <h1> for a main heading, 

 for a paragraph, or  for a button. Semantic markup helps to improve the readability, maintainability, and SEO of the code2. Accessible markup means using HTML attributes and techniques that enhance the usability and accessibility of the content for people with disabilities. For example, using aria-label to provide a descriptive label for an element, role to indicate the function of an element, or tabindex to control the keyboard focus order. Accessible markup helps to ensure that the content can be perceived, understood, operated, and interacted with by people using assistive technologies, such as screen readers, keyboards, or voice commands3. SLDS provides semantic and accessible markup for its components, which are reusable UI elements that can be customized and composed to create complex interfaces. SLDS components follow the Web Content Accessibility Guidelines (WCAG), which are the international standards for web accessibility4. SLDS components also use the BEM (Block Element Modifier) naming convention, which is a methodology for creating clear and consistent class names for CSS selectors5. By using SLDS components, designers and developers can create user interfaces that are not only visually appealing, but also meaningful and accessible for everyone. References: Introduction to the Salesforce Lightning Design System, Semantic HTML: How to Structure Web Pages, Accessible Rich Internet Applications (WAI-ARIA), Web Content Accessibility Guidelines (WCAG) Overview, BEM — Block Element Modifier

 The next phase after discovery, research analysis, and ideation is prototyping, which is the process of creating low-fidelity or high-fidelity representations of the design solution that can be tested and validated with users and stakeholders. To prepare for this phase, the UX designer should determine what to prototype, which means deciding on the scope, the level of detail, the format, and the tools for creating the prototype. The UX designer should consider the following factors when determining what to prototype:

The goals and objectives of the prototype: What is the purpose of the prototype? What questions or hypotheses does it aim to answer or test? What feedback or data does it seek to collect?

The target users and audience of the prototype: Who are the users and stakeholders that will interact with or evaluate the prototype? What are their needs, expectations, and preferences? How will they access and use the prototype?

The features and functionality of the prototype: What are the key features and functionality that the prototype should include or exclude? How will they support the user goals and tasks? How will they demonstrate the value proposition and the design principles of the solution?

The fidelity and interactivity of the prototype: How realistic and detailed should the prototype be? How interactive and responsive should the prototype be? How will the prototype convey the look and feel, the content, and the behavior of the solution?

The tools and methods of the prototype: What tools and methods will be used to create and present the prototype? How will they affect the time, cost, and quality of the prototype? How will they facilitate the testing and validation of the prototype?

References:

: User Experience Designer Certification Prep: Module 5: Design User Interfaces

: User Experience Designer Certification Prep: Module 6: Validate User Interfaces

: What is Prototyping?

The next phase for a UX designer after completing discovery, research analysis, andideation is to determine what to prototype. Prototyping is the process of creating a model, mock-up, or simulation of a user interface to test out ideas and gain feedback from users. Prototyping can be done in a variety of ways, from low-fidelity paper prototypes to high-fidelity digital prototypes. It is important to consider the purpose of the prototype and the amount of detail needed to accurately test out the user experience.

To prepare for the prototyping phase, a UX designer should review the researchdata and user insights gathered during the discovery, research analysis, and ideation stages. They should determine what needs to be tested out and create a plan for creating the prototype, considering the level of fidelity needed, the resources available, and the timeline. Additionally, they should consider what metrics they want to measure when testing the prototype, such as user engagement, usability, and satisfaction.

References: [1] https://www.salesforce.com/blog/2019/12/ux-design-prototyping.html [2]  https://uxplanet.org/the-importance-of-prototyping-in-ux-design-process-dd4b4a8f76e [3] https://uxdesign.cc/prototyping-a-comprehensive-guide-e87f3d3fbb37

When the Service team at Cloud Kicks faces difficulty due to an overload of list views, the most effective way to improve their experience is by decluttering the list views to make relevant ones easier to find. This can be achieved by:

Streamlining the List Views: Removing less frequently used or irrelevant list views from the public view helps in reducing clutter and focusing on the most pertinent information. This streamlining process makes navigation more intuitive and efficient for the service team members.

Options B (Updating Sharing Rules) and C (Allowing users to manage public list views) might help in managing access to records and customization, but they do not directly address the issue of having too many list views, which is the primary concern impacting the team's ability to find relevant information quickly.

References:Salesforce's documentation on managing list views provides strategies for organizing and customizing list views to improve usability and efficiency. This includes guidelines on creating, editing, and managing visibility of list views to ensure that users have access to the most relevant and useful information.

A UX Designer should take the following steps to create and deliver responsible and transparent AI technology12:

C. Document model cards to clarify intended context and use cases. Model cards are standardized documents that provide essential information about a machine learning model, such as its purpose, performance, limitations, and ethical considerations3. Model cards can help UX Designers to communicate the design choices and trade-offs of their AI systems, and to ensure that they are aligned with the user needs and expectations4.

D. Provide clear explanations of AI predictions or recommendations. Explanations are user-facing descriptions of how and why an AI system produces a certain output, such as a prediction, a recommendation, or a decision5. Explanations can help UX Designers to increase the transparency and trustworthiness of their AI systems, and to empower users to understand, control, and evaluate the AI outcomes6.

References: Salesforce Debuts AI Ethics Model: How Ethical Practices Further Responsible Artificial Intelligence, Generative AI: 5 Guidelines for Responsible Development - Salesforce, Model Cards for Model Reporting, Model Cards: A Framework for Increasing Trust in AI Systems, Explainable AI: A Guide for Making Black Box Machine Learning Models Explainable, Salesforce Supports AI Regulation Advancing Digital Trust and Innovation - Salesforce

C. Document model cards to clarify intended context and use cases.

Model cards are documents that describe the intended use, performance, and limitations of AI models. They help ensure that the AI technology is being used responsibly and transparently, as they provide clear information about the model's context, data, and assumptions. This can help reduce the risk of unintended consequences and build trust with users.

D. Provide clear explanations of AI predictions or recommendations.

Clear explanations of AI predictions or recommendations help build trust with users and increase understanding of how the AI technology works. By providing an understandable explanation of how a prediction or recommendation was made, users can gain a better understanding of the technology and how it is intended to be used. This can also help reduce the risk of unintended consequences and improve accountability.

The design that the UX Designer at Cloud Kicks should use to make the website size and content adapt to the screen size, platform and orientation is responsive. Responsive web design is a web design approach that uses HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones) 1. Responsive web design is not a program or a JavaScript, but a set of best practices that include using media queries, flexible grids, fluid images, and breakpoints to create a layout that can respond to any device being used to view the content 2. Responsive web design is one of the learning objectives for the Salesforce User Experience Designer certification 3. References: [Responsive Web Design Introduction], [Responsive design - Learn web development], [Salesforce Certified User Experience Designer Exam Guide] https://www.w3schools.com/html/html_responsive.asp

https://www.w3schools.com/Css/css_rwd_intro.asp

 The accessibility guideline of distinguishable means that the information and user interface components must be presented to users in ways that are perceptible. This includes using sufficient contrast between text and background colors, providing text alternatives for non-text content, and making it easier for users to see and hear content. When choosing a color for the text and the background of the buttons, the UX Designer should consider the contrast ratio between them, which should be at least 4.5:1 for normal text and 3:1 for large text. This will ensure that the buttons are visible and readable for users with different visual abilities. References:

[1]: Web Content Accessibility Guidelines (WCAG) 2.1, Principle 1: Perceivable

[2]: Web Content Accessibility Guidelines (WCAG) 2.1, Success Criterion 1.4.3 Contrast (Minimum)

The SLDS Validator extension for VS Code is a tool that simplifies working with the Salesforce Lightning Design System (SLDS) in Aura and Lightning components. It provides code completion, syntax highlighting, and validation with recommended tokens and utility classes. It also scans the markup and validates it against a database of guidelines, tips, and best practices extracted from the SLDS documentation. It offers suggestions on how to improve the code and avoid conflicts with SLDS12. References: SLDS Validator - Visual Studio Marketplace, SLDS Validator for VS Code - Lightning Design System

The Salesforce Lightning Design System (SLDS) is a collection of design guidelines, components, and resources that enable developers and designers to build consistent, high-quality, and responsive user interfaces across the Salesforce platform. The SLDS provides UI kits and plugins for popular design and prototyping tools, such as Sketch, Adobe XD, and Figma, that allow designers to quickly create mockups and wireframes using the SLDS components and styles. By leveraging the SLDS, the designer can accelerate the visual design process and ensure alignment with the Salesforce brand and best practices. References:

[Salesforce Lightning Design System]

[UI Kits and Plugins]

[UX Designer Certification Prep: Visual Design]

 The additional UX elements that should be reviewed to influence the brand experience are visual, content, and interaction design. These elements are essential for creating a consistent, engaging, and memorable user experience that reflects the company’s brand identity and values12.

Visual design refers to the use of colors, shapes, typography, images, icons, and other graphical elements to create a visual hierarchy, contrast, balance, and harmony on the page13. Visual design affects the user’s perception, emotion, and attention, and can communicate the brand’s personality, tone, and message13. For example, Cloud Kicks can use their logo, color scheme, and font to create a recognizable and distinctive visual identity for their portal landing page4.

Content design refers to the creation, organization, and presentation of text, audio, video, and other media to convey the brand’s value proposition, story, and information to the user15. Content design affects the user’s understanding, interest, and trust, and can communicate the brand’s purpose, benefits, and voice15. For example, Cloud Kicks can use clear, concise, and compelling headlines, subheadings, and body text to highlight their products, services, and customer testimonials on their portal landing page.

Interaction design refers to the design of the user interface elements, such as buttons, links, menus, forms, and sliders, that enable the user to interact with the page and perform tasks1 . Interaction design affects the user’s behavior, satisfaction, and feedback, and can communicate the brand’s functionality, usability, and responsiveness1 . For example, Cloud Kicks can use intuitive, consistent, and accessible navigation, search, and filtering options to help the user find what they are looking for on their portal landing page.

By reviewing and improving these UX elements, Cloud Kicks can ensure that their portal landing page delivers a positive and coherent brand experience to their users, and that their brand identity is translated into the user experience.

References:

The 5 Elements of User Experience Design

How to Create a Brand Experience That Works With Your UX

Visual Design Basics

Use Branding Sets in Experience Builder

Content Design: What It Is and Why It Matters

[How to Write Effective Web Content for Your Experience Cloud Site]

[Interaction Design Basics]

[Designing User Interfaces for Experience Cloud Sites]

 A prioritization matrix is a method that helps UX designers to inform user stories based on user value and development effort. A prioritization matrix is a table that compares different user stories or features based on two criteria: user value and development effort. User value is the benefit or satisfaction that the user will get from using the feature. Development effort is the time, cost, and complexity involved in building the feature. By plotting user stories or features on a prioritization matrix, UX designers can identify which ones are high-value and low-effort, which ones are high-value and high-effort, which ones are low-value and low-effort, and which ones are low-value and high-effort. This helps UX designers to prioritize the user stories or features that will deliver the most value to the user with the least amount of effort, and to deprioritize or eliminate the ones that will deliver the least value to the user with the most amount of effort. A prioritization matrix can also help UX designers to communicate and align with stakeholders and developers on the scope and feasibility of the project. References: Prioritize User Stories and Features Unit | Salesforce Trailhead, How to Prioritize User Stories (and Build the Right Features), Salesforce User Experience (UX) Designer Certification Guide & Tips