HCI Basics
100 likes18,838 views
HCI is the study of the interaction between humans and computers. The goal of HCI is to improve this interaction by designing systems that are more user-friendly and responsive to user needs. Key principles of user interface design include structure, visibility, feedback, affordances, mapping, constraints, consistency, simplicity, and tolerance. Following these principles can help create intuitive interfaces that reduce barriers to users achieving their goals.
HCI Basics
- 2. What is HCI?What is HCI? HCI is the study of interaction between people (users) and computers
- 3. Human
- 4. People are diverse, unpredictable, messy, ill-understood. They have different abilities Human
- 5. People are DIVERSE • Physically (hand size, height, strength, coordination, disabilities) • Effects of age • Perception is not all that seems • Many processes are subconscious • Experience and mental models • Cognitive abilities • Cultural environment • Motivations
- 6. Population by AGE group Population is changing very dramaticly. The number of 65+ is more then doubled in 2050
- 7. Effects of AGE We are not the only industry that needs to solve these Age issues Third Age Suite - in automotive industry allows 20 years old designers to sit in the car and have experience of 60 yo.
- 8. Contrast sensitivity http://www.w3.org/TR/wai-age-literature/ Contrast sensitivity decreases dramatically with age. Even if you are very comfortable with technology - there can be very difficult to use it.
- 9. Contrast sensitivity example of low contrast content
- 10. Contrast sensitivity http://webaim.org/resources/contrastchecker/ Tool for checking the minimal level of contrast
- 11. http://visionlab.harvard.edu/ silencing/ Visual Perception SILENCING demonstrates how hard is to notice when moving objects change.
- 13. Principle of Least Effort Attention Interaction Reading Thinking Effort If there are several ways of achieving the same goal, people will choose the least demanding course of action.
- 14. Subconscious Processing Could the user answer the question? "Does Siemens have any special deals on washing machines?" Usability study by NNG in the UK
- 15. Banners, Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility Subconscious Processing No! User failed the task! The user gave up and assumed that Siemens didn't have any special deals for her. People skip over things that could be disturbing - Brain filters out banners
- 16. Users are task focused People go to web sites to achieve particular goals, not to look around and admire the design.
- 17. Computer Computers aren’t just computers anymore - mobile phone, camera, car, washing machine, alarm clock, ATM, copy machine, dish washer…
- 18. Devices are much more complicated and multi-functional then before. Computer
- 19. Computer time past now pace of CHANGE rate of LEARNING old world new world The world is changing much more rapidly than most people realize. In the NEW WORLD you do not already know how things work but in some cases you do not even know how to use them - it is too complicated.
- 29. –Johnny Appleseed “Type a quote here.”
- 30. Interaction
- 31. The interface between humans and the computers they use is crucial to facilitating this interaction. dialogue between human and computer Interaction
- 33. Very simple example: Sink tap 1. User establishes a goal = Wash hands 2. Formulates intention > specifies actions at interface > executes action = moves the tap lever 3. System hopefully bring some feedback and user can hopefully see it and understands what happened = running water 4. Evaluates system state with respect to goal = more hot/cold, less/more water, stop, changing the direction moving the tap…
- 35. Goal Mapping 4 goal-mapping questions 1. GOAL: How do users know their goal is attainable? 2. ACTION: How do users know what to do? 3. PERCEPTION: How will users know they’ve done the right thing? 4. EVALUATION: How will users know they’ve attended their goal?
- 36. The goal of HCI is to improve the interaction between users and computers by making computers more user-friendly and receptive to the user's needs. To design systems that minimize the barrier between the human’s cognitive model of what they want to accomplish and the computer’s understanding of the user’s task Improving the usability is the key factor. HCI Goals
- 37. Natural Interface Human speech, Gestures, Hand writing recognition
- 41. The User Interface today is often one of the most critical factors regarding the success or failure of a computer system In fact, the most sophisticated machines are worthless unless they can be used properly by men. Bad Design costs lives, money, & time Why is it important?
- 42. Principles of UI design In order to build user-friendly and usable interfaces they may be considered Principles of UI Design at any time during the design of a user interface.
- 43. 9 Principles of user interface design to improve the quality of interface. Principles of UI design - Structure - Visibility - Feedback - Affordances - Mapping - Contraints - Consistency - Simplicity - Tolerance
- 44. The Structure Can I find it where I expect? Putting related things together and separating unrelated things. Design should ORGANIZE the user interface in MEANINGFUL and USEFUL WAYS based on CLEAR, CONSISTENT models that are RECONGIZABLE to users.
- 46. Can I see it? The Visibility Make things visible! The design should make ALL NEEDED OPTIONS for a given task VISIBLE without DISTRUCTING the user with redundant information. Good designs don't OVERWHELM users with alternatives or confuse with unneeded information.
- 47. The Visibility Visible knobs, dials and buttons have been replaced by invisible and unclear “active zones” and sensor technology
- 48. The Visibility Google search makes it clear where to enter text Hiding certain functions can be useful in interface design
- 49. The Feedback What is it going now? The design should KEEP USER INFORMED of ACTIONS, CHANGES OF STATE that are relevant to the user through CLEAR LANGUAGE - FAMILIAR to users.
- 50. The Feedback Feedback needs to be immediate and synchronized with user action. What is the device doing right now? (loader helps) Sound can work as a feedback.
- 51. The Feedback Can you use it without watching it? That’s how most people use calculator.
- 52. The Affordance How do I use it? What the user CAN SEE that an OBJECT DOES. Affordance answers How do I use it? Giving a clue! EX: Chairs afford sitting; handles afford pulling
- 53. The Affordance Perceived properties of an object that give clues to its operation. It is quite clear in case of simple things.
- 54. The Affordance It can be confusing in case of multi-functional devices Learned conventions: E.g., buttons and scrollbars— but are they clear to novices?
- 55. The Affordance A DOOR HANDEL’S DESIGN should communicate whether you PULL or PUSH. But here's an EXAMPLE OF CONFLICT between design affordance and “documentation” - NOT an INTUITIVE INTERFACE!
- 56. Mapping: Where am I and where can I go?The Mapping Where am I and where can I go? RELATIONSHIP to CONTROLS and their EFFECT. ARRANGEMENTS should be NATURAL for the relations BETWEEN CONTROLS and their MOVEMENTS and OUTCOME from such action. The real function of natural mappings is to REDUCE THE NEED OF ANY INFORMATION from a user’s MEMORY to perform a TASK.
- 57. Mapping: Where am I and where can I go?The Mapping Which arrangement is the best solution? C!
- 58. Mapping: Where am I and where can I go?The Mapping A B A B C D Which arrangement is the best solution? 1 = A, 2 = A or C
- 59. The Constraint Why can’t I do that? RESTRICTING the kind of interactions that can take place REDUCE the chance of ERROR FOCUSES user’s attention to needed task
- 60. The Constraint FOCUSES on items and functions that are appropriate
- 61. The Consistency I think I have seen that before! Design interfaces to have SIMILAR OPERATION AND USE - similar elements for achieving tasks. Similarity increases learnability. The design should REUSE components and behaviors, maintaining consistency. Enables people to QUICKLY TRANSFER PRIOR KNOWLEDGE to NEW CONTEXT and FOCUS on relevant tasks
- 62. The Consistency
- 63. The Consistency Consistent use of symbols to represent similar concepts, uses prior knowledge and makes things easier to use.
- 64. The Consistency Color convention example
- 65. The Simplicity Simple for common tasks! The design should MAKE SIMPLE, COMMON TASKS EASY communicating CLEARLY and SIMPLY in the user's OWN LANGUAGE
- 66. The Simplicity
- 67. The Simplicity It is really not difficult to find examples of bad design in computer apps.
- 68. The Tolerance Design for errors, allow mistakes! The design should be FLEXIBLE AND TOLERANT, reducing the cost of mistakes and allowing UNDOING, while also PREVENTING ERRORS by tolerating varied inputs and by interpreting all reasonable actions.
- 69. The Tolerance Sample of bad design
- 70. The Tolerance Sample of good design
- 71. Further reading
- 72. More examples
- 76. More examples structure, mapping and affordance issue
- 78. More examples almost all issues :)
- 79. More examples Not an usability issue - missing function (water mixing)