Introduction to Human Computer Interactions

Introduction to Human Computer Interaction is for beginners to understand how to start or begin with user interface design. Basic idea here is to give brief idea about the various fields in Human Computer Interaction. HCI (Human Computer Interaction) is a field of study that refers to communication between the human user and a computer system. Here interface refers to a medium or interaction between the computer and the end user. It is also known as CHI (Computer Human Interface) or MMI (Man Machine Interaction). It is concerned with design, evaluation, and implementation. It is used to provide a user-friendly environment.

1. Introduction to HCIIntroduction to HCI
Human Computer InteractionHuman Computer Interaction
CIS 4930/6930CIS 4930/6930
Section 1185/4198Section 1185/4198

2. Class GoalsClass Goals
►Motivate the field of HCIMotivate the field of HCI
►LearnLearn
Basics of interface designBasics of interface design
Evaluation of interfacesEvaluation of interfaces
HCI research problemsHCI research problems
HCI community (conferences and people)HCI community (conferences and people)

3. What the class will look likeWhat the class will look like
►LecturesLectures
►Readings + Quizzes + Presentations (?)Readings + Quizzes + Presentations (?)
►Initial user study (web interface comparison)Initial user study (web interface comparison)
►Final projectFinal project
Identify a clientIdentify a client
Create a new interfaceCreate a new interface
Evaluate the interfaceEvaluate the interface
►Differences between undergrad/gradDifferences between undergrad/grad
Project requirementsProject requirements

4. Why take this course?Why take this course?
►Build your portfolioBuild your portfolio
Work on a project you’ve always wantedWork on a project you’ve always wanted
►Study a unique topicStudy a unique topic
A computer science course focused on usersA computer science course focused on users
►Skill buildingSkill building
Important in most researchImportant in most research
Burgeoning job fieldBurgeoning job field

5. IntroIntro
►What is a user interface?What is a user interface?
►Why do we care about design?Why do we care about design?
►We see this all the time. We see this all the time.
What’s good about the design of this error box?What’s good about the design of this error box?
►The user knows there is an errorThe user knows there is an error
What’s poor about the design of this error box?What’s poor about the design of this error box?
►DiscouragingDiscouraging
►Not enough informationNot enough information
►No way to No way to resolveresolve the problem (instructions or contact info) the problem (instructions or contact info)

6. Definition of HCIDefinition of HCI
►Human-computer interaction is a discipline Human-computer interaction is a discipline
concerned with the design, evaluation and concerned with the design, evaluation and
implementation of interactive computing implementation of interactive computing
systems for human use and with the study systems for human use and with the study
of major phenomena surrounding them. of major phenomena surrounding them.
►ACM SIGCHI Curricula for HCI (Hewett et al. ACM SIGCHI Curricula for HCI (Hewett et al.
1992)1992)
►http://sigchi.org/cdg/cdg2.htmlhttp://sigchi.org/cdg/cdg2.html

7. Why HCI is ImportantWhy HCI is Important
►The study of our interface with information.The study of our interface with information.
►It is not just ‘how big should I make buttons’ or ‘how to It is not just ‘how big should I make buttons’ or ‘how to
layout menu choices’layout menu choices’
►It can affectIt can affect
EffectivenessEffectiveness
ProductivityProductivity
MoraleMorale
SafetySafety
►Example: a car with poor HCIExample: a car with poor HCI
►Take 5 minutes for everyone to write down one Take 5 minutes for everyone to write down one
common device with substantial HCI design choices common device with substantial HCI design choices
and discuss with the neighbor the pros and cons. How and discuss with the neighbor the pros and cons. How
does it affect you or other users?does it affect you or other users?

8. My My
ChoiceChoice
►iPod by Apple iPod by Apple
ComputersComputers
►Pros:Pros:
portableportable
powerpower
ease of useease of use
# of controls# of controls
►Cons:Cons:
scratches easilyscratches easily
no speech for car useno speech for car use
proprietaryproprietary

9. What fields does HCI cover?What fields does HCI cover?
►Computer ScienceComputer Science
►Psychology (cognitive)Psychology (cognitive)
►CommunicationCommunication
►EducationEducation
►AnthropologyAnthropology
►Design (e.g. graphic and industrial)Design (e.g. graphic and industrial)

10. HCI CommunityHCI Community
►Academics/Industry Academics/Industry
Research Research
TaxonomiesTaxonomies
TheoriesTheories
Predictive modelsPredictive models
►Experimenters Experimenters
Empirical dataEmpirical data
Product designProduct design
►Other areas (Sociologists, Other areas (Sociologists,
anthropologists, managers)anthropologists, managers)
MotorMotor
PerceptualPerceptual
CognitiveCognitive
Social, economic, ethicsSocial, economic, ethics

