Human Computer Interaction

1. Human Computer Interaction Ayman Al Zaatari

2. Definition • Human computer interaction basically is a discipline concerned with the design of interactive computing systems, along with the evaluation and implementation of the system. • Human computer interaction also includes the study and planning of the design that will facilitate the interaction between the human and the computer, being a tablet, phone, desktop, laptop, or even physical things that surrounds us like desks, doors, ovens, chairs, etc….However, the term HCI is usually referred to machines with computing abilities.

4. The Zippy Application • The zippy application is a FAST Zip Code web search engine that allows users to enter a name of a city and retrieve it’s zipcode or vise versa

5. Submitting a query • After submitting a query, the results appear as follows: Associated ZIP Codes Associated Cities 10020 New York 10021 ... • Busy servers might need 30 seconds to retrieve the data with no feedback to the user

6. On Error • Problem in city or state: • CITY AND STATE NOT FOUND OR EMPTY. • PLEASE TRY AGAIN. • Problem in zip code: • ILLEGAL ZIP CODE. PLEASE ENTER A VALID 5 DIGIT ZIP CODE.

7. The Zippy Exercise • You are given this application and asked to point out as many design mistakes as possible

8. 1-Visibility of System Status • Waiting for 30 seconds for a page to show is not acceptable. The user won’t know whether the request will return back or the connection is lost. Some feedback shall be shown to the user, similar to a progress bar. • The user has no indication that the results on the page are actually those of his typed query. The result page should indicate the search the user queried. • Window title is missing. • The website doesn’t show the last recent update date. The user needs to know how recent is the database

9. 2-Match Between System and the Real World • User would find “Submit Query” confusing. Using a word they know from the real world would be better, similar to “Search”. • mailto: should be removed. A hyperlink to the email address shall be the only thing visible to the user there.

10. 3-User Control and Freedom • The page doesn’t show a clear way back from the results page. • When error messages are displayed, there is no clear way back.

11. 4-Consistency and Standards • Several names refer to the same thing : ZIP code, zip code, zip code, . . . . • The Submit Button is referred to by two different names, “Submit Query” and “Submit” • Mistakes in the results categories where they considered “New York and NY” to be Zip Code, and “94116” to be a city. • The web doesn’t the support the convention of pressing the return key to start the search.

12. 5-Error Prevention • The Zip code field must be made exactly 5 numbers wide, since the zip code is exactly 5 numbers. • All input field labels are bold and upper case, which would make users think that this means all fields are required fields. • Users are highly likely unwillingly press the reset button and lose their input. The function of the reset button is not needed anyway, so removing it would be better • A drop down menu for States would also help. • The submit button should be disabled until one field is entered.

13. 6-Flexibility and Efficiency of Use • Allow the user to enter just the name of the city. If the city entered was ambiguous, then display the possible states using a drop down menu. • Allow user to enter the common city names in abbreviated forms.

14. 7-Aesthetic and Minimalist Design • Uppercase statements are less readable than normal-cased statements. Refrain from using upper case. • Avoid using abbreviations whenever possible. • Make sure not to have spelling mistakes to keep the users impression possible about the quality of the software. • Including “Fast” in the title makes the software appears a cheap, and needs some hypos to market. Search engines should already be fast, no need to explicitly mention that. • Properly align the input fields. • Vertical and horizontal scrolling is useless.. no more data to show..

15. Zippy - revised

16. The Psychopathology of Everyday things • Psychopathology is the study of mental illness and distress • We will now discuss how bad designs can cause mental illness and distress to users

17. 1-Early Tractors • Early tractors used to have high center of gravity, and a narrow wheel base • Going up a hill  Fall • “driver error”?… “design error”.

18. 2-Could Someone Please Turn the Lights Down • The figure below shows the control panel at an old lecture theater provided for the lecturer. • The problem is that four functions are mapped to the one green button : • Depressing and releasing the green button turns the lights completely on if the they were off • The same action turns the light completely off if they were on. • Holding the green button down dims lighting if it was last increased. • The same action increases the lighting if it was last dimmed. • The air conditioning control is also problematic: 0 is off, 1 is on, and 2 is off again.

19. 3-Clunky Connector • The audiovisual control at the same theater also caused several problems Unplug the cable  the internal structure of the connector de-assembles!

20. Solution

21. 4-Where is the Toilet Paper? • The following image shows a toilet once fancy hotel • Can any one tell me where to find the toilet paper?

22. Found it! • Oh here it is! Well hidden

23. The Psychology of Everyday Things • In this chapter we will discuss design in terms of affordance, constraints & models.

24. Perceived and Real Affordances • Affordancesare the range of possible (physical) actions by a user on an artifact. • PerceivedAffordances are the actions a user perceives to be possible.

25. Real World Affordances • For physical objects, there can be both real and perceived. • A chair affords (suggests) sitting. • Knobs are for turning. • Slots are for inserting things. • A button affords pushing. • When perceived affordances are taken advantage of, the user knows what to do just by looking. • When simple things need pictures, labels, or instructions, the design has failed!

26. GUI Affordances • For screen-based interfaces, the computer hardware already has built-in physical affordances: • Screen affords touching. • Mouse affords pointing. • Mouse buttons afford clicking. • Keyboard affords typing.

27. Affordances : Ambiguous Door Design • Ambiguous designs: • Designs get ambiguous when their real affordances are far from the perceived affordances • A knob affords turning, but do you push or pull? • A horizontal bar affords pushing, but which side do you push on?

28. Clear Door Design • A flat panel affords pushing and the broadness indicates which side to push. • A vertical handle affords grasping and pulling

