Class 6 - Introduction to UX - PDF

CLASS#6 Introduction to UX: Understanding User Experience UI UX IS REAL! THIS IS A RADIO BUTTON. DID YOU FACE THIS SITUATION BEFORE? HOW DID YOU FEEL? WHAT IS UX? §It’s a problem solving discipline. §UX is the process of optimizing user satisfaction by improving the interaction qua...

CLASS#6 Introduction to UX: Understanding User Experience UI UX IS REAL! THIS IS A RADIO BUTTON. DID YOU FACE THIS SITUATION BEFORE? HOW DID YOU FEEL? WHAT IS UX? §It’s a problem solving discipline. §UX is the process of optimizing user satisfaction by improving the interaction quality with products. §A well-designed UX leads to better user retention, increased sales, and a stronger brand reputation. “What users feel when using your product?” TYPES OF DESIGNS Aesthetic Design: Visual appeal enhances perceived value. Functional Design: Usability ensures practical, effective use. Experience Design: Holistic interaction evokes user emotions FUNCTIONAL DESIGN Performs the required Functionality and capability E.g. speed, num of passengers,.. etc AESTHETIC DESIGN How it looks What the brand delivers EXPERIENCE DESIGN “What users feel when using your product?” - What it feels like to adjust a drivers seat? - How can user open car’s trunk when he is carrying the groceries? AIRBNB CASE STUDY DON NORMAN’S PRINCIPALS 1. Affordance 2. Signifiers 3. Feedback 4. Mapping 5. Consistency 6. Visibility 7. Constraints AFFORDANCE Definition: The property of an object that suggests how it should be used. Example: A door handle suggests pulling. A flat plate on a door suggests pushing. Digital Example: A button on a website invites clicking.  SIGNIFIERS Definition: Cues that indicate how to use an object or interface. Example: A "Click Here" label on a button or a blinking cursor in a text box. Digital Example: Underlined text indicates a hyperlink. Tip: Signifiers should complement affordances to reduce user confusion. DIGITAL EXAMPLE FEEDBACK Definition: Immediate response from the system to inform the user of their action's outcome. Example: Elevator buttons light up when pressed. A success message appears after submitting a form online. Importance: Feedback reassures the user that their action was received. MAPPING Definition: The relationship between controls and their effects. Example: Stove knobs positioned in the same layout as burners for intuitive control. Digital Example: Dragging a slider on a music app directly correlates with volume changes. Tip: Logical mapping minimizes cognitive load. CONSISTENCY Definition: Keeping design patterns predictable across an interface. Example: Ctrl+C for copying text works in most software. Websites often have the logo in the top left linking back to the homepage. Benefit: Consistency builds user trust and speeds up learning. VISIBILITY Definition: Making essential elements visible to guide user interaction. Example:A trash icon on the desktop clearly suggests dragging files there to delete them. Digital Example: Search bars prominently displayed at the top of a webpage. Tip: Hidden features often go unnoticed or unused. CONSTRAINTS Definition: Limitations that prevent incorrect actions. Example: A USB plug fits only one way. Digital Example: Disabling a "Submit" button until required fields are filled. Tip: Constraints can prevent errors and guide the user to correct actions. EXAMPLE – INSTAGRAM VANISH MODE HOW TO PREVENT A POOR DESIGN 1. Make it easy to understand: Design products and systems in a way that is intuitive and easy to understand. Avoid unnecessary complexity and use clear, concise labels and instructions. 2. Consider the user: Take into account the needs, abilities, and limitations of the people who will be using your product or system. Design for their benefit, not just for aesthetics or technical functionality. 3. Make it visually appealing: Aesthetics play a role in our perception and enjoyment of products and systems. Make sure your design is visually pleasing and coherent. 4. Use affordances and signifiers: Affordances are the actions that are possible with an object, while signifiers are the visual cues that indicate what actions can be taken. Use both to make it clear to users how to interact with your product or system. 5. Make it easy to learn: Make it easy for people to learn how to use your product or system, even if they are unfamiliar with it. Use clear, consistent mapping and feedback to help people understand how to use it. 6. Emphasize feedback: Provide clear feedback to users to let them know what is happening and what actions they have taken. This can help reduce frustration and improve the user experience. 7. Anticipate and prevent errors: Design your product or system to anticipate and prevent errors, rather than simply reacting to them. This can help improve the user experience and reduce frustration. COLOR THEORY Color affects the way users perceive and interact with a design. Examples: Red buttons for urgent actions (e.g., "Delete"). Calm blues for trustworthy brands like banks or healthcare apps. Goal: Learn to use color deliberately to guide user actions and emotions. FUNDAMENTALS OF COLOR THEORY Primary Colors: Red, Blue, Yellow. Secondary Colors: Orange, Green, Purple (mix of primary colors). Tertiary Colors: Mix of primary and secondary colors. Example: In a UI, primary colors can highlight key features, while secondary colors create harmony. COLOR HARMONIES Complementary Colors: Opposites on the color wheel (e.g., blue and orange). Use for high contrast. Analogous Colors: Side-by-side on the wheel (e.g., green, yellow-green, yellow). Use for subtle, cohesive designs. Triadic Colors: Evenly spaced on the wheel (e.g., red, yellow, blue). Use for vibrant, balanced designs. Example: Google’s logo uses a harmonious balance of primary colors. COLOR PSYCHOLOGY Colors evoke specific emotions: Red: Excitement, danger, urgency (e.g., error messages). Green: Growth, success, safety (e.g., success notifications). Yellow: Caution, optimism, attention (e.g., warning signs). Blue: Trust, professionalism, calmness (e.g., banks, corporate apps). Example: Amazon’s "Add to Cart" button is a vibrant orange, signaling action. IT IS ALSO RELEVANT TO CULTURES COLOR THEORY IN UX 1. Accessibility 2. Communication with the user 3. Brand Identity COLOR THEORY IN UX High-Contrast Design for Accessibility Example 1: Google's login screen uses black text on a white background, ensuring maximum readability for users with vision impairments. Example 2: Netflix uses white text on a black background in its dark mode to reduce eye strain during prolonged viewing in low-light environments. COLOR THEORY IN UX Communication with the user Example: Error messages and "Delete" buttons are often red to signify danger or a need for immediate attention (e.g., Gmail's "Delete Forever" button). Green for Success and Confirmation: Example: Payment platforms like PayPal display green checkmarks when a transaction is successfully completed, reinforcing a sense of accomplishment. COLOR THEORY IN UX Brand Identity Example 1: Facebook, LinkedIn, and Twitter use shades of blue to evoke feelings of trust and reliability. Example 2: Bank websites like Chase and Citibank also use blue as their primary color to inspire confidence in handling finances. PSYCHOLOGY LAWS OF UX DESIGN Psychology-based principles provide insights into how users perceive, process, and interact with digital interfaces. These laws are grounded in cognitive psychology and human behavior, helping designers create more intuitive and user-friendly experiences. PSYCHOLOGY LAWS OF UX DESIGN Hick's Law: The Paradox of Choice Fitts's Law: Speed and Target Size Jakob's Law: Familiarity Breeds Usability Miller's Law: Cognitive Load and Chunking The Peak-End Rule: Memorable Moments PSYCHOLOGY LAWS OF UX DESIGN The Law of Common Region: Visual Grouping The Serial Position Effect: Order Matters The Von Restorff Effect: The Power of Distinction The Doherty Threshold: Speed Matters HICK'S LAW: THE PARADOX OF CHOICE The time it takes to make a decision Grandpa’s remote increases with the number and complexity of choices presented. Example 1: E-commerce Checkout Amazon's "1-Click Checkout" is a perfect application of Hick’s Law. By streamlining the purchase process, they eliminate unnecessary decisions Apple TV (e.g., payment method or address) to Remote make buying faster and more intuitive. HICK'S LAW: THE PARADOX OF CHOICE HICK'S LAW: THE PARADOX OF CHOICE Application in UX: Limit the number of choices in navigation menus. Use progressive disclosure to show only relevant options at any given moment. FITTS'S LAW: SPEED AND TARGET SIZE The time to interact with a target depends on its size and distance from the user. Example 1: Large Call-to-Action Buttons Websites like Dropbox use large, brightly colored "Sign Up" or "Try Free" buttons that are easy to click or tap, especially on mobile devices. FITTS'S LAW: SPEED AND TARGET SIZE JAKOB'S LAW: FAMILIARITY BREEDS USABILITY Definition: Users prefer interfaces that Example 2: Online Shopping Cart work similarly to the ones they already Nearly all e-commerce sites place the know. cart icon in the top-right corner. Users instinctively look there to review their Example 1: Social Media Platforms items or proceed to checkout. Most social media apps (Facebook, Twitter, Instagram) place notifications in the upper-right corner and the navigation bar at the bottom, creating consistency and familiarity across platforms. YOUTUBE FACELIFT EXAMPLE MILLER'S LAW: COGNITIVE LOAD AND CHUNKING Definition: The average person can hold 7 (±2) items in their working memory. Example 1: Grouping Items in Menus Google Maps groups actions into chunks like "Search," "Your Timeline," and "Saved Places," preventing users from being overwhelmed. Application in UX: Break content into manageable chunks, such as bulleted lists or tabs. Use grouping to organize navigation options into categories. THE PEAK-END RULE: MEMORABLE MOMENTS People judge experiences based on the peak (most intense) moment and the end of the experience. Example 1: Checkout Processes Shopify adds a "Thank You" page with a confirmation message and order details at the end of the purchase. This positive end experience leaves a lasting impression. Example 2: Onboarding Experiences Duolingo’s onboarding process highlights achievements with celebratory animations, making users feel accomplished, ensuring the end of their first session is positive and memorable. THE LAW OF COMMON REGION: VISUAL GROUPING Elements within the same bounded area are perceived as related. Example 1: Card-Based Design Pinterest and Trello use card designs where related content is visually grouped within separate cards, making it easy for users to understand the organization. Example 2: Pricing Tables SaaS companies like Slack use clearly delineated boxes for pricing plans, making it easy for users to compare features across plans. THE SERIAL POSITION EFFECT: ORDER MATTERS Users remember the first and last items in a list better than the middle items. Example 1: Navigation Menus Important options like "Home" and "Contact" are placed at the beginning and end of navigation menus, as these positions are most memorable. THE VON RESTORFF EFFECT: THE POWER OF DISTINCTION Definition: People remember items that stand out. Example 1: Call-to-Action Buttons Spotify’s "Get Premium" button is bright green, contrasting sharply with its dark interface, ensuring it grabs attention. Example 2: Warnings and Errors Gmail highlights unsent emails in red, making them distinct from normal drafts. THE VON RESTORFF EFFECT: THE POWER OF DISTINCTION THE DOHERTY THRESHOLD: SPEED MATTERS Definition: Users feel engaged when system feedback occurs within 400ms of their action. Example 1: Loading Spinners Google uses simple loading animations to indicate progress, ensuring users don’t feel abandoned. Example 2: Instant Feedback in Search As users type in Google Search, results appear in real time, keeping them engaged. RECAP - What is UX - Interaction Design Principals (Don Norman) - Psychology Laws of UX -Next: -- Animation principals -- Design Process -- Handoffs to Devs ANIMATION PRINCIPALS Why add animations? Ø Reduce cognitive load Ø Add personality and charm to an interface. ANIMATION PRINCIPALS 1. Squash and Stretch 8. Secondary Action 2. Anticipation 9. Timing 3. Staging 10. Exaggeration 4. Straight-Ahead Action and Pose to 11. Solid Drawing Pose 12. Appeal 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc SQUASH AND STRETCH The illusion of gravity, weight, mass and flexibility. Makes elements feel tactile and gives visual cues or feedback regarding available affordances SQUASH AND STRETCH ANTICIPATION Anticipation helps to prepare the viewer for what's about to happen ANTICIPATION STAGING Guide the viewer's eye and draw attention to what's important within the scene. STAGING STRAIGHT-AHEAD ACTION AND POSE TO POSE Straight-ahead animation is created, drawing frame-by-frame from start to finish. The pose-to-pose technique involves creating the key frame first—a frame in the beginning, middle and end. FOLLOW THROUGH AND OVERLAPPING ACTION Not all parts of an object move at the same time. Use it when objects come to a standstill after being in motion. FOLLOW THROUGH SLOW IN AND SLOW OUT Any vehicle starts moving slowly before accelerating and speeding up, and the reverse happens when the car brakes. SLOW IN/ SLOW OUT ARC In the physical world, most objects move following a slight arc. SECONDARY ACTION used to support or emphasize the main action going on within a scene. The addition of secondary actions adds another dimension to your animations.. adding layers of detail and richness without overshadowing the main focus.  HOW TO START? (DESIGN PROCESS) User Persona & Goals defined Wire frames & We are here now! Clickable prototypes WHAT IS PROTOTYPING? Prototyping is about creating an early version of the product to test ideas quickly and economically. Types of Prototypes: Low-Fidelity Prototypes: Basic sketches or wireframes to establish structure and layout. Tools: Pen and paper, Balsamiq. Mid-Fidelity Prototypes: Grayscale designs with placeholders for visuals to test user flows. Tools: Figma, Sketch. Example: Adding clickable menus to simulate navigation in an e-commerce platform. High-Fidelity Prototypes: Polished designs with detailed interactions to mimic the final product. Tools: Figma, Adobe XD, InVision. Example: An interactive prototype of a fitness app, including animations for button presses and navigation. Key Tip: Start simple, focusing on functionality and layout before polishing the visuals. LOW FIDELITY Example: A simple wireframe of a mobile banking app showing sections like "Accounts," "Transactions," and "Transfer Money." HIGH FIDELITY EXAMPLE CLICKABLE PROTOTYPES CLICKABLE PROTOTYPES IN AR/VR USER TESTING User testing ensures your design meets user needs and catches usability issues early. Steps: 1.Define Goals: Identify what you want to learn. Example: Can users easily find the "Buy Now" button? 2.Recruit Participants: Choose people who represent your target audience. Example: Testing a fitness app? Recruit regular gym-goers. 3.Set Scenarios: Create realistic tasks for users to complete. Example: "Log in and locate your workout history." 4.Conduct Testing: Observe how users interact with the prototype. Note pain points and confusion. 5.Analyze Results: Identify patterns. Example: If users frequently miss the navigation bar, it might lack visual prominence. HANDOFF FROM UX TO DEV Why? - Ensures the design vision is accurately translated into the final product. - To make sure the team is aligned on the same page - To make sure dev team understands the flow and the usability HANDOFF FROM UX TO DEV How? Organize the design file: - Remove redundant screens - Collect related screens - Arrange the flow HANDOFF FROM UX TO DEV - Rename the Art Board ØGive a number to the flow ØDefine screen name HANDOFF FROM UX TO DEV Ø Rename the assets Ø Describe the asset Ø Remove spaces ØOptimize for performance 80MB effect on a landing page! FOLLOW ATOMIC DESIGN METHODOLOGY - Create Components not screens - Easier for review comments THANK YOU.