hci overview Good and Poor Design Examples.pdf
- 1. H. C. So Page 1 0BHuman Computer Interaction: An Overview ƒ What is Human Computer Interaction (HCI)? ƒ Importance of HCI ƒ Good and Poor Design Examples ƒ What and Who are involved in HCI design? ƒ General Principles of HCI Design ƒ Norman's Principles of Usability
- 2. H. C. So Page 2 What is HCI? How Human interacts with Computer: - Not primarily the study of Human - Not primarily the study of Computer - The study of bridge between them, which includes ƒ Observation of interactions between people & computers, e.g., Find examination papers via our library Web ƒ Analysis of the involved interactions, e.g., Are all the steps involved are necessary? ƒ Human consequences after interacting with computers, e.g., Can the user perform his task? Does he enjoy working with the computer?
- 3. H. C. So Page 3 What is HCI? The term HCI was adopted in mid-1980s: Association for Computing Machinery (ACM): “discipline concerned with the design, evaluation & implementation of interactive computer systems for human use & with the study of major phenomena surrounding them” (1992) Dix: “HCI is study of people, computer technology and the ways these influence each other. We study HCI to determine how we can make this computer technology more usable by people” (1998) Carroll: “HCI is the study and practice of usability. It is about understanding and creating software and other technology that people will want to use, will be able to use, and will find effective when used.” (2002)
- 4. H. C. So Page 4 What is HCI? Human: Individual user, a group of users working together, a sequence of users in an organization Computer: Desktop computer, large-scale computer system, Pocket PC, embedded system (e.g., photocopier, microwave oven), software (e.g., search engine, word processor) User interface: Parts of the computer that the user contacts with Interaction: Usually involve a dialog with feedback & control throughout performing a task (e.g., user invokes “print” command and then interface replies with a dialog box)
- 5. H. C. So Page 5 Why HCI? ƒ In the past, computers were expensive & used by technical people only ƒ Now, computers are cheap and used by non-technical people (different backgrounds, needs, knowledge, skills) ⇒ Computer and software manufacturers have noticed the importance of making computers “user-friendly”: easy to use, save people time, etc. How to achieve “user-friendliness” in computer design?
- 6. H. C. So Page 6 HCI Scope
- 7. H. C. So Page 7 HCI Scope Use & Context: Find application areas for computers Human: Study psychological & physiological aspects e.g., study how a user learns to use a new product, study human typing speed Computer: Hardware & software offered e.g., input & output devices, speed, interaction styles, computer graphics Development: Design, implementation & evaluation
- 8. H. C. So Page 8 HCI Goals ƒ At physical level, HCI concerns the selection of the most appropriate input devices and output devices for a particular interface or task ƒ Determine the best style of interaction, such as direct manipulation, natural language (speech, written input), WIMP (windows, icons, menus, pointers), etc. ƒ Develop or improve ƒ Safety ƒ Utility ƒ Effectiveness ƒ Efficiency ƒ Usability ƒ Appeal of systems that include computers
- 9. H. C. So Page 9 HCI Goals ƒ Safety: protecting the user from dangerous conditions and undesirable situations ƒ Users ƒ Nuclear energy plant or bomb-disposal – operators should interact with computer-based systems remotely ƒ Medical equipment in intensive care unit (ICU) ƒ Data ƒ Prevent user from making serious errors by reducing risk of wrong keys/buttons being mistakenly activated ƒ Provide user with means of recovering errors ƒ Ensure privacy (protect personal information such as habits and address) & security (protect sensitive information such as passwords, VISA card numbers)
- 10. H. C. So Page 10 HCI Goals ƒ Utility: extent of providing the right kind of functionality so that users can do what they need or want to do ƒ High utility ƒ Scientific calculator provides many mathematical operations, built-in formulae, and is programmable ƒ Low utility ƒ Software drawing tool does not allow free-hand drawing but supports polygon shape drawing ƒ Effectiveness: concern a user’s ability to accomplish a desired goal or to carry out work ƒ Find a master thesis in our library Web Any difference between utility and effectiveness?
- 11. H. C. So Page 11 HCI Goals Consider the scenario: a shopping Web provides all the information, instruction and server-side support required to perform an on-line purchase. However, the users cannot figure out how to find the items they want to buy. ƒ Efficiency: a measure of how quickly users can accomplish their goals or finish their work using the system ƒ Find a book “human computer interaction” in our library Web ƒ How about a master thesis whose author’s last name is “Cheng”? ƒ How about the newest book in the subject of “human computer interaction”?
- 12. H. C. So Page 12 HCI Goals ƒ Usability: ease of learning and ease of use ƒ Can I use the basic functions of a new digital camera without reading the manual? ƒ Does the software facilitate us to learn new functions easily? ƒ Appeal: how well the user likes the system ƒ First impression ƒ Long-term satisfaction
- 13. H. C. So Page 13 HCI Goals ƒ Use Microsoft WORD as an example: Goals Achieved? Example Safety Yes Warning for “Exit before Save” Utility Yes A lot of word processing functions is provided Effectiveness Yes A science student can edit equations Efficiency Yes Default template avoids initial document setting Usability Yes Icons help ease of learning Appeal Yes Interface is attractive
- 14. H. C. So Page 14 HCI Benefits ƒ Gaining market share ƒ People intend to buy/use products with higher usability ƒ e.g., Google’s search engine has the largest market share because it is easy to use with higher efficiency ƒ Improving productivity ƒ Employees in a company perform their jobs in a faster manner ƒ e.g., Workers in a mainland company needed to press a lengthy sequence of buttons in performing a task. An IAS student helped to increase their productivity via writing a batch program for the button pressing operation ƒ e.g., Intranet can increase employees’ efficiency
- 15. H. C. So Page 15 HCI Benefits ƒ e.g., Cafe de Coral uses a business management system (BMS) to increase productivity, e.g., food photos are available on cashier display and operators do not need to memorize food codes, automatic collection of sales information at all shop saves staffing cost Hong Kong Economics Times (8 Oct. 2004)
- 16. H. C. So Page 16 HCI Benefits ƒ Lowering support costs ƒ If the product is not usable, calls to customer support can be enormous ƒ e.g., If a washing machine is difficult to use even after reading the instruction manual, many users will call the customer service and the cost per call can be over $100 ƒ Reducing development cost ƒ Avoid implementing features users don’t want and creating features that are annoying or inefficient ƒ e.g., If there are too many unnecessary confirmation dialog boxes in using a word processor, it is likely this product needs to be redeveloped
- 17. H. C. So Page 17 Good and Poor Design Examples HCI arises in our daily life, e.g. ƒ Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a control button (HUwww.baddesigns.comUH) ƒ People do not make same mistake for the labels and buttons on the top row. Why not? Any suggestions to improve the interface?
- 18. H. C. So Page 18 Good and Poor Design Examples ƒ This is a lamp switch (HUwww.baddesigns.comUH) There are 3 modes: “I”, “O” and “II” correspond to Low, Off and High, respectively Is it a good design? Why?
- 19. H. C. So Page 19 Good and Poor Design Examples ƒ Nokia 6800: Users can write messages with the cover closed, or open the cover to reveal a full keyboard for easy messaging (HUwww.nokia.comUH) Is it a good design? Why?
- 20. H. C. So Page 20 Good and Poor Design Examples ƒ Inside a lift at Yau Ma Tei Any problems?
- 21. H. C. So Page 21 Good and Poor Design Examples Do you know how to use them?
- 22. H. C. So Page 22 Good and Poor Design Examples ƒ DYMO and Brother label makers Which one is more preferable?
- 23. H. C. So Page 23 Good and Poor Design Examples Is there any problem for the alarm clock?
- 24. H. C. So Page 24 Good and Poor Design Examples ƒ This is the interface for WORD 97 Any suggested improvement?
- 25. H. C. So Page 25 Good and Poor Design Examples ƒ This is an interface of a dialog box Is it a good design?
- 26. H. C. So Page 26 Disciplines Contribute to HCI Academic Disciplines: ƒ Computer Science ƒ Develop programming languages, system architectures, etc. of the computing systems ƒ Engineering ƒ Provide faster and cheaper equipment ƒ Linguistics, Artificial Intelligence ƒ Speech synthesis and recognition, natural language processing, etc. ƒ Psychology ƒ Provide information about human mental capabilities (e.g., memory, decision making) ƒ Ergonomics (Human Factors) ƒ Provide information about human physical capabilities
- 27. H. C. So Page 27 Disciplines Contribute to HCI ƒ Sociology ƒ How people interact in groups Design Practices: ƒ Graphic Design ƒ Art of combining text and graphics and communicating an effective message in design of posters, brochures, signs, logos & other type of visual communications ƒ Product Design ƒ Process of planning the product's specification ƒ Industrial Design ƒ Applied HartH whereby aesthetics and usability of HproductsH may be improved. Aspects include overall shape of the object, HcolorsH, textures, HsoundsH & product Hergonomics ƒ Film Industry
- 28. H. C. So Page 28 Disciplines Contribute to HCI
- 29. H. C. So Page 29 Disciplines Contribute to HCI
- 30. H. C. So Page 30 Disciplines Contribute to HCI
- 31. H. C. So Page 31 People in HCI Business ƒ Interactive / Interaction Designers: People involved in the design of all the interactive aspects of a product ƒ Usability Engineers: People who focus on evaluating products using usability methods and principles ƒ UI Designers: People experienced in user-centered design methodologies ƒ UI Design Engineers: People who develop and model the end user experience ƒ Web Designers: People who develop and create the visual design of websites, such as layouts & animations ƒ Information Architects: People who come up with ideas of how to plan and structure interactive products ƒ User Experience Designers: people who do all the above
- 32. H. C. So Page 32 People in HCI Business User experience is ƒ An important concept in interaction design ƒ About how people feel about a product and their pleasure and satisfaction when using it, looking at it, holding it, opening it, closing it, etc. ƒ Examples: how smoothly a switch rotates, the sound of a click, the touch of a button when pressing it
- 33. H. C. So Page 33 People in HCI Business Famous companies which provide HCI consultancies: ƒ Nielsen Norman Group: “help companies enter the age of the consumer, designing human-centered products and services” (HUwww.nngroup.comUH) ƒ Swim: “provide a wide range of design services, in each case targeted to address the product development needs at hand” (HUwww.swimstudio.comUH) ƒ IDEO: “create products, services and environments for companies pioneering new ways to provide value to their customers” (Hwww.ideo.comH)
- 34. H. C. So Page 34 Activities in HCI Design 1. Identify needs and establish requirements 2. Develop alternative designs 3. Build interactive prototypes that can be communicated and assessed 4. Evaluate what is being built throughout the process
- 35. H. C. So Page 35 Activities in HCI Design ƒ Users should be involved through the development of the project ƒ Specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project ƒ Iteration is needed throughout the core activities
- 36. H. C. So Page 36 12BGeneral Principles of HCI Design ƒ Making systems easy to use & learn ƒ Usability applies to all aspects of a system ƒ Some principles to support usability are: ƒ Compatibility ƒ Ease of Learning ƒ Memorability ƒ Predictability ƒ Simplicity ƒ Flexibility ƒ Responsiveness ƒ Protection ƒ Invisible Technology ƒ Control ƒ WYSIWYG
- 37. H. C. So Page 37 Compatibility ƒ User – know the user
- 38. H. C. So Page 38 r Compatibility ƒ Product – can reduce both learning time & errors Any disadvantage?
- 39. H. C. So Page 39 Ease of Learning ƒ Ease of learning – the system should be easy to learn so that the user can rapidly start getting some work done with the system
- 40. H. C. So Page 40 1BMemorability Interfaces that have high memorability will be easier to learn and use. Factors which affect memorability include ƒ Location: It will be easier to remember if a particular object is placed in a consistent location, e.g., always putting the search box in the upper right-hand corner of a Web page ƒ Logical grouping: It will be easier to remember if things are grouped logically, e.g., putting related options together in a menu ƒ Conventions: Conventional objects and symbols will be easier to remember, e.g., shopping cart symbol
- 41. H. C. So Page 41 2BPredictability Predictability involves a person’s expectations and his/her ability to determine the results of actions ahead of time. It includes: ƒ Consistency – reinforce our associations and therefore increase our ability to remember and predict outcomes and processes ƒ Generalizabilty – Help us use the knowledge we gathered from previous experience and apply it to similar situations ƒ Familiarity – e.g., familiar menu names and options help users locate objects and functions more easily
- 42. H. C. So Page 42 3BPredictability
- 43. H. C. So Page 43 4BPredictability ƒ Conventions – Allow us to use our intuitions which are based on previous experience and logic; if something is consistently done in a particular way, it will eventually become the conventional way of doing it
- 44. H. C. So Page 44 5BSimplicity If things are simple they will be easy to understand and thus easy to learn and remember
- 45. H. C. So Page 45 6BSimplicity It includes: ƒ Progressive disclosure – Show the user only what is necessary
- 46. H. C. So Page 46 7BSimplicity ƒ Constraints – Involve limiting the actions that can be performed in a particular design
- 47. H. C. So Page 47 8BFlexibility ƒ Allow more user control & accommodates variations in user skill and preferences, i.e., give users choices ƒ Hardware ƒ Styles of interaction ƒ Data format
- 48. H. C. So Page 48 9BResponsiveness ƒ Computer should respond immediately to a user’s input or inform the user when long delays are unavoidable
- 49. H. C. So Page 49 10BProtection ƒ Protect users against disastrous results of common human error
- 50. H. C. So Page 50 Invisible Technology ƒ No need to know the technical details
- 51. H. C. So Page 51 Control ƒ Users should feel more in control if the interface is passive
- 52. H. C. So Page 52 WYSIWYG ƒ 11BWhat you see is what you get
- 53. H. C. So Page 53 General Principles of HCI Design ƒ Principles which do / do not support user experience ƒ Satisfying ƒ Fun ƒ Enjoyable ƒ Entertaining ƒ Helpful ƒ Surprising ƒ Aesthetically pleasing ƒ Rewarding ƒ Supportive of creativity ƒ Emotionally fulfilling ƒ Boring ƒ Frustrating ƒ Annoying
- 54. H. C. So Page 54 General Principles of HCI Design ƒ Principles are often in direct conflicts with one another. In order to make the trade-offs intelligently, a thorough understanding of the intended users is required ƒ These principles are very general and designers may not know how to apply them directly
- 55. H. C. So Page 55 Norman's Principles of Usability Norman is a cognitive psychologist, expertise in computers Cognition refers to how we gain knowledge, includes understanding, remembering, reasoning, acquiring skills, creating new idea ƒ Visibility ƒ Interface feature is accessible to a human sense organ? (e.g., Can an answering machine indicate the presence of incoming voice mails? The number of mails?) ƒ Indicate what parts operate & how ƒ Indicate how user is to interact with the device (e.g., on/off key on a calculator) ƒ The more visible functions are, the more likely users will be able to know what to do next
- 57. H. C. So Page 56 Norman's Principles of Usability
- 58. H. C. So Page 57 Norman's Principles of Usability ƒ This is a control panel for an elevator (HUwww.baddesigns.comUH) ƒ How does it work? ƒ Push a button for the floor you want? ƒ Nothing happens. Push any other button? Still nothing. What do you need to do? ⇒It is not visible as to what to do!
- 59. H. C. So Page 58 Norman's Principles of Usability Need to insert your room card in the slot first! How would you make this action more visible? ƒ Make the card reader more obvious ƒ Provide an auditory message, that says what to do ƒ Provide a big label next to the card reader that flashes when someone entersMake relevant parts visible ƒ Make what has to be done obvious
- 60. H. C. So Page 59 Norman's Principles of Usability ƒ Feedback ƒ This principle is nature: when you talk to somebody, you expect a reply ƒ Send back to user information about what action has actually been done. This allows a person to continue with the activity (e.g., press a key on a telephone) ƒ Include sound, highlighting, animation and combination of these ƒ Indicate what result has been accomplished (e.g., copy a file in PC, progress of downloading a file from internet)
- 61. H. C. So Page 60 Norman's Principles of Usability ƒ Constraints ƒ Restricting some kinds of user interaction to take place at a given moment (e.g., some menu options will be deactivated by shading them at some occasions) ƒ Avoid wrong uses of thing ƒ 3 main types: ƒ Physical ƒ Logical ƒ Cultural
- 62. H. C. So Page 61 Norman's Principles of Usability Physical Constraints ƒ Refer to the way physical objects restrict the movement of things ƒ How many ways can you insert an electrical plug to a socket? ƒ How about inserting a CD into a computer? Which of them has a better physical constraint? Logical Constraints ƒ Exploit people’s common sense reasoning about actions and their consequences ƒ When no object is selected, it is not allowed to use the “Cut” command in WORD
- 63. H. C. So Page 62 Norman's Principles of Usability Cultural Constraints ƒ Rely on learned conventions ƒ Red colour stands for danger while green colour stands for safe ƒ Smiling face stands for happy emotion Which one is universal and which one is culturally- specific (i.e., accepted by a cultural group only)?
- 64. H. C. So Page 63 Norman's Principles of Usability ƒ Affordance ƒ Mean to give clues to operations of things ƒ Indicate what thing is for (e.g., a door handle affords pulling, a cup handle affords grasping) ƒ Indicate how thing could possibly be used (e.g. knobs are for turning, slots are for inserting things into)
- 65. H. C. So Page 64 Norman's Principles of Usability Milk Butter Cheese Water Beer Wine A radio button in a Web page affords you to choose 1-of- many choice by clicking one of the items
- 66. H. C. So Page 65 Norman's Principles of Usability A check box affords you to choose 0 to all choices Is it true for Microsoft WORD? There are two kinds of affordance: ƒ Real: for physical objects and do not have to be learned ƒ Perceived: for screen-based interfaces and can be considered as learned conventions
- 67. H. C. So Page 66 Norman's Principles of Usability
- 68. H. C. So Page 67 Norman's Principles of Usability ƒ Mapping ƒ Natural relationship between controls & their effects (e.g. move mouse to left, pointer goes left) ƒ Upper button controls upper bulbs while lower controls lower bulbs (button affords you to press)
- 69. H. C. So Page 68 Norman's Principles of Usability ƒ The timer knob in a microwave oven is of good mapping because turning it clockwise implies increasing cook time (the knob affords you to turn as well) ƒ The volume knob in a Hi-Fi system is of good mapping because turning it clockwise implies increasing volume (the knob affords you to turn as well)
- 70. H. C. So Page 69 Norman's Principles of Usability Which controls go with which burner rings? A B C D
- 71. H. C. So Page 70 Norman's Principles of Usability Is it better?
- 72. H. C. So Page 71 Norman's Principles of Usability Which arrow-key layout is the best? Which Norman’s principle has been used?
- 74. H. C. So Page 72 Norman's Principles of Usability ƒ Pull or Push? ƒ Which Norman’s principle has been used?
- 75. H. C. So Page 73 Norman's Principles of Usability ƒ Pull or Push? ƒ Which Norman’s principle has been used?
- 76. H. C. So Page 74 Norman's Principles of Usability Which Norman’s principle has been used in this LeapFrog’s education toy?