UIUX.pdf

CSET216 - UI/UX Design for Human Computer Interface Course Type - Specialized Core – I L-T-P Format 3-0-4 Credits – 4 By: Dr. Sachin Choudhary Ph.D. (CSE) From National Institute of Technology Uttarakhand M.Tech. (CSE) From Hyderabad Central University Hyderabad B.Tech. (CSE) From Uttar Prad...

CSET216 - UI/UX Design for Human Computer Interface Course Type - Specialized Core – I L-T-P Format 3-0-4 Credits – 4 By: Dr. Sachin Choudhary Ph.D. (CSE) From National Institute of Technology Uttarakhand M.Tech. (CSE) From Hyderabad Central University Hyderabad B.Tech. (CSE) From Uttar Pradesh Technical University DR. SACHIN CHOUDHARY 1 COURSE BRIEF- COURSE TITLE UI/UX Design for Human Computer Interface PRE-REQUISITES NA COURSE CODE CSET216 TOTAL CREDITS 4 COURSE TYPE Specialized Core L-T-P FORMAT 3-0-2 EVALUATION POLICY - Components of Course Evaluation Percentage Mid Term Examination 20 End Term Examination 35 Assignment 05 Project 20 Lab Continuous Evaluation 20 LEARNING RESOURCES TEXTBOOKS: Samit Bhattacharya, Human-Computer Interaction User-Centric Computing for Design (1 ed.), McGraw- Hill, 2019. ISBN 9789353168056. Nirmalya Thakur; Parameshachari B.D, Human-Computer Interaction and Beyond: Advances Towards Smart and Interconnected Environments (Part I),(1 ed.), Bantham Books, 2021. ISBN 9789814998826. REFERENCE BOOKS: Helen Sharp, Jennifer Preece, Yvonne Rogers, Interaction Design Beyond Human-Computer Interaction, (1 ed.), Wiley, 2021. ISBN 9781119547358 DR. SACHIN CHOUDHARY 3 Module 1 (Contact hours: 11) Historical evolution GUI, Interactive system design: Concept of usability, HCI and software engineering, GUI design and aesthetics, Prototyping techniques, Heuristic Evaluation, Experimental Design, Importance and benefits of good design, Screen design. Scenarios, Design Process. Characteristics of user interface, Web user – Interface popularity, Psychology and Human factors, Conceptual Models, Mistakes and Error, Cognitive models, Socio- Organizational and stakeholder requirements, Social Computing, Experiments designing concepts and methods, Communication and collaboration models, Mobile Ecosystem: Platforms DR. SACHIN CHOUDHARY 4  Historical evolution GUI The historical evolution of Graphical User Interfaces (GUIs) refers to the development and transformation of interfaces that allow users to interact with electronic devices through graphical icons and visual indicators, as opposed to text-based interfaces, typed command labels, or text navigation. Here is a detailed overview of the key milestones in the evolution of GUIs: 1. Early Beginnings 1963: Sketchpad (Ivan Sutherland) Considered the first graphical computer-aided design (CAD) program. Introduced concepts such as object manipulation and the use of a light pen to create and manipulate graphical objects directly on a screen. 2. The Emergence of GUI Concepts 1973: Xerox Alto Developed at Xerox PARC, the Alto was the first computer designed with a graphical user interface. Introduced the desktop metaphor, windows, icons, and menus. Featured the first use of a mouse for navigation. DR. SACHIN CHOUDHARY 5 Cont.. 1981: Xerox Star The first commercial system with a GUI, building on the Alto's concepts. Targeted business users with a consistent interface and included features like WYSIWYG (What You See Is What You Get) editing. 3. Popularization of GUIs 1984: Apple Macintosh Introduced to the mass market, making GUI-based computers accessible to general consumers. Featured a user-friendly interface with icons, windows, and a mouse for easy navigation. Promoted through the famous "1984" Super Bowl commercial, emphasizing its revolutionary impact. DR. SACHIN CHOUDHARY 6 Cont.. 4. Evolution in Personal Computing 1985: Microsoft Windows 1.0 Microsoft’s first attempt at a graphical operating system, initially as an add-on for MS-DOS. Featured tiled windows that could not overlap, a limitation overcome in later versions. 1990: Microsoft Windows 3.0 Marked a significant improvement in usability and performance, making GUIs more mainstream in business environments. Introduced the ability to run multiple applications simultaneously with overlapping windows. DR. SACHIN CHOUDHARY 7 Homework: Research and present on a historical GUI development milestone. DR. SACHIN CHOUDHARY 8 Concept of usability Usability: Definition: Usability is the measure of a product's potential to accomplish the goals of its users. It is determined by factors such as how easy and pleasant the interface is to use. Importance: High usability ensures that users can achieve their objectives with minimal effort and frustration, leading to increased user satisfaction, productivity, and overall positive experience. DR. SACHIN CHOUDHARY 9 Key Principles of Usability Learnability: Description: The system should be easy to learn so that users can quickly start performing tasks. Importance: Reduces the learning curve for new users, facilitating faster adoption and effective use. Efficiency: Description: Once users have learned the system, they should be able to perform tasks quickly and efficiently. Importance: Enhances productivity and allows users to complete their work with minimal wasted time and effort. Memorability: Description: After using the system, users should be able to remember how to use it without having to learn everything again. Importance: Ensures that returning users can easily resume their tasks without re-learning, which is crucial for infrequently used systems. DR. SACHIN CHOUDHARY 10  Usability Metrics Usability can be measured using various metrics, often collected during usability testing sessions. Key metrics include: Task Success Rate: Description: The percentage of tasks completed correctly by users. Importance: Indicates the system's effectiveness in enabling users to achieve their goals. Time on Task: Description: The amount of time it takes for a user to complete a task. Importance: Measures efficiency and helps identify areas where the interface could be streamlined. Error Rate: Description: The number and types of errors users encounter while using the system. Importance: Highlights usability issues and areas needing improvement. User Satisfaction: Description: Often measured through surveys and questionnaires, this metric captures users' subjective satisfaction with the system. Importance: Provides insights into the overall user experience and emotional response to the system. DR. SACHIN CHOUDHARY 11 Usability Testing Usability testing in Human-Computer Interaction (HCI) is a method used to evaluate a system's usability by observing real users as they interact with it. The goal is to identify usability problems, gather qualitative and quantitative data, and improve the overall user experience. Here’s an overview of the key aspects of usability testing: Types of Usability Testing Formative Usability Testing: Conducted during the design and development stages. It focuses on identifying issues early on so they can be addressed before the final product is released. Summative Usability Testing: Performed after the product is developed to assess its effectiveness and overall usability. It helps to evaluate whether the product meets usability goals and standards. DR. SACHIN CHOUDHARY 12 Steps in Usability Testing Define Objectives: Determine what you want to learn from the usability test. Develop Test Plan: Create a plan outlining the scope of the test, the tasks users will perform, the criteria for success, and the methods for collecting data. Recruitment: Select representative users who match the target audience. Design Tasks: Develop realistic tasks that users will perform during the test. Execution: Have users perform tasks while observers note their actions, issues, and feedback. Analysis: Analyze the data to identify usability issues and prioritize them based on severity and impact. Iterate and Improve: Use the findings to make design changes and improvements. DR. SACHIN CHOUDHARY 13 Usability Testing Methods Think-Aloud Protocol: Users verbalize their thought process while performing tasks. Heuristic Evaluation: Experts evaluate the system based on established usability principles (heuristics) rather than observing real users. Surveys and Questionnaires: Gather quantitative and qualitative data on user satisfaction and experiences. A/B Testing: Compare two versions of a design to determine which performs better in terms of usability. DR. SACHIN CHOUDHARY 14  Usability in Different Contexts Web Usability Focus: Navigation, readability, accessibility, and load times. Metrics: Page load time, click paths, bounce rates, and conversion rates. Mobile Usability Focus: Touch interactions, screen size limitations, and context of use (e.g., on-the-go). Metrics: Touch accuracy, app responsiveness, screen real estate utilization, and battery consumption. Software Usability Focus: Functionality, ease of learning, and task efficiency. Metrics: Task completion time, error rates, and user satisfaction. DR. SACHIN CHOUDHARY 15 Continue Consumer Electronics Usability Focus: Physical interactions, interface simplicity, and device integration. Metrics: Physical button usability, menu navigation efficiency, and user feedback on device performance. Medical Device Usability Focus: Accuracy, safety, and ease of use under high-stress conditions. Metrics: Error rates, time to perform critical tasks, and user confidence. Educational Software Usability Focus: Learning effectiveness, engagement, and ease of use. Metrics: Learning outcomes, user engagement levels, and usability satisfaction. DR. SACHIN CHOUDHARY 16 HCI and Software Engineering Human-Computer Interaction (HCI) and Software Engineering are two interrelated fields that together contribute to the development of user-friendly, efficient, and effective software systems. Here’s how they intersect and complement each other: Human-Computer Interaction (HCI): Definition: HCI is the study and practice of designing, implementing, and evaluating interactive systems that focus on the interfaces between people (users) and computers. Goals: To improve the usability and user experience of systems, ensuring they are easy to use, efficient, and satisfying. Software Engineering: Definition: Software engineering is the systematic application of engineering principles to the development, operation, and maintenance of software. Goals: To produce reliable, efficient, and maintainable software systems that meet specified requirements within budget and time constraints. DR. SACHIN CHOUDHARY 17 Cont.. HCI Concepts: Software Engineering Concepts: Usability: Ensuring systems are easy to learn,  Requirements Engineering: Defining efficient, and satisfying to use. and managing the requirements of a system. User Experience (UX): The overall experience  Software Design: Creating the and satisfaction a user has when interacting with a architecture and detailed design of a system. system. User-Centered Design: Designing systems around  Implementation: Writing code to create the needs, preferences, and limitations of the end the system. users.  Testing: Verifying that the system works Prototyping: Creating preliminary versions of a correctly and meets requirements. system to explore ideas and gather user feedback.  Maintenance: Updating and fixing the system after it is deployed. DR. SACHIN CHOUDHARY 18  The Intersection of HCI and Software Engineering Integration of User Requirements: HCI: Focuses on understanding user needs through methods such as user research, personas, and scenarios. Software Engineering: Integrates these user requirements into the system’s functional and non-functional requirements. Design and Prototyping: HCI: Emphasizes iterative design, creating prototypes, and gathering user feedback to refine the design. Software Engineering: Implements these designs through detailed architectural planning and coding practices. Evaluation and Testing: HCI: Conducts usability testing and heuristic evaluations to ensure the system meets user needs. Software Engineering: Performs unit tests, integration tests, and system tests to ensure the system functions correctly. Development Process: HCI: Uses user-centered design processes, involving users at every stage of development. Software Engineering: Employs software development life cycle models such as Waterfall, Agile, and DevOps to manage the development process. DR. SACHIN CHOUDHARY 19 Case Study: Project: Developing a Mobile Banking Application User-Centered Design Activities: Research: Conduct user interviews and surveys to understand user needs and pain points. Create personas representing typical users of the banking app. Design: Develop wireframes and interactive prototypes of the app’s interface. Conduct usability testing sessions to gather user feedback. Evaluation: Analyze usability test results to identify and prioritize issues. Refine the design based on user feedback DR. SACHIN CHOUDHARY 20 1.Requirements Analysis: Document functional and non-functional requirements based on user research. 2.Design: Create the system architecture, including data models and API specifications. 3.Implementation: Code the application using an Agile development process. 4.Testing: Perform unit, integration, and system testing to ensure functionality and performance. 5.Deployment and Maintenance: Release the app to users through app stores. DR. SACHIN CHOUDHARY 21 Software Engineering 1.Requirements Analysis: Activities 1. Document functional and non-functional requirements based on user research. 2. Define technical specifications for the app. 2.Design: 1. Create the system architecture, including data models and API specifications. 2. Develop detailed design documents for each component. 3.Implementation: 1. Code the application using an Agile development process. 2. Integrate the user interface designs into the app. 4.Testing: 1. Perform unit, integration, and system testing to ensure functionality and performance. 2. Conduct additional usability testing to validate the final product. 5.Deployment and Maintenance: 1. Release the app to users through app stores. 2. Monitor user feedback and usage, providing updates and fixes as needed. DR. SACHIN CHOUDHARY 22 GUI design and aesthetics Graphical User Interface (GUI) design focuses on creating visually appealing and functional interfaces that facilitate user interaction with software and applications. Aesthetics in GUI design refers to the visual elements and style choices that contribute to the overall look and feel of the interface. A well-designed GUI enhances usability and user experience, while aesthetics play a crucial role in making interfaces engaging and intuitive. Here’s a detailed guide on GUI design and aesthetics: DR. SACHIN CHOUDHARY 23 Cont.. 1. Principles of GUI Design 1.1. Clarity and Simplicity: Goal: Ensure that the interface is easy to understand and use. Practices: Use clear and concise labels for buttons and controls. Avoid clutter by keeping the design simple and focused. Prioritize the most important elements and actions. 1.2. Consistency: Goal: Provide a predictable and cohesive experience across the interface. Practices: Maintain consistent design patterns, colors, and fonts. Use standard icons and symbols to represent common actions. Ensure that interactions and responses are uniform throughout the interface. DR. SACHIN CHOUDHARY 24  Cont.. 1.3. Feedback: Goal: Inform users about the results of their actions and system status. Practices: Provide visual feedback (e.g., button changes color when clicked). Use informative messages to guide users through processes and alert them to errors. Implement loading indicators and progress bars for ongoing tasks. 1.4. Affordance: Goal: Make it clear how interface elements should be used. Practices: Design buttons and controls that visually suggest their function (e.g., raised buttons look clickable). Use familiar icons and metaphors to convey the purpose of elements. Ensure that interactive elements are easily distinguishable from non-interactive elements. 1.5. Accessibility: Goal: Ensure that the interface is usable by people with various disabilities. Practices: Provide alternative text for images and icons. Ensure sufficient color contrast for readability. Implement keyboard navigation and screen reader compatibility. DR. SACHIN CHOUDHARY 25  Cont.. 2. Aesthetic Considerations 2.1. Visual Hierarchy: Goal: Direct users’ attention to the most important elements and information. Practices: Use size, color, and contrast to emphasize key elements. Organize content into distinct sections with clear headings. Align elements to create a logical flow and structure. 2.2. Color Theory: Goal: Create a visually pleasing and functional color scheme. Practices: Choose a color palette that aligns with the brand and purpose of the application. Use color to highlight important actions and information. Ensure that color choices meet accessibility standards (e.g., color blindness considerations). 2.3. Typography: Goal: Enhance readability and convey the tone of the application. Practices: Select legible fonts and appropriate sizes for different types of text (e.g., headings, body text). Maintain a consistent typographic hierarchy (e.g., font sizes, weights) for better organization. Use fonts that align with the overall design style and brand identity. DR. SACHIN CHOUDHARY 26 Cont.. 2.4. Iconography: Goal: Use icons to represent actions and concepts clearly. Practices: Choose or design icons that are easily recognizable and intuitive. Maintain consistency in icon style and size throughout the interface. Ensure that icons are accompanied by labels or tooltips for clarity. 2.5. Imagery and Graphics: Goal: Enhance the visual appeal and support the content of the interface. Practices: Use high-quality images and graphics that are relevant to the content and context. Avoid using excessive or irrelevant images that may distract or overwhelm users. Optimize images for performance to ensure fast loading times. DR. SACHIN CHOUDHARY 27 Examples and Best Practices Example 1: E-Commerce Website Design Principles: Use a clear and intuitive navigation system, highlight key actions (e.g., add to cart), and provide visual feedback (e.g., animations) for user interactions. Aesthetics: Use a consistent color palette that reflects the brand, choose readable fonts for product descriptions, and include high-quality product images. 4.2. Example 2: Mobile App Design Principles: Ensure touch targets are appropriately sized, provide clear visual indicators for interactive elements, and use simple and direct language. Aesthetics: Implement a minimalistic design with ample white space, use contrasting colors for important actions, and select a font that is legible on small screens. DR. SACHIN CHOUDHARY 28 Prototyping techniques Prototyping is a critical phase in the design process that involves creating preliminary versions of a product to explore ideas, test concepts, and gather user feedback. Different prototyping techniques offer various levels of fidelity and functionality, allowing designers to iterate and refine their ideas before final development. Here’s a detailed overview of common prototyping techniques: DR. SACHIN CHOUDHARY 29  1. Low-Fidelity Prototypes 1.1. Paper Prototypes: Description: Simple sketches or drawings on paper that represent the layout and functionality of an interface. Advantages: Quick and inexpensive to create. Ideal for early-stage brainstorming and testing basic concepts. 1.3. Mockups: Disadvantages: Description: Static, high-fidelity Limited interactivity and realism. representations of the final design, including May not accurately represent the final look and feel of the product. colors, typography, and images. 1.2. Wireframes: Advantages: Provides a realistic view of the final Description: Basic, digital representations of the interface layout, product’s appearance. often devoid of detailed design elements. Useful for visual design feedback and Advantages: brand alignment. Helps in organizing content and layout. Disadvantages: Focuses on functionality and user flow rather than visual design. No interactive elements to test user Disadvantages: flow or functionality. Lack of visual detail may not capture the user’s full experience. Limited ability to test interactive aspects. DR. SACHIN CHOUDHARY 30  Low-Fidelity Prototypes Paper Prototype Wireframes Mockups prototypes DR. SACHIN CHOUDHARY 31  2. Medium-Fidelity Prototypes 2.1. Clickable Prototypes: Description: Interactive versions of wireframes or mockups that allow users to click through and experience basic interactions. Advantages: Allows for testing user flow and navigation. Provides a more dynamic and engaging way to gather feedback. Disadvantages: Limited in functionality and realism compared to higher-fidelity prototypes. May not fully capture complex interactions or system behavior. 2.2. HTML/CSS Prototypes: Description: Functional prototypes created using HTML, CSS, and sometimes JavaScript to simulate the final interface. Advantages: Can be tested in a web browser, providing a more realistic experience. Useful for testing responsive design and cross-browser compatibility. Disadvantages: Requires some coding skills and time to develop. May not include full back-end functionality. DR. SACHIN CHOUDHARY 32  Medium-Fidelity Prototypes HTML/ CSS Clickable Prototype prototypes DR. SACHIN CHOUDHARY 33 3. High-Fidelity Prototypes 3.1. Interactive Prototypes: Description: Fully interactive prototypes with working features, created using tools like Adobe XD, Figma, or InVision. Advantages: Simulates the final product closely, including interactions and animations. Useful for comprehensive usability testing and stakeholder presentations. Disadvantages: Can be time-consuming and resource-intensive to create. May require advanced design and prototyping tools. DR. SACHIN CHOUDHARY 34  Shneiderman’s Eight Golden Rules Strive for Consistency. Cater to Universal Usability. Offer Informative feedback. Design Dialogs to yield closure. Prevent Errors. Permit easy reversal of actions. Support internal locus of control. Reduce short term memory load. DR. SACHIN CHOUDHARY 35  Norman’s Seven Principles Use both knowledge in world & knowledge in the head. Simplify task structures. Make things visible. Get the mapping right (User mental model = Conceptual model = Designed model). Convert constrains into advantages (Physical constraints, Cultural constraints, Technological constraints). Design for Error. When all else fails − Standardize. DR. SACHIN CHOUDHARY 36 Heuristic Evaluation Heuristic Evaluation is a usability inspection method used to identify usability issues in a user interface (UI) design. It involves evaluators examining the interface and judging its compliance with recognized usability principles (heuristics). This method is efficient and can be performed with minimal resources, making it particularly useful in the early stages of design. Heuristics: These are established usability principles used as guidelines to evaluate the interface. DR. SACHIN CHOUDHARY 37 Steps in Heuristic Evaluation 1.Planning 1. Define the scope and objectives of the evaluation. 2. Select the heuristics to be used. 3. Recruit and train evaluators. 2.Individual Evaluation 1. Each evaluator reviews the interface independently. 2. Evaluators navigate through the interface, performing typical tasks. 3. They identify and document usability issues, noting which heuristic each issue violates. 3.Debriefing Session 1. Evaluators come together to discuss their findings. 2. They aggregate the identified issues, categorize them, and assign severity ratings. 4.Reporting 1. Compile a report detailing the identified issues, their severity, and recommendations for improvement. 2. The report should include screenshots and descriptions of issues to illustrate the findings clearly. DR. SACHIN CHOUDHARY 38 Example 1.Planning Heuristic Evaluation Process 1. Scope: Evaluate the checkout process of an e-commerce website. 2. Heuristics: Use Nielsen's 10 Usability Heuristics. 2.Individual Evaluation 1. Evaluators: 3 usability experts. 2. Tasks: Browse products, add items to cart, proceed to checkout, enter shipping information, and complete the purchase. 3.Debriefing Session 3. Evaluators share their findings. 4. Discuss common issues and discrepancies. 5. Assign severity ratings based on impact and frequency. 4.Reporting 3. Document the issues found with corresponding heuristics. 4. Include screenshots and detailed descriptions. 5. Provide recommendations for each identified issue. DR. SACHIN CHOUDHARY 39 Jakob Nielsen's 10 Usability Heuristics for User Interface Design: Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation DR. SACHIN CHOUDHARY 40 Sample Heuristic Evaluation Report Introduction This report presents the findings of a heuristic evaluation conducted on the checkout process of the XYZ e-commerce website. The evaluation was based on Nielsen’s 10 Usability Heuristics. Findings and Recommendations 1.Visibility of System Status 1. Issue: The system does not provide feedback after adding an item to the cart. 2. Severity: High 3. Recommendation: Implement a confirmation message or animation to indicate that an item has been added to the cart. 2.Match Between System and the Real World 1. Issue: Technical jargon used during the payment process confuses users. 2. Severity: Medium 3. Recommendation: Use simple, clear language that users can easily understand. DR. SACHIN CHOUDHARY 41 Cont.. 3.User Control and Freedom 1. Issue: Users cannot easily remove items from the cart. 2. Severity: High 3. Recommendation: Provide an option to remove items directly from the cart page. 4.Consistency and Standards 1. Issue: Inconsistent button styles on different pages. 2. Severity: Low 3. Recommendation: Standardize button styles across the website to ensure consistency. 5.Error Prevention 1. Issue: Users can proceed to checkout without entering mandatory shipping information. 2. Severity: High 3. Recommendation: Implement validation checks to ensure all required fields are completed before proceeding. 6.Recognition Rather Than Recall 1. Issue: Users must remember discount codes as they are not shown during checkout. 2. Severity: Medium 3. Recommendation: Display applied discount codes and their effects on the total price during the checkout process. DR. SACHIN CHOUDHARY 42  Cont.. 7.Flexibility and Efficiency of Use 1. Issue: No option for power users to save default shipping and payment information. 2. Severity: Medium 3. Recommendation: Allow users to save and reuse shipping and payment details. 8.Aesthetic and Minimalist Design 1. Issue: The checkout page is cluttered with too much information. 2. Severity: Medium 3. Recommendation: Simplify the checkout page by removing unnecessary information and focusing on essential elements. 9.Help Users Recognize, Diagnose, and Recover from Errors 1. Issue: Error messages are vague and unhelpful. 2. Severity: High 3. Recommendation: Provide clear, specific error messages with guidance on how to resolve the issues. 10.Help and Documentation 1. Issue: No help or documentation available during the checkout process. 2. Severity: Low 3. Recommendation: Include a help link or FAQ section that addresses common questions about the checkout process. DR. SACHIN CHOUDHARY 43 Interface Design Guidelines Be consistent. Offer significant feedback. Ask for authentication of any non-trivial critical action. Authorize easy reversal of most actions. Lessen the amount of information that must be remembered in between actions. Seek competence in dialogue, motion and thought. Excuse mistakes. Classify activities by function and establish screen geography accordingly. Deliver help services that are context sensitive. Use simple action verbs or short verb phrases to name commands. DR. SACHIN CHOUDHARY 44 Lenskart vs Online Eyewear Marketplace DR. SACHIN CHOUDHARY 45 MyFitnessPal Calorie Counting System DR. SACHIN CHOUDHARY 46 The Save Button DR. SACHIN CHOUDHARY 47 Button Information DR. SACHIN CHOUDHARY 48 Pop-Up Boxes DR. SACHIN CHOUDHARY 49 The Drop-down Menu DR. SACHIN CHOUDHARY 50 The Fill-In Form DR. SACHIN CHOUDHARY 51 Confusing Layout in Printed Media DR. SACHIN CHOUDHARY 52  Importance and benefits of good design Good design is crucial across various fields, including product development, architecture, user experience (UX), and graphic design. It significantly impacts functionality, user satisfaction, and overall success. Here are the key reasons and benefits of good design: 1. Enhances User Experience Usability: Good design ensures that products and interfaces are easy to use, understand, and navigate. This reduces user frustration and improves satisfaction. Accessibility: A well-designed product is accessible to a wider audience, including those with disabilities. This inclusivity can enhance the product’s reach and reputation. DR. SACHIN CHOUDHARY 53  Cont.. 2. Increases Efficiency and Productivity Task Completion: A thoughtfully designed interface or tool can help users complete tasks more quickly and with fewer errors, improving overall productivity. Workflow Optimization: Good design streamlines processes and workflows, reducing the cognitive load and making it easier for users to achieve their goals. 3. Builds Trust and Credibility Professionalism: High-quality design conveys professionalism and reliability, which can build trust with users and customers. Consistency: Consistent design elements across a product or brand reinforce trust and reliability, as users know what to expect. 4. Differentiates from Competitors Unique Identity: Good design helps create a unique and recognizable brand identity, setting a product or company apart from competitors. Innovation: Innovative design solutions can attract attention and interest, providing a competitive edge in the market. 5. Improves Aesthetic Appeal Visual Appeal: Aesthetically pleasing design can attract and retain users, making them more likely to engage with the product. Emotional Connection: Good design can evoke positive emotions and create a stronger connection between the product and the user. DR. SACHIN CHOUDHARY 54  Screen design, Scenarios, Design Process. Screen design is a crucial aspect of user interface (UI) and user experience (UX) design, focusing on the visual and interactive elements that users engage with. Effective screen design requires a thorough understanding of user needs, clear scenarios, and a structured design process. 1. Screen Design Principles Clarity: Ensure that the design is easy to understand and navigate. Consistency: Maintain uniformity in elements such as fonts, colors, and layouts. Feedback: Provide immediate and clear feedback to users' actions. Efficiency: Design for quick and easy task completion. Aesthetics: Create visually pleasing and engaging designs. Accessibility: Ensure the design is usable by people with various disabilities. 2. Scenarios in Screen Design Scenarios are narrative descriptions of how users might interact with the interface to achieve their goals. They help designers understand user contexts and design needs. DR. SACHIN CHOUDHARY 55 Example Scenarios for an IRCTC Website 1.Scenario 1: Booking a Train Ticket 1. User: An experienced traveler who frequently books tickets online. 2. Goal: Book a ticket from Delhi to Mumbai for the upcoming weekend. 3. Context: User accesses the website on their laptop at home. 4. Steps: 1. Log in to the IRCTC website. 2. Search for trains between Delhi and Mumbai. 3. Select a suitable train and class. 4. Enter passenger details. 5. Proceed to payment and complete the booking. 6. Receive confirmation via email and SMS. 2. Scenario 2: Checking PNR Status User: A first-time user who has recently booked a ticket. Goal: Check the status of their train ticket. Context: User accesses the website using a smartphone during a commute. Steps: Open the IRCTC website on the smartphone. Navigate to the PNR status page. Enter the PNR number. View the current status of the booking. DR. SACHIN CHOUDHARY 56 Cont.. Scenario 3: Canceling a Ticket User: A traveler whose plans have changed. Goal: Cancel a previously booked train ticket. Context: User accesses the website on their office computer. Steps: Log in to the IRCTC website. Go to the "My Bookings" section. Select the ticket to be canceled. Confirm the cancellation and process the refund. DR. SACHIN CHOUDHARY 57 Design Process The design process for screen design typically involves several stages, from initial research to final implementation and testing. Here's a step-by-step outline: Step 1: Research and Understand User Research: Conduct surveys, interviews, and usability studies to understand user needs, behaviors, and pain points. Competitive Analysis: Analyze competitors' interfaces to identify strengths and weaknesses. Requirements Gathering: Define the requirements based on business goals and user needs. Step 2: Ideation and Sketching Brainstorming: Generate ideas and possible solutions. Sketching: Create rough sketches of different layouts and interface elements. Wireframing: Develop wireframes to outline the structure and flow of the screens without focusing on visual design. Step 3: Prototyping Low-Fidelity Prototypes: Create simple, clickable prototypes to test basic interactions and flows. High-Fidelity Prototypes: Develop detailed prototypes that include visual design elements and more refined interactions. DR. SACHIN CHOUDHARY 58  cont.. Step 4: Design and Development Visual Design: Apply visual styles, including colors, typography, and imagery, to the wireframes. Interaction Design: Define how users will interact with the interface, including animations and transitions. Responsive Design: Ensure the design works well on various devices and screen sizes. Step 5: Testing and Evaluation Usability Testing: Conduct tests with real users to identify usability issues and gather feedback. A/B Testing: Compare different design variations to see which performs better. Iterative Improvement: Use the feedback from testing to refine and improve the design. Step 6: Implementation and Launch Development: Work with developers to implement the design. Quality Assurance: Test the final product to ensure it meets design specifications and is free of bugs. Launch: Release the product to users. Step 7: Post-Launch Evaluation User Feedback: Collect feedback from users to understand their experience with the new design. Analytics: Use tools like Google Analytics to track user behavior and identify areas for further improvement. Continuous Improvement: Regularly update DR. and refine SACHIN the design based on user feedback and evolving needs. CHOUDHARY 59 Characteristics of user interface, A well-designed user interface (UI) is crucial for ensuring a positive user experience (UX). The following characteristics are essential for creating effective and user-friendly interfaces: 1. Clarity Clear Communication: The UI should communicate information and actions clearly to the user. This includes using simple and direct language, intuitive icons, and easily recognizable symbols. Visibility: Important information and controls should be easily visible without overwhelming the user. 2. Consistency Design Patterns: Consistent use of design patterns, such as button styles, icons, and layouts, helps users predict and understand how to interact with the interface. Terminology: Use consistent terminology throughout the interface to avoid confusion. 3. Feedback Immediate Response: Provide immediate feedback for user actions, such as button clicks or form submissions, to indicate that the system is processing the request. Error Messages: Display clear and helpful error messages when something goes wrong, guiding users on how to correct their mistakes. DR. SACHIN CHOUDHARY 60 Cont.. 4. Efficiency Task Completion: The interface should enable users to complete tasks quickly and with minimal effort. Shortcuts: Provide keyboard shortcuts and other efficiency tools for advanced users to speed up their interactions. 5. Aesthetics Visual Appeal: A visually pleasing design attracts users and enhances their experience. This includes the use of appropriate color schemes, typography, and layout. Minimalism: Avoid clutter and keep the design clean and focused on essential elements. 6. Accessibility Inclusive Design: Ensure that the UI is usable by people with various disabilities, including those with visual, auditory, motor, and cognitive impairments. Assistive Technologies: Support screen readers, keyboard navigation, and other assistive technologies. 7. User Control Freedom to Navigate: Allow users to navigate freely within the interface, providing easy ways to go back, undo actions, and exit processes. Customization: Offer options for users to customize the interface to better suit their preferences DR. SACHIN CHOUDHARY 61  Cont.. 8. Learnability Ease of Learning: New users should be able to learn how to use the interface quickly without extensive instructions. Progressive Disclosure: Introduce advanced features gradually, without overwhelming new users, to facilitate learning. 9. Forgiveness Error Prevention: Design the interface to prevent errors, such as disabling unavailable options or providing confirmation dialogs for critical actions. Recovery: Allow users to easily recover from errors, such as through undo and redo functionality. 10. Flexibility Responsive Design: Ensure the UI works well on a variety of devices and screen sizes, including desktops, tablets, and smartphones. Adaptability: Design the interface to adapt to different user needs and contexts. 11. Performance Speed: The UI should be responsive and perform well, with minimal delays and loading times. Stability: Ensure that the interface is stable and free from crashes or glitches. 12. Simplicity Focus on Essentials: Prioritize essential functions and information, reducing complexity and making the interface easier to use. Intuitive Design: Design the interface to be intuitive, so users can understand and use it without prior experience or extensive training. DR. SACHIN CHOUDHARY 62 Example: Online Train Booking System 1. Clarity Clear Communication: Use straightforward labels like "Search Trains," "Book Ticket," "My Bookings," and "Cancel Ticket." Provide concise instructions, such as "Enter departure and arrival cities." Visibility: Important actions like "Search" and "Book Now" buttons are prominently displayed, ensuring users can easily find them. 2. Consistency Design Patterns: Maintain consistent button styles (e.g., blue for primary actions, gray for secondary actions), font sizes, and iconography across the entire platform. Terminology: Use consistent terms throughout the site, such as "PNR Status," "Booking History," and "User Profile." 3. Feedback Immediate Response: After clicking "Search," display a loading animation to show that the system is processing the request. Error Messages: If the user enters an invalid train number, show a clear error message like "Invalid train number. Please check and try again." DR. SACHIN CHOUDHARY 63  Cont.. 4. Efficiency Task Completion: The search form allows users to quickly enter departure and arrival stations, date of travel, and class of travel in a single page. Shortcuts: Provide options for frequent travelers to save favorite routes or use recently searched routes for faster booking. 5. Aesthetics Visual Appeal: Use a clean, modern design with a cohesive color scheme (e.g., blue and white), high-quality images of trains, and appealing typography. Minimalism: Keep the homepage uncluttered, highlighting the main functions like searching for trains and booking tickets. 6. Accessibility Inclusive Design: Ensure text has sufficient contrast against the background, and provide text alternatives for images. Use ARIA labels for screen readers. Assistive Technologies: Support keyboard navigation and ensure that forms can be completed using only the keyboard. 7. User Control Freedom to Navigate: Allow users to easily go back to previous steps in the booking process without losing entered information. Customization: Offer preferences for users to select their default language, preferred class, and notification settings. 8. Learnability Ease of Learning: New users can quickly understand how to use the system due to intuitive design and familiar UI elements (e.g., dropdown menus, calendar pickers). Progressive Disclosure: Hide advanced search options (e.g., train type, flexible dates) under an "Advanced Options" section to avoid overwhelming new users. DR. SACHIN CHOUDHARY 64 Cont,, 9. Forgiveness Error Prevention: Disable the "Book Now" button until all required fields are filled out to prevent submission errors. Recovery: Provide an "Undo" option for actions like ticket cancellations, allowing users to reverse their decisions if needed. 10. Flexibility Responsive Design: Ensure the UI works well on desktops, tablets, and smartphones. For example, the train search results adjust to different screen sizes without losing functionality. Adaptability: Allow users to switch between light and dark modes based on their preferences. 11. Performance Speed: Optimize the backend to ensure that search results are displayed within seconds of the user’s request. Stability: Ensure the system can handle high traffic without crashing, especially during peak booking times. 12. Simplicity Focus on Essentials: Prioritize essential functions like searching for trains, booking tickets, and checking PNR status on the homepage. Intuitive Design: Use familiar UI patterns such asDR.a SACHIN search bar at the top, clear call-to-action buttons, and an easily CHOUDHARY 65 accessible menu. Visual Example: Booking a Train Ticket 1.Homepage 1. A clean and simple layout with a search bar prominently displayed at the top. 2. Primary actions (e.g., "Search Trains," "My Bookings," "PNR Status") are clearly visible. 2.Search Results Page 1. A list of trains matching the search criteria with clear options to view details or book. 2. Filters on the side to refine search results by time, train type, and price. 3.Booking Page 1. A form with clearly labeled fields for passenger details and payment information. 2. A summary of the booking on the right side, showing train details, passenger info, and total cost. 4.Confirmation Page 1. A confirmation message with booking details and options to download or print the ticket. 2. Clear instructions on what to do next, such as checking PNR status or viewing booking history. DR. SACHIN CHOUDHARY 66 The Steep Learning Curve with zero experience and zero The learning curve for a difficult-to-use interfaces expertise DR. SACHIN CHOUDHARY 67  Web user Interface popularity Popularity of Web User Interfaces (UI) The popularity of web user interfaces has grown significantly due to their essential role in how users interact with websites and web applications. Factors contributing to their popularity include: 1.Accessibility: 1. Web UIs can be accessed from anywhere with an internet connection, making them highly convenient. 2. They work across multiple devices (desktop, tablet, mobile), providing consistent user experiences. 2.Ease of Use: 1. Modern web UIs are designed with user-friendliness in mind, offering intuitive navigation and clear visual cues. 2. Minimal learning curve for users, as they follow familiar design patterns and conventions. 3.Interactive and Dynamic Content: 1. Advanced technologies (e.g., HTML5, CSS3, JavaScript) allow for rich, interactive, and engaging content. 2. Real-time updates and feedback enhance user experience. DR. SACHIN CHOUDHARY 68 Cont.. 4. Customization and Personalization 1. Web UIs can be tailored to individual user preferences, enhancing satisfaction and engagement. 2. Examples include personalized dashboards, user profiles, and content recommendations. 5. Integration with Other Services 1. Seamless integration with other web services and APIs. 2. social media, payment gateways, enriches functionality and user experience. DR. SACHIN CHOUDHARY 69  Psychology and Human Factors in Web UI Understanding human psychology and factors influencing user behavior is crucial for designing effective web interfaces. Key aspects include: 1.Cognitive Load: 1. Minimize cognitive load by presenting information clearly and avoiding overwhelming users with too much content. 2. Use progressive disclosure to show only necessary information at each stage of user interaction. 2.Mental Models: 1. Design interfaces that align with users' mental models (how they expect things to work based on previous experiences). 2. Consistency in design helps users predict and understand interface behavior. 3.Perception and Attention: 1. Leverage visual hierarchy (e.g., size, color, contrast) to guide user attention to important elements. 2. Use white space effectively to avoid clutter and enhance readability. 4.Memory and Recall: 1. Reduce reliance on users' memory by providing clear navigation, labels, and cues. 2. Use recognition over recall, offering visible options instead of expecting users to remember commands. DR. SACHIN CHOUDHARY 70 Cont.. 5. Emotional Design: Create emotionally engaging experiences by using appealing visuals, animations, and micro-interactions. Consider emotional responses to colors, shapes, and images to evoke desired feelings (e.g., trust, excitement). 6. Feedback and Affordance: Provide immediate and clear feedback for user actions to confirm that interactions are recognized. Use affordances (design elements suggesting how they can be used) to guide user behavior intuitively. 7. User Motivation and Goals: Understand users' goals and motivations to design interfaces that meet their needs efficiently. Use gamification techniques (e.g., rewards, progress bars) to enhance engagement and motivation. 8. Cultural Differences: Consider cultural variations in color meanings, symbols, and user expectations to design globally usable interfaces. Localize content and design elements to cater to different cultural contexts. DR. SACHIN CHOUDHARY 71 Examples and Best Practices Minimalist Design (Google Search): 1. Simple, clean interface with a focus on the search bar. 2. Reduces cognitive load and allows users to focus on the primary task. DR. SACHIN CHOUDHARY 72 Interactive Feedback (Slack): 1. Real-time updates and notifications keep users informed and engaged. 2. Clear visual and auditory feedback for messages and actions. DR. SACHIN CHOUDHARY 73 Consistent Navigation (Amazon): 1. Consistent layout and navigation across all pages help users find what they need easily. 2. Use of breadcrumbs, dropdown menus, and search functionality to enhance usability. DR. SACHIN CHOUDHARY 74 Emotional Design (Airbnb): 1. High-quality images and user-generated content create an emotional connection. 2. Personalized recommendations and engaging content enhance user satisfaction. DR. SACHIN CHOUDHARY 75 Affordance and Feedback (Spotify): 1. Play buttons, sliders, and interactive elements clearly indicate how users can interact with the interface. 2. Immediate feedback for actions like playing a song, adjusting volume, or creating a playlist. DR. SACHIN CHOUDHARY 76 Conceptual Models A conceptual model in UI/UX and HCI (Human-Computer Interaction) is a high-level description of how a system operates and is designed to help both designers and users understand and interact with the system effectively. It provides a framework for organizing information, defining user interactions, and shaping the overall experience. DR. SACHIN CHOUDHARY 77 Key Components of Conceptual Models Metaphors and Analogies: Use familiar concepts to help users understand unfamiliar systems. Example: A desktop metaphor in operating systems, where files are represented as icons on a virtual desktop. Concepts and Objects: Define the main elements within the system, such as objects, attributes, and actions. Example: In a file management system, objects include files, folders, and drives. Relationships and Mappings: Establish relationships between different elements and define how actions affect objects. Example: Dragging a file icon into a trash bin icon maps to the action of deleting the file. Actions and Operations: Specify the operations that users can perform on the objects within the system. Example: Clicking, dragging, dropping, right-clicking for context menus. Feedback and Response: Describe how the system provides feedback to users’ actions. Example: Highlighting a selected file, displaying a progress bar during file transfer. DR. SACHIN CHOUDHARY 78 Importance of Conceptual Models 1.Enhances Learnability: 1. A well-defined conceptual model helps users quickly understand how to interact with the system. 2. Reduces the learning curve and increases user confidence. 2.Improves Usability: 1. Provides a consistent framework that users can rely on, improving efficiency and satisfaction. 2. Helps in predicting system behavior, making the interaction more intuitive. 3.Supports Design and Development: 1. Guides designers in creating coherent and consistent interfaces. 2. Ensures that all team members have a shared understanding of the system’s structure and functionality. 4.Facilitates Communication: 1. Acts as a bridge between designers, developers, and stakeholders, ensuring everyone is on the same page. 2. Helps in explaining the system to end-users during training or onboarding. DR. SACHIN CHOUDHARY 79 Developing Conceptual Models Step 1: Understand User Needs and Context Conduct user research to gather insights into user behaviors, goals, and pain points. Analyze the context in which users will interact with the system Step 2: Define Core Concepts and Relationships Identify the key objects, actions, and attributes within the system. Establish relationships between these elements and define how they interact. Step 3: Create Metaphors and Analogies Use familiar metaphors to help users understand the system easily. Ensure that the metaphors are relevant and easily recognizable by the target audience. DR. SACHIN CHOUDHARY 80 Step 4: Design Interaction Patterns Define the primary interaction patterns, such as navigation, selection, and manipulation. Ensure consistency across different parts of the system. Step 5: Test and Refine Conduct usability testing with real users to validate the conceptual model. Gather feedback and make necessary adjustments to improve clarity and usability. DR. SACHIN CHOUDHARY 81 Examples of Conceptual Models 1.Desktop Metaphor in Operating Systems 1. Concepts and Objects: Files, folders, trash bin, desktop. 2. Actions and Operations: Opening files, moving files to trash, organizing files in folders. 3. Metaphor: Physical desktop with documents and folders. 2.Shopping Cart in E-commerce 1. Concepts and Objects: Products, shopping cart, checkout process. 2. Actions and Operations: Adding/removing items, viewing cart, making payments. 3. Metaphor: Physical shopping cart in a store. 3.Calendar Applications 1. Concepts and Objects: Events, dates, reminders. 2. Actions and Operations: Scheduling events, setting reminders, viewing calendar. 3. Metaphor: Physical calendar with events marked on specific dates. 4.Social Media Platforms 1. Concepts and Objects: Posts, likes, comments, profiles, feeds. 2. Actions and Operations: Posting updates, liking posts, commenting, following profiles. 3. Metaphor: Social interactions in real life (e.g., sharing news, giving feedback). DR. SACHIN CHOUDHARY 82  Developing the Conceptual Model Step 1: Understand User Needs and Context User Research: Conduct surveys and interviews to understand how users currently hail rides, their pain points, and preferences. Context Analysis: Analyze the contexts in which users will interact with the app (e.g., booking rides at home, on the go, or in emergencies). Step 2: Define Core Concepts and Relationships Key Objects: Riders, Drivers, Rides, Vehicles, Locations, Payments. Relationships: Riders request Rides that are fulfilled by Drivers with Vehicles, from Pickup Locations to Drop-off Locations, resulting in Payments. Step 3: Create Metaphors and Analogies Cab Service Metaphor: Use the familiar experience of booking and riding a cab to design the interface. Maps and Navigation: Integrate maps to show real-time driver locations and routes. DR. SACHIN CHOUDHARY 83 Step 4: Design Interaction Patterns Primary Interactions: Rider: Open app → Enter pickup and drop-off locations → Request ride → Track driver → Complete ride → Make payment. Driver: Open app → Accept ride request → Navigate to pickup location → Pick up rider → Complete ride → Receive payment. Secondary Interactions: Rider: Rate driver, view ride history, manage payment methods. Driver: Rate rider, view earnings, manage vehicle details. Step 5: Test and Refine Usability Testing: Conduct testing sessions with real users to observe their interactions and gather feedback. Iteration: Refine the interface based on user feedback to improve clarity, usability, and satisfaction. DR. SACHIN CHOUDHARY 84  Conceptual Model for a Ride-Sharing Application Let's consider the design of a ride-sharing application, similar to Uber/ Rapido /Ola Conceptual Model Components 1. Metaphors and Analogies Metaphor: The experience of hailing a cab and getting a ride. Analogy: The app serves as a virtual cab service, where users can book rides, track drivers, and make payments digitally. 2. Concepts and Objects Users: Riders and Drivers. Objects: Rides, Vehicles, Locations, Payments. Attributes: Pickup and drop-off locations, ride status (requested, in-progress, completed), payment details. DR. SACHIN CHOUDHARY 85 3. Relationships and Mappings Rides are requested by Riders and fulfilled by Drivers. Vehicles are assigned to Drivers. Locations are linked to Rides (pickup and drop-off). Payments are associated with Rides. 4. Actions and Operations Rider Actions: Request a ride, cancel a ride, rate the driver, make payments. Driver Actions: Accept a ride request, navigate to pickup location, complete the ride, rate the rider. 5. Feedback and Response Immediate Feedback: Confirmation of ride request, estimated time of arrival (ETA) updates, real- time tracking of the driver. End-of-Task Feedback: Ride completion notification, payment receipt, driver rating prompt. DR. SACHIN CHOUDHARY 86 Mistakes and Error In UI/UX design, mistakes and errors are inevitable but can be mitigated through careful design and testing. Understanding the types of mistakes and errors, and how to address them, is crucial for creating effective and user-friendly interfaces. DR. SACHIN CHOUDHARY 87 Mistakes A mistake occurs when users make an incorrect choice or action due to a misunderstanding of the system. Mistakes are often tied to conceptual misunderstandings or incorrect assumptions about how a feature or interface works. Causes of Mistakes: Ambiguous interfaces: Poorly labeled buttons or confusing layouts can mislead users into choosing the wrong action. Lack of feedback: If a system doesn't provide adequate feedback, users may not realize they’re making a mistake. Complex workflows: Complicated interfaces can overwhelm users and increase the likelihood of mistakes. Examples: Clicking "Delete" instead of "Save" because the buttons are too close together. Choosing the wrong item from a dropdown list because the options are not clearly distinguishable. DR. SACHIN CHOUDHARY 88 Types of Mistakes: Rule-Based Mistakes: Occur when users apply the wrong rule or action to a situation. Example: A user tries to refresh a page by clicking the browser’s back button, assuming it will update the page. Knowledge-Based Mistakes: Occur due to a lack of understanding or knowledge about how the system works. Example: A user selects the wrong setting in an application because they don’t understand the technical terms or options. Memory-Based Mistakes: Happen when users forget information required for a task, leading to incorrect actions. Example: Forgetting a password and entering an incorrect one multiple times, thinking it's correct. DR. SACHIN CHOUDHARY 89 Capture Errors: Occur when a user’s routine action interferes with a more complex or unfamiliar task, leading to a mistake. Example: A user intends to write an email but habitually opens social media out of routine. Mode Errors: Occur when the user’s actions are correct but performed in the wrong mode or context. Example: Typing in a password field without realizing that the Caps Lock is on. DR. SACHIN CHOUDHARY 90 Errors An error refers to situations where a user action fails, often due to issues with the system or external factors. Errors generally occur when the user attempts an action that the system cannot process or handle. Types of Errors: System Errors: Issues caused by the system, such as network failures or unhandled exceptions. User Errors: Mistakes made by users due to incorrect inputs or choices. Examples: Entering an invalid email address into a form field, resulting in an error message. System errors like "404 Page Not Found" when trying to access a broken link. An app crashing when overloaded with data input. DR. SACHIN CHOUDHARY 91 Types of Errors Slip: An error made when a user intends to do something correct but accidentally does something else. Example: Clicking the wrong button because it's too close to the intended button. Lapse: A memory failure that causes the user to omit or forget part of a process. Example: Forgetting to attach a file to an email before sending it. System Error: An error caused by the system, such as bugs, crashes, or network failures. Example: The system crashes while saving a document, resulting in loss of work. DR. SACHIN CHOUDHARY 92 Input Error: Occurs when the user enters invalid or incorrect information into a system. Example: Typing an invalid email address in a form field. 404 Error (Page Not Found): A common web error where a user tries to access a page that doesn’t exist or has been moved. Example: Clicking on a broken link and receiving a "404 Not Found" message. Response Error: Occurs when the system’s response is incorrect or doesn’t match the user’s expectation. Example: A search query returns irrelevant results. DR. SACHIN CHOUDHARY 93 Preventing Mistakes and Errors Error Prevention:  Use clear labels, icons, and instructions.  Guide users with well-defined processes and affordances.  Disable or hide actions that cannot be performed in the current context. Error Recovery:  Provide users with the ability to undo actions (e.g., undo delete).  Use confirmation dialogs for critical actions (e.g., “Are you sure you want to delete?”).  Offer suggestions for fixing errors (e.g., “Did you mean…?” in a search field). Error Feedback:  Display clear, helpful error messages that guide the user on what went wrong and how to fix it.  Avoid technical jargon that users may not understand. Affordances:  Design elements should indicate how they can be used. For example, buttons shouldlook clickable, and fields that require input should be easily recognizable. DR. SACHIN CHOUDHARY 94  Example : E-commerce Website Checkout Process Scenario: A user is purchasing items from an online store. Error Type: Slip Details: Mistake: The user intends to enter their credit card information but accidentally selects "PayPal" as the payment method. Consequence: The payment process fails because the user does not have a PayPal account linked to the system. Solution: Design Fix: Provide clear, distinct buttons for each payment method. Use larger, well-spaced buttons with clear labels. Feedback: Offer immediate feedback, such as highlighting the selected payment method and showing a summary before finalizing the payment. Example: Amazon's payment selection screen provides clear options with distinct icons and labels, reducing the chance of selecting the wrong payment method. DR. SACHIN CHOUDHARY 95 Example : Airline Booking System Scenario: A user is booking a flight online. Error Type: Lapse Details: Mistake: The user fills out the passenger information but forgets to enter their frequent flyer number. Consequence: The user misses out on earning miles for the flight. Solution: Design Fix: Include a reminder or prompt for the frequent flyer number during the booking process. Feedback: Provide a review screen before finalizing the booking that highlights any missing information, such as "Frequent flyer number not entered.“ Example: Delta Airlines' booking process includes a review screen that highlights important information and prompts the user to fill in missing details. DR. SACHIN CHOUDHARY 96  Example : Social Media Profile Setup Scenario: A user is setting up their profile on a social media platform. Error Type: Mistake Details: Mistake: The user misunderstands the "Public" and "Private" profile settings, thinking that "Public" only applies to friends. Consequence: The user's profile is visible to everyone, leading to privacy concerns. Solution: Design Fix: Use clear and descriptive labels and tooltips to explain the implications of each privacy setting. Feedback: Provide a confirmation dialog with a summary of the privacy settings before the user saves the changes. Example: Facebook includes detailed explanations and visual aids to help users understand the implications of their privacy settings. DR. SACHIN CHOUDHARY 97  Example :Mobile Banking App Scenario: A user is transferring money using a mobile banking app. Error Type: Violation Details: Mistake: The user tries to transfer more money than their account balance, deliberately ignoring the warning messages. Consequence: The transfer fails, and the user receives an error notification. Solution: Design Fix: Implement safeguards that prevent users from entering amounts exceeding their balance, such as disabling the "Transfer" button until the amount is corrected. Feedback: Provide a clear and unmissable error message that explains why the action cannot be completed. Example: Chase Bank's app disables the "Transfer" button and highlights the error if the entered amount exceeds the available balance. DR. SACHIN CHOUDHARY 98 18-09-2024 DR. SACHIN CHOUDHARY 99 Cognitive models Cognitive models describe how users think and process information when interacting with a system. These models help designers understand the mental processes of users, predict how users will interact with a system, and identify potential usability issues. Key Cognitive Models in UI/UX and HCI 1. GOMS Model (Goals, Operators, Methods, and Selection Rules) 2. KLM (Keystroke-Level Model) 3. Fitts’ Law 4. Hick’s Law 5. Norman’s Seven Stages of Action 6. Mental Models DR. SACHIN CHOUDHARY 100 1. GOMS Model (Goals, Operators, Methods, and Selection Rules) Goals: What the user wants to achieve (e.g., "Send an email"). Operators: The cognitive and physical actions the user takes (e.g., "Click the compose button," "Type the email"). Methods: The sequence of operators that a user can use to achieve a goal (e.g., "Click Compose > Type recipient > Type subject > Type message > Click Send"). Selection Rules: If there are multiple methods, the rules that determine which method the user will choose (e.g., "If email address is saved in contacts, choose the auto-suggest option"). Example: Goal: Book a flight. Operators: Click, type, scroll. Methods: Use a flight search engine, select dates, choose flights. Selection Rules: Choose the method based on the best price or shortest travel time. DR. SACHIN CHOUDHARY 101 2. KLM (Keystroke-Level Model) Focuses on the time taken to perform low-level actions such as keystrokes, mouse clicks, and scrolling. Estimates task completion time based on a sequence of operators. Example: Task: Copy and paste a paragraph from one document to another. Operators: Keystrokes (Ctrl+C, Ctrl+V) Mouse clicks (highlight text, position cursor). Application: KLM helps in optimizing interfaces by minimizing the number of low- level actions required to complete tasks, thus improving efficiency. DR. SACHIN CHOUDHARY 102 3. Fitts’ Law Fitts' Law is a predictive model of human movement, primarily used in human-computer interaction (HCI) and ergonomics. It explains the relationship between the time it takes to move to a target area and the distance to, as well as the size of, the target. In simple terms, it predicts how quickly and accurately a user can point at or click on an interface element. Formula: T= a + b *log2 (( D\W) + 1) T is the time required. a and b are empirically determined constants. D is the distance to the target. W is the width of the target. DR. SACHIN CHOUDHARY 103 Example in UI Design: Imagine designing a website with navigation buttons. According to Fitts' Law: Large buttons will be faster and easier to click, so important actions like "Submit" or "Next" should have large, easily clickable areas. Placing buttons closer to where users’ attention is (e.g., close to the content they are interacting with) will reduce the time and effort required to complete tasks. Applications in HCI: Menu Design: A large, easily clickable menu on a touch screen will be more user-friendly than small, closely spaced menu items. Button Placement: Placing frequently used buttons (like "Back" or "Save") closer to the user’s hand or central interface reduces the effort needed. Responsive Design: Touch targets for mobile devices need to be large enough to avoid user errors, especially on small screens. DR. SACHIN CHOUDHARY 104  4. Hick’s Law Describes the time it takes for a person to make a decision as a result of the possible choices they have. Formula: T=b*log2​(n+1) T is the decision time. b is a constant. n is the number of choices. Example: Menu Design: A menu with too many options will increase the decision time for users, making the interface less efficient. Application: Simplifying choices and reducing the number of options can speed up decision- making, improving user experience. DR. SACHIN CHOUDHARY 105 5. Norman’s Seven Stages of Action Goal: A user wants to print a document. 1. Forming the Goal: The user decides they need a physical copy of a document. 2. Forming the Intention: The user intends to print the document using a nearby printer. 3. Specifying the Action: The user plans to open the document, click the print button, and select the appropriate printer. 4. Executing the Action: The user opens the document, clicks the print button, and selects the printer. 5. Perceiving the State of the System: The user checks whether the print dialog box appears and whether the printer begins to print. 6. Interpreting the State of the System: The user interprets the system’s response, such as the printer status showing that printing has started. 7. Evaluating the Outcome: The user checks if the document has printed correctly and meets their expectations. DR. SACHIN CHOUDHARY 106 Norman's Seven Stages of Action is a model introduced by Don Norman to describe how humans interact with systems, particularly focusing on the process of goal-directed activities and how users bridge the gap between intention and action. It outlines the steps involved in turning a goal into a successful outcome and helps identify potential issues or breakdowns in user interaction with a system The Seven Stages of Action: 1. Forming the Goal: ◦ The user identifies what they want to achieve (the ultimate goal or objective). ◦ Example: A user wants to book a flight online. 2. Forming the Intention: ◦ The user decides on a specific intention or plan of action to reach the goal. ◦ Example: The user decides to search for flights on a travel website. 3. Specifying the Action: ◦ The user determines what actions are needed to fulfill their intention. ◦ Example: The user decides to open a browser, go to a travel website, and search for available flights. DR. SACHIN CHOUDHARY 107 4. Executing the Action: ◦ The user performs the planned actions to achieve the goal. ◦ Example: The user opens the browser, navigates to the travel website, and enters flight details (destination, date, etc.). 5. Perceiving the State of the System: ◦ The user observes how the system responds to their actions. ◦ Example: The website shows a list of available flights and prices based on the search criteria. 6. Interpreting the State of the System: ◦ The user makes sense of the feedback from the system to understand whether their actions are leading them toward their goal. ◦ Example: The user reviews the flight options and prices, understanding that these are valid choices. 7. Evaluating the Outcome: ◦ The user compares the system's feedback with their original goal to determine if they have succeeded. ◦ Example: The user checks whether the flights match their expectations (in terms of price, schedule, etc.) and decides if they have successfully found a suitable flight. DR. SACHIN CHOUDHARY 108 Example Using a Thermostat: Goal: Adjust the room temperature. Intention: Increase the temperature. Specifying Action: Turn the dial to a higher setting. Executing Action: Turn the dial. Perceiving State: The display shows a higher temperature. Interpreting State: The user sees the new temperature setting. Evaluating Outcome: The room temperature increases, achieving the goal. Application: Ensuring each stage is clear and provides appropriate feedback improves the overall usability of a system. DR. SACHIN CHOUDHARY 109 6. Mental Models Users have preconceived notions about how systems should work based on their experiences. Designing interfaces that align with users’ mental models helps reduce confusion and increase usability. Example: Website Navigation: Users expect the main navigation menu to be at the top or left side of the page. Application: Conducting user research to understand mental models and designing interfaces that match these expectations leads to more intuitive and user-friendly designs. DR. SACHIN CHOUDHARY 110 Socio-Organizational and stakeholder requirements Socio-organizational and stakeholder requirements involve understanding the social, cultural, and organizational context in which a system will be used. These requirements ensure that the system aligns with the needs, values, and expectations of all stakeholders, including end-users, business executives, and other interested parties. Key Aspects of Socio-Organizational and Stakeholder Requirements 1.Stakeholder Identification 2.Cultural Considerations 3.Organizational Workflow Integration 4.User Roles and Permissions 5.Communication and Collaboration Needs 6.Regulatory and Compliance Requirements 7.Ethical and Social Impact DR. SACHIN CHOUDHARY 111 1. Stakeholder Identification Understanding who the stakeholders are and what their specific needs and goals entail. Example: Development of a Hospital Management System Stakeholders: Doctors and Nurses: Require quick access to patient records and seamless integration with medical devices. Administrative Staff: Need efficient billing and appointment scheduling systems. Patients: Expect user-friendly interfaces for appointment booking and accessing their medical records. Regulatory Bodies: Require compliance with healthcare regulations and standards. Application: Conduct stakeholder interviews and surveys to gather detailed requirements from each group, ensuring that the system meets diverse needs. DR. SACHIN CHOUDHARY 112 2. Cultural Considerations Designing interfaces that respect and incorporate cultural differences. Example: Global E-Learning Platform Considerations: Language: Support multiple languages and local dialects. Design Preferences: Adapt color schemes, symbols, and layouts to align with cultural aesthetics. Content Sensitivity: Ensure that learning materials are culturally appropriate and respectful. Application: Use localization and internationalization techniques to adapt the platform for different cultural contexts. DR. SACHIN CHOUDHARY 113 3. Organizational Workflow Integration Ensuring that the system integrates seamlessly into existing workflows and processes. Example: Customer Relationship Management (CRM) System for a Sales Team Considerations: Workflow Mapping: Understand and map out current sales processes. Automation Needs: Identify areas where automation can streamline tasks, such as lead tracking and follow-ups. Integration: Ensure compatibility with existing tools like email, calendars, and marketing software. Application: Collaborate with sales teams to customize the CRM system, ensuring it enhances rather than disrupts their workflow. DR. SACHIN CHOUDHARY 114 4. User Roles and Permissions Defining and managing different user roles and their permissions within the system. Example: University Student Management System User Roles: Students: Can register for courses, view grades, and access learning materials. Professors: Can manage courses, enter grades, and communicate with students. Administrators: Have access to all data for managing student records, courses, and faculty. Application: Implement a role-based access control (RBAC) system to ensure that users only access information relevant to their roles. DR. SACHIN CHOUDHARY 115 5. Communication and Collaboration Needs Facilitating effective communication and collaboration among stakeholders. Example: Project Management Tool for a Software Development Team Needs: Real-Time Messaging: Support for chat and instant messaging. Task Management: Features for assigning and tracking tasks. Document Sharing: Easy sharing and collaborative editing of documents. Meetings: Integration with video conferencing tools. Application: Integrate communication and collaboration features within the tool to enhance team productivity and coordination. DR. SACHIN CHOUDHARY 116 6. Regulatory and Compliance Requirements Ensuring that the system adheres to relevant laws, regulations, and industry standards. Example: Financial Trading Platform Requirements: Data Security: Compliance with data protection regulations like GDPR. Transaction Transparency: Adherence to financial reporting standards. User Authentication: Implementation of strong authentication methods. Application: Work with legal and compliance teams to ensure the platform meets all regulatory requirements and includes necessary security features. DR. SACHIN CHOUDHARY 117 7. Ethical and Social Impact Considering the ethical implications and social impact of the system. Example: Social Media Platform Considerations: Privacy: Protect user data and provide transparent privacy settings. Content Moderation: Implement policies to prevent harassment, hate speech, and misinformation. Accessibility: Ensure the platform is accessible to users with disabilities. Application: Develop and enforce ethical guidelines, and conduct regular audits to ensure compliance with social responsibility standards. DR. SACHIN CHOUDHARY 118 20-09-2024 DR. SACHIN CHOUDHARY 119 Social Computing Social computing refers to the interaction and collaboration of users through computer systems. It encompasses a wide range of applications, including social media platforms, collaborative tools, and online communities. In UI/UX and HCI, social computing focuses on designing interfaces that facilitate social interaction, enhance user engagement, and support collaborative activities. Key Aspects of Social Computing in UI/UX and HCI 1. User Engagement and Interaction 2. Community Building 3. Collaborative Tools 4. Social Feedback and Validation 5. Privacy and Security 6. User-Generated Content DR. SACHIN CHOUDHARY 120 1. User Engagement and Interaction Designing interfaces that encourage user participation and interaction. Example: Facebook News Feed Features: Like, Comment, Share: Users can engage with posts through likes, comments, and shares. Personalization: The news feed is personalized based on user preferences and interactions. Real-Time Updates: Users receive real-time updates about activities within their network. Application: By providing interactive elements and personalized content, Facebook keeps users engaged and encourages frequent interactions. DR. SACHIN CHOUDHARY 121 2. Community Building Creating environments where users can form and join communities around shared interests. Example: Reddit Features: Subreddits: Users can join or create communities (subreddits) focused on specific topics. Upvotes/Downvotes: Users can upvote or downvote posts and comments to signal approval or disapproval. Threaded Discussions: Comments are organized in threads, making it easy to follow conversations. Application: Reddit’s structure supports the formation of niche communities, fostering a sense of belonging and engagement among users. DR. SACHIN CHOUDHARY 122 3. Collaborative Tools Enabling users to work together on shared tasks and projects. Example: Google Docs Features: Real-Time Collaboration: Multiple users can edit documents simultaneously. Commenting and Suggestions: Users can leave comments and suggestions for collaborators. Version History: Changes are tracked, and previous versions can be restored. Application: Google Docs enhances productivity and collaboration by allowing users to work together seamlessly, regardless of their physical location. DR. SACHIN CHOUDHARY 123 4. Social Feedback and Validation Incorporating features that allow users to receive feedback and validation from their peers. Example: Instagram Features: Likes and Comments: Users receive likes and comments on their posts. Stories and Reactions: Users can post stories and receive reactions in real-time. Follower Count: Users can see the number of followers they have, which can serve as a form of social validation. Application: These features encourage users to share content and engage with others, driven by the desire for social feedback and validation. DR. SACHIN CHOUDHARY 124 5. Privacy and Security Ensuring that social computing platforms protect user privacy and provide secure interactions. Example: WhatsApp Features: End-to-End Encryption: Messages are encrypted, ensuring that only the sender and recipient can read them. Privacy Settings: Users can control who can see their profile information, status, and last seen. Two-Step Verification: An extra layer of security to protect user accounts. Application: WhatsApp’s focus on privacy and security builds trust among users, making them more comfortable engaging in social interactions on the platform. DR. SACHIN CHOUDHARY 125 6. User-Generated Content Facilitating the creation and sharing of content by users. Example: YouTube Features: Video Uploading: Users can upload and share videos. Comments and Likes: Viewers can comment on and like videos, providing feedback to content creators. Subscriptions: Users can subscribe to channels to stay updated on new content. Application: YouTube empowers users to become content creators, fostering a vibrant community of creators and viewers who interact through videos and comments. DR. SACHIN CHOUDHARY 126 DR. SACHIN CHOUDHARY 127 Experiments designing concepts and methods Experiment design in UI/UX and HCI involves creating structured tests to evaluate the effectiveness, usability, and user experience of interfaces and systems. These experiments can provide valuable insights into user behavior, preferences, and pain points, guiding the design and improvement of digital products. Key Concepts in Experiment Design 1.Hypothesis Formation 2.Independent and Dependent Variables 3.Control Groups 4.Randomization 5.Sample Size 6.Data Collection Methods 7.Statistical Analysis DR. SACHIN CHOUDHARY 128 1. Hypothesis Formation A clear and testable statement about what you expect to happen. Example: "Changing the color of the call-to-action button from blue to red will increase the click-through rate by 10%." DR. SACHIN CHOUDHARY 129 2. Independent and Dependent Variables Independent Variable: The variable you change or manipulate (e.g., button color). Dependent Variable: The outcome you measure (e.g., click-through rate). Example: In the button color experiment, the independent variable is the button color, and the dependent variable is the click-through rate. DR. SACHIN CHOUDHARY 130 3. Control Groups A group that does not receive the experimental treatment, used as a baseline to compare results. Example: In a test where one group sees the red button and another sees the blue button, the group seeing the blue button can act as the control group. DR. SACHIN CHOUDHARY 131 4. Randomization Randomly assigning participants to different groups to eliminate bias. Example: Using a random number generator to assign users to either the red button or blue button group. DR. SACHIN CHOUDHARY 132 5. Sample Size The number of participants in your study, which should be large enough to provide statistically significant results. Example: If testing button color changes, having a sample size of 500 users might be necessary to detect a meaningful difference in click-through rates. DR. SACHIN CHOUDHARY 133 6. Data Collection Methods Techniques used to gather data from participants. Example: Collecting click-through data through web analytics tools, user feedback via surveys, and direct observation during usability tests. DR. SACHIN CHOUDHARY 134 7. Statistical Analysis Using statistical methods to analyze the collected data and determine if the results are significant. Example: Using a t-test to compare the click-through rates of the red and blue button groups to see if the difference is statistically significant. DR. SACHIN CHOUDHARY 135 Methods for Conducting Experiments 1.A/B Testing 2.Usability Testing 3.Field Studies 4.Surveys and Questionnaires 5.Eye Tracking Studies 6.Heuristic Evaluation 7.Think-Aloud Protocol DR. SACHIN CHOUDHARY 136 1. A/B Testing Comparing two versions of a design to see which performs better. Example: Testing two different landing page designs to see which one has a higher conversion rate. Application: Set Up: Create two versions of the landing page (A and B). Random Assignment: Randomly assign users to either version A or version B. Measure: Track conversion rates for both versions. Analyze: Use statistical analysis to determine which version performs better.