Subject:UI/UX Subject code:BCS456C CIE Marks :50 SEE Marks :50 Total Marks :100 Credits:01Chapter 1-Introduction Interface refers to the medium through which a user interacts with a machine, software, or device. In digital design, user interface (UI) refers to the interactivity, look, and feel of a product screen or web page, while user experience (UX) covers a user’s overall experience with the product or website. A user interface (UI) refers to the space where interactions between humans and machines occur. The goal of an effective UI is to make the machine's operation understandable and accessible to the user. UI/UX design is a combination of two design disciplines that work together to create a great user experience.What is Ul? User Interface How people interact with other products / services Used in Web & Mobile Applications @ A bridge between a human being anda system.What is UI Design? User Interface (UI) design is the process of designing the interface of a digital product. The goal of UI design is to create a visually appealing and user-friendly (easy to use, understand, and navigate) interface that allows users to interact with the product easily. UI designers work on designing the layout, color scheme, and visual elements of the product such as from simple graphic images to complex industrial products. UI design also involves creating wireframes and prototypes of the product to help visualize the final product. Wireframes are basic sketches of the layout of the product, while prototypes are working models that allow designers to test the product and get feedback from users.What is UX Design? * User Experience (UX) design is the process of creating a product that meets the needs of the user. * The goal of UX design is to create a product that is easy to use and provides a seamless experience for the user. * UX designers work on understanding the needs of the user and creating a product that meets those needs.Why UI /UX Design? * Ul /UX design is important because it helps to create products and services that are easy to use, intuitive, and enjoyable for users. * Awell-designed user interface (UI) and user experience (UX) can help to increase user engagement and satisfaction, which can ultimately lead to higher conversions and revenue for businesses.Here are some reasons why UI UX design is important: User satisfaction: UI UX design helps to create products that meet the needs and expectations of users. Brand loyalty: A well-designed UI and UX can help to build brand loyalty and increase customer retention(ability of a company to retain its customers over a period of time. Users consistently choose a particular brand over others in the same product or service category. Increased engagement: A user-friendly interface and a satisfying experience can help to increase user engagement with a product. Users are more likely to spend more time on a product that is easy to use and enjoyable. Competitive advantage: In a crowded marketplace, a well-designed Ul and UX can give a product a competitive advantage. Increased revenue: A positive user experience can lead to increased revenue for businesses.om UX The entire user experience of a product Focuses on creating a satisfying and seamless experience | Visual and interactive design of a product Focuses on creating visually attractive and intuitive interfaces includes graphical and interactive elements such as buttons, : Includes research, analysis, user menus, cons, colors, typography, and other graphical er'sonas, and prototypin components Pe Prototyping : . Aim is to meet the users’ needs Aim isto make the product look beautiful and appealing : : ina satisfying way . , Helps users achieve their goals Helps users navigate and interact with the product Pe 8 with the product Important for creating an attractive interface Important for creating a successful overall experienceUI UX Examples * Apple’s iPhone: The user interface is intuitive and easy to navigate, with simple and attractive design elements that make it a pleasure to use. The user experience is also carefully crafted to be seamless and enjoyable, with features such as Face ID and intuitive gestures that make using the iPhone a pleasure. * Airbnb: Airbnb’s user interface is clean and simple, with easy-to-use search filters that help users find the perfect accommodation. * Google Maps: Google Maps is an example of excellent Ul UX design. The user interface is clean and easy to use, with intuitive features such as voice navigation and real-time traffic updates that make it a pleasure to use.* Slack: Slack is an example of UI UX design that helps to improve productivity. The user interface is simple and intuitive, with easy-to-use messaging and collaboration tools that help teams stay connected and get work done. * Spotify: Spotify’s user interface is carefully designed to be easy to use and visually attractive. The user experience is also carefully crafted, with personalized recommendations and playlists that help users discover new music and keep them engaged with the platform.UI UX Projects * E-commerce Websites * Mobile App * Healthcare Platform * Financial Dashboard * Gaming AppFrom Usability To User Experience * Human-computer interaction is what happens when a human user and a computer system, get together to accomplish some work. * Usability is that aspect of HCI devoted to ensure that human- computer interaction is effective, efficient, and satisfying for the user. * So usability includes characteristics such as ease of use, productivity, efficiency(capable of producing desired results with little or no waste), effectiveness(ability to be successful and produce the intended results), learnability, retainability, and user satisfaction.Document aca 4 Who, What, Where,When, Why Define Goals Requirements Business Principles Research & User Stories/Scenarios Research others 2 The Art Design - 3 Data/ Visual Magic Observations Make it Scientific User Flow User Testing Wireframes / Prototypes Iterations DesignsMisconceptions about Usability * Usability is not what some people used to call “dummy proofing.”(process of designing product or system in such a way that it is easy to understand and use, even for someone who is unfamiliar with it or who may not have a lot of experience). * Usability is not equivalent to being “user-friendly.” * While visual design is an integral and important part of usability, it is not the only part of interaction design.Functionality Is Important, but a Quality User Experience Can Be Even More So A product that affords a better user experience often outsells ones with even more functionality. For example, take the Blackberry; once a market leader in smartphones but now outclassed by the iPhone, a later entrant into the market with less functional capabilities. The iPod, iPhone, and iPad are products that represent cool high technology with excellent functionality but are also examples that show the market is now not just about the features—it is about careful design for a quality user experienceDesigning for the “Visitor Experience” + Five different qualities of Websites that will impact the experience of the site’s visitors: * Utility: The utility of a Website refers to the usefulness, importance, or interest of the site content to the visitor. * Functional Integrity: A Website’s functional integrity is the extent to which it works as intended. Websites may have “dead” links that go nowhere, they may freeze or crash when certain operations are invoked, they may display incorrectly on some browsers or browser versions, they may download unintended files, etc. + Usability: Usability refers to how easy it is to learn (for first time and infrequent visitors) and use (for frequent visitors) a Website.Persuasiveness: refers to the ability to convince others to agree with an idea, take a certain action, or adopt a belief through reasoning, appeal, or influence. Graphic Design: Finally, the “look and feel,” that is, the graphic design, of a Website can have a significant impact on the visitor experience. The graphic design of a Website—primarily the ways colors, images, and other media are used.User Experience Cannot Be Designed * Auser experience cannot be designed, only experienced. * You are not designing or engineering or developing good usability or a good user experience.Emotional impact as part of the user experience * The emotional aspects of user experience- pleasure, fun, aesthetics, novelty, originality, sensations, and experiential features—the affective parts of interaction.USER EXPERIENCE NEEDS A BUSINESS CASE One of the frequent challenges we face is getting acceptance towards user experience processes from upper management and business stakeholders. So what is the business case for UX? Computer software of all kinds is in need of better design, including better user interaction design. Mitch Kapor, the founder of Lotus, has said publicly and repeatedly that “The lack of usability of software and the poor design of programs are the secret shame of the industry” A posting by Computer World declared: “Badly designed software is costing businesses millions of dollars annually because it’s difficult to use, requires extensive training and support, and is so frustrating.Chapter 2- Extracting Interaction Design Requirements Extracting Interaction Design requirements involves understanding the needs and expectations of users, stakeholders, and the context of use to inform the design of a digital product or service Steps to help you extract these requirements: — Identify Stakeholders: These can involve users, clients, developers, and any other individuals or groups affected by the design — Understand User Needs: Conduct user research to understand the goals, tasks, preferences, and challenges of the users. — Define Use Cases: Create scenarios that describe how users will interact with the product in different situations. — Define Functional Requirements: Specify the features and functionality that the product must have to meet the user needs — Define Non-Functional Requirements: Consider the performance, security, and usability aspects of the design — Prototyping: Develop prototypes to visualize and test the design concepts. — Document Requirements: Document the design requirements, including user needs, use cases, functional and non-functional requirements and design principles. This documentation serves as a reference for the design process. VUX- BCS45 aWork activity affinity diagram (WAAD) - A visual tool used in business analysis to organize and prioritize a large number of tasks or activities related to a specific work area or project. Contextual inquiry and analysis is a user-centered research method used to understand how people interact with a product, service, or system in their natural environment. It involves observing and interviewing users as they go about their tasks, in order to gather insights into their needs, behaviors, and challenges. Depending on how well contextual inquiry and analysis is done so far, an accurate and complete picture of the users’ work domain is given. We are now going to identify the needs and design requirements for a proposed new system to optimize, support, and facilitate work in that domain. VUX- BCS45Figure 5-1 ‘You are hee; the chapter on extracting interaction requirements, within understanding user work and nerds inthe context of the overall Whert lifecycle template Pe cae) rt feGap between Analysis and Design * The gap between analysis and design refers to the difference that can occur between the findings and insights gathered during the analysis phase of a project and the actual design and implementation of a solution. * Information coming from contextual studies describes the work domain but does not directly meet the information needs in design. * Bridging the gap between analysis and design requires close collaboration between the analysis and design teams, clear communication, and a thorough understanding of user needs and requirements throughout the design process. VUX- BCS45 4Needs and requirements What Are “Requirements”? The term refers to a statement of what is needed to design a system that will fulfill user and customer goals. In the UX domain, interaction design requirements describe what is required to support user or customer work activity needs. Functional requirements describe the specific behaviors and functions that a system, product, or service must perform. These requirements define the fundamental capabilities of the system and specify what it should do. Non functional requirements define how the system should behave in terms of performance, security, reliability, usability, and other quality aspects.Formal requirements extraction * Formal requirements extraction refers to the process of systematically analyzing and extracting requirements from various sources using structured methods and techniques. * This process aims to ensure that all relevant requirements are identified, documented, and understood. * Walking the WAAD for Needs and Requirements- The general idea is to traverse the hierarchical WAAD structure and focus on extracting requirement statements from work activity notes. W/UX- 854s >Switching from Inductive to Deductive Reasoning This involves a shift in the way you approach a problem or draw conclusions based on evidence. Inductive Reasoning: It involves making generalizations based on specific observations or evidence. For example, if you observe that all the swans you have seen are white, you might inductively conclude that all swans are white. Deductive Reasoning: Deductive reasoning starts with a general principle and moves to a specific conclusion that must be true if the general principle is true. For example, if you know that all mammals have lungs, and you also know that a whale is a mammal, you can deduce that a whale has lungs. VUX- BCS45Preparation * Select a requirements team, including people you think will be best at deductive reasoning and creativity. * Need both UX and software people, plus possibly system architects and maybe managers. * Choose a requirements team leader and a recorder, a person experienced in writing requirements. + You may need a requirements “record” template in a word processing document, a spreadsheet to capture the requirement statements in design requirements document. * If there is a need for all to see each requirement statement, you can connect the recorder’s computer to a screen projector and show the requirements document on an open part of the wall. W/UX- 854s »Requirement Statements Requirement statements are descriptions of what a system, product, or service must do or the qualities it must have to satisfy stakeholders' needs. The team translates each user need into one or more interaction design requirement statements. Now the recorder writes the requirement statement in the requirements document by first finding the appropriate headings and subheadings. If the necessary headings are not already in the requirements document, now is the time to add them and grow the document structure as the process continues.Requirement Statement Structure * A requirement document is essentially a set of requirement statements organized on headings at two or more levels. Name of major feature or category Name of secondelevel feature or category ; , Requirement statement [WAAD source node ID] smquirement statement. Rationale (if useful): Rationale statement Note (optional): Commentary about this requirement Security Privacy of ticket-buyer transactions Shall protect security and privacy of ticket-buyer transactions [C19] — Note: In design, consi timeout feature to clear sereen between customers,1. Abridged methods for requirements extraction Use the WAAD Directly as a Requirements Representation To save time and cost, the WAAD itself can be taken as a set of implicit requirements, without formally extracting them. On the WAAD you created in contextual analysis, highlight (e.g., using a marker pen) all groups or individual work activity notes that imply requirements and design ideas directly or indirectly. Clear and crisply written work activity notes will help make this step of interpretation easier. VUX- BCS452. Anticipating Needs and Requirements in Contextual Analysis * It involves using observations and insights gathered from studying users in their natural environment to predict future needs and requirements. * This proactive approach is based on understanding users' behaviors, challenges, and goals, and can help in designing solutions that anticipate and address these needs. VUX- BCS453, Use Work Activity Notes as Requirements (Eliminate the WAAD Completely) Using work activity notes as requirements involves directly translating the observations and insights from studying users' work activities into actionable requirements, eliminating the need for a separate Work Activity Affinity Diagram (WAAD). Actionable requirements are specific, clear, and detailed statements that define what a system, product, or service must do or the qualities it must have in order to meet stakeholders’ needs. UX BCS4S 7