11. HCI ToolsHCI Tools
►SoundSound
►3D3D
►AnimationAnimation
►VideoVideo
►DevicesDevices
Size (small->very large)Size (small->very large)
Portable (PDA, phone)Portable (PDA, phone)
PlasticityPlasticity
►Context sensitive/awareContext sensitive/aware
►PersonalizablePersonalizable
►UbiquitousUbiquitous

12. Usability RequirementsUsability Requirements
►Goals:Goals:
UsabilityUsability
UniversalityUniversality
UsefulnessUsefulness
►Achieved by:Achieved by:
PlanningPlanning
Sensitivity to user Sensitivity to user
needsneeds
Devotion to Devotion to
requirements analysisrequirements analysis
TestingTesting

13. Bad InterfacesBad Interfaces
►EncumberingEncumbering
►ConfusingConfusing
►SlowSlow
►Trust (ex. windows Trust (ex. windows
crashing)crashing)
►What makes it What makes it
hard?hard?
Varies by cultureVaries by culture
Multiple platformsMultiple platforms
Variety of usersVariety of users

14. ►What’s wrong with each?What’s wrong with each?
Type of errorType of error
Who is affectedWho is affected
ImpactImpact
►What’s a redesign solution?What’s a redesign solution?

15. Requirements AnalysisRequirements Analysis
1.1.Ascertain users’ needsAscertain users’ needs
2.2.Ensure proper reliabilityEnsure proper reliability
3.3.Promote appropriate standardization, Promote appropriate standardization,
integration, consistency, and portabilityintegration, consistency, and portability
4.4.Complete projects on schedule and within Complete projects on schedule and within
budgetbudget

16. Ascertain User’s NeedsAscertain User’s Needs
►Define tasksDefine tasks
TasksTasks
SubtasksSubtasks
►FrequencyFrequency
FrequentFrequent
OccasionalOccasional
ExceptionalExceptional
RepairRepair
►Ex. difference between a space Ex. difference between a space
satellite, car engine, and fighter jetsatellite, car engine, and fighter jet

17. ReliabilityReliability
►Actions function as specifiedActions function as specified
►Data displayed must be Data displayed must be
correctcorrect
►Updates done correctlyUpdates done correctly
►Leads to trust! (software, Leads to trust! (software,
hardware, information) – hardware, information) –
case: Pentium floating point case: Pentium floating point
bugbug
►Privacy, security, access, data Privacy, security, access, data
destruction, tamperingdestruction, tampering

18. Standardization, Integration, Standardization, Integration,
Consistency, PortabilityConsistency, Portability
►Standardization Standardization – common user-interface features – common user-interface features
across multiple applicationsacross multiple applications
AppleApple
WebWeb
WindowsWindows
►Integration Integration – across application packages– across application packages
file formatsfile formats
►Consistency Consistency – common action sequences, terms, units, – common action sequences, terms, units,
layouts, color, typography within an applicationlayouts, color, typography within an application
►Portability Portability – convert data and interfaces across – convert data and interfaces across
multiple hardware and software environmentsmultiple hardware and software environments
Word/HTML/PDF/ASCIIWord/HTML/PDF/ASCII

19. Case Study: Library of Congress Case Study: Library of Congress
Database DesignDatabase Design
►http://catalog.loc.gov/http://catalog.loc.gov/
►Two interfacesTwo interfaces
Catalog New BooksCatalog New Books
►3-6 hour training course - staffers3-6 hour training course - staffers
Search Catalog of BooksSearch Catalog of Books
►General public – too complex, command language and complex General public – too complex, command language and complex
cataloging rulescataloging rules
►SolutionSolution
Touch screenTouch screen
Reduced functionalityReduced functionality
Better information presentationBetter information presentation
►Eventually Web based interfaceEventually Web based interface
►Same database and services, different interfacesSame database and services, different interfaces

20. Usability Usability
MeasuresMeasures
►How can we measure the How can we measure the
‘goodness’ of an interface?‘goodness’ of an interface?
►What are good metrics?What are good metrics?
►ISO 9241ISO 9241
EffectivenessEffectiveness
EfficiencyEfficiency
SatisfactionSatisfaction
►SchneidermanSchneiderman
Time to learnTime to learn
Speed of performanceSpeed of performance
Rate of errorsRate of errors
Retention over timeRetention over time
Subjective satisfactionSubjective satisfaction

