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
SHADE
A Monochromatic scheme consists of
 color is made by mixing that color
different values (tints and shades) of a
with black.
single color. An example of a monochrome
 shades are dark values that are
made by mixing a color with black.
color scheme could include any color mixed happiness of yellow. It is associated with joy,
with white or black. sunshine, and the tropics. Orange
ANALOGOUS COLORS represents enthusiasm, fascination,
Analogous colors are sometimes called happiness, creativity, determination,
harmonious colors. These colors are located attraction, success, and encouragement.
next to each other on the wheel, such as:
 Blue,Blue-Green, Green To the human eye, orange is a very hot
 Red, Red-Orange, and Orange color, so it gives the sensation of heat.
Nevertheless, orange is not as aggressive
SPLIT-COMPLIMENTARY COLOR as red. Orange increases oxygen supply to
A split-complimentary color scheme the brain, produces an invigorating effect,
includes a main color and the two colors on and stimulates mental activity. As a citrus
each side of its complementary (opposite) color, orange is associated with healthy food
color on the color wheel. and stimulates appetite. Orange is the color
of fall and harvest.
An example of a split-compliment color
scheme could be green, violet-red, and red- Orange has very high visibility, so you can
orange. use it to catch attention and highlight the
most important elements of your design.
TRIADIC COLOR
A triadic color scheme uses colors at the Yellow is the color of sunshine. It's
points of an equilateral triangle (three colors associated with joy, happiness, intellect, and
spaced equally on the color wheel). energy.

These are sometimes called balanced Yellow produces a warming effect, arouses
colors. cheerfulness, stimulates mental activity, and
generates muscle energy. Yellow is often
THE MEANING OF COLOR associated with food. Bright, pure yellow is
an attention getter, which is the reason
Red is the color of fire. It is associated with taxicabs are painted this color. When
energy, war, danger, strength, power, overused, yellow may have a disturbing
determination and love. effect; it is known that babies cry more in
yellow rooms. Yellow is seen before other
Red is a very emotionally intense color. It colors when placed against black; this
enhances human metabolism, increases combination is often used to issue a
respiration rate, and raises blood pressure. warning..
It
has very high visibility, which is why stop Use yellow to evoke pleasant, cheerful
signs, stoplights, and fire equipment are feelings. Yellow is very effective for
usually painted red. It is a color found in attracting attention, so use it to highlight the
many national flags. most important elements of your design.
Shades of yellow are visually unappealing
Red brings text and images to the because they loose cheerfulness and
foreground. Use it as an accent color to become dingy.
stimulate people to make quick decisions; it
is a perfect color for 'Buy Now' or 'Click Green is the color of nature. It symbolizes
Here' buttons on Internet banners and growth, harmony, and freshness. Green has
websites. Red is widely used to indicate strong emotional correspondence with
danger (high voltage signs, traffic lights). safety. Dark green is also commonly
associated with money.
Orange combines the energy of red and the
Green has great healing power. It is the
most According to surveys, almost 75 percent of
restful color for the human eye; it can pre-adolescent children prefer purple to all
improve other colors. Purple is a very rare color in
vision. Green suggests stability and nature; some people consider it to be
endurance. Sometimes green denotes lack artificial
of experience; for example, a 'greenhorn' is
a novice. Green, as opposed to red, means White is associated with light, goodness,
safety; it is the color of free passage in road and innocence. It is considered to be the
traffic. color of perfection.

Green is directly related to nature, so you White means safety, purity, and cleanliness.
can use it to promote 'green' products. Dull, As opposed to black, white usually has a
darker green is commonly associated with positive connotation. White can represent a
money, the financial world, banking, and successful beginning.
Wall Street.
White is associated with hospitals, doctors,
Dark green is associated with ambition, and sterility. White is also often associated
greed, and jealousy. Olive green is the with low weight, low-fat food, and dairy
traditional color of peace products.

Blue is the color of the sky and sea. It Black is associated with power,
symbolizes trust, loyalty, wisdom, elegance, death, evil, and mystery. Black
confidence, intelligence, and truth. is a mysterious color associated with
fear and the unknown (black holes).
Blue is considered beneficial to the mind Black denotes strength and authority; it
and is considered to be a very formal,
body. It slows human metabolism and elegant, and prestigious color
produces a calming effect. Blue is strongly (black tie event)
associated with tranquility and calmness.
Black gives the feeling of perspective
Blue is used to promote products and and depth. When designing for a gallery
services related to cleanliness (water of art or
purification filters, cleaning liquids), air and photography, you can use a black or
sky (airlines, airports, air conditioners), gray background to make the other
water and sea (sea voyages, mineral colors stand out.
water).
Black contrasts well with bright colors.
When used together with warm colors like Combined with red or orange – other
yellow or red, blue can create high-impact, very powerful colors – black gives a very
vibrant designs; for example, blue-yellow- aggressive color scheme.
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.
  Cognitive
 Social, economic, ethics

INTRODUCTION TO HCI

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
HCI TOOLS
of major phenomena surrounding them.
 Sound
 3D
WHY HCI IS IMPORTANT?
The study of our interface with information.  Animation
 Video
It is not just ‘how big should I make buttons’  Devices
or ‘how to layout menu choices’  Size (small->very large)
It can affect  Portable (PDA, phone)
 Effectiveness  Plasticity
 Productivity  Context sensitive/aware
 Morale  Personalizable
 Safety  Ubiquitous
