INTRODUCTION TO HCI  Social, economic, ethics

DEFINITION OF HCI

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.

WHY HCI IS IMPORTANT?

The study of our interface with information.

It is not just ‘how big should I make buttons’ HCI TOOLS

or ‘how to layout menu choices’  Sound
It can affect  3D
 Effectiveness
 Animation
 Productivity
 Video
 Morale
 Devices
 Safety
 Size (small->very large)
Example: a car with poor HCI
 Portable (PDA, phone)
 Plasticity
WHAT FIELDS DOES HCI COVER?
 Context sensitive/aware
 Computer Science
 Personalizable
 Psychology (cognitive)
 Ubiquitous
 Communication
 Education
USABILITY REQUIREMENTS
 Anthropology
 Goals:
 Design (e.g. graphic and industrial)
 Usability
 Universality
HCI COMMUNITY
 Usefulness
 Academics/Industry Research
 Achieved by:
 Taxonomies
 Planning
 Theories
 Sensitivity to user needs
 Predictive models
 Devotion to requirements analysis
 Experimenters
 Testing
 Empirical data
 Product design
BAD INTERFACES
 Other areas (Sociologists,
 Encumbering
anthropologists, managers)
 Confusing
 Motor
 Slow
 Perceptual
 Trust (ex. windows crashing)
 Cognitive
 What makes it hard?
 Varies by culture
 Multiple platforms
 Variety of users
  Word/HTML/PDF/ASCII
REQUIREMENTS ANALYSIS
 Ascertain users’ needs CASE STUDY: LIBRARY OF CONGRESS
 Ensure proper reliability DATABASE DESIGN
 Promote appropriate  Two interfaces
standardization, integration,  Catalog New Books
consistency, and portability  3-6 hour training course – staffers
 Complete projects on schedule and  Search Catalog of Books
within budget  General public – too complex,
command language and complex
ASCERTAIN USER’S NEEDS cataloging rules
 Define tasks  Solution
 Tasks  Touch screen
 Subtasks  Reduced functionality\
 Frequency  Better information presentation
 Frequent  Eventually Web based interface
 Occasional  Same database and services,
 Exceptional different interfaces
 Repair
Ex. difference between a space USABILITY MEASURES
satellite, car engine, and fighter jet  How can we measure the ‘goodness’
of an interface?
RELIABILITY  What are good metrics?
 Actions function as specified  ISO 9241
 Data displayed must be correct  Effectiveness
 Updates done correctly  Efficiency
 Leads to trust! (software, hardware,  Satisfaction
information) – case: Pentium floating  Schneiderman
point bug  Time to learn
 Privacy, security, access, data  Speed of performance
destruction, tampering  Rate of errors
 Retention over time
STANDARDIZATION, INTEGRATION,  Subjective satisfaction
CONSISTENCY, PORTABILITY
 Standardization – common user- USABILITY MOTIVATIONS
interface features across multiple Life-Critical systems
applications
 Applications: air traffic, nuclear
Apple
reactors, military, emergency
Web
dispatch
Windows
 Requirements: reliability and
 Integration – across application
effective (even under stress)
packages file formats
 Not as important: cost, long training,
 Consistency – common action
satisfaction, retention
sequences, terms, units, layouts,
Industrial and Commercial Use
color, typography within an
 Applications: banking, insurance,
application
inventory, reservations
 Portability – convert data and
 Requirements: short training, ease
interfaces across multiple hardware
of use/learning, multiple languages,
and software environments
 adapt to local cultures, multiplatform, times
speed
Office, Home, and Entertainment
 Applications: E-mail, ATMs, games, PHYSICAL VARIATION
education, search engines, cell Ability
phones/PDA  Disabled (elderly, handicapped,
 Requirements: Ease of vision, ambidexterity, ability to see in
learning/use/retention, error rates, stereo [SUTHERLAND])
satisfaction  Speed
 Difficulties: cost, size  Color deficiency
Exploratory, Creative, Collaborative Workspace (science of ergonomics)
 Applications: Web browsing, search  Size
engines, simulations, scientific  Design
visualization, CAD, computer Lots of prior research
graphics, music composition/artist, Field of anthropometry
photo arranger (email photos)  Measures of what is 5-95% for
 Requirements: remove the weight, height, etc. (static and
‘computer’ from the experience, dynamic)
 Difficulties: user tech savvy-ness  Large variance reminds us there is
