HCI 0 5 Merge Lecture Notes (PDF)

Human Computer Interaction (HCI) DM318 Lecture 0: An Introduction Dr. Amira Mohey El-Din Lecture Rules q Cellular phones’ OFF q No side talking q No more than 10 min. delay GRADING POLICY Course Work: Quizzes 10 % Assignment 10 % Presentation 10 % 30% Mid-term Written Exam 30% Final Written Exam 40% HCI - What The term HCI stands for Human-Computer Interaction – During its early years, it was known as the man- machine studies Sometimes the term Computer-Human Interaction (CHI) is also used Working Definition of HCI Definition according to ACM SIGCHI Human-computer interaction is a discipline concerned with the design, implementation and evaluation of interactive computing systems for human use and with the study of major phenomenon surrounding them Nature of the Field HCI is interdisciplinary – No single discipline Next slide shows the various area of studies that contribute to the field HCI: Which Discipline? It is emerging as a special concern within several disciplines, each with different emphasis – Computer Science )application design and engineering of human interfaces ) – Psychology (application of theories of cognitive processes and the empirical analysis of user behavior) Course Objective In this course, we shall learn about the ways to design “good/user-friendly(!!)” interfaces/interaction – Issues to be considered – User-centered design approach – Evaluation methods Course Overview In particular, we shall learn about the following – How interactive systems are designed and evaluated in practice – How to reduce design time and effort through the use of cognitive, system and task models Course Overview In particular, we shall learn about the following – Guidelines and heuristics for interactive system design – How to collect and analyze empirical data to take design decisions – Some case studies and introduction to object oriented programming Why Study HCI Usability of design is often an afterthought, something to be added at the end Management doesn’t understand how good designs are created A good UI is not an inspiration but the result of a process (and lots of hard work) Following UI level guideline is not enough Most programmers believe they are UI experts Most programmers think users are just like themselves Knowing how to use a UI development tool, doesn’t mean you can make a usable interface Good design means profit/efficiency Makes YOU more employable/marketable Usability Books. A Practical Guide to The Psychology Usability Testing by of Human Joe Dumas & Ginny. Computer Redish (1993) Interaction Stuart Card, Thomas Moran & Allen Newell (1983) 3. Usability 2. Handbook of Engineering by Usability Testing by Jakob Nielsen Jeffrey Rubin (1994) (1993)Morgan Kaufman , Academic Press London. Human Computer Interaction (HCI) DM318 Lecture 1: User Interface Design Dr. Amira Mohey El-Din Course Description Psychological principles of user interface design. Evaluation of user interfaces. Usability engineering. Task analysis, user-centered design, and prototyping. Conceptual models and metaphors. Software design rationale. Design of windows, menus, and commands. Voice and natural language I/O. Response time and feedback. Color, icons, and sound. Internationalization and localization. User interface architectures and APIs. Case studies and project. Weekly Plan Week Topic 1 Introduction to User Design Interface 2 Interaction types Lab: basic adobe XD tool 3 Design principles learnability, visibility, errors, Lab: basic adobe XD tools efficiency 4 User Centered Design[User Analysis, task Analysis] Lab: Interview, survey, persona] 5 Information Architecture Card Sorting, User flow 6 Basic UI tasks/Design/Layout Wireframe/Layout 7 Prototyping Types of prototyping 8 Midterm 9 UI Testing Heuristic Evaluation/ Usability, A/B ,Multivariate testing 10 UX Case Study Design Thinking, Design System 11 Design Pattern Project Delivery 12 Revision 14 Final Exam User Interface Design User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. UI/UX User Interfaces – the part of a computer system that interacts with a person, using input and output -- and the property that most concerns us about those user interfaces is usability. Many people take a broader, more holistic approach to thinking about the user and their relationship to not only user interfaces but also to the products and systems and processes that those user interfaces are part of. This field is often called user experience design (often called UX). User Interface Design Usability Usability is about creating effective user interfaces (UIs). Slapping a pretty window interface on a program does not automatically confer usability on it. Why Usability ? Why Usability ? The Example, Redesigned Good / Bad ? Good / Bad ? Good / Bad ? Good / Bad ? Good / Bad ? Good / Bad ? Why UI Design is Hard Most software engineering is about communicating with other programmers who are a lot like you UI is about communicating with users Users are NOT LIKE YOU The user is ALWAYS right Usability problems are the design’s fault Don’t Expect Users to be Designers Telephone handset weight Users said: it’s fine But they really wanted: lighter Number of Google search results Users said: 30 results But they really wanted: 10 Command abbreviations Users make 2x errors with their own custom abbreviations Usability, Defined Usability = how well users can use the system’s functionality Dimensions of usability Learnability (L): is it easy to learn? Efficiency (E): once learned, is it fast to use? Safety (S): are errors few and recoverable? Other dimensions are relevant too Ergonomics: comfort, fatigue Aesthetics: satisfaction, happiness, pleasure But we’ll mostly focus on LES Usability Dimensions Vary In Importance Depends on the user Beginner users need learnability Experts need efficiency But no user is uniformly beginner or expert Depends on the task Missile launchers need safety Usability Is Only One Attribute of a System Software designers have a lot to worry about: Functionality Performance Cost Security Maintainability Usability Size Reliability Standards Marketability Many design decisions involve trade-offs among different attributes We’ll take an extreme position in this class Course Overview What You’ll Learn Design principles learnability, visibility, errors, efficiency, … Design techniques task analysis, prototyping, user testing, … Implementation techniques MVC, output, input, layout, color, typography, … HCI research current and classic papers experiment design & analysis COURSE PROJECT qThe heart of this course is a semester-long project, in which you will design, implement, and evaluate a user interface in Adobe XD. qUser interface design is an iterative process, so you will build your UI not just once, but three times, as successively higher-fidelity and more complete prototypes. qIn order to have time for these iterations, you need to get started on the project as early as possible. qEach project group should consist of 3-4 students. If you need help finding group members qEach team must create behance account in order to upload his case study [https://www.behance.net/] PROJECT PHASES 1. Choosing a Problem & Build team (Create Account) [Week 2] 2. Analysis (User Observation and Analysis) [Week 5 ] 3. Information Architecture (card sorting, user flow) [Week 6] 4. Wireframe Prototype (build basics layouts) [Week 7] 5. Computer Prototype [Week 8] 6. UI Testing (Run the test) [Week 10] Human Computer Interaction (HCI) DM318 User Interface Design Lecture 2 USABILITY Usability is about creating effective user interfaces (UIs). Slapping a pretty window interface on a program does not automatically confer usability on it. USABILITY, DEFINED Usability = how well users can use the system’s functionality Dimensions of usability LES!! Learnability (L): is it easy to learn? Efficiency (E): once learned, is it fast to use? Safety (S): are errors few and recoverable? Other dimensions are relevant too Ergonomics: comfort, fatigue Aesthetics: satisfaction, happiness, pleasure But we’ll mostly focus on LES USABILITY DIMENSIONS VARY IN IMPORTANCE Depends on the user Novice users need learnability Experts need efficiency But no user is uniformly novice or expert Depends on the task Missile launchers need safety 1- LEARNABILITY Learnability considers how easy it is for users to accomplish a task the first time they use the interface and how many repetitions it takes for them to become efficient at that task. Metaphors are one way to make an interface more learnable, since users can make guesses about how it will work based on what they already know about the interface’s metaphor. HOW WE LEARN A NEW USER INTERFACE Learning by Doing User has a goal to achieve “Get rid of the redeye from my photo.” User explores interface for features that satisfy the goal. Seeking Help User resorts to asking help when they get stuck User already has a problem when they arrive, and they’re usually looking for concrete solutions to it TRY IT: Google Autosuggest To FIND LEARNABILITY PROBLEMS Look at the suggested queries for prefixes such as: “photoshop how to” “iphone how to” “android how to” LEARNING BY WATCHING LESSONS FOR DESIGNERS Know the user’s goals when we design User interface should communicate how it works and how to use it Help must be searchable and goal-oriented EXERCISE Think about the Google Glass UI. (Search the web if you haven’t heard of it.) Which of the following learning approaches should its designers focus on? A. learning by reading a manual B. learning by doing C. learning by taking a class D. learning by watching 2- EFFICIENCY As an essential element in usability, efficiency measures the speed and how quick the users can accomplish the tasks once they have become familiarized with the design of an interface. Think of it as the number of keystrokes or clicks it takes a user to complete the task. UI HALL OF FAME OR SHAME? UI HALL OF FAME OR SHAME? HALL OF FAME CHUNKING “Chunk” is a unit of memory or perception Depends both on presentation and on what you already know Working Memory Small: 4 ± 1 “chunks” Short-lived: ~10 sec IMPROVE EFFICIENCY OF OUTPUT Present information in easily-recognized chunks Hard: M W B C R A L O A B I M B F I Easier: MWB / CRA / LOA / BIM / BFI Easiest: BMW / RCA / AOL / IBM / FBI Hard: 9405510200793831994315 Easier: 9405 / 5102 / 0079 / 3831 / 994 / 315 Easiest: klar / fonz / apek / uwer EXERCISE Which of the following sequences fit easily in working memory? (choose all good answers) A. 2012, because it consists of 1 chunk B. 617-253-1000, because it’s presented as 3 chunks C. cghjnswxz, because it’s presented in alphabetical order D. 7893632940, because it’s Justin Bieber’s social security number IMPROVE MOUSE EFFICIENCY Make frequently-used targets big Put targets used together near each other Use screen corners and screen edges Avoid steering tasks When you can’t avoid it, minimize the steering distance. Cascading submenus are much worse when the menu items are long, forcing the mouse to move down a long tunnel before it can reach the submenu. IMPROVE EFFICIENCY SHORTCUTS Keyboard commands Menu accelerators Choose keyboard shortcuts so that they are easily associated with the command in the user’s memory IMPROVE EFFICIENCY HISTORY Offer recently-used or frequently-used choices IMPROVE EFFICIENCY AUTOCOMPLETE Minimize typing with autocomplete Autocomplete doesn’t just help with efficiency. What other usability dimensions does it help? IMPROVE EFFICIENCY AGGREGATION Aggregation is an excellent way to add efficiency to an interface. Think about ways that a user can collect a number of items–data objects, decisions, graphical objects, whatever–and handle them all at once, as a group multiple selection for action multiple drag & drop IMPROVE EFFICIENCY ANTICIPATION Anticipation means that a good design should put all needed information and tools for a particular task within the user’s easy reach. If the task requires a feature from the interface that isn’t immediately available in the current mode, then the user may have to back out of what they’re doing, at a cost to efficiency. EXERCISE Which efficiency techniques are used by this UI? (choose all good answers) A. aggregation B. autocomplete C. history D. pending delete 3- SAFETY UI HALL OF FAME OR SHAME? Doodle (for comparison) ERROR TYPES HUMAN ERROR Error Types Slips and lapses (Typically found in skilled behavior) Failure to correctly execute a procedure Slip is a failure of execution, lapse is a failure of memory like clicking before the mouse pointer is over the button, is a slip. An error in the execution of any learned procedure would be a slip. Forgetting the overall goal, or forgetting where you are in the procedure is Lapse Mistakes Using wrong procedure for the goal Typically found in rule-based behaviour or problem-solving behaviour CAPTURE ERRORS A capture slip occurs when a person starts executing one sequence of actions, but then veers off into another (usually more familiar) sequence that happened to start the same way. Leave your house and find yourself walking to school instead of where you meant to go vi :w command (to save the file) vs. :wq command (to save and quit) Excel array formulas must be entered with Ctrl-Shift-Enter, not just Enter DESCRIPTION ERRORS A description slip occurs when two actions are very similar. The user intends to do one action, but accidentally substitutes the other. Consistency (same) is good for learning Inadvertent similarity (close but not quite) is bad for safety MODE ERRORS Modes: states in which actions have different meanings In user interface design, a mode is a distinct setting within a computer program or any physical machine interface, in which the same user input will produce perceived results different from those that it would in other settings If the user means to type lowercase letters but doesn't notice that Caps Lock is enabled, then a mode error occurs. CAUSES OF SLIPS “Strong-but-wrong” effect Similarity High frequency Inattention or inappropriate attention Speed / accuracy trade-off EXERCISE Which of the following affect the likelihood of slips? (choose all good answers) A. frequency of use B. working quickly C. similarity of choices D. attention elsewhere ERROR PREVENTION Safety from Capture Errors Avoid habitual action sequences with identical prefixes Causes of Slips Avoid actions with very similar descriptions Keep dangerous commands away from common ones SAFETY FROM MODE ERRORS Eliminate modes Increase visibility of mode CONFIRMATION DIALOGS EXERCISE Which of the following are effective ways to reduce mode errors? (choose all good answers) A. combining different modes into one mode B. making a mode last only while the user is holding down a button C. displaying a mode indicator in the window’s statusbar ERROR MESSAGES Writing Error Message Dialogs Best error message is none at all Errors should be prevented Be more flexible and tolerant Nonsense entries can often be ignored without harm BE PRECISE AND COMPREHENSIBLE Be precise Restate user’s input Speak the user’s language SUGGEST REASONS AND SOLUTIONS Give constructive help: why the error occured and how to fix it BE POLITE Be polite and nonblaming AVOID LOADED WORDS Fatal, illegal, aborted, terminated EXERCISE Suppose you’re a UI designer reviewing an error message in order to improve it. Which of the following are good questions to ask? (choose all good answers) A. does it speak the user’s language? B. does it restate the user’s input? C. can this error be prevented entirely? D. is it necessary do display this error message at all? USER CONTROL AND FREEDOM Learning by doing Dealing with errors User is sentiment, computer is not CLEARLY MARKED EXITS Long operations should be cancellable All dialogs should have a cancel button WIZARD VS. CENTER STAGE: WHO’S IN CONTROL? Wizard Center Stage MANUAL OVERRIDES FOR AUTOMATIC SYSTEMS NEVER ASK ME AGAIN USER CONTROL OVER DATA Data entered by the user should be editable by the user UI should give the power to: Create a data item Read it Update it Delete it NO ARBITRARY LIMITS ON USER-DEFINED NAMES LECTURE 3 User-Centered Design TRADITIONAL SOFTWARE ENGINEERING PROCESS: WATERFALL MODEL WATERFALL MODEL IS BAD FOR UI DESIGN User interface design is risky So we’re likely to get it wrong Users are not involved in validation until acceptance testing So we won’t find out until the end UI flaws often cause changes in requirements and design So we have to throw away carefully-written and tested code ITERATIVE DESIGN SPIRAL MODEL HOW TO BECOME A GOOD DESIGNER? A good designer is one that makes as little mistakes as possible. Consequently, producing usable interfaces. § Learn the psychology and physiology of humans. § Learn different perspectives of design § Learn guidelines to avoid flaws in design. § Watch talks about design! USER CENTERED DESIGN (UCD) The standard approach to designing user interfaces is User Centered Design, which has three components. ü Iterative design ü Early focus on users and tasks ü Constant evaluation PRINCIPLES OF UCD ü Focus on Users: Understanding the target audience's characteristics and needs. ü Iterative Design Process: Constantly refining designs based on user feedback. ü User Involvement: Engaging users at various stages of the design process to ensure relevance. UCD PROCESS OVERVIEW Stages: Research: Gather information about users and tasks. Design: Create initial design concepts. Prototyping: Develop representations of the design. Testing: Evaluate designs with users and gather feedback. Iterative Nature: Emphasize that these stages can repeat as needed. USER-CENTERED DESIGN Which is the first step in user-centered design. 1. User analysis: who is the user? 2. Task analysis: what does the user need to do? 3. Domain analysis: what is the context the user works in (the people and things involved)? 4. Requirements analysis: what requirements do the preceding three analyses impose on the design? TECHNIQUES FOR UNDERSTANDING USERS & TASKS Interviews & observation Contextual Inquiry Technique Interviews & observation conducted “in context”, i.e., with real people dealing with the real problem in the real environment Establish a master-apprentice relationship User shows how and talks about it Interviewer watches and asks questions Participatory Design Technique Including a user directly on the design team 1- USER ANALYSIS 1. Who are the users: novices or experts? 2. What are users trying to accomplish? 3. How often will the user be using the system? 4. Should the design emphasize ease of use and learning or efficiency? 5. What information do they need to accomplish their task? 6. How easily can they identify the information they need and the steps needed to accomplish their tasks? 7. Is the information and task structures (the system) accessible to everyone? USER ANALYSIS 1.Ethnographics 4.Knowledge Age, gender, ethnicity Domain experience 2.Skill level Application experience Novice 5.Environment Knowledgeable, intermittent user Noisy, quiet Knowledgeable, frequent user Inside, outside… 3.Mental or Physical abilities 6.Communication patterns CASE STUDY OF USER-CENTERED DESIGN: THE OLYMPIC MESSAGE SYSTEM Cheap prototypes Scenarios User guides Simulation (Wizard of Oz) Prototyping tools (IBM Voice Toolkit) Iterative design 200 (!) iterations for user guide Evaluation at every step You are not the user Non-English speakers had trouble with alphabetic entry on telephone keypad MULTIPLE CLASSES OF USERS Many applications have several kinds of users By role (student, teacher) By characteristics (age, motivation) Example: Olympic Message System Athletes Friends & family Telephone operators Sysadmins PERSONA 2- TASK ANALYSIS § The next step is figuring out what tasks are involved in the problem. § A task should be expressed as a goal: what needs to be done, not how. § One good way to get started on a task analysis is hierarchical decomposition. § Think about the overall problem you’re trying to solve. That’s really the top-level task. Then decompose it into a set of subtasks, or subgoals, that are part of satisfying the overall goal. 2- TASK ANALYSIS Once you’ve identified a list of tasks, fill in the details on each one. Every task in a task analysis should have at least these parts. § The goal is just the name of the task, like “send an email message.” § The preconditions are the conditions that must be satisfied before it’s reasonable or possible to attempt the task. Some preconditions are other tasks in your analysis; e.g., before you can listen to your messages in the Olympic Message System, you first have to log in. § Finally, decompose the task into subtasks, individual steps involved in doing the task. If the subtasks are nontrivial, they can be recursively decomposed in the same manner. 3- DOMAIN ANALYSIS 3- DOMAIN ANALYSIS 3- DOMAIN ANALYSIS TWEETER EXAMPLE Clearly Tweets are an entity. Also Users, and their Accounts. Relationships include Account says Tweet, and Account follows Account 4- REQUIREMENTS ANALYSIS 4- REQUIREMENTS ANALYSIS User, task, and domain analysis feed into a more general process called requirements analysis, which creates a description of the system’s desired functionality and other nonfunctional properties (like performance, security, and capacity). Without user and task analysis, requirements are incomplete. User and task analysis contribute additional functionality (tasks that users need to do which may not be evident from the domain analysis alone) as well as nonfunctional requirements about usability (like how efficient certain tasks should be, or how learnable, or how memorable) and about other properties of the system as well (e.g., accommodation for users’ physical limitations, like impaired vision). For example, here are some of the requirements in the OMS system that might come out of user and task analysis: § Support twelve languages (because athletes, friends & family don’t all speak the same language) § Support non-touchtone phones (because friends & family don’t all have them) § Check Messages task should take less than 30 seconds (because athletes may be pressed for time) EXAMPLE PROBLEM STATEMENT: Many parents want their kids to have fun, but they don’t want to worry about if their child is ok or not. Many kids don’t want to have their parents worry about them, but they don’t want to have to answer the phone or text their parents, either because they're too busy to answer, or simply don't want to talk to them in front of their friends. Parents don't want to interfere so much that their kids are annoyed by them, but this happens all too often when parents call frequently asking where their child is and what they are up to. If the child is a teenager, those caring but incessant calls can cause an emotional rift between the child and the parents-- something that neither party wants, but nothing technologically exists to ease the transition. Parents need to have that feeling of security; children need to have that feeling of independence. CheckIn gives the parents security and the kids safe independence. With CheckIn, a kid can tell their parents they’re ok and tell them where they are simply, efficiently, and without interfering with their current activity. Parents need to be able to set dates and times for reminders and view a log of all of the places where their children have checked in. CheckIn makes it easy for parents and their children to get along. ANALYSIS User Analysis We have two classes of users: parents and their children. While it will be possible for anyone who needs to easily check in with someone else to use our system, we will focus on these two user groups. CHARACTERISTICS Parent characteristics: Child characteristics: Ages: any parent age Ages: 11 (whenever they are old enough for a smartphone) through 22 (college-aged), Education: Literate with application focus on high schoolers Language: English Education: Literate Technological experience: Low to Medium - Language: English owns a computer and/or smartphone and can use websites on either Technological experience: High - owns and can easily use a smartphone Motivation: wants to be informed about children’s safety and/or activities Motivation: Have parents be satisfied with information about their activities Attitude: High - safety of children is something that is a #1 priority Attitude: Varies, probably Medium - may not consider parents’ motivation important or have high desire to use application in depth PERSONAS Parent: Marge Marge is a hard-working mom who cares a lot about her children. She wants them to be safe, but she also wants them to have fun. Right now, her children are in that difficult stage where they are trying to declare independence, but are dependent on their parents for at least a few more years. One of the side-effects of this stage is that her children have stopped seeing her as “cool”, and try to reduce the amount of communication between them. Whenever Bart is out, she wants to make sure that he’s safe, since he’s able to drive now and he’s already been in a couple of accidents, and if he’s ever in trouble or needs help, that he won’t hesitate to ask. But, whenever she tries to call him now, he simply ignores her calls. She even learned how to text, but that was to no avail -- he won’t answer her texts unless it involves something he wants. Lisa is slightly easier to deal with, but Marge still feels that tension between them every time she checks up with her while she’s out. She wants to know that they are safe, but she doesn’t want to annoy them. PERSONAS Children: Lisa and Bart Lisa is a conscientious fourteen year old who doesn’t want her parents to worry about her, but has a really busy, active after-school schedule, and doesn’t always have time to stop what she’s doing and call them. She is fine with letting Marge know where she is, what she is doing, and who she’s with (though Marge doesn’t care about knowing this, she knows Lisa wouldn’t be doing anything wrong), but doesn’t want to have to leave her club meetings to make a private call. She is also forgetful, having so many things to do, and often won’t check in with her parents unless reminded. Sometimes her activities run late and she misses her bus, so she needs a ride home. Bart is a seventeen year old who has recently gotten his driver’s license and stays out late partying and drinking with his friends. He would never call Marge in front of his friends, and doesn’t think that what he’s doing is any cause for concern; he’s never gone to the hospital, but he has smashed his car a few times (he was fine in both cases). He is really annoyed by what he sees as constant nagging from Marge, and he thinks that she’s going over the top by checking up with him so often. He wants to have fun with his friends, not talk to his mom, since that’s not cool. He wants to do as little as possible to make his mom not ground him. INTERVIEW RESULTS §Several feature requests were made during the interviews. Some parents with more difficult children like the Bart persona above would like automatic tracking, but children would most likely never go for that. For younger children, this may be ok. Some parents want to be able to set the reminder frequency for a check-in, or be able to instantaneously send a check-in request. §Parents also want to be able to know exactly when a response has come in. Parents would also like a “help message” (e.g. pick me up, I’m not okay, call me) that the children could send to the parents, which would send a phone call with a pre-recorded message asking them to check their CheckIn app (however, we would hope that the kid would call the police if he or she were in a real emergency). INTERVIEW RESULTS §Parents also want the option to get more information from their children. Parents would like to know things such as who the child is with, what the child is doing, and about when the the child will be home. To that effect, parents would like the option to create a form to send to the child so the child can answer these things. §A teenager we interviewed would like a very fast interface, and the option to ignore all optional information that their parents might want but don’t need. However they would like space to be able to give a reason for not calling or checking in as well. Ideally they would also like to be able to check in later, though this conflicts with the parent’s ideal. If both their parents had the application, they would like the opportunity to check in with just one of them. TASK ANALYSIS Parents and children will have different tasks to perform in dealing with this problem. Parent Tasks Parents want their children to check in with them, without having to call them. To get their children to do this, they must: üAsk their child to check in In fact, parents often want their children to check in on a regular basis, for example, every day after school, or every Friday and Saturday night by 11pm. They would also want to be able to ask their child to check in and then not think about it for awhile - e.g. tell the child every time they want a check in for all of tomorrow. Therefore this task of asking their child to check in would be related to another task that they would want to be able to do: üSet future and/or regular check-in times for their children TASK ANALYSIS If parents have to compromise with their children to agree to not do this via a phone call, they want to make sure they still get enough information from their children, e.g. who their child is with. Therefore another task they need to do is: üRequest specific information from their child upon check-in Once the child checks in, the parent needs a way to obtain the check-in information. Therefore another task for them is: üView check-in (and maybe old check-ins) (though this does not need to be a “viewing” action necessarily) TASK ANALYSIS Child Tasks Children need to answer their parents every time their parents want information from them. Therefore the child’s main task is: üRespond to a parent’s request for check-in Children might also need help but still not want to call their parents. For this, they would have to ask: üRequest parent’s help, or a phone call from the parent, without having to call their parents ACTIVITY -ASSIGNMENT Problem Statement 1. People who cook regularly often know what types of meals they want to cook but have trouble planning what ingredients they need to purchase. They either buy too much or too little, and/or make too many grocery trips due to forgetting certain ingredients. 2. Student/ Faculty Staff need to know faculty news not the traditional home page. They need simple faculty dashboard. Interaction Styles LECTURE 4 THE COMPUTER A computer system is made up of various elements Each of these elements affects the interaction input devices – text entry and pointing output devices – screen (small&large), digital paper virtual reality – special interaction and display devices physical interaction – e.g. sound, haptic, bio-sensing paper – as output (print) and input (scan) memory – RAM & permanent media, capacity & access processing – speed of processing, networks INTERACTING WITH COMPUTERS to understand human–computer interaction … need to understand computers! what goes in and out devices, paper, sensors, etc. what can it do? memory, processing, networks A ‘TYPICAL’ COMPUTER SYSTEM ? window 1 screen, or monitor, on which there are windows window 2 keyboard mouse/trackpad 12-37pm the devices dictate the styles of interaction that the system supports If we use different devices, then the interface will support a different style of interaction in your house? in your pockets? Keyboards phone pads TEXT ENTRY DEVICES handwriting, speech TEXT ENTRY DEVICES Keyboards Most common text input device Handwriting recognition Text can be input into the computer, using a pen and a digesting tablet Speech recognition- Improving rapidly Most successful when: 1 2 3 7 8 9 single user – initial training and learns peculiarities 4 5 6 4 5 6 limited vocabulary systems 7 8 9 1 2 3 Numeric keypads 0 # 0. = for entering numbers quickly: calculator, PC keyboard * for telephones ,ATM like phone telephone calculator mouse, touchpad trackballs, joysticks etc. POSITIONING, POINTING AND DRAWING touch screens, tablets eyegaze, cursors THE MOUSE Handheld pointing device (very common, easy to use, requires physical space) Two characteristics planar movement Buttons (usually from 1 to 3 buttons ) Two methods for detecting motion Mechanical using Ball (Rotates orthogonal potentiometers) Optical (light ) Even by foot … some experiments with the footmouse controlling mouse movement with feet …,not very common POSITIONING, POINTING AND DRAWING Touchpad Trackball and thumbwheels small touch sensitive tablets Trackball ball is rotated inside static housing like an upsdie down mouse! ‘stroke’ to move mouse pointer relative motion moves cursor indirect device, fairly accurate used mainly in laptop computers separate buttons for picking very fast for gaming used in some portable and notebook computers. §small touch sensitive tablets §used mainly in laptop computers Thumbwheels … for accurate CAD – two dials for X-Y cursor position for fast scrolling – single dial on mouse POSITIONING, POINTING AND DRAWING Joystick Touch-sensitive screen Joystick Detect the presence of finger or stylus on the screen. often used for computer games works by interrupting matrix of light beams, aircraft controls and 3D navigation capacitance changes or ultrasonic reflections direct pointing device Advantages: fast, and requires no specialised pointer good for menu selection suitable for use in hostile environment: clean and safe from damage. Disadvantages: finger can mark screen difficult to select small regions or perform accurate drawing POSITIONING, POINTING AND DRAWING Stylus and light pen Stylus small pen-like pointer to draw directly on screen may use touch sensitive surface or magnetic detection used in PDA, tablets PCs and drawing tables Light Pen now rarely used uses light from screen to detect location BOTH … very direct and obvious to use but can obscure screen POSITIONING, POINTING AND DRAWING Eyegaze Cursor keys Four keys (up, down, left, right) on keyboard. control interface by eye gaze direction e.g. look at a menu item to select it Very, very cheap, but slow. uses laser beam reflected off retina Useful for not much more than basic motion for … a very low power laser! text-editing tasks. mainly used for evaluation (ch x) No standardised layout, but inverted “T”, most potential for hands-free control common high accuracy requires headset cheaper and lower accuracy devices available sit under the screen like a small webcam DISCRETE POSITIONING CONTROLS In phones, TV controls etc. cursor pads or mini-joysticks discrete left-right, up-down mainly for menu selection bitmap screens (CRT & LCD) large & situated DISPLAY DEVICES displays digital paper RESOLUTION AND COLOUR DEPTH Resolution … used (inconsistently) for number of pixels on screen (width x height) e.g. SVGA 1024 x 768, PDA perhaps 240x400 density of pixels (in pixels or dots per inch - dpi) typically between 72 and 96 dpi Aspect ratio ration between width and height 4:3 for most screens, 16:9 for wide-screen TV Colour depth: how many different colours for each pixel? black/white or greys only 256 from a pallete 8 bits each for red/green/blue = millions of colours HEALTH HAZARDS OF CRT ! Health hints … do not sit too close to the screen do not use very small fonts do not look at the screen for long periods without a break do not place the screen directly in front of a bright window work in well-lit surroundings DISPLAY Liquid crystal displays large displays Smaller, lighter, and … no radiation problems. used for meetings, lectures, etc. Found on PDAs, portables and notebooks, … and increasingly on desktop and even technology for home TV plasma – usually wide screen also used in dedicted displays: video walls – lots of small screens digital watches, mobile phones together How it works … projected– RGB lights or LCD projector Top plate transparent and polarised, bottom plate reflecting. – hand/body obscures screen Light passes through top plate and crystal, and reflects back to eye. – may be solved by 2 projectors + clever Voltage applied to crystal changes polarisation and hence software colour back-projected N.B. light reflected not emitted => less eye strain – frosted glass + projector behind HERMES A SITUATED DISPLAY small displays beside office doors handwritten notes left using stylus office owner reads notes using web interface small displays beside office doors office owner handwritten reads notes notes left using web interface using stylus sound, touch, feel, smell PHYSICAL CONTROLS, SENSORS ETC. physical controls environmental and bio- sensing SOUND, TOUCH, FEEL, SMELL Sounds Touch, feel, smell q beeps, bongs, clonks, whistles and touch and feeling important whirrs in games … vibration, force feedback in simulation … feel of surgical instruments q Used for error indications called haptic devices q Confirmation of actions e.g. key click texture, smell, taste current technology very limited PHYSICAL CONTROLS specialist controls needed … industrial controls, consumer products, etc. easy-clean smooth buttons multi-function control large buttons clear dials tiny buttons ENVIRONMENT AND BIO-SENSING sensors all around us car courtesy light – small switch on door ultrasound detectors – security, washbasins RFID security tags in shops temperature, weight, location … and even our own bodies … iris scanners, body temperature, heart rate, galvanic skin response, blink rate SENSORS 1. Gesture Recognition Sensors 2. Wearable Health Sensors 3. Environmental Sensors 4. Biometric Sensors 5. Smart Surface Technology 6. Advanced Proximity Sensors 7. Haptic Feedback Devices 8. Smart Agricultural Sensors 9. Voice and Sound Sensors short term and long term MEMORY speed, capacity, compression formats, access SHORT-TERM MEMORY - RAM Random access memory (RAM) on silicon chips 100 nano-second access time usually volatile (lose information if power turned off) data transferred at around 100 Mbytes/sec Some non-volatile RAM used to store basic set-up information Typical desktop computers: 64 to 256 Mbytes RAM LONG-TERM MEMORY - DISKS magnetic disks floppy disks store around 1.4 Mbytes hard disks typically 40 Gbytes to 100s of Gbytes access time ~10ms, transfer rate 100kbytes/s optical disks use lasers to read and sometimes write more robust that magnetic media CD-ROM - same technology as home audio, ~ 600 Gbytes DVD - for AV applications, or very large files BLURRING BOUNDARIES PDAs often use RAM for their main memory Flash-Memory used in PDAs, cameras etc. silicon based but persistent plug-in USB devices for data transfer SPEED AND CAPACITY what do the numbers mean? some sizes (all uncompressed) … this book, text only ~ 320,000 words, 2Mb the Bible ~ 4.5 Mbytes scanned page ~ 128 Mbytes (11x8 inches, 1200 dpi, 8bit greyscale) digital photo ~ 10 Mbytes (2–4 mega pixels, 24 bit colour) video ~ 10 Mbytes per second (512x512, 12 bit colour, 25 frames per sec) VIRTUAL MEMORY Problem: running lots of programs + each program large not enough RAM Solution - Virtual memory : store some programs temporarily on disk makes RAM appear bigger But … swopping program on disk needs to run again copied from disk to RAM slows t h i n g s d o w n COMPRESSION Reduce amount of storage required lossless recover exact text or image – e.g. GIF, ZIP look for commonalities: text: AAAAAAAAAABBBBBCCCCCCCC 10A5B8C video: compare successive frames and store change lossy recover something like original – e.g. JPEG, MP3 exploit perception JPEG: lose rapid changes and some colour MP3: reduce accuracy of drowned out notes STORAGE FORMATS - MEDIA Images: many storage formats : (PostScript, GIFF, JPEG, TIFF, PICT, etc.) plus different compression techniques (to reduce their storage requirements) Audio/Video again lots of formats : (QuickTime, MPEG, WAV, etc.) compression even more important also ‘streaming’ formats for network delivery PROJECT IDEA: "MOOD-BASED RECIPE GENERATOR" Create an app that generates personalized recipes based on the user's current mood and available ingredients. The UI should adapt to different interaction styles to enhance user engagement and experience. dialogue … computer and user INTERACTION STYLES distinct styles of interaction OVERVIEW Interface Types Highlight the main design and research issues for each of the different interfaces Consider which interface is best for a given application or activity 35 SECOND LIFE COMMAND-BASED INTERFACE FOR VISUALLY IMPAIRED USERS 1. COMMAND-BASED q Commands such as abbreviations (e.g. ls) typed in at the prompt to which the system responds (e.g. listing current files) q Some are hard wired at keyboard, others can be assigned to keys q Efficient, precise, and fast q Large overhead to learning set of commands q Consistency is most important design principle e.g. always use first letter of command Command interfaces popular for web scripting 36 2. GUI Windows could be scrolled, stretched, overlapped, opened, closed, and moved around the screen using the mouse. Icons represented applications, objects, commands, and tools that were opened when clicked on. Menus offering lists of options that could be scrolled through and selected. Pointing device a mouse controlling the cursor as a point of entry to the windows, menus, and icons on the screen 37 WINDOWS q Windows were invented to overcome physical constraints of a computer display qenable more information to be viewed and tasks to be performed q Scroll bars within windows also enable more information to be viewed q Multiple windows can make it difficult to find desired one q listing, iconising, shrinking are techniques that help Window Management Enables users to move fluidly between different windows (and monitors) How to switch attention between windows without getting distracted Design principles of spacing, grouping, and simplicity should be used 38 APPLEʼS SHRINKING WINDOWS WWW.ID-BOOK.COM 39 SAFARI PANORAMA WINDOW VIEW WWW.ID-BOOK.COM 40 SELECTING A COUNTRY FROM A SCROLLING WINDOW WWW.ID-BOOK.COM 41 IS THIS METHOD ANY BETTER? WWW.ID-BOOK.COM 42 MENUS A number of menu interface styles flat lists, drop-down, pop-up, contextual, and expanding ones, e.g., scrolling and cascading Flat menus good at displaying a small number of options at the same time and where the size of the display is small, e.g. iPods but have to nest the lists of options within each other, requiring several steps to get to the list with the desired option moving through previous screens can be tedious What are best names/labels/phrases to use? Placement in list is critical Quit and save need to be far apart Choice of menu to use determined by application and type of system flat menus are best for displaying a small number of options at one time. expanding menus are good for showing a large number of options. 43 EXPANDING MENUS § Enables more options to be shown on a single screen than is possible with a single flat menu § More flexible navigation, allowing for selection of options to be done in the same window § Most popular are cascading ones primary, secondary and even tertiary menus downside is that they require precise mouse control can result in overshooting or selecting wrong options WWW.ID-BOOK.COM 44 CONTEXTUAL MENUS § Provide access to often-used commands that make sense in the context of a current task § Appear when the user presses the Control key while clicking on an interface element e.g., clicking on a photo in a website together with holding down the Control key results in options ʻopen it in a new window,ʼ ʻsave it,ʼ or ʻcopy itʼ Helps overcome some of the navigation problems associated with cascading menus 45 ICON DESIGN § Icons are assumed to be easier to learn and remember than commands § Can be designed to be compact and variably positioned on a screen § Now pervasive in every interface e.g. represent desktop objects, tools (e.g. paintbrush), applications (e.g. web browser), and operations (e.g. cut, paste, next, accept, change) § Since the Xerox Star days icons have changed in their look and feel: black and white -> color, shadowing, photorealistic images, 3D rendering, and animation § Many designed to be very detailed and animated making them both visually attractive and informative § GUIs now highly inviting, emotionally appealing, and feel alive 46 ICON FORMS The mapping between the representation and underlying referent can be: similar (e.g., a picture of a file to represent the object file) analogical (e.g., a picture of a pair of scissors to represent ʻcut) arbitrary (e.g., the use of an X to represent ʻdelete’) Most effective icons are similar ones Many operations are actions making it more difficult to represent them use a combination of objects and symbols that capture the salient part of an action There is a wealth of resources now so do not have to draw or invent new icons from scratch guidelines, style guides, icon builders, libraries Text labels can be used alongside icons to help identification for small icon sets For large icon sets (e.g. photo editing or word processing) use rollovers WWW.ID-BOOK.COM 47 SIMPLE FLAT 2D ICONS WWW.ID-BOOK.COM 48 ACTIVITY- ASSIGNMENT Problem 1: Sketch simple icons to represent the following operations to appear on a digital camera screen: Turn image 90 degrees sideways Auto-enhance the image Fix red-eye Crop the image Problem 2: Design simple calculator application for kids, use icons to represent the following basic operations and add gender change option change. WWW.ID-BOOK.COM 49 3. MULTIMEDIA Combines different media within a single interface with various forms of interactivity graphics, text, video, sound, and animations Users click on links in an image or text -> another part of the program -> an animation or a video clip is played ->can return to where they were or move on to another place Facilitates rapid access to multiple representations of information Can provide better ways of presenting information than can any media alone Can enable easier learning, better understanding, more engagement, and more pleasure Can encourage users to explore different parts of a game or story Tendency to play video clips and animations, while skimming through accompanying text or diagrams 50 DASHBOARDS § Show screenshots of data updated over periods of time - to be read at a glance § Usually not interactive - slices of data that depict current state of a system or process § Need to provide digestible and legible information for users § design its spatial layout so intuitive to read when first looking at it § should also direct a user’s attention to anomalies or unexpected deviations 51 ACTIVITY- ASSIGNMENT Problem 3 : Sketch and the Design simple dashboard for your faculty news.Showing answers for question in previous slide. WWW.ID-BOOK.COM 52 MOBILE Handheld devices intended to be used while on the move Have become pervasive, increasingly used in all aspects of everyday and working life Apps running on mobiles have greatly expanded, e.g. used in restaurants to take orders car rentals to check in car returns supermarkets for checking stock in education to support life-long learning Mobile interfaces can be tricky and cumbersome to use for those with poor manual dexterity or ʻfatʼ fingers Key concern is hit area area on the phone display that the user touches to make something happen, such as a key, an icon, a button or an app space needs to be big enough for fat fingers to accurately press if too small the user may accidentally press the wrong key 53 SPEECH § Where a person talks with a system that has a spoken language application, e.g. timetable, travel planner § Used most for inquiring about very specific information § e.g. flight times or to perform a transaction, e.g. buy a ticket § Also used by people with disabilities e.g. speech recognition word processors, page scanners, web readers, home control systems 54 ACTIVITY- ASSIGNMENT Problem 4 : Design simple Chabot to help student for registration. Showing answers for question in previous slide.(simple question tree) 55 AIR-BASED GESTURES Uses camera recognition, sensor and computer vision techniques can recognize peopleʼs body, arm and hand gestures in a room systems include Kinect Movements are mapped onto a variety of gaming motions, such as swinging, bowling, hitting and punching Players represented on the screen as avatars doing same actions How does computer recognize and delineate user’s gestures? Deictic and hand waving 56 BRAIN-COMPUTER INTERFACES § Brain–computer interfaces (BCI) provide a communication pathway between a personʼs brain waves and an external device, such as a cursor on a screen § Person is trained to concentrate on the task, e.g. moving the cursor § BCIs work through detecting changes in the neural functioning in the brain. § BCIs apps: Games enable people who are paralysed to control robots 57 WHICH INTERFACE? Is multimedia better than tangible interfaces for learning? Is speech as effective as a command-based interface? Is a multimodal interface more effective than a monomodal interface? Will wearable interfaces be better than mobile interfaces for helping people find information in foreign cities? Are virtual environments the ultimate interface for playing games? Will shareable interfaces be better at supporting communication and collaboration compared with using networked desktop PCs? 58 WHICH INTERFACE? Will depend on task, users, context, cost, robustness, etc. Mobile platforms taking over from PCs Speech interfaces also being used much more for a variety of commercial services Appliance and vehicle interfaces becoming more important Shareable and tangible interfaces entering our homes, schools, public places, and workplaces 59 COMPARISON OF INTERACTION STYLES Knowledge in the head vs. world Error messages Efficiency User Experience Synchrony Programming difficulty Accessibility finite speed (but also Moore’s law) PROCESSING AND NETWORKS limits of interaction networked computing LIMITATIONS ON INTERACTIVE PERFORMANCE Designers tend to assume fast processors, and make interfaces more and more complicated. But problems occur, because processing cannot keep up with all the tasks it needs to do. Also problems if system is too fast - e.g. help screens may scroll through text much too rapidly to be read Computation bound Computation takes ages, causing frustration for the user Storage channel bound Bottleneck in transference of data from disk to memory Graphics bound Common bottleneck: updating displays requires a lot of effort - sometimes helped by adding a graphics co- processor optimised to take on the burden Network capacity Many computers networked - shared resources and files, access to printers etc. - but interactive performance can be reduced by slow network speed Human Computer Interaction (HCI) DM318 Lecture 5: Interaction Design prototyping Content What is a prototype? Why prototype? Different kinds of prototyping low fidelity high fidelity Prototyping A prototype is essentially a model of the system – The prototype (model) can have limited or full range of functionalities of the proposed system A widely used technique in engineering where novel products are tested by testing a prototype Prototyping Prototypes can be “throw away” (e.g., scale models which are thrown away after they serve their purpose) or can go into commercial use In software development prototypes can be – Paper-based: likely to be thrown away after use – Software-based: can support few or all functionalities of the proposed system. May develop into full-scale final product What is a prototype? A prototype is one manifestation of a design that allows stakeholders to interact with it and to explore its suitability. In interaction design it can be (among other things): a series of screen sketches a storyboard, i.e. a cartoon-like series of scenes a PowerPoint slide show a video simulating the use of a system a lump of wood (e.g. PalmPilot) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language Why prototype? Evaluation and feedback are central to interaction design Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing Team members can communicate effectively You can test out ideas for yourself It encourages reflection: very important aspect of design Prototypes answer questions, and support designers in choosing between alternatives Prototyping in HCI Essential element in user centered design – Is an experimental and partial design – Helps involving users in testing design ideas without implementing a full-scale system Typically done very early in the design process – Can be used throughout the design life cycle Paper prototyping q Main idea: ̶ Sketch out prototypes of the interface on paper ̶ Potential users “walk through” task scenarios using the paper interface ̶ A designer “plays computer” ̶ Change the design on-the-fly if helpful The Materials q Large, heavy, white paper (11 x 17) q 5x8 in. index cards q Post-it notes q Tape, stick glue, correction tape q Pens & markers (many colors & sizes) q Transparencies (including colored) q Colorforms (toy stores) q Scissors, X-acto knives, etc. Prototypes in HCI In HCI, prototypes take many forms: – A storyboard (cartoon-like series of screen sketches) – A power point slide slow – A video simulating the use of a system – A cardboard mock-up – A piece of software with limited functionality – Even a lump of wood Evaluating Your Design Early on & Cheaply Evaluating Your Design Early on & Cheaply Users knows best what they need let them show you! Steps: 1) Build a prototype 2) Evaluate with users Prototyping: types? Types: 1- Low-Fidelity Prototyping 2- High-Fidelity Prototyping Low-Fidelity Prototyping: q Story boarding q Sketching q Index card q Wizard of OZ Low-Fidelity Prototyping: 1- Story boarding Series of sketches showing how a user might interact with the technology or progress through a task Often used with a scenario to bring in more detail and context Pros § Simple to design by yourself § Makes you think through the process of how something will be used and identify needed features § Useful for communicating ideas Cons § Rough sketches, not everything can go in § Limited in scope, impractical to use on a whole project Low-Fidelity Prototyping: 2- Sketching Sketching is important to low-fidelity prototyping Don’t be inhibited about drawing ability. Practice simple symbols Sketching is not about drawing rather, it is about design Do not put much details. Low-Fidelity Prototyping: 3- Index card Each card/sticky represents an element of a task, one screen or a screen element Used in user evaluations where a member of the design team “plays the computer” Difficulties encountered are observed and/or recorded Low-fidelity prototyping Small pieces of cardboard and often when developing websites Ex: login page Low-Fidelity Prototyping: 4- Wizard of OZ The Wizard of Oz method is a process that allows a user to interact with an interface without knowing that the responses are being generated by a human operator rather than a computer by having someone behind-the-scenes who is pulling the levers and flipping the switches. WOZ prototyping is a design methodology used in rapid product development to improve the user experience (UX). Low-Fidelity Prototyping Advantages Lower cost Evaluate multiple design concepts Useful communication device Disadvantages Limited error/usability checking Facilitator driven Navigational and flow limitations High-Fidelity Prototyping Prototype look like the final product, provide more functionality than low-Fidelity Prototyping High-fidelity (hi-fi) prototypes appear and function as similar as possible to the actual product that will ship. Teams usually create high-fidelity prototypes when they have a solid understanding of what they are going to build and they need to either test it with real users or get final-design approval from stakeholders. Example: Visual Basic mock interface Screenshot High-Fidelity Prototyping Characteristics: Visual design: Realistic and detailed design all interface elements, spacing, and graphics look just like a real app or website. Content: Designers use real or similar-to-real content. The prototype includes most or all of the content that will appear in the final design. Interactivity: Prototypes are highly realistic in their interactions. High-Fidelity Prototyping Pros Meaningful feedback during usability testing. Testability of specific UI elements or interactions. Easy buy-in from clients and stakeholders. Cons Higher costs, Creating high-fidelity prototypes implies higher costs, both temporal and financial. Developer & designer may be in rush and uses some of the prototype in the final project SITU Example https://www.kickstarter.com/projects/situ/situ-smart-food-nutrition-scale Prototype Testing: Roles 3 Roles + User Computer: managing the UI Changes Facilitator: talks to and discusses with the user Observer: note taking (+ photos/videos/…) User (average dude) : conduct tasks, comment on GUI Roles for Design Team Computer Simulates prototype Doesn’t give any feedback that the computer wouldn’t Facilitator Presents interface and tasks to the user Encourages user to “think aloud” by asking questions Keeps user test from getting off track Observer Keeps mouth shut, sits on hands if necessary Takes copious notes Prototype Testing: Script 1. Facilitator explains general context and introduces the user to the system 2. Facilitator asks user to conduct tasks 3. Facilitator assesses with user the system 4. Facilitator presents questionnaires (if any) Prototype Testing: What to look for? Functionality Is it understandable? Does it make sense? Missing features? Navigation & Task Flow Is the user able to find her way? Are your assumptions right? Terminology Content Prototype and Final Product Evolutionary Prototyping Throwaway Prototyping A prototype evolves into Uses the Prototypes as the final product. shopping stores towards Prototypes should be the final design. subjected to rigorous Testing is not necessary testing along away as we trash the A single prototype is prototype refined and altered after testing, iteratively, which ultimately “evolve” to the final product EXAMPLE PAPER PROTOTYPING CHECK-IN Briefing Parents often want to know where their kids are, and kids don’t want to have their parents worry, but kids can’t always answer the phone to verbally communicate to their parents where they are (sometimes, they don’t want to). This often creates tension between the kids and the parents. Our app aims to solve this problem by having the parents’ peace of mind be only a click away. There are two applications: one for the parent, and one for the child. For the first portion of the evaluation, you will be a high school student (Bart) using our app to communicate with a parent. For the second portion, you will be Bart's mother, Marge. There will be a clear break when we switch interfaces for us to ask questions and you to provide any feedback you have on the child interface. Remember, we are testing the interface, not you! Anything that you are unable to do is our interface failing, and has no reflection on your abilities whatsoever. SCENARIO TASKS We have two big user classes for our application, parents and children. We tested each user in both roles. On Day 1 we had them all be parents first, and on Day 2, children first. These were the tasks we used on Day 2; on Day 1 they were a little less comprehensive and less clear. Parent Tasks You are a parent, and your name is Marge. Task 1: You expect Lisa to be home now, but she isn’t here. Please ask Lisa to check in now. Task 2: You want to know where Lisa was when she last checked in. Please view the details of Lisa’s latest CheckIn and tell us where she was last. Task 3: You know Bart is out at a party. Please ask him to check in later today at 10pm and ask him which friends he is with, so you’ll know he’s ok before you go to bed. Task 4: Lisa just joined a soccer team, and so she’ll be getting in late many days because of practice. Please schedule a CheckIn every Tuesday at 6pm for Lisa. CHILD TASKS You are a child, and your name is Bart. Task 1: You are using your phone when suddenly you get a message from the app. Your goal is to let your parents know that you are ok by replying to their CheckIn request. Task 2: Later this afternoon, you want to check when your next CheckIn request is. It is now 4:45 on Friday. When is your next CheckIn? Task 3: You realize that your next CheckIn is within 15 minutes, so you decide to CheckIn now so you do not need to worry about it later. Task 4: Tonight, you are at a party. You receive another request to CheckIn and decide to do so. Task 5: The party you are at starts to get crazy, and you would like to leave. Please request a ride. PROTOTYPE ITERATION We made changes to our prototype both between the rounds and within the rounds, between users, when there was something confusing that we could easily fix. Here is a list of our changes, and when they occurred: Parent (after Day 1 User 1) New task added: schedule a repeated check-in, for every Tuesday. Added default time (now) to “Edit CheckIn” screen. Changed the navigation buttons from “Next” to “More Options” and “Previous” to “Back.” (after Day 1 User 2) Removed “now” from “Request Check-in Now” button on parent’s screen (between Day 1 and Day 2) Removed “settings” from “Scheduled Check-in Settings” button on parent’s screen. Showed specific date grayed out if “repeat” was selected while editing a check-in request. (after Day 2 User 1) Changed “Scheduled Check-ins” to “Edit Check-ins” on button on parent’s screen Child (after Day 1 User 1) When a CheckIn popup occurs and the parent has not requested any additional information for that CheckIn, clicking CheckIn now completes the action. Previously, the user had to go to a different screen and submit the CheckIn from there. (between Day 1 and Day 2) Changed the child’s “schedule” of checkins to a list of upcoming checkins divided by date (as displayed in the phototype photo). Previously it displayed upcomming checkins by indicating when they would be repeated. (between Day 1 and Day 2) Changed child tasks to final versions found here, which are more comprehensive and PROTOTYPE PHOTOS These photos were taken at the end of Day 2. Parent Application Home page for parent Marge PROTOTYPE PHOTOS Creating a new CheckIn for child Bart PROTOTYPE PHOTOS Creating a new CheckIn for child Bart with repeat events PROTOTYPE PHOTOS Adding more options to child Bart's Check-in PROTOTYPE PHOTOS Viewing scheduled Check-ins for child Lisa PROTOTYPE PHOTOS Viewing last CheckIn information for child Lisa CHILD APPLICATION Pop-up on home screen on phone for child CHILD APPLICATION Home page in application for child Bart USER OBSERVATIONS AND FEEDBACK DAY 1 USER 1 OBSERVATIONS: Here are our observations of each user. We also asked each user for feedback after they played each user role, and allowed them to give feedback as they were doing the tasks. Parent Was confused about whether she had to set the time, since there was no default time. Instead of clicking “Scheduled CheckIn Settings,” the user clicked “Check In Now,” even though the task was to set up a scheduled CheckIn (the task could be accomplished from either screen, but this was not the intended screen) Child All tasks completed easily. Feedback: Parent Thought having a date after “Starts On:” and a date in the “New CheckIn” screen to be confusing. Thought the wording of the navigation button “Next” and “Previous” to be confusing. Child The “Check In Now” button on the pop-up on the phone’s home screen should submit the CheckIn without any further prompting if no more information is required. DAY 1 USER 2 OBSERVATIONS: Parent Like the first user, this user clicked “Check In Now” to schedule a CheckIn later instead of clicking “Scheduled CheckIn Settings” Did not understand how to make a CheckIn repeat, and thought that he might have to click all of the Tuesdays on the calendar pop-up. Upon prompting (“What other buttons do you see on the screen?”) he noticed the “Repeat” button near the bottom, clicked it, and completed the task. Child All tasks completed easily. Feedback: Parent Said that the wording for the “Request CheckIn Now” button is ambiguous. Did not like the use of “Settings” in “Scheduled CheckIn Settings,” since “Settings” sounds like editing lower-level features (managing accounts, changing background color, etc.), instead of the higher-level features (creating a CheckIn) Child The “Request a Ride” button does not seem to give much information about its actions (What does it actually do? The child has no information about this.). Didn’t think the schedule of times on the home page of the application was nearly as useful as putting upcoming CheckIns there. DAY 2 USER 3 OBSERVATIONS: Child Surprised that different check-ins ask for different information Unhappy at having no choice about submitting location Parent Upon realizing that this had a different UI, expressed the desire to be able to see the child’s UI as well, i.e. be able to see exactly how they have to/can enter information (suggested that during edit check-in, parent be able to see a preview of how it looks to their child) Made mode errors - did not realize he had to switch tabs to send check-ins to different children. First time he entered the screen incorrectly, saw the child’s name and realized he was in the incorrect place, and fixed it. Second time, did not realize. DAY 2 USER 3 FEEDBACK: Child Child should see which parent the check-in is from/going to - might affect their answers Make sure the top bar of phone is visible to them, so they can see the time The word “check-in” on each entry in the child’s upcoming check-ins is redundant There is a lack of consistence between the wording of the “check-in now” button on the pop-up and “send check-in” in the app, but they do the same thing Would like to be able to select from past answers to check-in questions (like Day 2 User 1 wanted too) “Submit” is bad word choice for sending a check-in, has connotations Can we handle the case where GPS fails on the child’s phone? Parent Too easy to make mode errors and set a check-in for the wrong child! Need the child’s name to be salient. Suggests we should also allow the parent to switch to another child by clicking the name and selecting a new one (we originally didn’t like that idea because it makes flow odd... i.e. you click request on Bart’s page, and when done, you’re returned to Lisa’s). If we don’t want that, the name should be salient but not afford clicking. Another suggestion to avoid these was to include a small picture of the child (which also makes the UI more human). There is false consistency between the “edit check-ins” button and the title “edit check-in” on the window where you set one Instead of showing the current time/date by default, show “now”/”today”, and in the history, instead of the date, use “today”, “yesterday”, “n days ago” (up to some point, then just the date). RC thinks showing “now” on the check-in creation screen is especially important, because they may stay on the screen so long that the time showing is no longer “now”, but they shouldn’t have to go change it. But we’ll have to ensure it’s clear that they can choose a time if they want. “Finish” is bad word choice, “send” would be better (or perhaps “save” for non-immediate ones?) User says he probably would not have looked at “more options” and would prefer just scrolling to see them, even on a phone On home screen, would rather see some upcoming check-ins than see as much history as we showed - split the rest of the display to do this (then perhaps we could get rid of the “edit/scheduled check-ins” button and just have a “more/edit” button EXERCISE Which of the following are good approaches for idea generation? (choose all good answers) A. Start by thinking alone, then combine ideas in a group B. Generate crappy ideas too C. Arrive at a consensus idea as soon as possible D. Don’t write anything down so that the ideas flow faster EXERCISE Which of the following are aspects of the spiral model but not the waterfall model? (choose all good answers) A. Frequent interaction with users throughout the process B. Building prototypes intended to be thrown away C. Repetition of steps D. Unit testing ACTIVITY- ASSIGNMENT Problem 3 : Sketch and the Design simple dashboard for your faculty news.Showing answers for question in previous slide. WWW.ID-BOOK.COM 51 ACTIVITY- ASSIGNMENT Problem 4 : Design simple Chabot to help student for registration. Showing answers for question in previous slide.(simple question tree) 52

HCI 0 5 Merge Lecture Notes (PDF)

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue