Human Computer Interaction Arief Rahman Departement of Industrial Engineering Institut Teknologi Sepuluh Nopember 2008
Interaction??? blah blah blah
two way communication
What is HCI?
The Human
The Computer
Single user, groups, I/O channels, memory, reasoning, problem solving, error, psychology Desktop, embedded system, data entry devices, output devices, memory, processing
The Interaction
Direct/indirect communication, models, frameworks, styles, ergonomics
What is Human-Computer Interaction?
HCI - short for “human-computer interaction” Study and development of computer-based interfaces with the express purpose of making them easier for humans to use HCI involves study of humans using interfaces development of new applications for users development of new devices and tools for users
Why do human-computer interaction?
to enable us to design interactive products to support people in their everyday and working lives [Rogers et al, preface, v]
Develop usable products:
easy to learn effective to use provide an enjoyable experience
Example of bad and good design ď Ź
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
ď Ź
People do not make same mistake for the labels and buttons on the top row. Why not?
From: www.baddesigns.com
Why is this vending machine so bad?
From: www.baddesigns.com
Need to push button first to activate reader Normally insert bill first before making selection Contravenes well known convention
What to design
Need to take into account:
Who the users are What activities are being carried out Where the interaction is taking place
Need to optimise the interactions users have with a product
Such that they match the users activities and needs
Relationship between ID, HCI and other fields Academic disciplines (e.g. computer science, psychology)
Design practices (e.g. graphic design) Interaction Design
Interdisciplinary fields (e.g HCI, CSCW)
Relationship between ID, HCI and other fields
Academic disciplines contributing to ID: Psychology Social Sciences Computing Sciences Engineering Ergonomics Informatics
Logical or ambiguous design?
From: www.baddesigns.com
Where do you plug the mouse?
Where do you plug the keyboard?
top or bottom connector?
Do the color coded icons help?
How to design them more logically (i) A provides direct adjacent mapping between icon and connector (ii) B provides color coding to associate the connectors with the labels From: www.baddesigns.com
Mapping Relationship between controls and their movements and the results in the world ď Ź Why is this a poor mapping of control buttons? ď Ź
Activity on mappings ď Ź
Which controls go with which rings (burners)?
A
B
C
D
Why is this a better design?
Consistency
Design interfaces to have similar operations and use similar elements for similar tasks For example:
always use ctrl key plus first initial of the command for an operation – ctrl+C, ctrl+S, ctrl+O
Main benefit is consistent interfaces are easier to learn and use
Keypad numbers layout ď Ź
A case of external inconsistency
(a) phones, remote controls
(b) calculators, computer keypads
1 4
2 5
3 6
7
8
9
4
5
6
7
8
9
1 0
2
3
0
Which of the following designs is good and which could cause problems? Why?
A Microwave, You Say?!?
Yep, A Microwave! How do you turn it on? How do you set the time? How do you set the clock? What does the “Pizza� button do?
Telephones
Know how to use the features on your home phone?
*70 *72 *49 Etc…
Buttons, Buttons Everywhere!
Understanding the problem space
What do you want to create? Example: providing drivers with better navigation and traffic information Is it a good idea to display this on the front window? What are your assumptions? Clarifying usability and user experience goals Identifying problematic human activities Will it achieve what you hope it will? How will your design support people?
Conversing
Underlying model of having a conversation with another human
Range from simple voice recognition menu-driven systems to more complex ‘natural language’ dialogues
Examples include timetables, search engines, advice-giving systems, help systems
Recently, much interest in having virtual agents at the interface, who converse with you
e.g. Microsoft’s Bob and Clippy
Animated agents
Using “real” people or cartoon characters to act as partners in the conversation with the system
Advantages
Many agents designed to exhibit human-like qualities Others have exaggerated behaviors Dialog partner becomes visible and tangible The user can hear, say and sometimes touch the partner Underlying conceptual model is conveyed more explicitly Makes clear that the conversation partner is not human
Disadvantage
Can be rather annoying
Virtual ‘Guru’…by rahmanarief
A
B
C
D
’Guru’ Presentation...by rahmanarief
Problems with interface metaphors
Breaks the rules
Too constraining
Example: the recycle bin is never on the desktop except on a computer The number of useful tasks is restricted Example: scrolling through a big directory to find a file (if the name is known, just type it in!)
Conflicts with design principles
Example: Macintosh thrash can has two completely different functions contradicting each other
Problems with interface metaphors
Not being able to understand the system beyond the metaphor Difficult to understand what can be done beyond the actions suggested by the metaphor Overly literal translation of existing bad designs Case study: The scientific calculator
Image from Herrington, T., Herrington, J., Oliver, R. & Omari, A. (2000) A Web-based resource providing reflective online support for preservice mathematics teachers on school practice, Contemporary Issues in Technology and Teacher Education, 1(2).
Is the mapping clear? Desk drawers => lesson plans Television set => video clips Notice board =>online message board Telephone =>contact information Computer screen => Useful links Travel centre => conferences What about the cat? Mathematics Education on the Web: MEOW
Is the mapping clear? Luggage => teaching resources Air traffic control => standards and quality guides Currency exchange =>awards & grants Arrivals => projects Departures => completed projects Travel centre => conferences
Design implications for attention
Make information salient when it needs attending to Use techniques that make things stand out like colour, ordering, spacing, underlining, sequencing and animation Avoid cluttering the interface - follow the google.com example of crisp, simple design Avoid using too much because the software allows it
An example of over-use of graphics Our Situation State
the bad news Be clear, don’t try to obscure the situation
Color
• Hue: the color reflected from or transmitted through an object
• Saturation: the strength or purity of a color
• Brightness: the relative lightness or darkness of a color
Legible text
What is the time?
What is the time?
What is the time?
What is the time?
What is the time?
Interpreting icons
groups classes positions look-andfeel
Icons: are their meanings clear? Attention: easy to focus on the right stuff?
39
EMOTICONS
End of presentation‌Q&A