UX Fundamentals PDF

UX Fundamentals - Given a scenario, identify which UX method should be used to define a user experience. ======================================================================================================== **After studying this topic, you should be able to:** - **Describe** the purpose and i...

UX Fundamentals - Given a scenario, identify which UX method should be used to define a user experience. ======================================================================================================== **After studying this topic, you should be able to:** - **Describe** the purpose and importance of UX artifacts in the design process. - **Explain** how prototyping helps in the UX design process. - **Analyze** the different stages of the design process where prototypes are beneficial. - **Identify and describe** low-fidelity prototyping techniques commonly used in Salesforce UX design. - **Recognize and explain** medium-fidelity prototyping techniques commonly used in Salesforce UX design. Salesforce UX design involves creating intuitive interfaces using UX artifacts and prototyping techniques. Prototypes are used for ideation, exploration, and validation, with low-fidelity methods like paper prototyping and medium-fidelity methods like wireframes. Prototype testing is a critical phase in the design process where prototypes are evaluated by users to gather feedback and uncover usability issues. Effective planning and testing of various kinds of prototypes are essential for successful Salesforce UX designers. UX Artifacts ------------ - **Screens**\ Screens refer to the visual interfaces or displays that users interact with on digital devices to access and engage with a product or service. - Screens refer to the visual interfaces or displays users interact with on digital devices to access and engage with a product or service. - **STEPS OF SCREENS CREATION**\ Designers define information hierarchy and organize design elements to guide users\' attention.\ They position critical data in visible areas while placing secondary and tertiary information in less prominent areas.\ Designers help users locate the information they need using intuitive headings and relating similar elements.\ They iteratively refine screen designs with testing to ensure optimal usability and user satisfaction. - - **Screens** - Screens are sequential stages in the design process, starting from conceptualizations and progressing to more detailed representations, used to visualize design ideas before implementation. - **Sketch**\ A quick and hand-drawn representation of a design idea or concept used to explore and communicate initial concepts and layouts. It helps in refining ideas before moving on to more detailed design stages. - **Wireframe**\ Medium-fidelity visual representations of a user interface that show a design's basic structure, layout, and content without getting into specific graphic details, helping to define the information hierarchy. - **High-Fidelity**\ Detailed and refined design representations that closely resemble the final product, including visual aesthetics, interactive elements, and design details. They provide a realistic picture of the user interface. - - **Prototypes**\ Prototypes are functional representations of a design concept that allow designers to explore, test, and validate ideas before investing significant resources into development. - ### Low-Fidelity Prototypes - **Paper Interfaces**\ Hand-drawn interfaces simulate the interaction flow of a digital product, offering a quick and cost-effective way to visualize ideas. - **Sketches**\ Rough visual representations are used to explore and communicate design ideas quickly, providing flexibility during the early stages of design. - **Borrowing and Recombining**\ Utilizing existing materials and components in new combinations to spark innovative solutions and iterate on concepts. - **Live Action and Surveys**\ Using activities and interactions that resemble the concept as inspiration, often paired with surveys to gather user feedback. - **Role-Playing**\ Acting out user interactions and scenarios to better understand and refine the user experience by simulating real-world usage. - **Building Block Prototypes**\ Interlocking plastic bricks are assembled to demonstrate the structure or layout of a product, making it tangible and interactive. ### Medium-Fidelity Prototypes - **Mockups**\ Static or partially interactive representations that showcase the visual design and aesthetics of a digital or physical product. - **3D-Printed / Foam Models**\ Physical forms of a product are created using 3D printing or foam materials, providing a tangible and realistic design experience for testing and validation. - **Splash Pages**\ Simple two-page websites that utilize mockups to present a concept and include a button for users to express interest, helping gauge user appeal and gather insights. - **Wireframes**\ Visual representations that outline the structure of a digital interface, focusing primarily on functionality and layout without incorporating detailed graphic design elements. - **Interactive Prototypes**\ Functional prototypes that simulate user interactions and demonstrate the flow of a product, enabling users to provide feedback and test usability in a realistic setting. - ### **High-Fidelity Prototypes** High-fidelity prototypes are advanced representations of a product, closely resembling the final design in functionality, visuals, and interactivity. Below are common types: - **Clickable Prototypes**\ Fully interactive models that mimic the final product's behavior, allowing users to navigate through features, workflows, and interfaces as they would in the live version. - **Pixel-Perfect Mockups**\ Detailed visual designs that include precise layouts, typography, colors, and imagery, representing the exact aesthetics of the finished product. - **Functional Software Prototypes**\ Prototypes built using actual code or development tools, incorporating advanced interactivity and backend processes for a nearly complete user experience. - **AR/VR Prototypes**\ High-fidelity prototypes designed for augmented reality (AR) or virtual reality (VR) applications, providing immersive experiences for testing and interaction. - **Hardware Prototypes**\ Fully functional physical models created to resemble the final hardware product, often including working components, real materials, and refined aesthetics. - **Responsive Web Prototypes**\ High-fidelity prototypes of web applications or websites that adapt to various screen sizes and devices, simulating the final experience across platforms. - **Mobile App Prototypes**\ Highly detailed and interactive prototypes specifically for mobile applications, including animations, transitions, and gestures to reflect the app\'s final functionality. These prototypes are ideal for usability testing, stakeholder presentations, and development handoff, bridging the gap between design and implementation. - **Mapping**\ Mapping is the process of visually representing information, relationships, or user experiences to inform the design of practical solutions. Mapping is visually representing information, relationships, or user experiences to inform the design of practical solutions. - **UX mapping aids** in identifying opportunities for improvement, optimizing user flows, and aligning the user experience with business goals. - **By visually mapping the user experience**, designers foster empathy and facilitate cross-functional collaboration to create more user-centric solutions. - **Mapping helps designers gain insights** into user needs when interacting with a product. - **UX mapping techniques include:**\ Journey Map\ Service Blueprint\ Ecosystem Map\ Empathy Map\ Mental Model\ Storyboard I. **Service Blueprint**\ A service blueprint outlines the end-to-end process of an individual's interaction with a product, including the before and after states. II. **Mental Model**\ A mental model is a representation that individuals use to understand and interpret the world, shaping their perceptions and behaviors with products. Mental models are representations that individuals use to understand and interpret the world, shaping their perceptions, expectations, and behaviors with products, systems, or experiences. **BENEFITS OF MENTAL MODELS**\ Mental models play a crucial role in web and application design by leveraging users\' knowledge and familiarity to create intuitive and easy-to-use functionality. **AN EXAMPLE OF MENTAL MODEL**\ Using a shopping cart icon in e-commerce websites taps into users\' mental models of a physical shopping cart, facilitating their understanding and expectations of the online shopping experience. **Storyboard**\ A storyboard is a sequence of visual sketches or illustrations that depict vital interactions in a user\'s journey, helping to visualize the flow of a design concept. **SEQUENCE OF ILLUSTRATIONS**\ Storyboards are a series of sketches or illustrations that showcase the key moments and interactions in a user\'s experience, helping to visualize the flow of the user journey. **BENEFITS OF STORYBOARDS**\ They allow designers to communicate and align with stakeholders on the design concept to gain early feedback before moving into detailed design and development stages. Storyboards depict the sequence of events in a user\'s journey to capture interactions, emotions, and critical touchpoints that enhance the understanding of the user experience. IV\. **Journey Map**\ A journey map is a graphic depiction of a process or experience and interactions with a product or service over time. **Journey Map** **HOLISTIC VIEW OF THE USER EXPERIENCE**\ Journey maps provide a holistic view of the user experience, mapping out the user\'s actions, thoughts, emotions, and pain points encountered throughout their interaction with a product over a period of time. **OPPORTUNITIES FOR IMPROVEMENT**\ Journey maps identify gaps and opportunities for improvement, enabling designers to enhance the user experience by addressing pain points, optimizing touchpoints, and aligning the product with user needs. Journey maps visually illustrate the end-to-end user experience, capturing user interactions and touchpoints with a product or service. V. **Empathy Map**\ An empathy map is a valuable tool for understanding and empathizing with a target user or persona\'s thoughts, feelings, needs, and behaviors. empathy maps are visual tools that capture and organize insights about how users think, feel, act, and speak. Empathy maps consist of four quadrants that aid in identifying personas' motivations. **SAY**\ The Say quadrant captures direct quotes obtained from user interviews. **FEEL**\ The Feel quadrant encompasses excitements, frustrations, and other sentiments experienced by the persona. **THINK**\ The Think quadrant documents the persona\'s thoughts and priorities related to the product or service. **DO**\ The Do quadrant outlines the actions and behaviors exhibited by the user during interactions with the product or service. VI\. **Ecosystem Map**\ An ecosystem map illustrates the relationships and dependencies between elements, such as people, systems, services, and channels, within a broader context. **BROADER CONTEXT**\ Ecosystem maps provide insights into the broader context in which a product or service operates, enabling organizations to make informed strategic decisions and identify potential gaps. **MORE THAN TECHNOLOGY**\ These maps extend beyond technology, encompassing information, services, channels, and human interactions, including social systems where teams collaborate towards shared objectives. Ecosystem maps illustrate the relationships between stakeholders, technologies, and touchpoints within a complicated environment. - UX Artifacts ------------ UX artifacts are deliverables created during the UX design process that capture design decisions and insights for developing user-centered products or services. VISUAL REPRESENTATION OF THE DESIGN PROCESS UX artifacts serve as tangible or visual representations of the design process and decisions, allowing for effective communication and collaboration among stakeholders, designers, and developers. BENEFITS OF UX ARTIFACTS UX artifacts help validate design concepts, gather user feedback, and facilitate iterative improvements to enhance the overall user experience when engaging with a product or service. **Screens** Screens refer to the visual interfaces or displays users interact with on digital devices to access and engage with a product or service. **STEPS OF SCREENS CREATION**\ Designers define information hierarchy and organize design elements to guide users\' attention.\ They position critical data in visible areas while placing secondary and tertiary information in less prominent areas.\ Designers help users locate the information they need using intuitive headings and relating similar elements.\ They iteratively refine screen designs with testing to ensure optimal usability and user satisfaction. Prototyping ----------- **Prototypes**\ Prototypes are functional representations of a design concept that allow designers to explore, test, and validate ideas before investing significant resources into development. **Low or High Level of Detail**\ Prototypes can range from low- to high-fidelity representations, depending on the level of detail and functionality needed to communicate the design idea effectively. **Benefits of Prototyping**\ Prototyping helps identify and address usability issues, gather user feedback, and make informed design decisions, leading to more successful product outcomes. **Why is Prototyping Helpful in UX Design?**\ Prototypes transform abstract ideas into tangible manifestations, offering cost-effective means for creators to take ownership of their solutions. **Tangible Form of Abstract Ideas**\ Prototypes transform abstract ideas into tangible forms by creating physical manifestations that people can interact with, providing a concrete representation of envisioned concepts. **Cost-Effective and Time-Efficient Models**\ Prototypes are cost-effective and time-efficient compared to the development of full-scale products or applications. Creating paper prototypes, clickable wireframes, or 3D printed models can be accomplished quickly, allowing for rapid iteration and exploration of ideas. **Ownership and Responsibility Over Solutions**\ Prototypes empower creators to take ownership of their solutions with hands-on exploration, experimentation, and refinement. Through the iterative process of prototyping, creators can actively engage with their ideas, make informed decisions, and shape the direction of their solutions, fostering a sense of ownership. **Use Cases for Prototypes**\ Prototypes can generate ideas, try different approaches, and confirm a design\'s effectiveness and usability. **Ideation**\ They serve as means to generate ideas and inspire others to expand upon them. **Exploration**\ They enable the exploration of various approaches to accomplishing a task and allow designers to question established assumptions. **Validation**\ They are utilized to affirm that a design effectively addresses a problem and is functional. **Low-Fidelity Prototypes**\ Low-fidelity prototypes are created using basic materials or tools. They serve as rough representations of ideas, needing more details or advanced functionality. **Benefits of Low-Fidelity Prototypes**\ Low-fidelity prototypes allow for rapid iteration, exploration of design alternatives, and early user feedback. They are cost-effective, easy to modify, and help identify potential flaws in the concept before investing resources into final product development. **Ideation-Level Questions**\ Low-fidelity prototypes function as a tool for generating ideas and providing inspiration that can be further developed by others. They are suitable for addressing ideation-level questions effectively. **Examples of Low-Fidelity Prototypes**\ Low-fidelity prototypes are simplified representations of a design concept that allow for quick and inexpensive testing and iteration. **Sketches**\ Rough visual representations are used to explore and communicate design ideas quickly. **Paper Interfaces**\ Hand-drawn interfaces that simulate the interaction flow of a digital product. **Borrowing & Recombining**\ Utilizing existing materials and components in new combinations. **Live Action and Surveys**\ Using activities and interactions that resemble the concept as inspiration. **Building Block Prototypes**\ Interlocking plastic bricks are assembled to demonstrate the structure of a product. **Role-Playing**\ Acting out user interactions and scenarios to understand and refine the user experience. **Medium-Fidelity Prototypes**\ Medium-fidelity prototypes offer a more refined design representation, allowing stakeholders to understand the user experience, evaluate visual aesthetics, test interactions, and gather feedback. **Identifying Potential Flaws**\ They accurately visualize design concepts, help identify potential flaws, and facilitate informed decision-making during development. **Exploration-Level Questions**\ Medium-fidelity prototypes function as a tool for generating ideas and providing inspiration that can be further developed by others. They are suitable for addressing exploration-level questions effectively. **Examples of Medium-Fidelity Prototypes**\ Medium-fidelity prototypes offer functional simulations that help stakeholders visualize, evaluate, and iterate on designs during development. **Wireframes**\ Visual representations outline the structure of a digital interface, typically focusing on functionality without detailed visual design elements. **Mockups**\ Static or partially interactive representations that showcase the visual design and aesthetics of a digital or physical product. **Splash Pages**\ Two-page websites utilize mockups to present a concept and provide a button for users to express interest. **3D-Printed / Foam Models**\ Physical form of a product is created with 3D printing or foam materials, allowing for a tangible and realistic design experience. **Interactive Prototypes**\ Functional prototypes simulate user interactions and demonstrate the flow of a product, enabling users to provide feedback and test usability. **Prototype Testing**\ Prototype testing is a critical phase in the design process where users evaluate prototypes to gather feedback and uncover usability issues. **Ensuring Participant Comfort**\ Prototype testing sessions should create a safe space that prioritizes participant comfort to encourage open sharing of thoughts and experiences. **Staying Present**\ The facilitator should be fully engaged, avoiding distractions and multitasking to maximize the limited testing time. **Considerations for Prototype Testing Sessions**\ A range of considerations must be taken into account during prototype testing sessions. **Deciding on Individual or Group Tests**\ Consider if individual or group tests should be conducted, considering the benefits of group discussions and capturing diverse perspectives. **Assessing How Many Testing Sessions Are Needed**\ Ensure an appropriate interval between sessions to allow for processing the gathered insights. **Considering the Setting**\ Evaluate if a virtual or in-person setting and casual or formal environment are preferable. **Compensation for Test Participants**\ Ensure that participants are compensated for their time, valuing their contributions. **Identifying Target Audience**\ Determine individuals who can serve as representatives for customers or users. **Considerations for Prototype Testing Sessions**\ A range of considerations must be taken into account during prototype testing sessions. **Synthesizing Insights**\ Develop a decision-making process for determining actionable feedback and timing, establish criteria for discerning which feedback to prioritize, and identify reasons for disregarding specific feedback. **Creating Supplementary Materials**\ Additional resources such as scorecards, pictures, and recordings help facilitate testing. **Establishing the Session Agenda**\ Decide on the extent of information participants receive before testing, determine activity durations, and how to guide participants through them. **Determining Team Responsibilities**\ Decide the responsibilities within the team for participant recruitment, scheduling, facilitation, capturing insights, timekeeping, and ensuring participant comfort.