Lecture 1-AM.pdf.pdf

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: Interact...

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”.  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  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  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 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  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  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  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 android OS or 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  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)  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  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?  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 Patronizing Making one feel guilty Making one feel stupid Annoying Cutesy 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  Visibility What is it ? An essential part of a good human-computer interaction design is visibility, i.e. it should be obvious what a control is for and 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! 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?  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) 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?  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: it 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.  Consistency and standardization goals Ensuring consistency and standardization in the functionality of elements entails maintaining the same function for each UI element throughout the interface. For example, buttons, menus, message windows, and scroll bars should consistently perform the expected function as users navigate their experience and journey‫ـ‬ For example, always use Ctrl key plus first initial of the command for an operation: Ctrl+c, Ctrl+s, Ctrl+o  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 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  Affordances: to give a clue According to Norman (1988) an affordance is the design aspect of an object which suggest how the object should be used; a visual clue to its function and use. For example: - when you see a door handle, it is a prompt you can use it to open the door - A mouse button invites pushing, a door handle affords pulling  Activity Virtual affordances How do these screen objects afford? What if you were a novice user? Would you know what to do with them?  Key points Interaction design is concerned with designing interactive products to support how people communicate and interact in their everyday and working lives It is concerned with how to create quality user experiences for services, devices, and interactive products It is multidisciplinary, involving many inputs from wide-reaching disciplines and fields Optimizing the interaction between users and interactive products requires consideration of a number of interdependent factors, including the context of use, types of activity, UX goals, accessibility, cultural differences, and user groups. Design principles, such as feedback and simplicity, are useful heuristics for informing, analyzing, and evaluating aspects of an interactive product.