29. Constraints • Affordances increase the design options for the designer. On the other hand, constraints come to limit those options. • 4 Types of Constraints: • Physicalconstraints are constrains related to the physical components of the machine. Screen size is a typical example. • Semanticconstraints rely upon our knowledge of the situation and of the world. • Culturalconstraints rely upon accepted cultural conventions. • Logicalconstraints exploit logical relationships. For example a natural mapping between the spatial layout of components and their controls.

30. Motorcycle example Constraints • Physical: Front wheel only fits in one place. • Semantic: The rider sits on the seat facing forward. • Cultural: Red is a rear light, yellow a front light. • Logical: Two blue lights, two white pieces, probably go together.

31. : Motorcycle : Constructed

32. Conventions • Cultural constraints are actually conventions • Light switches • America down is off • Britain down is on • Water taps • America anti-clockwise is on • Britain anti-clockwise is off • The color red • America danger • Egypt death • India life • China happiness Hence, the designer must know the cultural constraint if he is designing for a specific culture, and should make sure that his design doesn’t conflict with any constraint if he is designing for the globe.

33. Models • We have 3 main models for an interface • System image: it includes the model of the system presented by documentation, instructions and labels • Conceptual Model : it is the model users build after seeing and using the system. • Design Model: it is the conceptual model of the designer. The design model is the real model of the system since he knows best how the system was built.

34. Conceptual Models People form “mental models” of how things work, so-called conceptual models. Conceptual models are formed from: • affordances • mapping • constraints • causality • Familiarity with similar devices (transfer of previous experience) • Instructions • interactions • However, conceptual models don’t always meet the reality, particularly if the above factors are misleading.

35. Good Conceptual Model An example of a good conceptual model is a scissor • Affordances: holes for puttingfingers in. • Constraints: small hole for thumb, big hole for several fingers. • Mapping: between holes andfingers suggested and constrained by appearance. • Conceptual Model: operating parts are visible and their implications are clears

36. A Digital Watch Projects No Visible Conceptual Model • Affordances: four buttons to push – but what do they do? • Mapping: no clear relationship between buttons and possible actions. • Transfer of Prior Knowledge: littlesimilarity to analog watches. • Conceptual Model: must be learnt from instructions.

37. A Conceptual Model of a Fridge Freezer

38. User Conceptual Model • Users usually build up a conceptual model about how the refrigerator works. Unfortunately, the real model isn’t the same. • Users usually assumethat the two controllers work independently, where they believe thatthey can actually controleach compartmentwithout affecting theother.

39. Design Model • The actual conceptual model for the fridge is that there is only one thermostat in the whole unit. One controller adjusts the temperature, and the other changes the cold air distribution.

40. The Psychopathology of Computers • Dangerous Command Names • ED used “.” to select current line, and “,” to select the entire document • These two keys are adjacent on the keyboard, and mistakes are so likely to happen. • As a result, if the user intended to change one line “A heavy poll is expected . . . ” to “A heavy turnout is expected . . . ”, he might easily turn out changing ’poll’ to ’turnout’ throughout the entire document. • Similar cases were reported in the British press, where a candidate had a name “Pollack”. The user wanted to change one a “poll” in one line to “turnout”… A mistake was made, and his name appeared “Turnoutack” in the whole document • “Computer Failure”….? Probably “Design Error”

41. The Psychopathology of Computers • Unix Commands • rm command • Typing : rm *~ removes the backup files • Putting a space after the * (rm * ~) will remove everything, and guess what, there’s no undo. • YaaaaaY • Lessons: • Most failures resulting from human-machine systems interaction are due to poor designs which do not take account of peoples’ capabilities and fallibilities. • These are often labeled as “computer failure” or “human error” rather than design failure.

42. Interface Hall of Shame • Horizontal Scrolling • Studies shows that humans can scan written material faster from top to bottom rather than left to right.

43. Interface Hall of Shame • Two Item List Box • Microsoft Visual Studio had a two item list! Radio buttons would be much better here.

44. Interface Hall of Shame • Two Thousand Item List Box: • Very short lists is extremely bad, however, extremely large lists are also terrible and annoying. • When you have long lists,use filtering, or divide into subgroupsto make the list smaller.

45. Interface Hall of Shame • Multi-Row Property Sheets: • Probably, Single-row property sheets are one of the best designs ever made • On the other hand, Multirow tab controls are one of the worst interfaces ever made. Pressing one tab will cause major changes in the representation of the complete tab set

46. Interface Hall of Shame • Avoid Breaking a Metaphor • Mac OS X has a perfect trashcan as a metaphor of deleting files and documents. • Unfortunately, the trashcan was extended to include the function of ejecting diskettes.

47. However Apple Fixes their Bugs • Mac designers recognized this metaphor break, and modified the trash to an eject icon when the intended action is ejecting a drive

48. The Psychopathology of Computers • User Centered Design • The design is based upon a user’s: • Abilities and needs • Context • Work • Tasks • Principles for User-Centered Design • Explicit, coherent conceptual model. • Make things visible. • Get the mappings right. • Exploit the power of constraints. • Utilize platform standards and conventions. • Design for error, allowing exploration without penalty.

49. Mac, Again  • The Mac interface is considered to be one of the most User centered designs because of the following: • Use of Metaphors • Aesthetic Integrity • Consistency • Perceived Stability • Direct Manipulation • See and Point • Feedback • Forgiveness • User Control

50. Putting things together • Perhaps, good interface design is the key attribute for the success of any product. Poorly designed and tested designs tend to fail after a very short period of time after publishing it. • Designers must make sure to avoid the design mistakes mentioned in the document. • The Designers must also provide a system that makes conceptual model of the user meet the design model. • Designers must make sure not to cross the design constraints, and use proper mappings to keep things clear for the user. • The Designer must also make try to make his system as error free as possible, and recoverable in case of error. In the end, user satisfaction is the goal; whatever makes you closer to this goal is a good design.