HCI Complete.pdf

CSC 531: HUMAN COMPUTER INTERACTION Aderonke Busayo Sakpere Department of Computer Science, University of Ibadan.  Today Welcome Course Info Course Objective Assessment Course Overview Today’s Lecture Welcome  Learning Objectives Course Objecti...

CSC 531: HUMAN COMPUTER INTERACTION Aderonke Busayo Sakpere Department of Computer Science, University of Ibadan.  Today Welcome Course Info Course Objective Assessment Course Overview Today’s Lecture Welcome  Learning Objectives Course Objectives: o Understand what human-computer interaction is o Develop user research skills o Develop design skills o Learn how to create design artifacts: prototypes o Think critically about design solutions o Learn how to do user testing  Important Notes Notes: o This is a course about process o It is not an implementation course o Its not about “good interfaces” o Participation is a critical component of the class o Its going to be an interactive class o Every voice counts o Every idea is valuable  Website https://sites.google.com/view/sakpere- aderonke-busayo o Send a quick chat or email to § [email protected]  Major Rules Stay at the pace of the class for contribution/class discussion, assignments, class exercise Respect other people’s opinion o Don’t pass rude comments o Every voice counts o Helpful Criticism o Show up on time o Peer support learning  Note (Further Rules) Rowdiness negatively impair learning. As a result, decorum is expected. o Mute your mic once admitted into class (for virtual participation) o Raise your hand if there is need to contribute o Speak audibly for everyone to hear you Lateness to class negatively affects learning o Class will start after 5 -10 minutes wait Plagiarism is a crime o Anyone caught will be penalized  Course Group/Project Group project is an integral part of this course. Will form the major part of the continous assessment (20-30 marks) So, lets talk: o You form groups yourself? Group members will o submit the same report Opting in/out of group won’t be permitted o The decision lasts for the whole course  Project Policies Collaboration (with group members) o Okay § Discussing generally on the problem/assignment § Solving it together and providing a uniform solution o Not okay § Copying solution (from another group/previous year/ internet) § Leaving the solution to only a member of the group o Provide names of all group members on submission and their contribution. Grading would be majorly based on individual’s contribution. Extensions o Submissions will be in phases and must be truned in before deadline  What will help you to thrive in this class People Skills: deep interest in people (their need, desires, how those needs evolve over time) Analytical Skill Critical Skills Empathy Cognitive skills: Creativity, curiosity, sense of humor, integrity Ability to break down complex task Good Communication Skills Logical Skills  Pedagogies Flipped Classroom Model: You will have to read a pre-lecture material or watch a short video before class. Class would then focus more on discussion and solving problems. Project-Based Learning: Work together with some of your colleagues on an intersting project of your choice.  Assessment Project - form major part of the assesment (maybe 30 - 40 marks) Assignments - may likely be incorporated into the project or not require major submission Test: Would have the least score - 5 or 10 marks In-class quiz (would be impromptu) - 5 marks Class discussion: bonus for those who are active in class and may need to be upgraded in future (maximum of 5 -10 marks) Examination - 50 marks  Course Outline HCI & Interaction Design Cognitive Psychology Interaction & Interfaces Design Guides Data Gathering Data Analysis Prototypes Evaluation Usability Testing Course Material and Textbooks Jenny Preece, Helen Sharp, Yvonne Rogers, Interaction Desigh: Beyond Human Computer Interaction, 5th Edition. Human-Computer Interaction 3rd Edition by Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale  Over to you… Lets discuss: o What is your understanding of HCI o Why HCI? o What is your career plans/goals and how could HCI help you?)  Today… Interactive Systems Introduction to HCI Evolution of HCI Fields Connected to HCI Why HCI? Bad Designs  Poll 0 What does HCI stand for? A. Human Computer Interface B. Human Computer Interaction C. Human Computer Implementation D. Human Computer Industry  Interactive Systems Which of the following would you classify as one? Microwave Smart Phone Electric Tooth Brush Laptop World Wide Web Remote Control Desktop  Interactive Systems The Past The Present The Future  Interactive Systems: The Past In the early days of computing (before 1980), interactive design/system wasn’t really common. Much attention wasn’t paid to users' interaction/engagement. Use of punched cards and long wait  Interactive System: The Present User is in control User and system exchange information frequently and dynamically Doing rather than thinking User carries out some actions (input, press button, use sound etc) Good interactive system: o User can easily figure out how to use/operate the system o User can easily evaluate the output/result of his action on the system Interactive System: The Present  Interactive System: The Future Don’t look too far. Its gradually creeping in. Interactive System: Past, Present & Future Lessons from Evolution of HCI  Good and Poor Design The core of interaction design is to come up with a usable product We learn to identify usable products by: o comparing a good and poorly designed products o Identify strengths and weaknesses of existing products  Good and Poor Design First, let's not look far What’s our opinion on the designs below?  Good and Poor Design Your thoughts?  Class Activity 1: Good and Poor Design What is the difference? o Which is good? o Which is poor? o Rationale behind your answer?  Class Activity 2 This is a student ID Card. Study it closely and identify design flaws. Then propose a new solution/redesign it.  Human Computer Interaction ACM Definition:  Human Computer Interaction Study of how people interact with computers 3 entities: the user, the computer & interaction User: could be an individual or group of people o Factors that influence users: sensory system, mental models, cultural/national differences Computer: technology o Ranges from PC to large scale systems to mobile devices to smart systems etc. Also includes applications - websites Interaction: sometimes referred to as interface o point of interaction between 2 elements (human, computer)  Class Activity 3 Identify some of the cultural factors that affect technology adoption in Africa.  Class Discussion 3 (Response) Digital Inclusion: Most applications are in English (about 30% speak English in Nigeria) Cultural beliefs: some believe use of computer might erode cultural belief o (immersive technology percieved as diabolical, myths about 4G) Behavioral Pattern: people behave differently. Need to understand the people you’re building for. The people must be able to identify with the tech/app o e.g. having western world pictures as opposed to African representation – Pico play/octo play example  Usability Usability is key. The goal of HCI is to produce usable and safe systems A usable system is: o easy to learn o easy to remember how to use o effective to use o efficient to use o safe to use o enjoyable to use  Usability Goals Effectiveness: ability of the system to do what it is supposed to do Efficiency: are the steps required unnecessarily long? Do users have to repeat same set of steps at every usage? (concept of cache or auto-save could help here) Learnability: people want a system they can use without necessarily spending a long time to learn how to use it  Usability Goals Memorability: is the usage of the system easy to remember especially in cases of infrequent use? Do users have to wonder what input format is required? To reduce the memory load of the user: o Describe required input format, show examples of valid input, provide default inputs Example: Example 2:  Usability Goals Safety: which is safe/unsafe?  Goals of HCI Its to produce a usable and safe system. To achieve this, designers/developers must: o Understand factors that determine how people use technology o Develop tools and techniques to enable building suitable systems o Achieve efficient, effective and safe interaction o Put people first Putting people first is key – needs, capabilities and requirements. System should be designed to match their requirements and not the other way round.  Human Computer Interaction UI/UX Design o Design of user interface o UI is about the interface o UX is about the experience o Create a mock-up system o Prototype tools: figma, adobe  Why is HCI important? The norm most of the time: Is that really bad?  User Experience You can’t design a user experience, you rather design for a user experience o Design of a cell/hand phone: § Big/Heavy: Could give a poor experience § Fit in to Hand/Slim: A satisfying user experience UX Goals  Class Discussion 4 There are more desirable than undesirable aspects of the user experience listed in Table 1.1. Why do you think this is so? Should you consider all of these when designing a product?  Class Discussion 5 What do you think about ipods? Why is it a phenomenal success? HCI Related Roles HCI Related Roles UX Research UX Research UX Research UI/UX Design UI/UX Design UI/UX Design  Class Discussion 6 Do you think there is/are difference(s) between HCI and UX? HCI Vs UX  Disciplines Contributing to HCI Psychology Sociology Information Systems Product Design Computer Science Relationship between Interaction Design/HCI and other fields Evolution of HCI Class Discussion 7  Out of class Activity Visit http://www.baddesigns.com/examples.html to see various samples of bad designs  Read Up Dark Patterns (see http://darkpatterns.org/)  Design Principles They aid designers to think about how to meet users experience. Design principles are derived from a mix of theory- based knowledge, experience, and common sense. Some examples: o Feedback: its good to provide adequate feedback on an action completed and what next to do o Constraints: an option can be deactivated if not necessary for an ongoing transaction o Visibility o Consistency o Affordance  Class Dicussion 8 One of the main design principles for website design is simplicity. Jakob Nielsen (1999) proposed that designers go through all of their design elements and remove them one by one. If a design works just as well without an element, then remove it. Do you think this is a good design principle?  Interaction Design What is involved in Interaction Design? It is a process: a goal-directed problem solving activity informed by intended use, target domain, materials, cost, and feasibility a creative activity a decision-making activity to balance trade-offs Some approaches: user-centered design, activity-centered design, systems design, and genius design  Activities in Interaction Design Four basic activities in Interaction Design 1. Establishing requirements 2. Designing alternatives 3. Prototyping 4. Evaluating Design Thinking  Assignment 1 Over the next week, keep a log of all the times you use an interactive computer system. For each encounter record: o The goal you were trying to achieve. o How easy the interactive system was to use as you attempted to complete your tasks. o Any problems or frustrations you had with the system. o Any improvements you would suggest to the system. o  Assignment 2 Interactive system designers need to know their users if they are to build effective systems. User-centred design, then, involves really understanding the capabilities, limitations, needs and wishes of your user group. Standard cash machines (ATMs) are designed for ‘standard’ users with no physical or mental impairments. Imagine you are designing an ATM for Sue. Sue is 75 years old. List out the possible physical and mental characteristics that Sue might have and that are relevant to the design of an ATM. How would you design an ATM to better suit Sue?  Assignment 3 What is the difference between HCI and Sofware Engineering?  Project Read about SDG. o Think of a project or system you can design to address any SDG but must be applicable to Nigeria/Africa and contain/address local content/solution. Work in a team/group of 3 o Develop 2 slides to share your project idea o Your slide should discuss what the problem is and opportunity you are interested in addressing and for who. o Try not to come up with solutions yet. Rather, try to focus on who your users are, and what is the problem at hand. Try to keep it under 2 minutes. Add your pitch to the slides along with your name Past Sample Projects Closing… Ask me something! Finally..... More Resources  HUMAN COMPUTER INTERACTION Lecture 2 Sakpere Aderonke Busayo Department of Computer Science, University of Ibadan.  Today Recap of last lecture A peep into the assignment solution Understanding the problem space Conceptualizing the problem Interaction Metaphor Pilot Studies  Recap of Last Lecture Anyone? o What was the take home for you? o What struck you most? o In what way did it change your perspective about HCI? o What awareness did it create in you? o What new thing did you learn?  Assignment 1 Over the next week, keep a log of all the times you use an interactive computer system. For each encounter record: o The goal you were trying to achieve. o How easy the interactive system was to use as you attempted to complete your tasks. o Any problems or frustrations you had with the system. o Any improvements you would suggest to the system. o  Assignment 2 Interactive system designers need to know their users if they are to build effective systems. User-centred design, then, involves really understanding the capabilities, limitations, needs and wishes of your user group. Standard cash machines (ATMs) are designed for ‘standard’ users with no physical or mental impairments. Imagine you are designing an ATM for Sue. Sue is 75 years old. List out the possible physical and mental characteristics that Sue might have and that are relevant to the design of an ATM. How would you design an ATM to better suit Sue?  Assignment 2 The possible physical characteristics that Sue might have which are relevant to the design of an ATM are: o Unable to see the buttons and the fonts very well that is vision impairment. o Weakness which may result to as inability to press the ATM buttons. o Unable to hear clearly that is hearing impairment. o Paralysis or weakness in the legs which can result to inability to stand or to stand for long. The possible mental characteristic that Sue might have which are relevant to the design of an ATM is: o Deterioration in memory, thinking, behavior and the ability to perform everyday activities (that is dementia) which can result to unable to remember the Pin and/or amount to withdraw. To design an ATM to better suit Sue, consider the below: o The ATM has to have large screen with big font size and button for Sue to be able to see the characters on the screen and buttons very well. o Instead of validation through PIN, other means can be used like eye-based and/or fingerprint-based. o Implementation of speech recognition/assistance like asking questions like “what do you want to do” and taking replies through the speech like “I want to check my balance”. Course Material and Textbooks Human-Computer Interaction 3rd Edition by Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale  Quiz Where should development of an application begin from? o Coding o Architectural Design o Sketch of the interface o All of the above o None of the above  Understanding the Problem Space Its often tempting to start the design of an interactive product from the design of its interface. Starting with interface design often neglect/overlook usability issues and user experience.  So lets brainstorm Imagine you have been asked to design an application to enable people to share their photos, movies, music, chats, documents, and so on in an efficient, safe, and enjoyable way. What would you do? How would you start? Understanding the Problem  Understanding the Problem: Real Life Example In 2018, we were set to solve the problem of crime in Havana community of Namibia after Mr Onus, a community leader briefed us about the crime problem in the community. We’re all techy people and thought we could develop a crime reporting application  Understanding the Problem Then we visited the Havanna community to better understand the problem  Understanding the Problem Then we tried to analyse the responses of Havanna Dwellers  Understanding the Problem Then we went back to the community at another time and further engaged them Using the concept of ranking, we asked them to rate the severity of various issues centered around crime in the community  Understanding the Problem Then our problem space changed/was refined and we began to think… How might we: o get school dropouts back to school o alleviate alchol abuse o eliminate hideouts o get unemployed offenders ivolved in projects o prevent/reduce the use of knives and guns from the offenders Understanding the Problem  Understanding the Problem Dot Voting Technique How to Play: o A list of items that needs to be decided on o Users/group members to place a dot on items they feel strongly about o Participants could be given multiple votes (3-5) o Participants can use all votes on 1 item  Understanding the Problem Dot voting technique applied to narrow down the problem to solve/solution to focus on in Havanna community. Community members and research team took part in the voting.  Understanding the Problem Three ideas emerged top: o Drones/Camera/Crime Reporting System: Capability to predict and arrest crime before it occurs o Mentorship: The community members believe that a good mentorship system would help to reduce number of offenders o Business Competitions: More like talent hunts and opportunity to connect young youths to global leading figures that would keep idle minds and people without jobs busy  Understanding the Problem The following questions can help you probe into the problem space: o Are there problems with an existing product or user experience? If so, what are they? o Why do you think there are problems? o How do you think your proposed design ideas might overcome these? o If you have not identified any problems and instead are designing for a new user experience, how do you think your proposed design ideas support, change, or extend current ways of doing things?  Importance of Understanding the Problem Space Gives a clear understanding of why and how you are going to design something Can save enormous amounts of time, effort, and money later on in the design process. Ill-thought-out ideas, and incompatible and unusable designs can be refined while it is relatively easy to do so. Help to understand such preliminary thinking through of ideas about the user experience and what kinds of designs might be appropriate.  Understanding the Problem In a nut shell, understanding the problem = Understanding users  Some lessons from Havanna Experience Understanding the problem gave us a proper context Understanding the problem could re-direct solution Involving the users in understanding the problem paves way for an acceptable solution  Levels of Engagement with Users To fully understand the crime problem in Havanna, we had different 3 levels or iterations of interaction or visit with the community: o Community Leader: Told us about the problem space § Here we understood the plight of the community but no deep understanding of users experience (we used unguided conversation/interview) Time Duration: 1 - 2hours o Community (10 of them): Citizens (adults,children), Police Officers/Police Station, Community Leader § Provided a greater level of users experience from various angles/user levels. Howbeit at superficial level (we had a structured guide for the interview) : 3 to 4 hours o Selected members of the Community (3/4 of them) § Deep understanding of problem and collaboration on possible solutions (Used FGD and took the entire day, 6 to 8 hours)  Approaches to Interaction Design User-Centered Design: the user knows best and is the guide to the designer; the designer’s role is to translate the users’ needs and goals into a design solution. Activity-centered design focuses on the behavior surrounding particular tasks. Users still play a significant role, but it is their behavior rather than their goals and needs that is important. S  Approaches to Interaction Design System Design: It is the system (that is, the people, computers, objects, devices, and so on) that the center of attention, while the users’ role is to set the goals of the system.. Genius Design: relies largely on the experience and creative flair of a designer.  Class Discussion When will a genius design be recommended or preferred? Are there any risks using genius design?  User-Centered Design Focuses on user needs and requirements Focuses on usability goals, user characteristics, environment, task and workflow in the design of an interface Basis for user-centered design: o Early focus on users and tasks o Emprical measurements o Iterative Design  Early Focus on Users 1. Users’ tasks and goals are the driving force behind the development o While technology will inform design options and choices, it is not the driving force. o Instead of saying “Where can we deploy this new technology?” say “What technologies are available to provide better support for users’ goals?” 2. Users’ behavior and context of use are studied, and the system is designed to support them.  Early Focus on Users 3. Users’ characteristics are captured and designed for. 4. Users are consulted throughout development from earliest phases to the latest 5. All design decisions are taken within the context of the users, their activities, and their environment.  User-Centered Design Step 1. Identify the users’ needs and the context around them. Step 2. Specify requirements for both the business and user. Step 3. Design solutions Step 4. Evaluate  User-Centered Design Who is/are my user(s)? o People who will be using your product and their goals What are my users’ problems? o These are the issues facing your users that your product, and design can directly and indirectly help solve. What are they about? o This can mean everything from how they’re going to be interacting with your design to even the emotions they feel while using it. Tool to use: User Profile, Persona, Storyboard  User Profile Steps to create user profile: o Find information to build user profile o Understand the type of users you’re working with § Primary Users: Direct users § Secondary Users: Those who use it infrequently or through an intermediary § Tertiary Users: Those affected by the system  Class Activity Who are the primary users, secondary users and tertiary users for an electricity smart meter for use in the home to help households control their energy consumption?  User Profile Create the user profile  User Profile Example  Personas: Understanding Communities Fictional characters: model a typical user/group of users Personas help to understand users Personas are often created in the early/define phase (pre-design)  Persona Created from user profile Ficitious yet realistic representation of a targeted users Provides user core needs and nice to have  Personas: An Example It can also be drawn/freely sketched together with the community users. Example from Havanna Engagement  Personas: Day in the Life of Tomas Can depict activities of the user per day  Benefits of Personas A greater level of understanding the user o His activities, motivation, background, technology availability… Things that became clearer: o Tomas being an offender can be traced to his attitude at home – refuses errand, once irritated he leaves the house, leaving the house gives him opportunity to hang out with bad group o Pattern of offence became clearer o Time of offence became clearer o His level of education, technology (mobile phone) is known etc  Class Discussion What is the difference between user profile and persona  Scenario A scenario is a short story that contains the task the user wil want to perform  Discussion You have been asked to design an application that can let people organize and retrieve their email in a fast, efficient and enjoyable manner. What would you do?  Users Further involvement Needs and Problem Identification Phase o Identify the challenges users are facing using methods such as interview, focus groups, observation o Interview: between 2 people (interviewee and interviewer) and has a structure o Focus Group: with a group of users/people, typically 3 - 4, 6 - 8 o Observation: Observing user behaviour in a work environment. Sketches, notes and pictures are usually taken o Contextual Inquiry: targets to understand why people do what they do o Brainstorming: used to generate as many ideas or solutions as possible Design Phase Evaluation Phase  Users Further involvement Design Phase o Participatory Design: all stakholders get involved to ensure end- product meets users need o Card Sorting: used to design/evaluate interface. Users/particpants organize topics into categories.  Users Further involvement Evaluation Phase o Users are invited to use the designed application/technology to perform a series of tasks o Users are observed while performing these tasks to identify any difficult. Users could also be timed to measure efficiency. o Methods: Think-aloud and walkthorugh  Conceptual Model A good understanding of the problem space helps to conceptualize the design space. Conceptual Model can be represented as a textual description or in a diagrammatic form. It becomes a blue print once all design team members have agreed on it It’s a high level of description of the system’s operation or functions A key benefit of conceptualizing a design at this level is that it enables “designers to straighten out their thinking before they start laying out their widgets” Conceptual Model Components of Conceptual Model  Metaphors Interface metaphors are intended to provide familiar entities that enable people to readily understand the underlying conceptual model and know what to do at an interface.  Metaphors Observation: Interaction Metaphors derive their names from everyday/non-digital objects  Implication of Interaction Metaphor Mimic real-life concepts/symbols people are familiar with Conceptual Model: Interaction and Interface INTERACTION TYPES LECTURE 3  Recap of Lecture 2 Anyone?  Class Activity Compare the following: o A paperback book and an ebook o A paper-based map and a smartphone map app What are the main concepts and metaphors that have been used for each? (Think about the way time is conceptualized for each of them.) How do they differ? What aspects of the paper-based artifact have informed the digital app? What is the new functionality? Are any aspects of the conceptual model confusing? What are the pros and cons?  Interaction Types These are the ways a person interacts with a product or application Interaction Types: o instructing o conversing o manipulating o exploring o responding  Instructing This type of interaction describes how users carry out their tasks by telling the system what to do. Examples include giving instructions to a system to perform operations such as print a file, remind the user of an appointment. A diverse range of products has been designed based on this model, including home entertainment systems, consumer electronics, and computers. The way in which the user issues instructions can vary from pressing buttons to typing in strings of characters  Conversing This form of interaction is based on the idea of a person having a conversation with a system, where the system acts as a dialogue partner. It has been most commonly used for applications where the user needs to find out specific kinds of information or wants to discuss issues. Examples include advisory systems, help facilities, chatbots, and robots.  Class Discussion Can you give a real-life experience or example of the conversing interaction type? Are there any disadvantages of the conversing interaction type?  Manipulating Where users interact with objects in a virtual or physical space by manipulating them (for instance, opening, holding, closing, and placing). Users can hone their familiar knowledge of how to interact with objects. Example: MS Word, Image Editing Tool  Exploring This mode of interaction involves users moving through virtual or physical environments. For example, users can explore aspects of a virtual 3D environment, such as the interior of a building.  Responding This is a system-initiated interaction This mode of interaction involves the system taking the initiative to alert, describe, or show the user something that it “thinks” is of interest or relevance to the context the user is presently in. Example: Fitness Tracker - Number of steps walked in a day Can you think of another example? What are the advantages and disadvantages of this mode of interaction?  Responding Any difference between the instructing and responding interaction type?  Class Discussion A modern hotel has installed a sandwich making robot to supply room service sandwiches at any hour of the day. The hotel also has an automated delivery system that will take the completed sandwich to a specified room. You have been asked to program a software agent interface that guests can phone to order sandwiches. Would you use a voice recognition system or ask the user to push phone buttons to enter responses? Explain the relative advantages and disadvantages of each for this particular situation.  How to represent conceptual model Diagrammatic or Textual  Conceptual Model Representation Diagrammatic Representation: ER-Diagram, Flowchart, Use Case...  Storyboard: Conceptual Model Representation Storyboards come from film and animation Give a “script” of important events leave out the details Concentrate on the important interactions  Story Board Context of Story Board Elements of Storyboard  Some guides on Storyboard Aviod too much details. Uneccsary details distract Use of text is often necessary but keep it short  Some guides on Storyboard Aviod too much details. Uneccsary details distract Use of text is often necessary but keep it short Include people experiencing the design and their reactions to it (good or bad) For end-users, give lesser frames (typically 4 to 6) but more technical purposes Conceptual Model  Miro A collaborative tool used for creation - user journey, user map, personas etc  Data Gathering Establishing requirement is not writing a wish list of features Data gathering is key in requirement and evaluation phases All phases of interaction design are usually intertwined Requirement Phase o To collect sufficient information that would lead to stable requirements Evaluation Phase o Capture users’ reaction and performance within a system  Data Gathering Key issues: o Setting Goals: before beginning it is important to identify specific goals for the study. This would influence data gathering technique to use. o Identifying Participants (Sampling) o Consent Form: Helps to make the relationship formal o Triangulation: 4 types of triangulation exists - methodological (Combination of data gathering techniques) e.g. Interview & Focus Group, data (drawn from different sources at different times…., places….), investigator (collected by different researchers – observers, interviewers…) and theories (use of different theoretical framework to view data or findings) o Pilot Studies  Identifying Participants Probability Sampling: o Use Random Generator or every nth person in the list o Statistical Formula (Infinity/Very Large population): = (100/ )2 ∗ 1.962 ∗ (1 − ) § L is reliability margin, values could be between 1.5 and 3 § P is sample proportion, values could be between 0 and 1 (values usually use 0.5) o Statistical Formula (Finite/Large Population) = §n= ( −1)( /100)2 1+ 1.962 ∗ (1− ) § L & P above holds. N is the size of population  Identifying Participants Probability Sampling: o Stratified: divide the population into group and apply random sampling e.g. classes in secondary school Non Probability Sampling: o Convenience Sampling: You choosing the participants o Volunteer Panels: rely more on participants willing to participate Probability Sampling allows you to apply statistical tests and generalize your results to whole population while non-probability doesn’t provide such robust generalization.  Pilot Studies It’s a small trial of the main study The purpose is to ensure the viability of ones idea/proposed method Plans should be tested by pilot study before launching the main study Pilot study helps to clarify misconceptions, ambiguity When difficult to get people to participate, colleagues and peers can be used You can carry out pilot study on your questionnaires, interview questions Typically, people involved in the pilot studies are not involved in the main study.  Pilot Studies : A real Life Example Traditional survey can be boring leading speeding, random responding, premature termination, and lack of attention (Harms et al., 2014, Turner et al. 2014). Our original idea was to use indigenous language and graphics as tools to make surveys more interactive with emaphasis on psycho-social impact of covid-19 on students. So we wanted to see the viability of using Pidgin English with graphics support for questionnaire.  Pilot Studies: A Real Life Example Just before rolling out the questionnaire/the new idea, we decided to do a pilot study. The pilot study was performed to obtain the opinion of respondents before the actual survey/main study. 17 people were contacted for their review/participated in the pilot study. Those involved in the pilot study were drawn from diverse pools – HCI community & experts, Targeted Population and Education Professionals.  Lets See a Sample of Pilot Study Outcome Reviewer 5 (Non Student: UI/UX Designer) Haa! Pidgin. You know, I think it's wayyy easier to hear pidgin than read it. I'm actually struggling. To be honest, I think we can still use English and capture the essence of what we want to say. But that's me sha. Some others might prefer pidgin, It's new and creative. I don't think I've filled a form in pidgin before Reviewer 3 (Student) I think it was quite difficult for me to process, if I was not quite willing I might have giving up, I think normal English will do, they just like questions asked in an interactive tone like you are seeking for my opinion not questioning me Reviewer (Student) Wow! The questionnaire is amazing and very captivating. The use of pidgin was a great idea. Also, the questions are focused on what we as students discuss frequently during this pandemic. I looked forward to reading the next question and I'm sure students would be eager to answer each question Reviewer 16 (HCI (UI/UX) Researcher) I think that what you have there is very interesting. The pidgin English concept is amazing.  Pilot Study: An example Then we decided to revise based on pilot study outcome. Came up with an English version supported with GIFs and Pidgin.  Now lets see the power of pilot study  After the main study, a total of 1533 people responded to the survey. 1267 people responded to the English survey (GIF Version) and 266 people responded to the pidgin version Now imagine if we didn’t do pilot study. We would probably have lost responses from over 1000 people (approx. 80% lost)!!!  Note Pilot study may not necessarily/completely change your idea or set of questions. It would likely refine it. Just like in our case, where it helped us see that it was better to have 2 versions: English supported with GIFs and Pidgin. It also helped us improve on the contents/set of questions the targted would love to see.  Question Why do you think anyone involved in a pilot study should not be involved in the main study itself.  Relationship with Participants Informed consent is required  Data Gathering Techniques Interview: usually synchronous o Structured: most appropriate when goals are clear and well understood o Semi-structured o Unstructured Questionnaire: usually designed to be answered asynchronously Observation o Direct o Indirect Focus Group  Data Recording Taking notes plus photo o Least technical. Working with another person provides another perspective (notes can be compared). o This can be combined with taking photographs, audio, video Audio recording plus photo o Can be alternative to note taking. o Enable interviewer to focus more on the interviewee rather than taking notes. Video Recording: o More intrusive o Needs to be well planned.  Class Discussion Imagine that you are a consultant who is employed to help develop a new augmented reality garden planning tool to be used by amateur and professional garden designers. The goal is to find out how garden designers use an early prototype as they walk around their clients’ gardens sketching design ideas, taking notes, and asking the clients about what they like and how they and their families use the garden. What are the advantages and disadvantages of the three approaches (note-taking, audio recording with photographs, and video) for data recording in this environment?  Interview Unstructured Interview o Open-ended, exploratory and more like conversations o Need to have an agenda, plan of the interview (topics to be covered) o Generates rich data that is often inter-related & complex o Can be time consuming to analyze Structured Interview o Asks pre-determined questions (similar to questionnaire) o Same questions are used with each user to standardize the study  Interview Semi Structured Interview o Combines both structured & unstructured format Notes: Don’t ask question in a manner that would pre-empt the answer (e.g. Do you like colour Blue?) For special group (e.g. children, certain cultures etc), you may need to find adapt your data collection technique to suit them Interviewers body language can influence response Probes and prompts are powerful concept to get further responses: o Do you want to tell me something else? Did you forget …..?  Focus Group Usually consists of 3 to 10 people Participants are representatives of targeted population o administrator, students, lecturers can form 3 different focus groups Helps to address conflicts/differing opinions Facilitator is saddled with the responsibility of steering discussion. Should provide balance so that certain people don’t dominate while some others are quiet.  Planning and Conducting Interview Questions for interview may be: o Open: best suited for exploratory stage o Closed: suitable when answers are known in advance Guidelines for developing interview questions:  Conducting an Interview Listen more than talk, show sympathy, appear interesting Steps for conducting an interview: When unrealistic to meet in-person, virtual means can be explored  Other forms of interview Remote/Virtual o What are their advantages? o What are their disadvantages? Retrospective Interview????  Enriching the Interview Experience Having props, personas, pictures of concept at the background can be helpful to the interviewees.  Questionnaire Similar to interview (open or closed questions) but doesn’t require physical/face-to-face participation. Questionnaire can be used with other methods o For instance, after interview with a small group. Questionnaire can be disseminated to a wider group within the same population. Can be web-based, paper-based or attached to an email.  Class Activity Do you think there is any difference between structured interview and questionnaire?  Questionnaire Structure Demographics Background Information (Level of Experience), Contextual Information General advice for designing a questionnaire:  Questionnaire What do you think is/are wrong with this questionnaire?  Likert Scale What do you know about likert scale? What are the various forms that exists? How do we know an appropritate one to choose? Is there any difference between semantic differential scale and likert scale?  Question and Response Format Check Boxes and Ranges o 15 – 20, 20 -25 (wrong). 15-20, 21 – 25 (right) Rating Scale: Likert and Semantical  Class Discussion Have you ever administered or responded to a questionnaire? Share your experience.  Class Discussion In which situation would you recommend the use of paper questionnaire over online questionnaire?  Observation Can be used early in design (to understand user) or later in design (for evaluation) Users may be observed o directly in the field: most appropriate when its difficult for people to describe what they do o Directly in a controlled environment: a usability lab (could be a portable one). Users may be apprehensive, so there is a need to prepare a script that would welcome them, tell them purpose of the study…… o Think aloud technique is helpful to know what is going on in the user’s mind  Observation Users may be observed indirectly: o Diaries (just like the first assignment you did) o Interaction Logs and Web Analytics Choosing and Combining Techniques  Class Discussion For each of the following products, consider what kinds of data gathering would be appropriate and how to use the different techniques introduced earlier. Assume that product develop_x0002_ment is just starting and that there is sufficient time and resources to use any of the techniques. 1. A new software app to support a small organic produce shop. There is a system running already with which the users are reasonably happy, but it is looking dated and needs upgrading. 2. An innovative device for diabetes sufferers to help them record and monitor their blood sugar levels. 3. An ecommerce website that sells fashion clothing for young people Closing… Ask me something!  Course Project X Groups o Typically 3 members in a team (in extreme cases, 4) Project Proposal: o Many thanks for your interesting submissions. o All is approved Next Milestones: o Understanding the problem space (recommendation: 3 levels of engagement) o Conceptual Model: Personas, Storyboards, Scenarios, Sketches, User Tasks/Descriptions, User Profiles o Detailed UX Report (Pre-Design Phase): Watch out for the format  References http://www.baddesigns.com/examples.html Interaction Design: Beyond Human Computer Interaction by Yvonne Rogers et. al. Human-Computer Interaction 3rd Edition by Alan Dix et. al. https://www.interaction- design.org/literature/topics/conceptual- models https://www.inf.ed.ac.uk/teaching/courses/hci /0809/lecs/4_models-4up.pdf  HUMAN COMPUTER INTERACTION Lecture 4 Sakpere Aderonke Busayo Department of Computer Science, University of Ibadan.  Breakout Session What has changed since the last time you submitted your idea Which type of data gathering instrument would you use to understand the problem space and why? In data gathering, what kind of users would you consider and why? What kind of questions would you ask users? How would you use pilot study? Come up with a timeline for the 1st phase  Ideation Ideation comes after problem definition Ideation often tend to think wide and out of box to provide diverse solutions to the identified problem. During, ideation there are no bad ideas  Ideation Requires a skilled facilitator to moderate the process Some rules required – time limit, no bad ideas, no distraction/phones. Participants need to be curious and bold to challenge common beliefs and explore possibilities Team members should take each other's ideas and build on them, find ways to link concepts, recognize patterns and flip seemingly impossible notions over to reveal new insights.  Ideation Ideation looks at the technical and non technical factors involved Techniques useful for ideation: o Brainstorming: collective group discussion/idea generation, listening and building on ideas. o Brainwriting: give time to participants to write down their ideas on cards and pass it round for others to build on. This can go for many rounds/cycles. o Brainwalking: starts from one person putting down idea on a flip chart. Others walk round the various charts/papers pasted on wall to add more ideas o Brain Dumping: each individual is asked to write down his/her ideas, usually one idea on a sticky note. After time limit elapsed, each individual will stick each idea on a board. Duplicate ideas are grouped together. o After all presentation, best ideas are selected using techniques such as dot voting, bingo selection, affinity diagrams.  Ideation Techniques More notes on ideation and its techniques: https://www.interaction-design.org/literature/topics/ideation https://www.interaction-design.org/literature/article/learn-how- to-use-the-best-ideation-methods-brainstorming-braindumping- brainwriting-and-brainwalking https://www.interaction-design.org/literature/article/how-to- select-the-best-idea-by-the-end-of-an-ideation-session  Ideation Techniques Techniques can be combined: Brainstorming + Brainwriting + Braindumping  Ideation Techniques Brainstorming…: Non technical Factors  Conceptual Framework/Solution Overview At the end of ideation, solution/concept(s) should be agreed on, this may not necessarily mean selecting the “best idea”. Earlier discussed techniques (dot voting…) can be useful in selection.  Conceptual Framework/Solution Overview Another Example  Tools Needed For Ideation Flip Chart Paper/Stickers Board/Cardboard Paper Markers E-drawing Tools: Microsoft Visio Microsoft Visio: Many Templates Microsoft Visio: Menu/Workspace Qualitative & Quantitative Analysis Introduction Initial Data Processing Step  Simple Statistics Analysis Others: Standard Deviation, Maximum..  Simple Statistics Analysis Percentages: use it when you have at least 10 users Examples for biodata  Simple Statistics Analysis Percentages: an advanced example (for responses) Numbers % Numbers % Numbers % English Responses Pidgin Responses Total (English + Pidgin) Engagement since lockdown Absolutely nothing 272 21.5 67 25.2 339 22.1 Community service 91 7.2 10 3.8 101 6.6 Continued my school classes online 140 11.0 34 12.8 178 11.6 Freelancing 255 20.1 65 24.4 320 20.9 Taking online courses 253 20.0 26 9.8 279 18.2 Others (choice of 2 or more of above 316 20.6 options) Reaction to immediate resumption of normal school activities Angry 37 2.9 - - 37 2.9 Excited 553 43.6 - - 553 43.6 Indifferent 251 19.8 - - 251 19.8 Shocked 180 14.2 - - 180 14.2 Worried 246 19.4 - - 246 19.4  Data Analysis Data can be either quantitative or qualitative depending on the options used/adopted. How do you feel about e-readers? (No options/open- ended) o This would result into qualitative as different individuals would pick various choices E.g. How do you feel about e-readers? Tedious to use, easy to use, Neither (gives a quantitative analysis)  Analysis Analyzing Likert-scale response  Data Analysis Analysis: Experience of Users and Errors  Graphical Representation of Data Bar Chart, Histogram  Graphical Representation of Data Scatter Diagram: to identify outliers easily Outliers though could distort representation, can be of interest.  Class Work 5 Minutes  Solution Bar Graph: What can you observe?  Solution: Scatter Diagram What can you observe? Any outlier? Comparing Data LECTURE 5  Recap of lecture 4 Anyone?  Simple Qualitative Analysis Identify recurring themes o Affinity diagram: similar notes are grouped together o Groups/themes not pre-defined. Usually emerge from the data o One note is put up first, then the team searches for other similar notes o Theme can relate to behavior, location, persons etc  Simple Qualitative Analysis Thematic Analysis  Assignment Read up the follow methods: o Categorization o Critical Incidents o Inferential Analysis: CHI Square, Logistic Regression  Inferential Analysis Dependent Variables o Things we want to measure: length of time to complete a task, nos of errors Independent Variables o Stands alone. Isn’t changed by other variables. o Mouse, trackpad Inferential analysis (statistics) measures whether an independent variable has effect on dependent variable o E.g. does the input device type affect the completion time?  Read-Up Assignment Read or revise various statistical inferential analysis methods  Practice Question (a) Design an experiment to determine which sounds users prefer to use as email arrival notification (e.g. a simple beep, a duck quaking, someone coughing, a trumpet etc.). Extend this experiment to consider what visual notification they prefer - none, a flashing icon, or a dialogue box. Think about the hypotheses and variables, and suitable people to act as subjects. Consider how you could make the experiment more general so that any member of the public could complete it. Also, discuss how this would feed into the design of email programs. From your experiment design, answer the following questions: i.What would be the hypotheses? ii.What would be the dependent and independent variables? iii.What kind of users would you consider and why? iv.Which type of data gathering instrument would you use for the experiment and why? v. What kind of questions would you ask users?  Cronbach’s Alpha Cronbach’s alpha coefficient measures the internal consistency, or reliability, of a set of survey items. Use this statistic to help determine whether a collection of items consistently measures the same characteristic. Cronbach’s alpha quantifies the level of agreement on a standardized 0 to 1 scale. Higher values indicate higher agreement between items. https://www.statology.org/cronbachs-alpha-excel/ Cronbach’s Alpha  Cronbach’s Alpha High Cronbach’s alpha values indicate that response values for each participant across a set of questions are consistent. For example, when participants give a high response for one of the items, they are also likely to provide high responses for the other items. This consistency indicates the measurements are reliable and the items might measure the same characteristic. Conversely, low values indicate the set of items do not reliably measure the same construct. High responses for one question do not suggest that participants rated the other items highly. Consequently, the questions are unlikely to measure the same property because the measurements are unreliable.  Uses of Cronbach’s Alpha Analysts frequently use Cronbach’s alpha when designing and testing a new survey or assessment instrument. This statistic helps them evaluate the quality of the tool during the design phase before deploying it fully. It is a measure of reliability. Analysts can combine multiple related items to form a scale for the construct. However, before including various questions in a scale, they must be sure that all items reliably measure the same construct. Cronbach’s alpha helps with that process. Imagine researchers are developing a self-esteem scale and are developing multiple items to measure that construct. If all items actually assess self-esteem, then scores across items should generally agree, producing a high Cronbach’s alpha. For instance, individuals with high self-esteem will tend to score highly on all items. Conversely, individuals with low self-esteem will tend to score low on all items.  Calculating Cronbach’s Alpha For examples on how to calculate the Cronbach’s alpha value, please refer to this link, https://statisticsbyjim.com/basics/cronbachs- alpha/ https://www.statology.org/cronbachs-alpha- excel/  Data Analysis Tools Excel: Basic analysis Minitab: inferential analysis (trial version available freely) Dovetail, Nvivo: Qualitative Analysis  Data at Scale Lets think, how much data is generated daily? How many tweets per seconds? How many new YouTube Videos are uploaded every minute? How do we classify such data? What impact has such data got to do in HCI?  Data at Scale Data at Scale is called big data Generated on the fly Exponential in nature What sort of insight can we gain from such data? How do you think HCI relates to Big Data?  Data at Scale Data at scale can be quantitative and qualitative data. It consists of social media messages, sentiment and facial recognition data, documents, sensor, sound and sonic data, and video surveillance data. Analyzing data from different sources is powerful because it provides different perspectives on people’s behavior. Analyzing data at scale can have positive outcomes, such as understanding people’s health problems, observing market trends but there are also dangers if personal data is revealed and then misused.  Analysing/Collecting Data at Scale We previously discussed data gathering techniques such as interview, questionnaire etc. Would this methods suffice for gathering big data? Why or why not?  Approaches to Collecting and Analysing Data at Scale Scrapping and second sourcing o Focus of Interaction Designer is not on the Scrapping process per se o Rather focus is on how one can interact with the data or observe user behaviour from it  Approaches to Collecting and Analysing Data at Scale Scrapping and second sourcing o An example of second sourcing: Google Trend (https://trends.google.com) o How can insights or data generated from Google Trend be of interest to a HCI professional?  Collecting Personal Data What do you think about trackers? o Health/Fitness Tracker: Fitbit o Self-Care Tracker: Monitoring of glucose level o Phone usage Tracker: What is HCI interest in personal data collected from trackers?  Crowdsourcing Data Crowdsourcing involves a large group of dispersed participants contributing to a project through data collection which can help address global/large problems such as migration, climate change  Human-Data Interaction/Approach The goal is to transform sensed data being collected into something that is meaningful to the general public. The goal is to provide a way of enabling users to engage with their sensed data. Can you give real examples of application you can sense that have collected your data but you as a user you are uanble to make sense out of it or benefit from it?  Human-Data Interaction/Approach An example of human-data application  Sentiment Analysis Sentiment analysis is a technique that is used to infer the effect of what a group of people or a crowd is feeling or saying. The phrases that people use when offering their opinions or views are scored as being negative, positive, or neutral. The scales used vary along a continuum from negative to positive, for example, –1 to +1 (where –1 is the most negative, 0 is neutral, and +1 is the most positive).  Sentiment Analysis Some sentiment systems provide more qualitative measures by identifying if the positive or negative sentiment is associated with a specific feeling, for example anger, sadness, or fear (negative feelings) or happiness, joy, or enthusiasm (positive feelings). Algorithms are then applied to the labeled data in order to identify and classify them in terms of the level of effect that has been expressed What is the interest of HCI in sentiment analysis?  Class Discussion Examine the symbiotic relationship between Human-Computer Interaction (HCI) and sentiment analysis. Discuss how the integration of sentiment analysis enhances HCI research and design. Provide real-world examples to illustrate the collaborative impact of these two domains.  Combining multiple sources of data Automatic sensing + subjective reporting This helps to get a comprhensive information about a domain E.g. student life: an application ceneterd on mental health amongst students The app runs on student phone and collect real-life information such as: o Wake up time, bed time, and sleep duration o The number of conversations and duration of each conversation per day o Student mobility outdoors and indoors (in campus buildings) o Their stress levels throughout the day, week, and term o Eating habits (where and when they ate) o App usage etc They also used a number of pre- and post-mental health surveys and collected the students’ grades. These were used as ground truth for evaluating mental health and academic performance, respectively.  Combining multiple sources of data From the two graphs shown below, what can you say about the students’ activity, their stress levels, and their level of socializing in relation to deadlines over the course of the term?  Data Visualization and Exploration The user perceives and interprets the data representation taking into account the context of the data The goal of data visualization tools is to amplify human cognition so that users can see patterns, trends, correlations,  Data Visualization and Exploration The goal of data visualization tools is to amplify human cognition so that users can see patterns, trends, correlations, and anomalies in the data that lead them to gain new insights and make new discoveries Data not well presented visually can be confusing.Well represented doesn’t mean fancy. Some flaws: o lack of clarity o axes with truncated scales, o representation of data in 3D bars making it hard to read read.  Visualization Tool Sometimes bar graphs, pie charts etc might not suffice for some visualizations Course Material and Textbooks Human-Computer Interaction 3rd Edition by Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale  HUMAN COMPUTER INTERACTION Lecture 6 Sakpere Aderonke Busayo Department of Computer Science, University of Ibadan.  Today Recap of last lecture Update on Project Cognitive Psychology Course Material and Textbooks Human-Computer Interaction 3rd Edition by Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale  Cognitive Psychology? What is cognitive Psychology?  Cognition and Perception Cognition: thinking, remembering, learning, decision making, reading, writing… Cognition: o Experiential: intuitive and effortlessly e.g. eating o Reflective: requires mental effort e.g. writing Perception o How information is acquired from the environment o Involves the sense organs  Cognitive Psychology Science of how we think It’s a branch of psychology concerned with our humans (our minds) process information sent from various senses.  Class Activity Why is cognitive psychology essential in HCI or design?  Why study cognitive psychology? It helps designers to know how humans: o Process information o Perceive the world o Focus their attention o Use their memory In order to design for humans we need to understand their capabilities and limitations Understanding cognitive psychology helps designers build systems sympathetic to users  Senses Five major human senses: o Sight o Hearing o Touch o Taste o Smell Which ones are most important to HCI?  Visual Perception How do humans perceive size and depth, brightness and color? Are these crucial to design? Which part is easier to read (left or right side of the dot?)  Class Activity How do we perceive this? A “B” or “13”?  Class Activity What of now? How do we perceive this? A “B” or “13”?  Class Activity How do we perceive the letter in between the first word and the second word?  Visual Perception 2 theories can be used to explain how we perceive/process what we see: Constructivism o Based on the idea that we don’t perceive the world directly – that is we process any image we see before it is consciously recognised o Contextual information helps us process what we see Ecological o Need some world knowledge to make sense of what we see o Information is extracted directly from the light captured by the eye  Visual Perception Constructivism o Contextual information helps us process what we see So is the middle letter still a 13 or B?  Class Activity Now let’s see how contextual perception applies to interface design. Can you think of interface elements which appear identical, but have different meanings in different contexts?  Application: Contextual Information The symbol “-” is similar in both examples but mean different things. o Contextual Information helped us differentiate usage/their meaning  More Examples Can you think of other examples of interface elements which appear identical, but have different meanings in different contexts?  Visual Perception: Ecological Uses World Knowledge From childhood, humans develop a huge knowledge about objects and how to recognise them. Our perceptual systems exploit this knowledge, allowing us to recognise objects when parts of that object are obscured.  Class Activity Can you recognize this object?  Class Activity What of this?  Application: World Knowledge Our knowledge about certain objects can help us identify them. This also applies even when the object isn’t completely/perfectly represented.  Class Activity Look at the laundry labels in the images beneath. Each represents a separate class of operation you can perform on your laundry (e.g. dry, wash, iron and bleach). Can you guess which symbol represents each operation? Do you think that the symbols exploit world knowledge sufficiently well to depict each action? If not, suggest some alternatives.  Visual Perception Further Reading: Muller-Lyer illusion Ponzo illusion  Assignment Think about how how theory knowledge can help us represent certain icons or interfaces without bothering about full representation.  Gestalt Psychology/Principle Gestalt psychology is a school of thought that looks at the human mind and behavior as a whole. Gestalt Principles are principles/laws of human perception that describe how humans group similar elements, recognize patterns and simplify complex images when we perceive objects. Designers use the principles to organize content on websites and other interfaces so it is aesthetically pleasing and easy to understand. Gestalt Principle is a type of constructive theory/perception but mainly used for geomtry  Gestalt Principle For instance, four lines arranged in a square form something which we primarily recognise as ‘square’ – not as a collection of four lines arranged in some fashion. Gestalt theory would argue that our perception of the lines is influenced by the knowledge we have about Geometric shapes (in this case the square) which causes us to perceive a square and not individual lines.  Gestalt Principle Variations: o Common region o Proximity o Figure-ground o Similarity o Closure o Focal Point o Continuity  Principle of Common Region Items within a boundary are perceived as a group and assumed to share some common characteristics.  Class Activity How is Gestalt Principle (common region) applied here?  Figure-Ground Look at the figure below. What do you see? Do you see a complete triangle with a circle placed on top of it? Or, do you see a triangle with a circular hole through which you can see the square beneath? In other words, is the circle part of the ‘figure’ or is it part of the ‘ground’?  Figure-Ground Our brain automatically separates an object (the "figure") from its surroundings (the "ground"). For example, you can see a black bird as the figure against a white background (ground). The figure-ground principle states that people instinctively perceive objects as either being in the foreground or the background. They either stand out prominently in the front (the figure - the main object) or recede into the back (the ground - provides context for the figure). Figure-Ground: Application  Figure-Ground How is figure-ground used here?  Continuity The principle of continuity states that elements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve.  Closure The principle of closure states that when we look at a complex arrangement of visual elements, we tend to look for a single, recognizable pattern. In other words, when you see an image that has missing parts, your brain will fill in the blanks and make a complete image so you can still recognize the pattern.  Closure Used in Logo Design  Law of Proximity What can you observe from this image? The law of proximity states that individual elements that are placed close to each other are perceived as belonging together.  Law of Proximity The law of proximity states that individual elements that are placed close to each other are perceived as belonging together. In website design, content that is related is set close together. Empty space helps the reader distinguish it from other content. Restaurant menus place items in the same categories (appetizers, main meals, desserts) together.  Read up Similarity Focal Point  Cognitive Processes Attention Perception Memory Learning Reading, Speaking and Listening Problem Solving, planning, reasoning and decision making  Attention Attention requires our auditory and visual senses o Waiting in the hospital for your name to be called o Checking a newly released result for yours Attention allows us to select what to focus on from a range of possibilities Having a clear goal help us in knowing what to focus our attention on  Attention How Information is represented can affect our attention Which is easier to find information? Both represent similar info: Hotel Name, City, Price etc. Attention  Perception How is information perceived/acquired by human senses? Vision is the most dominant, then hearing and touch. In design, information should be presented in a way that can be readily perceived as intended. Perception  Cognitive Processes (Read Up) Attention Perception Read up the remaining cognitive processes and their design implications o Memory o Learning o Reading, Speaking and Listening o Problem Solving, planning, reasoning and decision making  Further Reading Chapter 1 of Alan Dix textbook Chapters 4 & 5 of Interaction Design  Assignment Read about how cognitive psychology applies to the project you are working on.  References Interaction Design: Beyond Human Computer Interaction by Yvonne Rogers et. al. HCI Lecture notes/materials of University of Cape Town Human-Computer Interaction 3rd Edition by Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale  HUMAN COMPUTER INTERACTION Lecture 7 Sakpere Aderonke Busayo Department of Computer Science, University of Ibadan.  Last Lecture Recap, anyone?  Low Fidelity Prototype: Paper Prototype Cheapest: Paper Low Fidelity Prototype: Paper Prototype  Low Fidelity Prototype: Computer Generated E-drawing tool: GIMP  Low Fidelity Prototype: Computer Generated Draw.io  High Fidelity Prototype Computer-based interactive system Usually close to the final Useful to: o Test details such as UI elements, colour schemes o Test animations, transitions, navigations o Know users experience o Get feedback before final launch of the product o Communicate with clients, stakeholders, team members  High Fidelity Tools Prototyping Tools o Figma o AdobeXD Front End Technologies o HTML, CSS, Javascript Mobile Technology o Android Studio Advantages & Disadvantages  Evaluation Why is evaluation important after a designer might have followed all design rules or designed based on his vast experience? Many designers still assume that if they and their colleagues can use a product and find it attractive, others will too. Is this always true?  Brainstorm Session Why evaluate or carry out usability study? What to evaluate? When to evaluate? Where to evaluate?  Evaluation 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. A central goal of evaluation is to improve the artifact’s design. Evaluation focuses on: o usability of the system (that is, how easy it is to learn and to use) o users’ experiences when interacting with it (for example, how satisfying, enjoyable, or motivating the interaction is).  Evaluation Methods The type of method to use depends on the goals of evaluation Evaluations can occur in a range of places such as in labs, people’s homes and work settings In summary, evaluation methods include: o Observation o Experiment Directly involve participants o Field Studies o Analytics o Modelling user’s behavior Particpants ivolved indirectly  Need for Evaluation Why evaluate or carry out usability study? o Users want a product with a pleasing and engaging experience (Simplicity is key) o From business angle, products with good experience sell o Identify problems before product is released o Helps to identify diverse group needs and cater for them o Given the above, it makes a lot of sense to evaluate a product before its launch. That way, potential problems can be identified and solved early enough.  Class Activity Identify two adults and two teenagers in your contact who regularly make posts on WhatsApp Status or any other social media of your choice (LinkedIn, Instagram etc). Compare and contrast: § the kind of contents they post § how frequent they change their profile pictures § frequncy of posts § number of followers - Why do you think this type of evaluation is important? Based on your evaluation, what design suggestions or improvements can you recommend?  What to Evaluate What to evaluate o Low tech prototype o Complete systems o A particular screen o Entire Workflow o Aesthetic Design o Safety features  What to Evaluate Also depends on project or product goals: o Game app developers will want to know how engaging and fun their games are compared with those of their competitors o Government authorities may ask if a computerized system for controlling traffic lights results in fewer accidents o A software company may want to assess market reaction to its new home page design.  Evaluation: When to Evaluate Factors to consider: o Type of product: New vs Old/Upgrade. o Development process followed: Agile UX? Evaluation stages: o Early Phase – after sketches, story board etc (Formative Evaluation) o Later Phase – high fidelity/finished product (Summative Evaluation)  Evaluation: Where to evaluate A company is developing a new car seat to monitor whether a person is starting to fall asleep while driving and to provide a wake- up call using olfactory and haptic feedback. Where would you evaluate it?  Evaluation: Where to evaluate Where to evaluate: o Controlled Environment: laboratory, need to test certain hypotheses under a given condition o Natural Environment: need to capture behaviour in a real-life environment o Remote Setting: e.g. social media  Evaluation When to evaluate? o Early Phase – after sketches, story board etc (Formative Evaluation) o Later Phase – high fidelity/finished product (Summative Evaluation) Where to evaluate? o Controlled Environment o Natural Environment o Remote Setting  Types of Evaluation Divided into 3 broad categories based on users involvement, setting and level of control: o 1. Controlled settings directly involving users (examples are usability labs and research labs). Users’ activities are controlled to test hypotheses and measure or observe certain behaviors. The main methods are usability testing and experiments. o 2. Natural settings involving users: It demonstrates how people use technologies in their intended setting, but they o are often time-consuming and more difficult to conduct. There is little or no control of users’ activities to determine how the product would be used in the real world. The main method used is field studies (for example in-the-wild studies).  Types of Evaluation Divided into 3 broad categories based on users involvement, setting and level of control: o 3. Any settings not directly involving users: take place without involving users. Consultants and researchers critique, predict, and model aspects of the interface to identify the most obvious usability problems. The range of methods includes inspections, heuristics, walk-throughs, models, and analytics.  Types of Evaluation What are the pros and cons of the 3 categories? How do you decide on the best approach for a given project? Class Discussion Neilsen’s Heuristics 1.Visibility: Keep users informed of what is going on 2.Minimize the user’s memory load 3.Be consistent 4.Provide feedback 5.Provide clearly marked exits 6.Deal with errors in a helpful and positive manner 7.Flexibility and Efficiency of Use 8.Aesthetic and Minimalist Design 9.Recognize, Diagnose, and Recover from Errors 10.Help and Documentation 8. Aesthetic and Minimalist Design  Class Activity Apply Nielson’s 10 heuristics to Arik Air flight booking website – www.arikair.com showing any of the rules are obeyed and where any violation occurred. Where there are violations, describe the violation and its severity.  Heuristic Evaluation We have seen how to use heuristic evaluation such as that of Jakob Neilsen’s for evaluation. o Jakob Neilsen’s heuristic basically evaluates technical details or components usually done by HCI experts/designers  Heuristic Evaluation Low Fidelity Prototype can be evaluated or tested for usability  Neilsen’s Heuristics The original heuristics were for screen-based applications (Nielsen and Mack, 1994; Nielsen and Tahir, 2002). These have been adapted to develop new sets of heuristics for evaluating web-based products, mobile systems, collaborative technologies, computerized toys, information visualizations and other new types of systems.  Caveat One of the problems with using heuristics is that designers can sometimes be led astray by findings that are not as accurate as they appeared to be at first (Tomlin, 2010). This problem can arise from different sources, such as a lack of experience and the biases of UX researchers who conduct the heuristic evaluations.  Heurisitc Evalauation Typically performed by experts with experience Number of evaluators is a factor to consider  Usability Testing Evaluation Mainly targeted at the end users or those who the system is designed for. Typically involves experiment Uses combination of qualitative and quantitative means of data collection (observation, interviews, and questionnaires). o e.g. percieved ease of use, comparing the number and kinds of errors that users make between versions and recording the time that it takes them to complete the task.  Usability Testing Uses combination of qualitative and quantitative means of data collection (observation, interviews, and questionnaires). o User satisfaction questionnaires and interviews can also be used to elicit users’ opinions about how they liked the experience of using the system. o Through observation, users’ reactions (via gesture) to an interactive product that often won’t often be verbalized or captured in a questionnaire/interview guide can be poked into. Recording of these observations or capturing them through photos can further help developers who might not be directly involved in the usability testing. o The qualitative and quantitative data that is collected using these different techniques are used in conjunction with each other to form conclusions about how well a product meets the needs of its users. For ISO Usability standard, check this;https://www.iso.org/obp/ui/en/#iso:std:iso:9241:-11:ed-2:v1:en  Observation Observation may also take place in the field or in a controlled environment Could be directly or indirectly o 3 key things: who? where? what? o Other factors: actors? individual actions? physical space layout? mood of people? sequence of events? Observation can be in form of Ethnography and Think Aloud Technique o Ethnography is borrowed from Social Science which is typically the study of peoples and cultures with their customs, habits, and mutual differences o Ethnography methods include direct observation, diary studies, video recordings, photography and artefact analysis such as devices that a person uses throughout the day. o A distinguishing feature of ethnographic studies is that there is no prior structure or framework.  Think Aloud Technique In a thinking aloud test, you ask test participants to use the system while continuously thinking out loud — that is, simply verbalizing their thoughts as they move through the user interface. 3 steps involved: o Recruit representative users. o Give them representative tasks to perform o Shut up and let the users do the talking  Class Exercise What are the pros and cons of think aloud technique? Try a think-aloud exercise yourself. Go to a website, such as Arik or Jumai, and look for something to buy or try to make a booking. Think aloud as you search and notice how you feel and behave. Afterward, reflect on the experience. Was it difficult to keep speaking all the way through the task? Did you feel awkward? Did you stop talking when you got stuck?  Indirect Observation Sometimes direct observation is not possible because it is too intrusive or observers cannot be present over the duration of the study,and so activities are tracked indirectly. o Diaries and interaction logs are two techniques for doing this. The diary method of evaluating a protoype often require participants log their experience, behavior, activities, and thoughts over a certain period of time which is also known as as "longitudinal information.” The interaction logs look out for a variety of actions: o key presses and mouse or other device movements o time spent searching a web page o time spent looking at help systems o task flow etc  Diary Studies Diary collected for 30 days  Diary Studies Sample of diary template  Class Discussion In what situation would you recommend the diary and logs approach of evaluation? What are the pros and cons of this means of evaluation?.  Natural Settings Involving Users The goal of field studies is to evaluate products with users in their natural settings. Field studies are used primarily to: o help identify opportunities for new technology o establish the requirements for a new design o facilitate the introduction of technology or inform deployment of existing technology in new contexts Methods that are typically used are observation, interviews, and interaction logging. The data takes the form of events and conversations that are recorded by the researchers as notes, or through audio or video recording, or by the participants as diaries and notes. The goal is to be unobtrusive and not to affect what people do during the evaluation.  Any Settings Not Involving Users The UX researcher has to imagine or model how an interface is likely to be used. This is often done by the researchers or technical team putting themselves in the position of the users and using certain inspection methods. Examples of such methods are: o heuristics eveluation: applies knowledge of typical users guided by rules of thumb and walkthroughs o cognitive walk-through: often make use of hierarchical task analysis to simulate a user’s problem-solving process at each step o analytics and models: is a technique for logging and analyzing data either at a customer’s site or.  Conducting Experiments Hypothesis Testing o Examines a relationship between independent variables (input device) and dependent variables (time completed). o Null hypothesis: no difference o Alternative hyothesis: there is difference Experimental Design o Participants choice: different-participant design, same-participant design, and matched-pairs design. Statistics: t-test mostly used  Selecting and combining methods For some evaluation, two or multiple methods can be combined. o In what situation would you combine multiple methods? o What are the pros and cons of each method?  Case Studies Aim:Evaluate the participants’ engagement while playing an online ice- hockey game. Evaluation Method Used: Experiment in a controlled setting Participants: 10 divided into 2 groups and interchanged (friend vs computer) Data Collected: Physiological using sensors and user’s data using user satisfaction questionnaire  Case Studies Aim:Evaluate Royal Highland Show (RHS) Evaluation Method Used: Ethnographic Studies (Field Observations) and Live Chatbot Participants: 13 participants with diverse background Data Collected: Online responses and in-person interview  Other issues to consider Importance of asking good question to focus on the evaluation How to find suitable participants and, having found them, how to approach them. o Informing participants about their rights o Making sure you take into account biases Choice of evaluation to use, data to be choosen o Reliability: method should produce same/similar results under same condition. High reliability is achieveable under controlled settings but not under natural setting o Validity: does it measure what it intends to do? If a product is targeted towards use in home, then natural setting would provide valid result o Bias: in heuristic evaluation, different designers or expert evaluators may have varying evaluation on certain designs  Discussion When is a person considered vulnerable, and how might this affect them?. Usability Testing Questions to Ask During Usability Testing Questions to Ask During Usability Testing Testing Conditions  Usability Testing Technique used: Observation An Example:Usability testing of iPad Sometimes, prior experience with some technology might be a requirement The iPad is designed for the general public, so the range of users is broad in terms of age and experience with technology. Usability Testing  Usability Testing A baseline for collecting user performance data: o Number of users completing a task successfully o Time to complete a task o Time to complete a task after a specified time away from the product o Number and type of errors per task o Number of errors per unit of time o Number of navigations to online help or manuals o Number of users making a particular error A key concern when doing usability testing is the number of users that should be involved. Typically, the more the better. On average, 10 - 15 users might be a good one.  USABILITY TESTING CHECKLIST Figure out what you’re going to be testing (site, prototype, etc) Create your list of tasks to test Decide what kinds of users you want test with “Advertise” for participants Get feedback on your list of tasks Arrange incentives for participants (e.g., gift or cash) Send “save the date” email inviting teams members and stakeholders to attend Line up a stand-by participant in case of a no-show  PREPARATION Set your recording tools Test audio and camera. Check everything you’ll need to test is on the desired state: o Check logins o Check files availability o Apps Installed  USERS PERFORMING TASK Capture interesting pictures showing users and researchers engagement Ensure all the sessions are recorded (video and audio). Get their consent before recording.  USERS PERFORMING TASK Ask for feedback on specific functionalities/pages of the prototype: o Landing Page o Submit Button o Registration Menu o Various Icons o Flow of the prototype o Search Field….. Usability Testing Scale  Some Recommendation Techniques: Ask users to carry out tasks, use three techniques – walk-through, think-aloud and observation to gather your data Qualitative: After users have finished with the tasks, ask various questions centered on glance testing, task-specific etc. Quantitative: Use Brooke J’s Usability scale. Analysis: Use appropriate statistical analysis techniques to evaluate quantitative and qualitative data gathered.  Brooke J’s Usability Scale https://www.usability.gov/how-to-and- tools/methods/system-usability-scale.html https://measuringu.com/sus/ https://uxpajournal.org/sus-a-retrospective/ Garyperlman.com/quest/quest.cgi?form=USE  Notes on Usability Testing https://qualaroo.com/blog/29-questions-to- ask-users-during-prototype-testing/ https://www.interaction-design.org/literature/article/test- your-prototypes-how-to-gather-feedback-and-maximise- learning  Photo: Gold&Co, Goldankauf Wien, Handel mit Edelmetallen Eight Golden Rules according to Ben Shneiderman 1 Albrecht Schmidt Learning Goals  Know the Golden Rules according to B. Sheiderman  Understand …  The meaning of the Golden Rules  How these Golden Rules help to improve the quality of user interfaces  Be able to …  explain the Golden Rules and give examples  discuss user interface designs with regard to these Golden Rules Eight Golden Rules 2 Albrecht Schmidt Principles for UI-Design By by Ben Shneiderman et al.  Principle 1: Recognize User Diversity  Principle 2: Follow the Eight Golden Rules  Principle 3: Prevent Errors Eight Golden Rules 3 Albrecht Schmidt Principles for UI-Design By by Ben Shneiderman et al.  Principle 1: Recognize User Diversity  Principle 2: Follow the Eight Golden Rules  Principle 3: Prevent Errors Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Diakopoulos, N. (2016). Designing the user interface: strategies for effective human-computer interaction. Pearson. http://www.cs.umd.edu/hcil/DTUI6/ Eight Golden Rules 4 Albrecht Schmidt Follow the 8 Golden Rules* [*we list 9 here, there are different versions] 1. Strive for consistency 2. Seek universal usability 3. Offer informative feedback 4. Design dialogues to yield closure 5. Prevent Errors 6. Permit easy reversal of actions 7. Keep users in control 8. Reduce short-term memory load  Enable frequent users to use shortcuts (was 2.) https://www.cs.umd.edu/~ben/goldenrules.html Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Diakopoulos, N. (2016). Designing the user interface: strategies for effective human-computer interaction. Pearson. http://www.cs.umd.edu/hcil/DTUI6/ Eight Golden Rules 5 Albrecht Schmidt Strive for consistency  “Consistent sequences of actions should be required in similar situations;  identical terminology should be used in prompts, menus, and help screens;  and consistent color, layout, capitalization, fonts, and so on, should be employed throughout.  Exceptions, such as required confirmation of the delete command or no echoing of passwords, should be comprehensible and limited in number” https://www.cs.umd.edu/~ben/goldenrules.html Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Diakopoulos, N. (2016). Designing the user interface: strategies for effective human-computer interaction. Pearson. http://www.cs.umd.edu/hcil/DTUI6/ Eight Golden Rules 6 Albrecht Schmidt Strive for consistency Example: Consistency across applications Eight Golden Rules 7 Albrecht Schmidt Inconsistencies Always strive for consistency?  Dragging file operations?  folder on same disk vs. folder on different disk  file to trash can vs. disk to trash can  Fitts’ Law suggests bigger buttons for more often used operations  Inconsistency across platforms, e.g.  MacOS vs. Windows  Websites on different platforms  Mobile device vs. TV vs. PC  Inconsistency could be used for getting attention  Mock-up example Eight Golden Rules 9 Albrecht Schmidt Seek universal usability … see Principle 1  “Recognize the needs of diverse users and design for plasticity, facilitating transformation of content.  Novice to expert differences,  age ranges, disabilities, international variations,  technological diversity  […] spectrum of requirements that guides design.” https://www.cs.umd.edu/~ben/goldenrules.html Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Diakopoulos, N. (2016). Designing the user interface: strategies for effective human-computer interaction. Pearson. http://www.cs.umd.edu/hcil/DTUI6/ Eight Golden Rules 10 Albrecht Schmidt Offer informative feedback  “For e