(apply this to application examples) great ‘variety’
Socio-technical systems  Name some devices that this would
 Applications: health care, voting, affect.
police  note most keyboards are the same
 Requirements: Trust, security,  screen brightness varies
accuracy, veracity, error handling, considerably
user tech-savy-ness  chair height, back height, display
angle
UNIVERSAL USABILITY Multi-modal interfaces
 Audio
Interface should handle diversity of users  Touch screens
 Backgrounds
 Abilities  COGNITIVE AND PERCEPTUAL
 Motivation VARIATION
 Personalities Bloom’s Taxonomy
 Culture  knowledge, comprehension,
Question, how would you design an analysis, application, synthesis,
interface to a database differently for: evaluation
 A. right-handed female, Indian, Memory
software engineer, technology savvy,  short-term and working
wants rapid interaction  long-term and semantic
 B. left-handed male, French, artist  Problem solving and reasoning
Does not mean ‘dumbing down’ Decision making
 Ex. Helping disabled has helped Language and communication
others (parents w/ strollers, elderly) Search, imagery, sensory memory
 Ex. Door handles Learning, skill development, knowledge
Goal: Address the needs of more users - acquisition
unlike yourself! Confounding factors:
Everyone is often not at full faculties at all  Fatigue
 Cognitive load
  Background (1998 Amendment to Rehabilitation
 Boredom Act)
 Fear Disabilities
 Drugs/alcohol Vision
 Blind (bill-reader)
PERSONALITY  low-vision
Computer anxiety  color-blind
Gender Hearing
 Which games do women like?  Deaf
 Pac-man, Donkey Kong, Tetris  Limited hearing
 Why? (Hypotheses: less violent, Mobility
quieter soundtracks, fully visible Learning
playing fields, softer colors,  Dyslexia
personality, closure/completeness)  Attention deficient, hemisphere s
 Can we measure this? pecific, etc.
 What current games are for women? Keyboard and mouse alternatives
Style, pace, top-down/bottom-up, Color coding
visual/audio learners, dense vs. Font-size
sparse data Contrast
No simple taxonomy of user personality Text descriptors for web images
types. Ex. Myers-Briggs Type Indicator Screen magnification
 Extrovert vs. introvert Text to Speech (TTS) – JAWS (web pages)
 Sensing vs. intuition Check email on the road, in bright sunshine,
 Perceptive vs. judging riding a bike
Speech Recognition
 Feeling vs. thinking
Head mounted optical mice
Weak link between personality types and
Eye Gaze control
interfaces
Learning what helps those with disabilities
Think about your application, and see if user
affects everyone
personality is important!
Fighter jets vs. search engines  Present procedures, directions, and
instructions accessible to even poor
readers
CULTURAL AND INTERNATIONAL
DIVERSITY  Design feedback sequences that
Language explain the reason for error and help
Date / Time conventions put users on the right track
Weights and Measures  Reinforcement techniques with other
Left-to-right devices
Directions (!) Good target area for a final project!
Telephone #s and addresses
Names, titles, salutations ELDERLY
SSN, ID, passport Reduced
Sorting  Motor skills
Icons, buttons, colors  Perception
Etiquette  Vision, hearing, touch, mobility
Evaluation:  Speed
Local experts/usability studies  Memory
Other needs
 USERS WITH DISABILITIES  Technology experience is varied
Federal law to ensure access to IT, (How many grandmothers use
including computers and web sites. email? mothers?)
  Uninformed on how technology Three major technical challenges are:
could help them  Producing satisfying and effective
 Practice skills (hand-eye, problem Internet interaction (broadband vs.
solving, etc.) dial-up & wireless)
 Touch screens, larger fonts, louder  Enabling web services from large to
sounds small (size and resolution)
 Support easy maintenance of or
CHILDREN automatic conversion to multiple
Technology saviness? languages
Age changes much:
 Physical dexterity HCI GOALS
(double-clicking, click and drag, and Influence academic and industrial
small targets) researchers
 Attention span  Understand a problem and related
 (vaguely) Intelligence theory
