CIS 20.1
Human Computer Interaction (HCI)
(adapted from Prof Sklar's notes, and B. Shneiderman - Designing the User Interface)
Human computer interaction
Human–computer interaction is the study of interaction between people (users) and computers.
It is often regarded as the intersection of computer science, behavioral sciences, design and
several other fields of study. Interaction between users and computers occurs at the user interface
(or simply interface), which includes both software and hardware, for example, general-purpose computer
peripherals and large-scale mechanical systems, such as aircraft and power plants. The following
definition is given by the Association for Computing Machinery[1]:
"Human-computer interaction is a discipline concerned with the design, evaluation and
implementation of interactive computing systems for human use and with the study of major
phenomena surrounding them."
Because human-computer interaction studies a human and a machine in conjunction, it draws from
supporting knowledge on both the machine and the human side. On the machine side, techniques in
computer graphics, operating systems, programming languages, and development environments are
relevant. On the human side, communication theory, graphic and industrial design disciplines,
linguistics, social sciences, cognitive psychology, and human performance are relevant.
Engineering and design methods are also relevant. Due to the multidisciplinary nature of
HCI, people with different backgrounds contribute to its success. HCI is also sometimes referred
to as man–machine interaction (MMI) or computer–human interaction (CHI).
User interfaces
- Interface hardware: keyboard, mouse, joystick, microphone, etc
- Interface software: point-and-click, drag-and-drop, etc
- can we design an interface where the user perceives that actions s/he takes will enable the
results s/he desires?
- (perceived) affordance
- ... term used by psychologist Donald Norman in book
The Design of Everyday Things
- within an environment, the set of actions perceived to be possible to a user (actor)
- Quality of an object that allows an individual to perform an action (Wiki)
- Visual properties of an object that indicate how it can be used or acted upon (Microsoft)
- i.e., can we design the interface so that it affords (offers) the actions intended by the designer?
- Norman stresses the importance of understanding the culture of a designer's audience
- Norman also states: In the world of design, what matters is::
- If the desired controls can be perceived
- ... and further, in an easy to use design, if they can both readily be perceived and interpreted
- If the desired actions can be discovered
- ... and further, whether standard conventions are obeyed
Four principles for interface design:
- Follow conventional usage, both in the choice of images and the allowable interactions.
- The GUI components suggest their usage and functionality
- buttons for clicking (initiating an action)
- scrollbars for sliding (moving along a spectrum)
- Use words to describe the desired action
- "click here"
- labels in front of perceived objects
- Use metaphor.
- a figure of speech in which a term or phrase is applied to something to which it
is not literally applicable in order to suggest a resemblance (online dictionary)
- Examples
- Desktop
- Typewriter / word processor
- Drag-and-drop
- Trash can / Recycle bin
- Be aware of discrepancies in the metaphor
- Drag removable disk (e.g. floppy) to trash to eject
- Follow a coherent conceptual model so that once part of the interface is learned, the
same principles apply to other parts.
- Standardized menu layout/structure
- Standard file dialogs
7 Stages of Action
Used by Norman to describe the psychology of a person performing a task
- Forming the goal
- Start with the goal-- something to be achieved
- Reading and getting dark in room-- need more light
- Stages of execution
- Forming the intention
- The goal is translated into an intention to do some action
- Specifying an action
- The intention must be translated into a set of internal commands,
an action sequence that can performed to satisfy the intention
- Get out of chair, go over to lamp, find switch, turn it
- Executing the action
- The action sequence is still a concept: nothing happens
until it is executed, performed upon the world.
- Stages of Evaluation
- Perceiving the state of the world
- Interpreting the state of the world
- Realizing the light has been turned on
- Evaluating the outcome
- Going back to chair, picking up book and seeing if we can read
Breaking down a task into the above steps aids one in identifying the
- Gulf of execution
- Mismatch between user's intentions and allowable actions
- Right clicking a file and
Open option is omitted or disabled
- Gulf of evaluation
- Mismatch between system's representations and user's expectations
- Deleting file doesn't force a redisplay of directory until refresh
Gulf of Execution
- ... how well system allows user to perform intended actions
- ... the gap between a user's goal for action and the means to execute that goal (Wiki)
- Imagine that a user would like to record a television show.
- User thinks all she has to do is press the Record button.
- In reality:
- Press the record button.
- Specify time of recording, usually involving several steps to change
the hour and minute settings.
- Select channel to record on - either by entering the channel's number
or selecting it with up/down buttons.
- Save the recording settings, perhaps by pressing an "OK" or "menu" or "enter" button.
- ... the difficulty the user has in translating a psychological goal into a physical action (Chauss - RPI)
- Goal of useability is to reduce this gap
Gulf of Evaluation
- ... how well system allows user to perceive state after executing actions (i.e., feedback)
- ... the difficulty of assessing the state of the system and how well the interface supports the
discovery and interpretation of that state (Wiki)
- Difficulty in understanding a UI display
- How do we know we set up the recording properly?
- ... represents the user's difficulty in evaluating whether the response of the computer system
meets the desired goal (Chauss - RPI)
Object-Action vs Action-Object Model
- Two basic interaction models
- Object-Action - user chooses object then action to perform on object
- Common in GUI interfaces
- Clicking on icon; copying by dragging and dropping
- Action-Object - user chooses action and then object upon whcih to perform action
- Common in command-line interfaces
- command file; copy file1 file2
System is viewed as a tool to perform various actions
Three Principles of Good Design
Principle 1: Recognize the Diversity
Knowledge of user audience provides information as to how to design the interface
- Diversity of users
- Novice/first-time users
- novices- know little of the task to be performed or interface concepts
- first-time users-- professionals who know the tak but not the interface concepts
- Restrict vocabulary to small set of consistently used concept terms
- Number of actions and options should be small to allow them to carry out simple
tasks successfully and build confidence
- Informative feedback, and specific error messages are very important
- Online tutorials may be effective
- Knowledgeable, intermittent users
- Familiar with the tasks and broad knowledge of interface concepts
- Not very familiar with system so don't retain menu structure of feature location
- Aided by orderly menu structures, consistent terminology
- High interface apparency (degree to which the interface enables a person to
understand how to carry out a complex task using the interface; how well the system displays the
relationships between elements of the system)
- Example-- what are the circumstances that would cause 'Delete' or 'Paste' to be grayed out?
- Protection from errors will permit exploration and relearning of tasks
- Online help screens will help user fill in missing pieces of task or interface knowledge
- Expert, frequent users
- Thoroughly familiar with task and interface
- Interested in getting the work done quickly
- Demand rapid response time, brief feedback, ability to carry out tasks with minimal keystrokes, selections
- Macro ability to automate frequent sequences of commands
- Keyboard shortcuts for menus and other accelerators
- Diversity of Interaction Styles
- direct manipulation - creates a visual representation of the application world
- Examples
- Desktop metaphor
- video games
- CAD/CAM apps
- advantages:
- visual presentation of tasks, concepts
- easy to learn and retain
- easy to avoid errors
- encourages exploration
- satisfying to user
- disadvantages
- can be hard to program
- more sophisticated hardware/software requirements (e.g., pointing device, graphics)
- menu selection - user selects from a predefined set of items
- advantages:
- easy to learn
- reduces keystrokes
- uses "dialogs"
- structures decision-making
- supports error handling
- disadvantages:
- Can lead to too many menus
- Can slow down expert/frequent users (too many
menus/keystrokes)
- screen real estate
- requires rapid display rate
- form fill-in - User moves cursor from field to field filling in data
- advantages:
- simplifies data entry
- limited training required
- convenient reminders of what to do
- disadvantages:
- command language
- advantages: flxible; great for expert users; allows user-defined macros
- disadvantages: poor error handling; requires significant training
- natural language
- advantages: no syntax to learn
- disadvantages: requires clarification dialogs; more keystrokes (unless voice activated);
unpredictable|hard to program!
Principle 2: Eight rules of interface design
be consistent
- use identical terminology in menus, prompts, etc
- consistent color, layout, fonts,
enable frequent users to use shortcuts
provide helpful feedback for every user action
- The amount should vary based upon the impact, importance, and frequency of the action
provide closure with dialogs
- sequences of actions sould have beginning, midle and end
- end dialog should clearly indicate the action is over
prevent errors where possible and otherwise handle errors elegantly
- users should be able to repair only faulty portion, not the entire command
allow reversal of actions
make users feel in control ("internal locus of control")
- avoid surprising system responses, inability to obtain information, inability to
produce the desired action
limit memory load
- keep displays simple
- consolidate multi-window displays, minimize window movement
- allot training time for retnetion of mnemonics or codes
- online access to syntax, code tables, etc
Principle 3: Prevent Errors
- Improve error messages (won't prevent but will help when they occur)
- Help reduce errors by
- Correct matching pairs - prevents syntactically incorrect form
- Complete sequences - provide sequences of complex actions to reduce chance of making a mistake in the sequence
- Correct commands - auto-command completion
Results from the field of Psychology
Fitts Law
- Predicts time required to move to a target area as a function of
- distance to target
- Size of target
- targets that are smaller/farther away take longer to acquire
- Consequence: design your real estate with this in mind (where the mouse will be at any one point,
and where it'll have to go next)
- Some specific implications:
- Buttons and other GUI controls should be a reasonable size; it is relatively difficult to click on small ones.
- Edges and corners of the computer display (e.g., "Start" button in the Luna theme of Windows XP and the menus
and Dock of Mac OS X) are particularly easy to acquire because the pointer remains at the screen edge
regardless of how much further the mouse is moved, thus can be considered as having infinite width.
- Similarly, top-of-screen menus (e.g., Mac OS) are easier to acquire than top-of-window menus (e.g., Windows OS).
- Pop-up menus can usually be opened faster than pull-down menus, since the user avoids travel.
- Pie menu items typically are selected faster and have a lower
error rate than linear menu items,
for two reasons: because pie menu items are all the same, small distance from the centre of the menu;
and because their wedge-shaped target areas (which usually extend to the edge of the screen) are
very large.
Power Law of Practice:
- the more you do something, the better you get at it-- in the beginning; but over time,
progress slows down and learner gets tired
- Consequence: short learning curve is okay, but keep it short!
- Validates the learning method known as 'chunking'
Things to avoid
- Bad designs
- things that don't work the way you expect them to
- different things that are too similar
- things that are hard to see
- things that don't work well together
- things that get in the way
- things that are hard to handle
- things that are hard to remember
- things that don't fit
- displays that look like controls
- incompatible/unexpected/unnatural mapping of controls to devices
- etc, etc, etc...
Visual structure
- Use of color:
- color can help but be aware of color blindness
- limit the number of colors
- use color to group things together (that you want to group together)
- use color to support a task (e.g., brightness makes things easy to .nd)
- remember color conventions (e.g., red, yellow, green)
- Grouping of objects
group related objects together
- visual hierarchy can reflect object hierarchy
- visual relationships: position, size, weight
- Balance (use it!)
- Clutter (avoid it!)
- Ask yourself: where does the eye naturally go?
- Use symmetry to ensure balance
- Use alignment to establish visual relationships between objects
- Consider human optical adjustment
- use the \squint" test to see if things you want to stand out, do stand out
- don't make the eye wander all over back and forth across the screen)
- Use negative space
- also referred to as white space-- i.e., space that is not what you want the user to look
at, but space that helps separate items and clarify the visual elements in a design
Usability Testing
Technique used to evaluate a product by testing it on users
(from Wikipedia)
- In contrast to usability inspection methods where experts use methods to evaluate usability
without the need for (and expense of) users.
Heuristic Evaluation
From Wikipedia:
- A usability inspection method for computer software that helps to identify usability problems in
the user interface (UI) design.
- It specifically involves evaluators examining the interface and judging its compliance with recognized
usability principles (the "heuristics"-- see below).
- These evaluation methods are now widely taught and practiced in the New Media sector, where UIs are often designed
in a short space of time on a budget that may restrict the amount of money available to provide for other types of
interface testing (such as usability test which involves testing on users (duh!) and is typically much more expensive).
Nielsen's Heuristics
(More detail in the Wikipedia article on heuristic evaluation)
- Visibility of system status
- Match between system and the real world
- User control and freedom
- Consistency and standards
- Error prevention
- Recognition rather than recall
- Flexibility and efficiency of use
- Aesthetic and minimalist design
- Help users recognize, diagnose, and recover from errors
- Help and documentation