Example: a car with poor HCI
USABILITY REQUIREMENTS
WHAT FIELDS DOES HCI COVER?  Goals:
 Computer Science  Usability
 Psychology (cognitive)  Universality
 Communication  Usefulness
 Education  Achieved by:
 Anthropology  Planning
 Design (e.g. graphic and industrial)  Sensitivity to user needs
 Devotion to requirements analysis
HCI COMMUNITY  Testing
 Academics/Industry Research
 Taxonomies BAD INTERFACES
 Theories  Encumbering
 Predictive models  Confusing
 Experimenters  Slow
 Empirical data  Trust (ex. windows crashing)
 Product design  What makes it hard?
 Other areas (Sociologists,  Varies by culture
anthropologists, managers)  Multiple platforms
 Motor
 Perceptual
  Variety of users  Portability – convert data and
interfaces across multiple hardware
and software environments
 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
  Requirements: short training, ease Everyone is often not at full faculties at all
of use/learning, multiple languages, times
adapt to local cultures, multiplatform,
speed
Office, Home, and Entertainment PHYSICAL VARIATION
 Applications: E-mail, ATMs, games, Ability
education, search engines, cell  Disabled (elderly, handicapped,
phones/PDA vision, ambidexterity, ability to see in
 Requirements: Ease of stereo [SUTHERLAND])
learning/use/retention, error rates,  Speed
satisfaction  Color deficiency
 Difficulties: cost, size Workspace (science of ergonomics)
Exploratory, Creative, Collaborative  Size
 Applications: Web browsing, search  Design
engines, simulations, scientific Lots of prior research
visualization, CAD, computer Field of anthropometry
graphics, music composition/artist,  Measures of what is 5-95% for
photo arranger (email photos) weight, height, etc. (static and
 Requirements: remove the dynamic)
‘computer’ from the experience,  Large variance reminds us there is
 Difficulties: user tech savvy-ness great ‘variety’
(apply this to application examples)  Name some devices that this would
Socio-technical systems affect.
 Applications: health care, voting,  note most keyboards are the same
police  screen brightness varies
 Requirements: Trust, security, considerably
accuracy, veracity, error handling,  chair height, back height, display
user tech-savy-ness angle
Multi-modal interfaces
UNIVERSAL USABILITY  Audio
 Touch screens
Interface should handle diversity of users
 Backgrounds  COGNITIVE AND PERCEPTUAL
 Abilities VARIATION
 Motivation Bloom’s Taxonomy
 Personalities  knowledge, comprehension,
 Culture analysis, application, synthesis,
Question, how would you design an evaluation
interface to a database differently for: Memory
 A. right-handed female, Indian,  short-term and working
software engineer, technology savvy,  long-term and semantic
wants rapid interaction  Problem solving and reasoning
 B. left-handed male, French, artist Decision making
Does not mean ‘dumbing down’ Language and communication
 Ex. Helping disabled has helped Search, imagery, sensory memory
others (parents w/ strollers, elderly) Learning, skill development, knowledge
 Ex. Door handles acquisition
Goal: Address the needs of more users - Confounding factors:
unlike yourself!  Fatigue
  Cognitive load including computers and web sites.
 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,
riding a bike
 Perceptive vs. judging
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!
 Present procedures, directions, and
Fighter jets vs. search engines
instructions accessible to even poor
readers
CULTURAL AND INTERNATIONAL
 Design feedback sequences that
DIVERSITY
explain the reason for error and help
Language
put users on the right track
Date / Time conventions
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
Federal law to ensure access to IT,
  Technology experience is varied Three major technical challenges are:
(How many grandmothers use Producing satisfying and effective Internet
email? mothers?) interaction (broadband vs. dial-up &
 Uninformed on how technology wireless)
could help them Enabling web services from large to small
 Practice skills (hand-eye, problem (size and resolution)
solving, etc.) Support easy maintenance of or automatic
 Touch screens, larger fonts, louder conversion to multiple languages
sounds
HCI GOALS
CHILDREN Influence academic and industrial
Technology saviness? researchers
Age changes much: Understand a problem and related theory
 Physical dexterity Hypothesis and testing
(double-clicking, click and drag, and Study design (we’ll do this!)
small targets) Interpret results
 Attention span Provide tools, techniques and knowledge for
commercial developers
 (vaguely) Intelligence
competitive advantage (think ipod)
Varied backgrounds (socio-economic)
Raising the computer consciousness of the
Goals
general public
 Educational acceleration
Reduce computer anxiety (error messages)
 Socialization with peers Common fears:
 Psychological - improve self-image, I’ll break it
self-confidence I’ll make a mistake
 Creativity – art, music, etc. The computer is smarter than me
exploration HCI contributes to this!
Teenagers are a special group
Next generation Near & Future Interfaces
Beta test new interfaces, trends
Cell phones, text messages,
simulations, fantasy games, virtual Let’s review
worlds Minority Report
Requires Safety Steel Battalion
They Eye Toy
Like exploring (easy to reset state) Dance Dance Revolution
Don’t mind making mistakes Nintendo Wii
Like familiar characters and
repetition (ever had to babysit a kid
with an Ice Age DVD?) • Time to learn
• Speed of performance
Don’t like patronizing comments,
• Rate of errors
inappropriate humor • Retention over time
Design: Focus groups • Subjective satisfaction

ACCOMMODATING HARDWARE AND

SOFTWARE DIVERSITY
Support a wide range of hardware and
software platforms
Software and hardware evolution
OS, application, browsers, capabilities
backward compatibility is a good goal