Varied backgrounds (socio-economic)  Hypothesis and testing
Goals  Study design (we’ll do this!)
 Educational acceleration  Interpret results
 Socialization with peers Provide tools, techniques and knowledge for
 Psychological - improve self-image, commercial developers
self-confidence  competitive advantage (think ipod)
 Creativity – art, music, etc. Raising the computer consciousness of the
exploration general public
Teenagers are a special group  Reduce computer anxiety (error
 Next generation messages)
 Beta test new interfaces, trends  Common fears:
 Cell phones, text messages, I’ll break it
simulations, fantasy games, virtual I’ll make a mistake
worlds The computer is smarter than me
 Requires Safety  HCI contributes to this!
They
 Like exploring (easy to reset state) Near & Future Interfaces
 Don’t mind making mistakes  Let’s review
 Like familiar characters and  Minority Report
repetition (ever had to babysit a kid  Steel Battalion
with an Ice Age DVD?)  Eye Toy
 Don’t like patronizing comments,  Dance Dance Revolution
inappropriate humor  Nintendo Wii
Design: Focus groups • Time to learn
• Speed of performance
ACCOMMODATING HARDWARE AND • Rate of errors
SOFTWARE DIVERSITY • Retention over time
Support a wide range of hardware and • Subjective satisfaction
software platforms
Software and hardware evolution
 OS, application, browsers,
capabilities
 backward compatibility is a good
goal
 SHADE
 color is made by mixing that color
with black.
 shades are dark values that are
made by mixing a color with black.
THE COLOR WHEEL  Maroon is a shade of red, and navy
The color wheel shows relationships is a shade of blue.
between the colors. Artists often use the
color wheel to help understand how colors TINT
relate to one another.  color is made by mixing that color
with white.
PRIMARY COLORS – Red,  tints are light values that are made
Blue and Yellow by mixing a color with white.
 For example, pink is a tint of red
 Primary Colors can’t be made from other (red+white), and gray is a tint of
colors.Color mixing black (black+white).

 Secondary Colors can be made by

mixing
Primary Colors.

Mixing primary and secondary colors

creates Tertiary Colors.

 On the color wheel, the tertiary colors are

located between the primary and secondary
colors they are made from.

ADVANCED COLOR THEORY

Color An element of art which has three
properties. WARM AND COOL COLORS
 Hue - the name of a color. The warm colors are red, orange, yellow,
 Intensity - refers to the brightness and anything in between. They are called
and purity of a color. For example, warm because they remind you of the sun
bright red or dull red. or fire.
 Value - refers to the lightness or
The Cool colors are blue, green, purple
darkness of a color.
and
anything in between.
Hue refers to the name of a color. For
example red, blue, and purple are hues.
They are called cool because they remind
Intensity refers to the brightness or dullness
you of the earth or a cool creek.
of a color. An example is bright red (or dull
red).
NEUTRALS
Neutrals don't usually show up on the color
When a hue is strong and bright, it is said
wheel. Neutrals include black, white, gray,
to be high in intensity. When a color is faint,
and sometimes brown and beige. They are
dull and gray, it is said to be low in intensity
sometimes called “earth tones.
The lightness or darkness of a color is
COLOR SCHEME
called its Value.
MONOCHROMATIC COLORS
A Monochromatic scheme consists of
different values (tints and shades) of a
single color. An example of a monochrome
color scheme could include any color mixed
with white or black.
ANALOGOUS COLORS
Analogous colors are sometimes called
harmonious colors. These colors are located
next to each other on the wheel, such as:
 Blue,Blue-Green, Green
 Red, Red-Orange, and Orange