21. Usability Usability
MotivationsMotivations
►Life-Critical systemsLife-Critical systems
ApplicationsApplications: air traffic, nuclear reactors, military, emergency : air traffic, nuclear reactors, military, emergency
dispatchdispatch
RequirementsRequirements: reliability and effective (even under stress): reliability and effective (even under stress)
Not as importantNot as important: cost, long training, satisfaction, retention: cost, long training, satisfaction, retention
►Industrial and Commercial UseIndustrial and Commercial Use
ApplicationsApplications: banking, insurance, inventory, reservations: banking, insurance, inventory, reservations
RequirementsRequirements: short training, ease of use/learning, multiple : short training, ease of use/learning, multiple
languages, adapt to local cultures, multiplatform, speedlanguages, adapt to local cultures, multiplatform, speed
►Office, Home, and EntertainmentOffice, Home, and Entertainment
ApplicationsApplications: E-mail, ATMs, games, education, search engines, : E-mail, ATMs, games, education, search engines,
cell phones/PDAcell phones/PDA
RequirementsRequirements: Ease of learning/use/retention, error rates, : Ease of learning/use/retention, error rates,
satisfactionsatisfaction
DifficultiesDifficulties: cost, size: cost, size
•Time to learn
•Speed of performance
•Rate of errors
•Retention over time
•Subjective satisfaction

22. Usability MotivationsUsability Motivations
►Exploratory, Creative, CollaborativeExploratory, Creative, Collaborative
ApplicationsApplications: Web browsing, search engines, : Web browsing, search engines,
simulations, scientific visualization, CAD, computer simulations, scientific visualization, CAD, computer
graphics, music composition/artist, photo arranger graphics, music composition/artist, photo arranger
(email photos)(email photos)
RequirementsRequirements: remove the ‘computer’ from the : remove the ‘computer’ from the
experience, experience,
DifficultiesDifficulties: user tech savvy-ness (apply this to : user tech savvy-ness (apply this to
application examples)application examples)
►Socio-technical systemsSocio-technical systems
ApplicationsApplications: health care, voting, police: health care, voting, police
RequirementsRequirements: Trust, security, accuracy, veracity, : Trust, security, accuracy, veracity,
error handling, user tech-savy-nesserror handling, user tech-savy-ness
•Time to learn
•Speed of performance
•Rate of errors
•Retention over time
•Subjective satisfaction

23. Universal UsabilityUniversal Usability
►Interface should handle diversity of Interface should handle diversity of
usersusers
BackgroundsBackgrounds
AbilitiesAbilities
MotivationMotivation
PersonalitiesPersonalities
CulturesCultures
►Question, how would you design an Question, how would you design an
interface to a database differently for:interface to a database differently for:
A. right-handed female, Indian, software A. right-handed female, Indian, software
engineer, technology savvy, wants rapid engineer, technology savvy, wants rapid
interactioninteraction
B. left-handed male, French, artistB. left-handed male, French, artist

24. Universal UsabilityUniversal Usability
►Does not mean ‘dumbing Does not mean ‘dumbing
down’down’
Ex. Helping disabled has helped Ex. Helping disabled has helped
others (parents w/ strollers, others (parents w/ strollers,
elderly)elderly)
Ex. Door handlesEx. Door handles
►Goal: Address the needs of Goal: Address the needs of
more users - unlike yourself!more users - unlike yourself!
►Everyone is often not at full Everyone is often not at full
faculties at all timesfaculties at all times

25. Physical VariationPhysical Variation
►AbilityAbility
Disabled (elderly, Disabled (elderly,
handicapped, vision, handicapped, vision,
ambidexterity, ability to see ambidexterity, ability to see
in stereo [SUTHERLAND])in stereo [SUTHERLAND])
SpeedSpeed
Color deficiencyColor deficiency
►Workspace (science of Workspace (science of
ergonomicsergonomics))
SizeSize
DesignDesign
►Lots of prior researchLots of prior research

26. Physical VariationPhysical Variation
►Field of Field of anthropometryanthropometry
Measures of what is 5-95% for Measures of what is 5-95% for
weight, height, etc. (static and weight, height, etc. (static and
dynamic)dynamic)
Large variance reminds us there Large variance reminds us there
is great ‘variety’is great ‘variety’
Name some devices that this Name some devices that this
would affect.would affect.
►note most keyboards are the note most keyboards are the
samesame
►screen brightness varies screen brightness varies
considerablyconsiderably
►chair height, back height, chair height, back height,
display angledisplay angle
►Multi-modal interfacesMulti-modal interfaces
►AudioAudio
►Touch screensTouch screens

