Interface Design and UX Complete Notes PDF

10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed INTERFACE DESIGN AND USER EXPERIENCE (CSA-2222) DIPLOMA COURSE Prepared by: Dr. Muhammad Kashif Saeed Course Objectives...

10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed INTERFACE DESIGN AND USER EXPERIENCE (CSA-2222) DIPLOMA COURSE Prepared by: Dr. Muhammad Kashif Saeed Course Objectives Understand the definition, difference, and similarities of user experience and usability and apply these to design, research, and testing practices in field of interaction design for digital interfaces. Apply behavioral economics principles to user-centered design and research. Analyze and evaluate the difference between qualitative and quantitative research methods as they relate to user experience and usability testing for concept validation. Conduct ethnographic research to produce user profiles. Create a functional, interactive prototype. Apply the basics of test design, including user consent, safety, ethics, and privacy concerns. Conduct effective usability and user experience test sessions. Generate usability and user experience assessment report. 1  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Students Assessment Activities: Assessment Percentage of Total No Assessment Activities timing Assessment Score (in week no) 1 Quiz 1 4 5 2 Midterm Exam 1 7 10 3 Practical Assessment 1 to 16 30 4 Midterm Exam 2 12 10 5 Quiz 2 14 5 6 Final Exam After week 16 40 Reference Books: 1) Interaction design : beyond human-computer interaction Sharp, Helen; Rogers, Yvonne; Preece, Jennifer Fifth edition : Indianapolis, IN:Wiley, 2) Don't make me think, revisited : a common sense approach to web usability - Krug, Steve -[3. ed.]: [Berkeley, CA]: New Riders, 2014 Prepared by: Dr. Muhammad Kashif Saeed CHAPTER 1 INTRODUCTION TO ID AND UX 2  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Interactive Devices An interaction device is a mobile or stationary hardware component which enables the interaction between the human user and an application or the environment of the user. How many interactive products are there in everyday use? Think for a minute about what you use in a typical day? Smartphone, tablet, computer, laptop, remote control, coffee machine, ticket machine, printer, GPS, smoothie maker, e-reader, smart TV, alarm clock, etc They are generally easy and enjoyable to use. Prepared by: Dr. Muhammad Kashif Saeed What to design? Who the users are? What activities are being carried out? Where the interaction is taking place? Need to optimize the interactions users have with a product? So that they match the users’ activities and needs 3  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed How to design? Designing interactive products requires considering who is going to be using them. How they are going to be used, and where they are going to be used. Another key concern is to understand the kind of activities people are doing when interacting with these products. It depends on what kinds of activities are to be supported. For example, if the activity is to enable people to bank online, then an interface that is secure, trustworthy, and easy to navigate is essential. An interface that allows the user to find out information about new services offered by the bank. Prepared by: Dr. Muhammad Kashif Saeed Good and Bad Design  What is wrong with the Apex remote?  Why is the TiVo remote so much better designed?  Peanut shaped to fit in hand  Logical layout and color-coded, distinctive buttons  Easy to locate buttons 4  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Bad Design  Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a control button  People do not make same mistake for the labels and buttons on the top row. Why not? Prepared by: Dr. Muhammad Kashif Saeed Interaction Design Interaction design (IxD) is "the practice of designing interactive digital products, environments, systems, and services. Interaction design makes websites and apps interactive. The purpose of interaction design is to transform digital products into those that feel natural and personal. The goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible. There are so many examples of interaction design that we move through without knowing. For example, we scroll through our Instagram feeds and hit the red heart when we want to like a post. 5  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Components of Interaction Design Interaction design is a fundamental to many disciplines, fields, and approaches that are concerned with researching and designing computer-based systems for people Prepared by: Dr. Muhammad Kashif Saeed Human Computer Interaction (HCI) is the study of how people interact with computers, especially as it relates to technology design. It consider how to develop and deploy computer systems that satisfy human users. HCI had a narrow focus on the design and usability of computing systems, while Interaction Design (ID) was seen as being broader, concerned with the theory, research, and practice of designing user experiences for all manner of technologies, systems, and products. 6  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed User Experience (UX) The user experience refers to how a product behaves and is used by people in the real world. The way people feel about it and their pleasure and satisfaction when using it, looking at it, holding it, and opening or closing it. Every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters. UX should be: i) Useful ii) Useable iii) Desirable iv) Findable v) Accessible vi) Credible Prepared by: Dr. Muhammad Kashif Saeed For example, the outside case of a smartphone can be designed to be smooth, silky, and fit in the palm of a hand; when held, touched, looked at, and interacted with, that can provoke a sensual and satisfying user experience. The iPod Phenomenon: Apple’s classic generations of portable music players, called iPods, including the iPod Touch, Nano, and Shuffle, released during the early 2000s were a phenomenal success. Why do you think this occurred? Has there been any other product that has matched this quality of experience? With the exception of the iPod Touch, Apple stopped production of them in 2017. 7  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Apple realized early on that successful interaction design involves creating interactive products that have a quality user experience its simplicity of use, its elegance in style, different colors, use, and the catchy naming of its product and content (iTunes, iPod), among many other design features, led to it becoming one of the greatest products of its kind. Prepared by: Dr. Muhammad Kashif Saeed Usability and User Experience Goals Usability refers to how successfully a user can use a product to achieve a specific goal. User experience includes an end user’s entire experience with a product — not just how well the product worked, but how they expected it to work, how they feel about using it, and how they feel about the company overall. There are Four(4) elements of usability: 1. Value: Is it useful? 2. Usability: Is it easy to use? 3. Adoptability: Is it easy to start using? 4. Desirability: Is it fun and engaging 8  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Usability Goals Usability refers to ensuring that interactive products are easy to learn, effective to use, and enjoyable from the user’s perspective. It involves optimizing the interactions people have with interactive products to enable them to carry out their activities at work, at school, and in their everyday lives. More specifically, usability is broken down into the following six (6) goals: Effective to use (effectiveness) Efficient to use (efficiency) Safe to use (safety) Having good utility (utility) Easy to learn (learnability) Easy to remember how to use (memorability) Prepared by: Dr. Muhammad Kashif Saeed Design Principles Design principles are used by interaction designers to aid their thinking when designing for the user experience A well-known example is feedback: Products should be designed to provide adequate feedback to the users that informs them about what has already been done so that they know what to do next in the interface. Design principles are derived from a mix of theory-based knowledge, experience, and common sense. They tend to be written in a prescriptive manner, suggesting to designers what to provide and what to avoid at the interface A number of design principles have been promoted. The best known are concerned with how to determine what users should see and do when carrying out their tasks using an interactive product. 9  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Design Principles Here are some key principles: 1. Visibility: Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them 2. Feedback:Feedback is the principle of making it clear to the user what action has been taken and what has been accomplished. 3. Constraints: Determining ways of restricting the kinds of user interaction that can take place at a given moment. A common design practice in graphical user interfaces is to deactivate certain menu options by shading them gray, thereby restricting the user only to actions permissible at that stage of the activity Prepared by: Dr. Muhammad Kashif Saeed Design Principles 4. Consistency: Consistency refers to having similar operations and similar elements for achieving similar tasks. consistent interface is one that follows rules, such as using the same operation to select all objects. 5. Affordance: Affordance refers to an attribute of an object that allows people to know how to use it. For example, a mouse button invites pushing (in so doing, activating clicking) by the way it is physically constrained in its plastic shell 10  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Conceptualizing Interaction It is important to have a clear understanding of why and how you are going to design something before you start writing lines of code or finalizing an user interface. When beginning a design project, it is important to be clear about the underlying assumptions and claims. Assumption mean taking something for granted that requires further investigation; for example, people now want an entertainment and navigation system in their cars. Claim mean stating something to be true when it is still open to question. For instance, a multimodal style of interaction for controlling this system—one that involves speaking or gesturing while driving—is perfectly safe. Prepared by: Dr. Muhammad Kashif Saeed Conceptual Models A model is a simplified description of a system or process that helps describe how it works. we look at a particular kind of model used in interaction design intended to articulate the problem and design space is the Conceptual Model. A conceptual model is a high-level description of how a system is organized and operates. It is an abstraction outlining what people can do with a product and what concepts are needed to understand how to interact with it. 11  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Interaction Types Deciding upon which of the interaction types to use, and why, can help designers formulate a conceptual model before committing to a particular interface in which to implement them, such as speech- based, gesture-based, touch-based, menu-based, and so on. 1. Instructing: Users issue instructions to a system. It can be done using typing commands, selecting options from menus, multitouch screen, speaking aloud commands, or pressing buttons, etc 2. Conversing: Here users have a dialog with a system. Users can speak via an interface or type in questions to which the system replies via text or speech output. 3. Manipulating: Where users interact with objects in a virtual or physical space by manipulating them. For example opening, holding, closing, and placing) Prepared by: Dr. Muhammad Kashif Saeed Interaction Types 4. Exploring: Where users move through a virtual environment or a physical space. Virtual environments include 3D worlds and augmented and virtual reality systems. Physical spaces that use sensor-based technologies include smart rooms and ambient environments. 5. Responding: Where the system initiates the interaction and the user chooses whether to respond. For example, proactive mobile location-based technology can alert people to points of interest. They can choose to look at the information popping up on their phone or ignore it. 12  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Cognition The study of human cognition can help us understand the impact of multitasking on human behavior. There are different kinds of cognition, such as thinking, remembering, learning, daydreaming, decision-making, seeing, reading, writing, and talking. A well-known way of differentiating between different modes of cognition is in terms of whether it is experiential or reflective. Experiential cognition is a state of mind where people perceive, act, and react to events around them intuitively and effortlessly. Reflective cognition involves mental effort, attention, judgment, and decision-making, which can lead to new ideas and creativity Prepared by: Dr. Muhammad Kashif Saeed Cognition Cognition has also been described in terms of specific kinds of processes. These include the following: 1. Attention 2. Perception 3. Memory 4. Learning 5. Reading, speaking, and listening 6. Problem-solving, planning, reasoning, and decision-making 13  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed Cognitive Frameworks A number of conceptual frameworks have been developed to explain and predict user behavior based on theories of cognition. These are mental models, gulfs of execution and evaluation, information processing, distributed cognition, external cognition, and embodied interaction. 1. Mental Models: These are used by people when needing to reason about a technology, in particular, to try to understand what to do when something unexpected happens. The more someone learns about a product and how it functions, the more their mental model develops. For example, broadband engineers have a deep mental model of how Wi-Fi networks work that allows them to work out how to set them up and fix them. Prepared by: Dr. Muhammad Kashif Saeed 2. Gulfs of Execution and Evaluation: It describe the gaps that exist between the user and the interface. The gulfs are intended to show how to design the latter to enable the user to cope with them. The first one, the gulf of execution, describes the distance from the user to the physical system while the second one, the gulf of evaluation, is the distance from the physical system to the user. 14  10/1/2023 Prepared by: Dr. Muhammad Kashif Saeed 3. Information Processing: Numerous comparisons have been made, including conceptualizing the mind as a reservoir, a telephone network, a digital computer, and a deep learning network. The information processing model provides a basis from which to make predictions about human performance. Hypotheses can be made about how long someone will take to perceive and respond to a stimulus (also known as reaction time). Prepared by: Dr. Muhammad Kashif Saeed 4. Distributed Cognition: The distributed cognition approach was developed to study the nature of cognitive phenomena across individuals, artifacts, and internal and external representations. For example, when someone goes home from wherever they have been, they do not need to remember the details of the route because they rely on cues in the environment. 5. External Cognition: People interact with or create information by using a variety of external representations, including books, multimedia, newspapers, web pages, maps, diagrams, notes, drawings, and so on. 15  10/1/2023 CHAPTER 2 Designing for collaboration and communication Dr. Vasanthi Muniasamy Dr. Vasanthi Muniasamy 32 Social Mechanism A social mechanism is a causal pattern based on the communicative interactions of people with individual mechanisms of cognition and emotion. Types of Social Mechanism:  Conversational Mechanism  Coordination Mechanism  Awareness Mechanism 16  10/1/2023 Dr. Vasanthi Muniasamy 33 Conversational Mechanism Various mechanisms and rules are followed when holding a conversation, for example Mutual greetings Dr. Vasanthi Muniasamy 34 Conversational Mechanism - Rules Sacks et al, (1978) work on conversational analysis, describe three basic rules:  Rule 1: The current speaker chooses the next speaker by asking a question, inviting an opinion, or making a request.  Rule 2: Another person decides to start speaking.  Rule 3: The current speaker continues talking. 17  10/1/2023 Dr. Vasanthi Muniasamy 35 Conversational Mechanism - Rules The rules are assumed to be applied in this order so that whenever there is an opportunity for a change of speaker to occur, for instance, someone comes to the end of a sentence, rule 1 is applied. If the listener to whom the question or request is addressed does not accept the offer to take the floor, rule 2 is applied, and someone else taking part in the conversation may take up the opportunity and offer a view on the matter. If this does not happen, then rule 3 is applied, and the current speaker continues talking. The rules are cycled through recursively until someone speaks again. Dr. Vasanthi Muniasamy 36 Conversational Mechanism Turn-taking People use various ways to signal whether they want to hand over or take up a turn in the conversation. It is used to coordinate conversation. For example, A may ask a question to which B responds appropriately. Sometimes adjacency pairs get embedded in each other, so it may take some time for a person to get a reply to their initial request or statement. 18  10/1/2023 Dr. Vasanthi Muniasamy 37 Conversational Mechanism Back Channeling to Signal to continue and following Farewell rituals Implicit and Explicit Cues Dr. Vasanthi Muniasamy 38 Conversational Mechanism Breakdowns in conversation It is caused by the misunderstanding between the speaker and the listener. It can be overcome by using repair mechanism. For example - speaker will repeat with emphasis - Also use tokens: when the listener misunderstands what has been communicated, the speaker repeats what they said earlier, using a stronger voice intonation and more exaggerated gestures. 19  10/1/2023 Dr. Vasanthi Muniasamy 39 Kinds of Conversation Formal: It involves assigning certain roles to people and prescribing a priori the types of turns that people are allowed to take in a conversation. For Example: at a board meeting. Informal It involves is the chat that goes on when people socialize. It also happens when people bumps into each other and talk briefly. For Example: coordinating group work, transmitting knowledge about office culture, establishing trust. Dr. Vasanthi Muniasamy 40 Remote Conversation For people who are located in different locations, a key design issue has been to determine how to allow people to carry on communicating as if they were in the same place. For co-located groups of people, a. design challenge has been to design collaborative technologies to help them communicate and work together more effectively, especially when creating and sharing content. Communicating in physically different locations: E-Mail Video Conferencing Chat Rooms Instant Messaging Video Phones VOIP Calls 20  10/1/2023 Dr. Vasanthi Muniasamy 41 Computer – Mediated Communication Synchronous Communication: Communications are supported in real-time through voice and/or typing. Examples: Video Conferencing, VOIP, MUDs and Chat. Benefits:  May increase shy people’s confidence and to fire off quick questions and answer without the time lag of email Problems:  People can behave badly when behind the mask of an avatar. Asynchronous Communication: Communications take place remotely at different times. Examples: E-Mail, Newsgroup, Texting. Benefits:  Read any place any time Problems:  False expectations as to when people will reply Dr. Vasanthi Muniasamy 42 Coordination Mechanism It takes place when a group of people act or interact together to achieve something. It includes  Verbal and non-verbal communication Verbal: Talk, Meeting Memos, Agendas, Minutes Non-Verbal: Nods, Shakes, Wings, glances, gestures, hand – raising. arm and baton movements of an orchestra conductor, and ground marshal at an airport.  Schedules, formal rules, and conversations Schedules: used to organize regular activities in large organizations. Formal rules: like the writing of monthly reports enable the organizations to maintain order and keep track. Conversations: like keeping quiet in library, are a form of courtesy to others.  Shared external representations: It provides information on who is working on what, when and where it is being worked on, when is supposed to be finished and whom to goes to next. Calendars, Forms, Checklists presented on public noticeboards, or other shared spaces, or attached to documents and folders. 21  10/1/2023 Dr. Vasanthi Muniasamy 43 Collaborative Technologies to support Coordination Mechanism There are a variety of software tools designed to support scheduling, planning and coordinating. Example: group calendars, electronic schedulers, project management tools and workflow tools. Need to get balance between human and system control  Too much system control and the users will rebel  Too little control and the system breaks down Dr. Vasanthi Muniasamy 44 Awareness Mechanism It involves knowing who is around, what is happening, and who is taking with whom. Peripheral awareness: referring to a person’s ability to maintain and constantly update a sense of what is going on in the physical and social context, through - keeping an eye on what is happening in the periphery of their vision. - overhearing and overseeing allows tracking of what others are doing without explicit cues. Collaborative Technologies to support Coordination Mechanism: Provides awareness information for people who need to work together. - Monitoring Mechanism: Example: Patholes developed at Xerox PARC Lab – awareness information is available through monitoring other people and being monitored by others. - Notification Mechanism: Example: Tickertape, Babble – people can attend to the information when they want and provide information for whom they want. 22  10/1/2023 Dr. Vasanthi Muniasamy 45 Key Points Social interaction is central to our everyday lives. Social mechanisms have evolved in face-to-face and remote contexts to facilitate conversation, coordination, and awareness. Talk and the way it is managed are integral to coordinating social interaction. Many kinds of technologies have been developed to enable people to communicate remotely with one another. Keeping aware of what others are doing and letting others know what you are doing are important aspects of collaboration and socializing. Social media has brought about significant changes in the way people keep in touch and manage their social lives. CHAPTER 3 understanding How interfaces affect users Dr. Vasanthi Muniasamy 23  10/1/2023 Dr. Vasanthi Muniasamy 47 Introduction Designing technology to detect and recognize someone’s emotions automatically from sensing aspects of their facial expressions, body movements, gestures, and so forth is a growing area of research often called emotional AI or affective computing. Affective computing is concerned with how to use computers to recognize and express emotions in the same way as humans do (Picard, 1998). These can be used to determine if someone is happy, angry, bored, frustrated. Designers use number of features to make an interface expressive. Emojis, sounds, colors, shapes, icons, and virtual agents are used to (1) Create an emotional connection or feeling with the user (for instance, warmth or sadness) (2) Elicit certain kinds of emotional responses in users, such as feeling at ease, comfort, and happiness. Dr. Vasanthi Muniasamy 48 Affective aspects – Annoying Interfaces Interfaces, if designed poorly, can make people sometimes feel insulted, stupid, or threatened. The effect can be to annoy them to the point of losing their temper. There are many situations that cause such negative emotional responses [frustration). These include the following: - When an application doesn’t work properly or crashes, doesn’t do what the user wants it to do, and When a user’s expectations are not met - When a system does not provide sufficient information to let the user know what to do - When error messages pop up that are vague or obtuse - When the appearance of an interface is too noisy, garish, gimmicky, or patronizing 24  10/1/2023 Dr. Vasanthi Muniasamy 49 Affective aspects – Annoying Interfaces - When a system requires users to carry out too many steps to perform a task, only to discover a mistake was made somewhere along the line and they need to start all over again - The overuse or automatic playing of sound effects and music, especially when selecting options, carrying out actions, running tutorials, or watching website demos - Poorly laid-out keyboards, touchpads, control panels, and other input devices that cause users to press the wrong keys or buttons persistently. - Featuritis—an excessive number of operations, such as an array of buttons on remote controls Dr. Vasanthi Muniasamy 50 Affective aspects – Annoying Interfaces Gimmicks Amusing to the designer but not the user, Example Clicking on a link to a website only to discover that it is still “Under Construction” Error Messages: 25  10/1/2023 Dr. Vasanthi Muniasamy 51 Expressive interfaces Provide reassuring feedback that can be both informative and fun Can also be intrusive, however, causing people to become annoyed and even angry Color, icons, sounds, graphical elements, and animations are used to make the ‘look and feel’ of an interface appealing  Conveys an emotional state In turn, this can affect the usability of an interface  People are prepared to put up with certain aspects of an interface (for instance, slow download rate) if the end result is appealing and aesthetic Dr. Vasanthi Muniasamy 52 User Frustration Waiting: Websites that take forever to download can be frustrating. Upgrading Software It is time consuming when Resetting preferences Checking other configurations Learning new ways of doing things Appearance: Websites that are overloaded with text and graphics, making it difficult to locate desired information and resulting in sluggish performance. Flashing animations, especially flashing banner ads and pop-up ads that cover the user view and which require them to click in order to close them. Overuse of sound effects and music Excessive number of operations Childish designs that keep popping up on the screen. 26  10/1/2023 Dr. Vasanthi Muniasamy 53 Dealing with User Frustration Help information should be designed to guide users on what to do next. Signaling at the interface indicating that the help information is available. A cartoon-based agent A help icon or command activated by users is more preferable. Dr. Vasanthi Muniasamy 54 Persuasive Technology Interactive Systems are deliberately designed to change people’s attitudes and behaviors. A diversity of techniques now used to change what they do or think Pop-up ads, warning messages, reminders, prompts, personalized messages, recommendations, or Amazon 1-click Commonly referred to as nudging Nintendo’s Pocket Pikachu - Changing bad habits and improving well being Designed to motivate children into being more physically active on a consistent basis. The owner of the digital pet that “lives” in the device is required to walk, run, or jump. If owner does not exercise the virtual pet becomes unhappy and eventually dies. 27  10/1/2023 Dr. Vasanthi Muniasamy 55 Tracking Devices Mobile apps designed to help people monitor and change their behavior (for instance, fitness, sleeping, or weight) Can compare with online leader boards and charts to show how they have done in relation to their peers and friends. Apps that encourage reflection, which in turn increase well-being and happiness. Dr. Vasanthi Muniasamy 56 Phishing Scam Web used to deceive people into parting with personal details  For example, PayPal, eBay, and “you won the lottery” emails Allows Internet fraudsters to access their bank accounts and draw money from them Many vulnerable people fall for it The art of deception is centuries old but internet allows ever more ingenious ways to trick people 28  10/1/2023 Dr. Vasanthi Muniasamy 57 Anthropomorphism Attributing human-like qualities to inanimate objects (for instance cars or computers) Well known phenomenon in advertising  Dancing butter, drinks, and breakfast cereals Much exploited in human-computer interaction  Make user experience enjoyable and motivating  Make people feel at ease by reducing anxiety Furnishing technologies with personalities can make them enjoyable to interact with Dr. Vasanthi Muniasamy 58 Which message you prefer? 1. As a welcome message: “Hello Chris! Nice to see you again. Welcome back. Now what were we doing last time? Oh yes, Exercise 5. Let’s start again.” “User 24, commence Exercise 5.” 2. Feedback when user gets something wrong: “Now Chris, that’s not right. You can do better than that. Try again.” “Incorrect. Try again.” Is there a difference as to what you prefer depending on type of message? Why? 29  10/1/2023 Dr. Vasanthi Muniasamy 59 Criticisms of Anthropomorphism  Anthropomorphism interfaces are deceptive  They can make people feel anxious, resulting in them feeling inferior or stupid  They can lead people into a false sense of belief, enticing them to confide in agents.  Children are no longer required to use imagination  Very annoying  After realizing that the agent doesn’t possess real human qualities, users become quickly disillusioned and distrust it. Dr. Vasanthi Muniasamy 60 Evidence to support Anthropomorphism Research Study: Positive Reeves and Naas (1996) found that computers that flatter and praise users in educational software programs result in: Positive impact on users “Your question makes an important and useful distinction. Great job!” Students were more willing to continue with exercises with this kind of feedback. Research Study: Negative Sproull et al. found that talking face display made some users feel disconcerted or displeased. 30  10/1/2023 Dr. Vasanthi Muniasamy 61 Microsoft’s Clippy and IKEA’s Anna Clippy was meant to be a helpful desktop agent. But was disliked by so many  annoying, distracting, patronizing Anna appeared as a virtual agent  Blinked, moved her lips and head to suggest facial expressions. Dr. Vasanthi Muniasamy 62 Key Points Emotional aspects of interaction design are concerned with how to facilitate certain states (for example, pleasure) or avoid certain reactions (such as frustration) in user experiences. Well-designed interfaces can elicit good feelings in people. Aesthetically pleasing interfaces can be a pleasure to use. Expressive interfaces can provide reassuring feedback to users as well as be informative and fun. Badly designed interfaces often make people frustrated, annoyed, or angry. Emotional AI and affective computing use AI and sensor technology for detecting people’s emotions by analyzing their facial expressions and conversations. Emotional technologies can be designed to persuade people to change their behaviors or attitudes. Anthropomorphism is the attribution of human qualities to objects. Robots are being used in a variety of settings, including households and assisted-living homes. 31  10/1/2023 Chapter 4 Process of Interaction Design and User Experience Dr. Samreen What is interaction design about? In interaction design, we take a user-centered approach to development. This means that users’ concerns direct the development rather than technical concerns. Design is also about trade-offs, or balancing conflicting requirements.  Generating alternatives is a principle that should be encouraged in interaction design. 32  10/1/2023 4.1.1 Four Basic Activities of Interaction Design 1. Identifying needs and establishing requirements  In order to design something to support people, we must know who our target users are and what kind of support an interactive product could usefully provide. 4.1.1 Four Basic Activities of Interaction Design 2. Developing alternative designs This is the core activity of designing: actually suggesting ideas for meeting the requirements. Conceptual Design Involves producing the conceptual model for the product, and a conceptual model describes what the product should do, behave, and look like. Physical Design Considers the detail of the product including the colors, sounds, images, menu design, and icon design. 33  10/1/2023 4.1.1 Four Basic Activities of Interaction Design 3. Building interactive versions of the designs The most sensible way for users to evaluate designs is to interact with them. This does not mean that a software version is required, but rather, a paper-based prototype is quick and cheap to build. 4.1.1 Four Basic Activities of Interaction Design 4. Evaluating designs Evaluation is the process of determining the usability and acceptability of the design. Evaluation is measured in terms of a variety of criteria including: numbers of errors users make using it how appealing it is how well it matches the requirements 34  10/1/2023 4.1.2 Three Key Characteristics of the Interaction Design Process 1. A User Focus A process cannot guarantee that a development will involve users, it can encourage focus on such issues and provide opportunities for evaluation and user feedback. 4.1.2 Three Key Characteristics of the Interaction Design Process 2. Specific Usability Criteria Specific usability and user experience goals should be identified, clearly documented, and agreed upon and the beginning of the project. They help designers choose between alternative designs and check on progress. 35  10/1/2023 4.1.2 Three Key Characteristics of the Interaction Design Process 3. Iteration Iteration allows designs to be refined based on feedback. Iteration is important useful if you are trying to innovate. Innovation rarely emerges whole and ready to go. It takes time, evolution, trial and error, and patience. 4.2 Practical Issues of the users Three types of users Primary Secondary Tertiary Know stakeholders How to choose alternate design? Designs are external or internal External design Two ways to choose alternate design Test the prototype, let the users choose Choose what has the best “Quality” 36  10/1/2023 4.3 Lifecycle models A simple interaction design mode Identify needs/ establish requirements (Re)Design Evaluate Build an interactive version Final product Chapter 5 Identifying needs and establishing requirements Dr. Samreen 37  10/1/2023 5.1 Introduction: What , How and Why? What: Two aims: 1. Understand as much as possible about the user, task context 2. Produce stable set of requirements How: Data gathering activities Why: Requirement definition: The stage where failure occurs most commonly “Getting requirements right is crucial “ 5.2 Requirements Make it as clear, specific, and unambiguous as possible Abstract Web site should appeal to be attractive Precise Search time for a query is less than 3 seconds Issue an auditory and visual alert when a download fails 38  10/1/2023 5.2 Types of Requirements Functional Data (volatility, size, persistence, accuracy, value) User Usability Environment o Physical o Social o Organizational o Technical 5.3 Data Gathering Techniques  Questionnaires Elicit specific information Needs to be written well Good for large groups of people, spread geographically Often used in conjunction with other techniques  Interviews In-person or phone Structured or Unstructured Good at getting people to explore issues More enjoyable Time consuming Not good for large groups of people  Focus Groups/Workshops Consensus view Highlights conflicts/disagreements Structured or facilitator mediated Strong personalities can dominate discussions 39  10/1/2023 5.3 Data Gathering Techniques  Naturalistic Observation Shadow day to day tasks More accurate, detailed descriptions Vary from outside to participant observation Time consuming Generates large amounts of data  Studying Documentation Background legislation Previous software Which one? Time Experience of analyst Nature of task Other resource availability stakeholders 40  10/1/2023 5.4 Data Interpretation and Analysis Interpretation Goal: to structure and record descriptions of requirements. Start interpretation as soon after the gathering session as possible. Discuss the findings with others. Techniques to understand users’ goals and tasks Scenarios Use Cases Task Description Essential Use Cases Task Analysis 41  10/1/2023 5.5 Task Description Scenario: Informal narrative description of human activities or tasks in a story that allows exploration and discussion of contexts, needs, and requirements. Use cases: Also focus on user goals, but the emphasis here is on a user-system interaction rather than the user’s task itself. Essential use cases: They represent abstractions from scenarios, and consist of: Name to express overall user intention Stepped description of user actions Stepped description of system responsibility Instead of actors, essential use cases are associated with user roles. Prepared by: Dr. Jahangir Khan Chapter 6 Design- Wire Farming, Prototyping and Construction Dr. Jahangir Khan 42  10/1/2023 Prepared by: Dr. Jahangir Khan Introduction- Prototyping and Construction Design, prototyping, and construction fall within the Develop phase of the double diamond of design. The Process of Interaction Design,” in which solutions or concepts are created, prototyped, tested, and iterated. In the early stages of development, the prototypes may be made of paper and cardboard, or ready-made components pulled together to allow evaluation. Prepared by: Dr. Jahangir Khan Wireframe A wireframe is a basic visual interface guide that suggests the structure of an interface and the relationships between its pages. The serve as a blue print the defines each page’s structure, content and functionality. Wireframes are developed from flowcharts and paper prototypes. They are basically more evolved paper prototypes that include detailed information about the interface elements. 43  10/1/2023 Prepared by: Dr. Jahangir Khan What is Prototype? A prototype is one manifestation of a design that allows stakeholders to interact with it and to explore its suitability. A prototype can also be a paper-based outline of a display, a collection of wires and ready-made components, a digital picture, a video simulation, a complex piece of software and hardware, or a three- dimensional mockup of a workstation Prepared by: Dr. Jahangir Khan Why Prototype? Prototypes are useful when discussing or evaluating ideas with stakeholders; they are a communication device among team members and an effective way for designers to explore design ideas. The purpose of a prototype will influence the kind of prototype that is appropriate to build. 44  10/1/2023 Prepared by: Dr. Jahangir Khan Types of Prototyping 1. Low-Fidelity Prototyping A low-fidelity prototype does not look very much like the final product, nor does it provide the same functionality. Low-fidelity prototypes are useful because they tend to be simple, cheap, and quick to produce. This also means that they are simple, cheap, and quick to modify so that they support the exploration of alternative designs and ideas. Prepared by: Dr. Jahangir Khan Type of Prototyping 2. High-Fidelity Prototyping A high-fidelity prototype looks more like the final product and usually provides more functionality than a low-fidelity prototype. High-fidelity prototypes can be developed by modifying and integrating existing components—both hardware and software. 45  10/1/2023 Prepared by: Dr. Jahangir Khan Conceptual Design Conceptual design creates a strategy to transform a concept or idea into visual media. Conceptual design is concerned with developing a conceptual model. Conceptual Model: A conceptual model is an outline of what people can do with a product and which concepts are needed for the user to understand how to interact with it. Prepared by: Dr. Jahangir Khan Developing an Initial Conceptual Model The core components of the conceptual model are metaphor and analogies. Interface Metaphors: An Interface metaphor is a set of user interface visuals, actions and procedures that exploit specific knowledge that users already have of other domains. Interface metaphors combine familiar knowledge with new knowledge in a way that will help users understand the product. 46  10/1/2023 Prepared by: Dr. Jahangir Khan Concrete Design A Concrete Design is a detailed description or specification of the appearance and interactivity of the user interface to an interactive system, including the core object representations and the system behavior at the user interface. Prepared by: Dr. Jahangir Khan Physical Design: getting concrete Considers more concrete, detailed issues of designing the interface. Iteration between physical and conceptual design. Different kinds of widget (dialog boxes, toolbars, icons, menus). Menu design Icon design Screen design Information display 47  10/1/2023 Prepared by: Dr. Jahangir Khan Chapter 7 User-centered approaches to Interaction Design Dr. Jahangir Khan Prepared by: Dr. Jahangir Khan User-centered design (UCD) User-centered design (UCD) is an iterative design process in which designers focus on the users and their needs in each phase of the design process. In UCD, design teams involve users throughout the design process via a variety of research and design techniques, to create highly usable and accessible products for them. 48  10/1/2023 Prepared by: Dr. Jahangir Khan Why is it important to involve users at all? To ensure that development continues to take users into account. Helps developers understand their needs and goals. Two important reasons for involving the user:  Expectation management  Ownership Prepared by: Dr. Jahangir Khan Why is it important to involve users at all? Expectation Management: The process of making sure the users’ views and expectations of the new product are realistic. Ownership: Feeling that users have who are involved with and feel that they have contributed to the product’s development. 49  10/1/2023 Prepared by: Dr. Jahangir Khan What is a user-centered approach? User centered approach means that real users and their goals are the driving force behind development, not technology. Prepared by: Dr. Jahangir Khan What is a user-centered approach? User-centered approach is based on: Early focus on users and tasks: Directly studying cognitive, behavioral, anthropomorphic & attitudinal characteristics Empirical measurement: users’ reactions and performance to scenarios, manuals, simulations & prototypes are observed, recorded and analysed, Iterative design: when problems are found in user testing, fix them and carry out more tests. 50  10/1/2023 Prepared by: Dr. Jahangir Khan Understanding users' work: applying ethnography in design Ethnography is a method that comes originally from anthropology and means “writing the culture”. Aim is to make the implicit explicit. Force you to see and evaluate their everyday situations. Experience rather than a data collection exercise. Prepared by: Dr. Jahangir Khan Ethnographic Framework in Design Distributed Co-ordination Means and mechanisms by which tasks are coordinated among users. Plans and procedures Organizational support and how workflow models are used to support the work. Awareness of work How people keep themselves in touch with others’ work and how information is shared in the workplace. 51  10/1/2023 Prepared by: Dr. Jahangir Khan Coherence Coherence Method: The coherence method combines experiences of using ethnography to inform design with developments in requirements engineering. It is intended to integrate social analysis with object- oriented analysis from software engineering. Prepared by: Dr. Jahangir Khan Contextual Design Contextual Design is a technique that was developed to handle the collection and interpretation of data from fieldwork with the intention of building a software- based product. Provides a structured approach to gathering and representing information from fieldwork such as ethnography, with the purpose of feeding it into design. 52  10/1/2023 Prepared by: Dr. Jahangir Khan Involving users in design: Participatory Design Users are actively involved in development. Users become equal partners in design team. Two influences on this early work:  Desire to be able to communicate about complex systems.  Labor unions pushing for workers to have control over changes in their work. Chapter #8 evaluation and observing users Dr. Seridevi 53  10/1/2023 Contents Evaluation Overview DECIDE Framework Evaluation Paradigms Evaluation Techniques Observing Users 8.1 Introduction to Evaluation What is evaluation?  Evaluation means when we test something to test usability, functionality and acceptability of an interactive system. Evaluation is integral to the design process. It involves collecting and analyzing data about users’ or potential users’ experiences when interacting with a design artifact. Evaluation helps test whether the interface meets the set requirements or not. 54  10/1/2023  Evaluation focuses on both the usability of the system (that is, how easy it is to learn and to use) and on the users’ experiences when interacting with it (for example, how satisfying, enjoyable, or motivating the interaction is).  Evaluation is the key ingredient for a successful design. A central goal of evaluation is to improve the artifact’s design. Goals of Evaluation To assess extent of system functionality To assess effect of interface on user To identify specific problems Why Evaluate? To check that users can use the product and they like it or not. If you don't have user-testing as an integral part of your design process you are going to throw buckets of money down the drain.“ What to Evaluate? Evaluation is a continuous process that examines:  Early ideas for conceptual model  Early prototypes of the new system  Later, more complete prototypes  Interface design, task flow, manuals…. One must know what functionality has to be evaluated. To ensure that designers understand users’ requirements. 55  10/1/2023 When to Evaluate? Evaluation is Continuous process Throughout the project lifecycle…… From the first descriptions, sketches of users needs through to the final product Design proceeds through iterative cycles of ‘design ->evaluate ->redesign’ 8.1.1 An Evaluation framework - DECIDE Framework Determine the goals (What are the high-level goals of Evaluation? , Who wants it and why?) Explore the questions (question helps to guide the evaluation) Choose the suitable evaluation methods (how data is collected, analyzed and presented) Identify the practical issues(how to select users, find evaluators, select equipment, stay on budget and schedule) Decide how to deal with the ethical issues (e.g., use of human subjects, privacy of personal information) Evaluate, analyze, interpret, present data (Reliability, Validity etc.,) 56  10/1/2023 8.1.2 Evaluation paradigms and techniques Four Evaluation Paradigms 1. Quick & Dirty 2. Usability testing 3. Field studies 4. Predictive evaluation Quick & Dirty  Informal  Designers or evaluators meet informally with users - Gather information about product design - Gather suggestions for design improvements  Inexpensive and Not time consuming Usability Testing Formal assessment Measures user Performance on predefined tasks Controlled by evaluator Activities &Performance observed , captured and recorded using software (e.g. HyperCam, Camtasia) or video taped. Field Studies Naturalistic setting - User interacts with system as part of a daily routine - No tasks given by evaluator - Evaluator observes and records activities, or uses software to capture activities Can be qualitative and quantitative Predictive Evaluation Experts place themselves in the users’ shoes to predict usability problems Guided by heuristics (encouraging a person to learn, discover, understand, or solve problems independently) - Quick, inexpensive - Limitations 57  10/1/2023 Evaluation techniques The techniques to perform evaluation can be broadly divided into two categories: Evaluations that require expert analysis Evaluations that require involving user participation Let's look at different methods of evaluation under these two broad categories. 58  10/1/2023 Evaluation through expert analysis A cognitive walkthrough involves the evaluators performing the sequence of actions for each task and evaluating their learnablity and usability from the users‘ perspective. In Heuristic evaluation technique, evaluators critique the interface design, keeping some usability heuristics or principles in mind. A model-based evaluation involves assessing the interface using some models of design specifications. One such model is the GOMS model.(Goals, Operators, Methods, Selection) Previous studies An evaluation can be based on existing studies and experiments regarding specific interface designs. The expert evaluators sometimes make use of these studies to assess the interface. Evaluation through user participation Experimental evaluation: In this technique, controlled experiments are carried out to test specific hypotheses regarding the interface design. Observational techniques involve watching the users and recording their behavior to understand their thought processes while using the interface. Query techniques include asking the user directly about their experience with the interface, such as interviews and questionnaires. Monitoring physiological responses is a way to take physiological measurements of users while they are exposed to the interface and analyze them. 59  10/1/2023 8.2 Observing Users 8.2.1 What and When to Observe Goals & questions determine the paradigms & techniques used and are necessary to help the observers stay focused. Observation is valuable any time during design On developing product, Starting time: helps to understand user’s needs. Ending time: examine to satisfy user’s needs. Observations can be done at all stages of Product development. 120 8.2.2 Approaches to Observation - “Quick & dirty” observations - watching and talking to users in casual way to get immediate feedback. - Observation in usability testing - video and interacting logs capture everything. - Observation in field studies – observers may be anywhere along the outsider – insider spectrum Observers can be - Outsiders looking on - Participants, i.e., Participant observers - Ethnographers 60  10/1/2023 How to observe Basic Data collection tools: direct observation ,taking notes, collecting videos etc. Laboratory- what individuals do? Field – in what context they do it , how they interact with other people, technology etc., 122 8.2.3 Data Collection Techniques Notes and Still Camera Audio recording plus Still Camera Video Indirect Observation – Tracking users: - diaries - interaction logging Retrospective Observation (a purely observational review and/or a reassessment of database records to analyze events of interest that have already happened) Can be used individually or in conjunction. Which to use - decide based on context, time available and subject sensitivity. 61  10/1/2023 123 Analysis, Interpreting and presenting the data Studies generate large amounts of data So, it is important to first identify goals and questions based on these determine which data is collected and how it is analyzed. For analysis: eyeball data to see what stands out Are there patterns or significant events? Is there evidence that answers a question or supports a theory? Analysis according to goals and questions 8.2.4 Data Analysis categories Qualitative data which is interpreted - used to tell the ‘story’ about what was observed. Qualitative data which is categorized - using techniques such as content analysis. Quantitative data - Collected from interaction & video logs. Presented as values, tables, charts, graphs and treated statistically. 62  10/1/2023 125 8. 2.5 Feeding the findings back into design How to convey evaluation results to design team: Well written report with overview at beginning and detailed content list Include anecdotes, quotations, pictures, and video clips Quantitative data may be helpful depending on type of study and goals Verbal presentation including video clips is very powerful Having both qualitative and quantitative analysis is good - provided different perspectives. CHAPTER 9 TESTING AND MODELING USERS TA.Randa Salem Al-shehri 63  10/1/2023 Introduction to User testing User testing is applied experimentation in which developers check that the system being developed is usable by the intended user population for their tasks. User testing Goals & questions focus on how well users perform tasks with the product Comparison of products or prototypes common Major part of usability testing Focus is on time to complete task & number & type of errors Informed by video & interaction logging User satisfaction questionnaires provide data about users’ opinions 64  10/1/2023 User testing To go through the proper user testing process you need to do the following: Create a prototype Come up with a test plan Recruit people (target users) Find a suitable location Moderate the test Document the test result Testing conditions Usability lab or other controlled space Major emphasis on - selecting representative users - developing representative tasks 5-10 users typically selected Tasks usually last no more than 30 minutes The test conditions should be the same for every participant Informed consent form explains ethical issues 65  10/1/2023 How many participants is enough for user testing The number is largely a practical issue Depends on: - schedule for testing - availability of participants - cost of running tests Typical 5-10 participants Some experts argue that testing should continue until no new insights are gained What is experimentation? 66  10/1/2023 Experiments Predict the relationship between two or more variables Independent variable is manipulated by the researcher Dependent variable depends on the independent variable Typical experimental designs have one or two independent variable Experimental designs Different participants - single group of participants is allocated randomly to the experimental conditions Same participants - all participants appear in both conditions Matched participants - participants are matched in pairs, e.g., based on expertise, gender 67  10/1/2023 Predictive models Provide a way of evaluating products or designs without directly involving users Psychological models of users are used to test designs Less expensive than user testing Usefulness limited to systems with predictable tasks - e.g., telephone answering systems, mobiles, etc. Based on expert behavior CHAPTER 10 DESIGN AND EVALUATION IN THE REAL WORLD : COMMUNICATORS AND ADVISORY SYSTEMS 68  10/1/2023 Introduction Text books make design and usability testing processes sound straightforward and step–by–step. This is never the case in real world applications. It is only when you become involved in the actual design project that the pressure, trade-offs and demands influence the way the design project is carried out. In the real world, design and evaluation are very closely integrated. You don’t do one without the other. Key Concepts Show how design and evaluation are brought together in development of interactive products. Show how different combinations of design and evaluation methods are used in practice. Describe the various design trade-offs and decisions made in the real-world situations. 69  10/1/2023 Key Issues The number of iterations through the design - evaluate cycle depend on the requirements of the project. Many practical issues and unexpected events must be dealt with by the design team. No two projects are ever exactly the same; each will face a different set of constraints, demands and crises. Case Study : Designing Mobile Communicators Nokia Communicator for adults Philips Communicator for children 70  10/1/2023 Background Mobile communicators are devices that commonly push the limits of technology. They combine many functions in to one small device, those functions are - send & receive telephone calls, email, faxes & other messages. - Keep contact info, journal entries, calendars & other notes - Watch stock and other finance reports. Other considerations: Device should be small and lightweight - made of light materials - small enough to fit in pocket or small bag - software must work with limited screen size and memory What will user be doing while using the device? * Device should work in all conditions - various noise levels - various lightings Device should take little effort to operate so user can concentrate on other things at the same time Hands free mode? 71  10/1/2023 Other considerations…. Simple operations should be one-handed - Answer call - Browse internet Device should account for distractions that may occur - Interaction sequences should be easy to return to and continue after interruption - Internet trade off: How long should the device remain connected? Tasks tend to be time-critical, triggered by other people or events, relatively brief, low in terms of attention to be applied to the task , and very personal - Flow among tasks should be smooth - Easy flow between related functions such as contact list and telephone function Must be simple and not involve much training Needs to be robust and reliable. Designing Nokia’s Mobile Communicator What kind of life cycle? - Iterative user- centered approach - Top level design concept cycle. Which methods to use? - Ethnographic research - Scenarios and task models Confidential product issues: - First in the market is key - Evaluation must be very limited - No real users 72  10/1/2023 Designing Nokia’s Mobile Communicator… Physical aspects: - Screen size - Number of buttons versus functionality - soft keys with changing functions or values - Hard coded keys that always return same value Consistency issues - Internal consistency (within mobile software) - External consistency (with desktop software) User Testing - None before release (confidentiality) - Summative testing & questionnaires Designing Philips’ Communicator for Children Design cycle: - Iterative and evolutionary Which methods: - low-fidelity prototyping - participatory design - interface metaphors Physical aspects: - color, shape, size, robustness, pen input, bags to protect screen 73  10/1/2023 Designing Philips’ Communicator for Children User involvement: - children involved throughout - prototypes evaluated constantly - invaluable insights for the designers Lessons learned: - agree on assumptions in requirements - think of follow-on projects early on - users are not designers - act quick and dirty if necessary Why was using different methods valuable? The evaluators were able to build-up a broad picture of usability problems. Using GOMS and heuristic evaluation they could explore the potential benefits of the redesigned system. User testing enabled them to confirm that the redesigned system offered better usability. User satisfaction questionnaires confirmed that users preferred the redesigned system. 74