SPLIT-COMPLIMENTARY COLOR
A split-complimentary color scheme
includes a main color and the two colors on
each side of its complementary (opposite)
color on the color wheel.
An example of a split-compliment color
scheme could be green, violet-red, and red-
orange.
TRIADIC COLOR
A triadic color scheme uses colors at the
points of an equilateral triangle (three colors
spaced equally on the color wheel).
These are sometimes called balanced
colors.
THE MEANING OF COLOR
Red is the color of fire. It is associated with
energy, war, danger, strength, power,
determination and love.
Red is a very emotionally intense color. It
enhances human metabolism, increases
respiration rate, and raises blood pressure.
It
has very high visibility, which is why stop
signs, stoplights, and fire equipment are
usually painted red. It is a color found in
many national flags.
Red brings text and images to the
foreground. Use it as an accent color to
stimulate people to make quick decisions; it
is a perfect color for 'Buy Now' or 'Click
Here' buttons on Internet banners and
websites. Red is widely used to indicate
danger (high voltage signs, traffic lights).
Orange combines the energy of red and the
happiness of yellow. It is associated with joy,
sunshine, and the tropics. Orange
represents enthusiasm, fascination,
happiness, creativity, determination,
attraction, success, and encouragement.
To the human eye, orange is a very hot
color, so it gives the sensation of heat.
Nevertheless, orange is not as aggressive
as red. Orange increases oxygen supply to
the brain, produces an invigorating effect,
and stimulates mental activity. As a citrus
color, orange is associated with healthy food
and stimulates appetite. Orange is the color
of fall and harvest.
Orange has very high visibility, so you can
use it to catch attention and highlight the
most important elements of your design.
Yellow is the color of sunshine. It's
associated with joy, happiness, intellect, and
energy.
Yellow produces a warming effect, arouses
cheerfulness, stimulates mental activity, and
generates muscle energy. Yellow is often
associated with food. Bright, pure yellow is
an attention getter, which is the reason
taxicabs are painted this color. When
overused, yellow may have a disturbing
effect; it is known that babies cry more in
yellow rooms. Yellow is seen before other
colors when placed against black; this
combination is often used to issue a
warning..
Use yellow to evoke pleasant, cheerful
feelings. Yellow is very effective for
attracting attention, so use it to highlight the
most important elements of your design.
Shades of yellow are visually unappealing
because they loose cheerfulness and
become dingy.
Green is the color of nature. It symbolizes
growth, harmony, and freshness. Green has
strong emotional correspondence with
safety. Dark green is also commonly
associated with money.
Green has great healing power. It is the
most
restful color for the human eye; it can
improve
vision. Green suggests stability and
endurance. Sometimes green denotes lack
of experience; for example, a 'greenhorn' is
a novice. Green, as opposed to red, means
safety; it is the color of free passage in road
traffic.
Green is directly related to nature, so you
can use it to promote 'green' products. Dull,
darker green is commonly associated with
money, the financial world, banking, and
Wall Street.
Dark green is associated with ambition,
greed, and jealousy. Olive green is the
traditional color of peace
Blue is the color of the sky and sea. It
symbolizes trust, loyalty, wisdom,
confidence, intelligence, and truth.
Blue is considered beneficial to the mind
and
body. It slows human metabolism and
produces a calming effect. Blue is strongly
associated with tranquility and calmness.
Blue is used to promote products and
services related to cleanliness (water
purification filters, cleaning liquids), air and
sky (airlines, airports, air conditioners),
water and sea (sea voyages, mineral
water).
When used together with warm colors like
yellow or red, blue can create high-impact,
vibrant designs; for example, blue-yellow-
red is a perfect color scheme for a
superhero.
Purple combines the stability of blue and the
energy of red. Purple is associated with
royalty. It symbolizes power, nobility, luxury,
and ambition. It conveys wealth and
extravagance. Purple is associated with
wisdom, dignity, independence, creativity,
mystery, and magic.
According to surveys, almost 75 percent of
pre-adolescent children prefer purple to all
other colors. Purple is a very rare color in
nature; some people consider it to be
artificial
White is associated with light, goodness,
and innocence. It is considered to be the
color of perfection.
White means safety, purity, and cleanliness.
As opposed to black, white usually has a
positive connotation. White can represent a
successful beginning.
White is associated with hospitals, doctors,
and sterility. White is also often associated
with low weight, low-fat food, and dairy
products.
Black is associated with power,
elegance, death, evil, and mystery. Black
is a mysterious color associated with
fear and the unknown (black holes).
Black denotes strength and authority; it
is considered to be a very formal,
elegant, and prestigious color
(black tie event)
Black gives the feeling of perspective
and depth. When designing for a gallery
of art or
photography, you can use a black or
gray background to make the other
colors stand out.
Black contrasts well with bright colors.
Combined with red or orange – other
very powerful colors – black gives a very
aggressive color scheme.