27. Cognitive and Perceptual VariationCognitive and Perceptual Variation
►Bloom’s TaxonomyBloom’s Taxonomy
knowledge, knowledge,
comprehension, comprehension,
analysis, application, analysis, application,
synthesis, evaluationsynthesis, evaluation
►MemoryMemory
short-term and workingshort-term and working
long-term and semanticlong-term and semantic
►Problem solving and Problem solving and
reasoningreasoning
►Decision makingDecision making
►Language and Language and
communicationcommunication

28. Cognitive and Perceptual VariationCognitive and Perceptual Variation
►Language and Language and
communicationcommunication
►Search, imagery, sensory Search, imagery, sensory
memorymemory
►Learning, skill Learning, skill
development, knowledge development, knowledge
acquisitionacquisition
►Confounding factors:Confounding factors:
FatigueFatigue
Cognitive loadCognitive load
BackgroundBackground
BoredomBoredom
FearFear
Drugs/alcoholDrugs/alcohol

29. PersonalityPersonality
►Computer anxietyComputer anxiety
►GenderGender
Which games do women like?Which games do women like?
Pac-man, Donkey Kong, TetrisPac-man, Donkey Kong, Tetris
Why? (Hypotheses: less violent, Why? (Hypotheses: less violent,
quieter soundtracks, fully visible quieter soundtracks, fully visible
playing fields, softer colors, playing fields, softer colors,
personality, personality,
closure/completeness)closure/completeness)
Can we measure this?Can we measure this?
►What current games are for What current games are for
women?women?
►Style, pace, top-down/bottom-Style, pace, top-down/bottom-
up, visual/audio learners, up, visual/audio learners,
dense vs. sparse datadense vs. sparse data

30. PersonalityPersonality
►No simple taxonomy of user No simple taxonomy of user
personality types. Ex. Myers-personality types. Ex. Myers-
Briggs Type IndicatorBriggs Type Indicator
Extrovert vs. introvertExtrovert vs. introvert
Sensing vs. intuitionSensing vs. intuition
Perceptive vs. judgingPerceptive vs. judging
Feeling vs. thinkingFeeling vs. thinking
►Weak link between personality Weak link between personality
types and interfacestypes and interfaces
►Think about your application, Think about your application,
and see if user personality is and see if user personality is
important!important!
Fighter jets vs. search enginesFighter jets vs. search engines

31. Cultural and International Cultural and International
DiversityDiversity
►LanguageLanguage
►Date / Time conventionsDate / Time conventions
►Weights and MeasuresWeights and Measures
►Left-to-rightLeft-to-right
►Directions (!)Directions (!)
►Telephone #s and addressesTelephone #s and addresses
►Names, titles, salutationsNames, titles, salutations
►SSN, ID, passportSSN, ID, passport
►SortingSorting
►Icons, buttons, colorsIcons, buttons, colors
►EtiquetteEtiquette
►Evaluation:Evaluation:
Local experts/usability studiesLocal experts/usability studies

32. Users with DisabilitiesUsers with Disabilities
►Federal law to ensure access to IT, including computers Federal law to ensure access to IT, including computers
and web sites. (1998 Amendment to Rehabilitation Act)and web sites. (1998 Amendment to Rehabilitation Act)
►DisabilitiesDisabilities
VisionVision
►Blind (bill-reader)Blind (bill-reader)
►low-visionlow-vision
►color-blindcolor-blind
HearingHearing
►DeafDeaf
►Limited hearingLimited hearing
MobilityMobility
LearningLearning
►DyslexiaDyslexia
►Attention deficient, hemisphere specific, etc.Attention deficient, hemisphere specific, etc.
►Keyboard and mouse alternativesKeyboard and mouse alternatives
►Color codingColor coding
►Font-sizeFont-size

33. Users with DisabilitiesUsers with Disabilities
►ContrastContrast
►Text descriptors for web Text descriptors for web
imagesimages
►Screen magnificationScreen magnification
►Text to Speech (TTS) – Text to Speech (TTS) –
JAWS (web pages)JAWS (web pages)
Check email on the road, in Check email on the road, in
bright sunshine, riding a bright sunshine, riding a
bikebike
►Speech RecognitionSpeech Recognition
►Head mounted optical Head mounted optical
micemice

