Human-Computer Interaction CSCE 242 Lecture 1 PDF

17/02/2024 Human-Computer Interaction CSCE 242 Lecture 1 What is Interaction Design Instructor : Dr. Rejab Hajlaoui...

17/02/2024 Human-Computer Interaction CSCE 242 Lecture 1 What is Interaction Design Instructor : Dr. Rejab Hajlaoui Department of Information and Computer Science 2023-2024 ID definitions Definition1: Interaction Design is the creation of a dialogue between a person and a product, system, or service. This dialogue is both physical and emotional in nature and is manifested in the interplay between form, function, and technology as experienced over time. Definition2: Interaction Design is a way of designing products and services so that they are the most pleasant for individuals to use. It is concretely a discipline at the crossroads of UI (user interface) and UX (user experience). This discipline has the “objective of creating products that allow the user to achieve their objective(s) in the best possible way”. 1  17/02/2024 Goals of interaction design The goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible. Develop usable products Usability means easy to learn, effective to use, and provides an enjoyable experience Involve users in the design process What to design ? Need to take into account:  Who the users are ?  What activities are being carried out ?  Where interaction is taking place ? Need to optimize the interactions users have with a product: So that they match the users’ activities and needs 2  17/02/2024 Good and bad design GOOD DESIGN is inclusive and accessible to all viewers, regardless of their abilities. It uses appropriate contrast, font sizes, and images to ensure that everyone can understand the information. BAD DESIGN can be exclusionary, making it difficult or impossible for certain viewers to access the information. Good and bad design The Bad: Parking Signs The Good: Parking Signs 3  17/02/2024 Good and bad design Why is the TiVo remote much better designed than standard remote controls? Peanut shaped to fit in the hand Logical layout and color-coded, distinctive buttons Easy-to-locate buttons 4  17/02/2024 Interaction Design (ID) Relationship between ID, HCI, and other fields−academic disciplines Academic disciplines contributing to ID: Psychology Social Sciences Computing Sciences Engineering Ergonomics Informatics 5  17/02/2024 Relationship between ID, HCI and other fields−design practices Design practices contributing to ID: Graphic design Product design Artist-design Industrial design Film industry Relationship between ID, HCI and other fields−interdisciplinary fields Interdisciplinary fields that ‘do’ interaction design: Ubiquitous Computing Human Factors Cognitive Engineering Cognitive Ergonomics Computer Supported Co-operative Work Information Systems 6  17/02/2024 Core characteristics of interaction design Users should be involved throughout the development of the project Specific usability and user experience goals need to be identified, clearly documented, and agreed to at the beginning of the project Iteration is needed through the core activities Why? Help designers: Understand how to design interactive products that fit with what people want, need, and may desire Appreciate that one size does not fit all (for example, teenagers are very different to grown-ups) Identify any incorrect assumptions they may have about particular user groups. (for example, not all old people want or need big fonts) Be aware of both people’s sensitivities and their capabilities 7  17/02/2024 Accessibility and inclusiveness Accessibility: the extent to which an interactive product is accessible by as many people as possible Focus is on people with disabilities; for instance, those using apple voiceover Inclusiveness: making products and services that accommodate the widest possible number of people For example, smartphones designed for all and made available to everyone regardless of their disability, education, age, or income Disabilities Whether someone is disabled changes over time with age, or recovery from an accident The severity and impact of an impairment can vary over the course of a day or in different environmental conditions Disabilities can result because technologies are designed to necessitate a certain type of interaction that is impossible for someone with an impairment 8  17/02/2024 Understanding disability Disabilities can be classified as: Sensory impairment (such as loss of vision or hearing) Physical impairment (having loss of functions to one or more parts of the body after a stroke or spinal cord injury) Cognitive (including learning impairment or loss of memory/cognitive function due to old age) Each type can be further defined in terms of capability: For example, someone might have only peripheral vision, be color blind, or have no light perception Understanding disability Impairment can be categorized as: 1. Permanent (for instance, long-term wheelchair user) 2. Temporary (that is, after an accident or illness) 3. Situational (for example, a noisy environment means that a person can’t hear) 9  17/02/2024 Cultural differences 5/21/2015 versus 21/5/2015? Which should be used for international services and online forms? Why is it that certain products, like smartphones, are universally accepted by people from all parts of the world, whereas people from different cultures react to websites differently? Usability goals Effective to use Safe to use Have good utility Easy to learn Easy to remember how to use 10  17/02/2024 Usability and user experience 1. What is user experience design in HCI? Human-Computer Interaction (HCI) and User Experience (UX) Design are two fields that focus on creating effective and intuitive digital interactions between humans and computers. HCI focuses on the design of computer systems and their interfaces, while UX Design focuses on creating positive user experiences. Usability and user experience 2. The relationship between Usability and UX Selecting terms to convey a person’s feelings, emotions, and so forth can help designers understand the multifaceted nature of the user experience How do usability goals differ from user experience goals? Are there trade-offs between the two kinds of goals? (for example, can a product be both fun and safe?) How easy is it to measure usability versus user experience goals? 11  17/02/2024 User experience goals Desirable aspects Satisfying Helpful Fun Enjoyable Motivating Provocative Engaging Challenging Surprising Pleasurable Enhancing sociability Rewarding Exciting Supporting creativity Emotionally fulfilling Entertaining Cognitively stimulating Experiencing flow Undesirable aspects Boring Unpleasant Frustrating Making one feel guilty Making one feel stupid Annoying Childish Gimmicky Design principles Generalizable abstractions that can be used in different aspects of design The do’s and don'ts of interaction design What to provide and what not to provide at the interface Derived from a mix of theory-based knowledge, experience, and common-sense 12  17/02/2024 Visibility What is it ? An essential part of a good human-computer interaction design is visibility. The purpose of the control must be clear.. It should be made clear what users have to do next. For this principle, the created UI should be easy to follow and all the UI elements are visible to the users. In other words, the more visible a function is, the more the users will notice and use it Visibility - poor interface This is a control panel for an elevator How does it work? Push a button for the floor you want? Nothing happens. Push any other button? Still nothing. What do you need to do? It is not visible as to what to do! 13  17/02/2024 Visibility - Improving on a poor interface With this elevator, you need to insert your room card in the slot by the buttons to get the elevator to work! How would you make this action more visible? Make the card reader more obvious Provide an auditory message that says what to do (which language?) Provide a big label next to the card reader that flashes when someone enters Make relevant parts visible Make what has to be done obvious Example 2: Problem of visibility Automatic faucets Invisible automatic controls can make it more difficult to use. What do I do if I am wearing black? 14  17/02/2024 Feedback (how to enhance visibility) Sending information back to the user about what has been done Includes sound, highlighting, animation, and combinations of these For example, when screen button is clicked, it provides sound or red highlight feedback: “ccclichhk” Constraints (how to enhance visibility) By adding some constarints, we can: Restrict some actions that shouldn't be performed Prevent user from selecting incorrect options Physical objects can be designed to constrain things. (for example, there being only one way you can insert a key into a lock) 15  17/02/2024 Example of Constraints Logical or ambiguous design? Where do you plug the mouse? Where do you plug the keyboard, in the top or bottom connector? Do the color-coded icons help? 16  17/02/2024 How to design them more logically (A) provides direct adjacent mapping between icon and connector (B) provides color coding that associates the connectors with the labels Consistency and standardization 1. Consistency: (Non-contradiction) it is one among 5 of Learnability Principles. It helps in understanding an interactive system initially by novice and then to attain the maximum level of performance. 2. Standards: for interactive system design are usually set by national or international bodies to ensure compliance with a set of design rules by a large community. For example, always use Ctrl key plus first initial of the command for an operation: Ctrl+c, Ctrl+s, Ctrl+o 17  17/02/2024 When consistency breaks down What happens if there is more than one command starting with the same letter? (for example, save, spelling, select, style) You have to find other initials or combinations of keys, thereby breaking the consistency rule (for example, Ctrl+s, Ctrl+Sp, Ctrl+shift+l) Increases learning burden on user, making them more prone to errors Internal and external consistency Internal consistency is the consistency between different parts of an interface; External consistency is consistency with other applications on the same platform, or with standards out in the world. When considering how to lay out an application, you must address internal consistency— how the layout applies to all screens and widgets—as well as external consistency—how the layout of related or similar applications sets expectations for this one 18  17/02/2024 Internal and external consistency Keypad numbers layout A case of external inconsistency (a) phones, remote controls (b) calculators, computer keypads 1 2 3 7 8 9 4 5 6 4 5 6 7 8 9 1 2 3 0 0 19  17/02/2024 Affordances: to give a clue They are cues that give a hint of how users may interact with something, no matter physical or digital. For example, when you see a door handle, it is a prompt you can use it to open the door. Activity Virtual affordances How do these screen objects afford? What if you were a novice user? Would you know what to do with them? 20 17/02/2024 21