Presentation is loading. Please wait.

Presentation is loading. Please wait.

Ayman Al Zaatari.  Human computer interaction basically is a discipline concerned with the design of interactive computing systems, along with the evaluation.

Similar presentations

Presentation on theme: "Ayman Al Zaatari.  Human computer interaction basically is a discipline concerned with the design of interactive computing systems, along with the evaluation."— Presentation transcript:

1 Ayman Al Zaatari

2  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 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  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


7 You are given this application and asked to point out as many design mistakes as possible

8 1. 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. 2. 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. 3. Window title is missing. 4. The website doesn’t show the last recent update date. The user needs to know how recent is the database

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

10 1. The page doesn’t show a clear way back from the results page. 2. When error messages are displayed, there is no clear way back.

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

12 1. The Zip code field must be made exactly 5 numbers wide, since the zip code is exactly 5 numbers. 2. All input field labels are bold and upper case, which would make users think that this means all fields are required fields. 3. 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 4. A drop down menu for States would also help. 5. The submit button should be disabled until one field is entered.

13 1. 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. 2. Allow user to enter the common city names in abbreviated forms.

14 1. Uppercase statements are less readable than normal-cased statements. Refrain from using upper case. 2. Avoid using abbreviations whenever possible. 3. Make sure not to have spelling mistakes to keep the users impression possible about the quality of the software. 4. 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. 5. Properly align the input fields. 6. Vertical and horizontal scrolling is useless.. no more data to show..


16  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  Early tractors used to have high center of gravity, and a narrow wheel base  Going up a hill  Fall  “driver error”?… “design error”.

18  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 : 1.Depressing and releasing the green button turns the lights completely on if the they were off 2.The same action turns the light completely off if they were on. 3.Holding the green button down dims lighting if it was last increased. 4.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  The audiovisual control at the same theater also caused several problems Unplug the cable  the internal structure of the connector de- assembles!


21  The following image shows a toilet once fancy hotel  Can any one tell me where to find the toilet paper?

22  Oh here it is! Well hidden

23  In this chapter we will discuss design in terms of affordance, constraints & models.

24  Affordances are the range of possible (physical) actions by a user on an artifact.  Perceived Affordances are the actions a user perceives to be possible.

25  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  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  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  A flat panel affords pushing and the broadness indicates which side to push.  A vertical handle affords grasping and pulling

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

30 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 :

32  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 Cultural constraints are actually conventions 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  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 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 An example of a good conceptual model is a scissor Affordances : holes for putting fingers in. Constraints : small hole for thumb, big hole for several fingers. Mapping : between holes and fingers suggested and constrained by appearance. Conceptual Model : operating parts are visible and their implications are clears

36 Affordances : four buttons to push – but what do they do? Mapping : no clear relationship between buttons and possible actions. Transfer of Prior Knowledge : little similarity to analog watches. Conceptual Model : must be learnt from instructions.


38  Users usually build up a conceptual model about how the refrigerator works. Unfortunately, the real model isn’t the same.  Users usually assume that the two controllers work independently, where they believe that they can actually control each compartment without affecting the other.

39  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 1. 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 2. 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  Horizontal Scrolling  Studies shows that humans can scan written material faster from top to bottom rather than left to right.

43  Two Item List Box  Microsoft Visual Studio had a two item list! Radio buttons would be much better here.

44  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 subgroups to make the list smaller.

45  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  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  Mac designers recognized this metaphor break, and modified the trash to an eject icon when the intended action is ejecting a drive

48  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  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  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.

Download ppt "Ayman Al Zaatari.  Human computer interaction basically is a discipline concerned with the design of interactive computing systems, along with the evaluation."

Similar presentations

Ads by Google