34. Users with DisabilitiesUsers with Disabilities
►Eye Gaze controlEye Gaze control
►Learning what helps those Learning what helps those
with disabilities affects with disabilities affects
everyoneeveryone
Present procedures, directions, Present procedures, directions,
and instructions accessible to and instructions accessible to
even poor readerseven poor readers
Design feedback sequences that Design feedback sequences that
explain the reason for error and explain the reason for error and
help put users on the right trackhelp put users on the right track
Reinforcement techniques with Reinforcement techniques with
other devicesother devices
►Good target area for a final Good target area for a final
project!project!

35. ElderlyElderly
►ReducedReduced
Motor skillsMotor skills
PerceptionPerception
Vision, hearing, touch, mobilityVision, hearing, touch, mobility
SpeedSpeed
MemoryMemory
►Other needsOther needs
Technology experience is varied (How Technology experience is varied (How
many grandmothers use email? many grandmothers use email?
mothers?)mothers?)
Uninformed on how technology Uninformed on how technology
could help themcould help them
Practice skills (hand-eye, problem Practice skills (hand-eye, problem
solving, etc.)solving, etc.)
►Touch screens, larger fonts, Touch screens, larger fonts,
louder soundslouder sounds

36. ChildrenChildren
►Technology saviness?Technology saviness?
►Age changes much:Age changes much:
Physical dexterity Physical dexterity
►(double-clicking, click and drag, and small targets)(double-clicking, click and drag, and small targets)
Attention spanAttention span
(vaguely) Intelligence(vaguely) Intelligence
►Varied backgrounds (socio-economic)Varied backgrounds (socio-economic)
►GoalsGoals
Educational accelerationEducational acceleration
Socialization with peersSocialization with peers
Psychological - improve self-image, self-confidencePsychological - improve self-image, self-confidence
Creativity – art, music, etc. explorationCreativity – art, music, etc. exploration

37. ChildrenChildren
►Teenagers are a special groupTeenagers are a special group
Next generationNext generation
Beta test new interfaces, trendsBeta test new interfaces, trends
Cell phones, text messages, simulations, fantasy Cell phones, text messages, simulations, fantasy
games, virtual worldsgames, virtual worlds
►Requires SafetyRequires Safety
►TheyThey
Like exploring (easy to reset state)Like exploring (easy to reset state)
Don’t mind making mistakesDon’t mind making mistakes
Like familiar characters and repetition (ever had to Like familiar characters and repetition (ever had to
babysit a kid with an Ice Age DVD?)babysit a kid with an Ice Age DVD?)
Don’t like patronizing comments, inappropriate humorDon’t like patronizing comments, inappropriate humor
►Design: Focus groupsDesign: Focus groups

38. Accommodating Hardware and Accommodating Hardware and
Software DiversitySoftware Diversity
►Support a wide range of hardware and software Support a wide range of hardware and software
platformsplatforms
►Software and hardware evolutionSoftware and hardware evolution
OS, application, browsers, capabilitiesOS, application, browsers, capabilities
backward compatibility is a good goalbackward compatibility is a good goal
►Three major technical challenges are:Three major technical challenges are:
Producing satisfying and effective Internet Producing satisfying and effective Internet
interaction (broadband vs. dial-up & wireless)interaction (broadband vs. dial-up & wireless)
Enabling web services from large to small (size and Enabling web services from large to small (size and
resolution)resolution)
Support easy maintenance of or automatic Support easy maintenance of or automatic
conversion to multiple languagesconversion to multiple languages

39. HCI GoalsHCI Goals
►Influence academic and industrial researchersInfluence academic and industrial researchers
Understand a problem and related theoryUnderstand a problem and related theory
Hypothesis and testingHypothesis and testing
Study design (we’ll do this!)Study design (we’ll do this!)
Interpret resultsInterpret results
►Provide tools, techniques and knowledge for Provide tools, techniques and knowledge for
commercial developerscommercial developers
competitive advantage (think ipod)competitive advantage (think ipod)
►Raising the computer consciousness of the general Raising the computer consciousness of the general
publicpublic
Reduce computer anxiety (error messages)Reduce computer anxiety (error messages)
Common fears:Common fears:
►I’ll break itI’ll break it
►I’ll make a mistakeI’ll make a mistake
►The computer is smarter than meThe computer is smarter than me
HCI contributes to this!HCI contributes to this!

40. Near & Future InterfacesNear & Future Interfaces
►Let’s reviewLet’s review
►Minority ReportMinority Report
►Steel BattalionSteel Battalion
►Eye ToyEye Toy
►Dance Dance RevolutionDance Dance Revolution
►Nintendo WiiNintendo Wii
•Time to learn
•Speed of performance
•Rate of errors
•Retention over time
•Subjective satisfaction