Introduction to HCI and Contextual Design CS 321 Human-Computer Interaction Today Course Introduction Wednesday Introduction to HCI and Contextual Design Reading: CD: Ch. 1 BDS, Introduction & Ch. 1 Assignment: Reading Questions ©2001 Southern Illinois University, Edwardsville All rights reserved.

Why do fonts mysteriously change in my MS Word documents? During a typical day, I work on three different computers – one in my office, one in the class room, and one at home. I use Microsoft Word and Microsoft Power Point to make handouts and lectures. Both of these are WYSIWYG products. Many times though a document I make on one computer looks different on other computers. Why? That doesn’t fit my understanding of a “document” ©2001 Southern Illinois University, Edwardsville All rights reserved.

Why does the debugger in Visual Studio come up when my Internet Explorer crashes? I can be working in Internet Explorer when an error occurs. A message box comes up that says: I always press cancel by mistake. Why? Why would anyone think I want to debug Internet Explorer assembly code? Why do I always hit the yes button and have to wait for the Visual Studio to load then have to close it down? ©2001 Southern Illinois University, Edwardsville All rights reserved.

Software is typically not designed for the way we (users) understand how things should work or how we work. Rather it is designed for the way we (programmers) understand how things work. ©2001 Southern Illinois University, Edwardsville All rights reserved.

Users are not Computer Programmers Computer users want systems that are tools that help them. They do not want to know and do not want to learn how computers and programs work. Computer systems should be a tool that allows someone to think about the task they are doing, and not about how a program is implemented. Much like modern cars It is up to us, the designers, to make the computer an invisible part of the system. ©2001 Southern Illinois University, Edwardsville All rights reserved.

How should you Design a Program? Design is a creative activity of making artifacts that are usable for a specific purpose. To be “usable” means the designer must take into account who is using the system, what they are using it for, and how does it fit within their overall activities. Programs are used by somebody ©2001 Southern Illinois University, Edwardsville All rights reserved.

Programs are used by somebody In a general this means designing for human hardware/software capabilities and limitations for explain: Short term memory: Miller’s magic number Long term memory: recognition vs. recall Limits of perception: color pollution More specifically this means designing for how the user thinks about the tasks the application is supporting: How do they organize the work? What strategies do they use to accomplish tasks? How is information recorded and communicated? What is their conceptual model? ©2001 Southern Illinois University, Edwardsville All rights reserved.

Programs are used by somebody Software systems are used within a user’s cognitive context and a task-oriented context of an organization. “Software Design is a user-oriented field” -Bringing Design to Software ©2001 Southern Illinois University, Edwardsville All rights reserved.

Isn’t interface design just a matter of applying common sense to make a program user friendly? No, it goes beyond that to consider how other people think. Consider this example of an HTML Checker Program Version 1 CSE HTML Validator v3.05, a program designed to check HTML documents for syntactical errors. We found this portion of its Options dialog to be particularly problematic. The "Flag" checkboxes are used to set validation and program options. Quick, here's a test: Which flag checks for tags specific to Internet Explorer? Which flag checks for tags specific to Netscape Navigator? Which flag displays a warning against the use of <CENTER> tags? Which flag controls whether sound is played during validation? What does Flag 14 do? Here are the answers: Flag 1. Flag 2. Flag 9. It also warns against the use of <BASEFONT>, <FONT>, <S>, and <U> tags. Flag 10 of course. Nothing. OK, it's a trick question: flags 14-20 don't do anything; they are merely placeholders for possible future expansion. Each flag controls the validation of several HTML tags; the user will have to visit the help file to determine the tags related to a particular flag. The existing design is merely a reflection of the programmer's model of the system, which in no way helps the user. The developer was concerned with making the program configurable for a variety of browsers and expandable to include changes to HTML specifications as they occur. In version 4.0 of CSE HTML Validator, the developers took a bad idea and made it far worse. Now rather than having to struggle with 20 flags, the user must contend with 60 Version 2 ©2001 Southern Illinois University, Edwardsville All rights reserved.

Example from: Interface Hall of Shame Potential Design Example from: Interface Hall of Shame www.iarchi.com/shame.html Hey, here's an idea: if Flag 1 represents IE-Specific, why not call it something like, oh, I don't know, maybe ... IE-Specific? We offer the following as an alternative design that would benefit both the user and the developer. The alternative provides immediate access to the definition of the program settings, and allows the developer to add additional capabilities in the future without changing the design of the form or its documentation. ©2001 Southern Illinois University, Edwardsville All rights reserved.

Human-Computer Interaction “HCI” Stresses the importance of good interfaces and the relationship of good interface design to effective human interaction with computers. Skills: Design, implement, and evaluate reasonable interfaces Participatory Design: Users (customers) play an integral role in the design process. ©2001 Southern Illinois University, Edwardsville All rights reserved.

The Designer/Programmer As a computer professional, you are most likely going to be both the designer and programmer of a system. Poor design results in non-use, mis-use, abuse, and (potentially severe) errors. Case of the Tell-Tale Heart: Case of the Tell-Tale Heart: This is a personal encounter with a bad design that almost resulted in a person’s death. When I was a practicing nurse I worked on a Cardiac Care Unit. In this unit each patient received a heart monitor that was connected to a wireless radio transmitter so that each patient’s heart rhythm can be seen at a central desk. One night shortly after coming on shift I noticed that one of the patients went into a potentially serious heart rhythm, which left untreated could result in death. The main treatment for this person’s condition is to implant a pace maker until medications can take effect. After calling the patient’s doctor and making arrangements with the Operating Room I talked to the patient to get a consent for surgery. The patient who was reasonably upset refused saying she felt fine. It is not unusual for the heart to compensate for rhythm problems so the lack of symptoms was not unusual. After trying to convince the patient for sometime we called her husband and doctor to come in. Three hours later she finally consented. As they wheeled her into the elevator, to my horror, her heart rhythm from the wireless radio remote did not fade from the screen, but another patient’s did! I quickly called the Operating Room to notify them they had the wrong patient. What had happened was the result of a bad system design. In this case, the only way to distinguish one patient from another on the heart monitor was by a piece of masking tape with the patient’s room and bed number on it. By accident two pieces of tape were transposed. As a result, the wrong person almost had surgery and the other patient could have died because of lack of treatment. A better design for this system would allow for a patient’s name and room to be input to the system so that a heart rhythm and patent can be directly associated. ©2001 Southern Illinois University, Edwardsville All rights reserved.

Class Organization Syllabus & Schedule ©2001 Southern Illinois University, Edwardsville All rights reserved.

Web Page Usability Exercise The Faculty Technology Center helps faculty use computer technology in their classes. Go to the SIUE home page, find out what hours the Center is open. If more than one computer is available, divide the student into groups of 3 or 4. One student will do the first exercise while the others in the group observe the student doing the exercise, and take notes on their observations. Students will discuss within their groups their observations, making note of ways the observations were similar and ways they differed. Based on their observations, they will critique the ease of use of the website. The student who did the exercise will not participate in the discussion of the website until the others have finished critiquing the site based on their observations. A different student in each group will do the second exercise, with the remaining students observing and taking notes. Students will discuss their observations, making notes of ways the observations were similar and ways they differed. This time, the student doing the exercise will talk aloud and describe actions, questions as he/she does the exercise. The student will join the other students in the group in discussing and critiquing the website. If only one computer is available, two different students will do the exercises for the entire class to observe. Basic instructions would remain the same, except critiques would be done in small groups. In the second exercise, the student who did the exercise would be available to answer questions from members of each of the groups. ©2001 Southern Illinois University, Edwardsville All rights reserved.