Introduction to HCIIntroduction to HCI

Human Computer InteractionHuman Computer Interaction

CIS 4930/6930CIS 4930/6930

Section 1185/4198Section 1185/4198

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)

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

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 A computer science course focused on

usersusers

►Skill buildingSkill building Important in most researchImportant in most research Burgeoning job fieldBurgeoning job field

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 the problem (instructions or contact

info)info)

Definition of HCIDefinition of HCI

►Human-computer interaction is a Human-computer interaction is a discipline concerned with the design, discipline concerned with the design, evaluation and implementation of evaluation and implementation of interactive computing systems for interactive computing systems for human use and with the study of major human use and with the study of major phenomena surrounding them. phenomena surrounding them.

►ACM SIGCHI Curricula for HCI (Hewett et ACM SIGCHI Curricula for HCI (Hewett et al. 1992)al. 1992)

►http://sigchi.org/cdg/cdg2.htmlhttp://sigchi.org/cdg/cdg2.html

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 It is not just ‘how big should I make buttons’ or

‘how to layout menu choices’‘how to 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. and discuss with the neighbor the pros and cons. How does it affect you or other users?How does it affect you or other users?

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 no speech for car

useuse proprietaryproprietary

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)

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

HCI ToolsHCI Tools

► SoundSound► 3D3D► AnimationAnimation► VideoVideo► DevicesDevices

Size (small->very large)Size (small->very large) Portable (PDA, phone)Portable (PDA, phone) PlasticityPlasticity

► Context Context sensitive/awaresensitive/aware

► PersonalizablePersonalizable► UbiquitousUbiquitous

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

Bad InterfacesBad Interfaces

► EncumberingEncumbering► ConfusingConfusing► SlowSlow► Trust (ex. Trust (ex.

windows windows crashing)crashing)

► What makes it What makes it hard?hard? Varies by cultureVaries by culture Multiple platformsMultiple platforms Variety of usersVariety of users

► 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 What’s a redesign solution?solution?

Requirements AnalysisRequirements Analysis1.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

Ascertain User’s Ascertain User’s NeedsNeeds

► 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 satellite, car engine, and fighter jetjet

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, Privacy, security, access, data destruction, tamperingdata destruction, tampering

Standardization, Integration, Standardization, Integration, Consistency, PortabilityConsistency, Portability

► Standardization Standardization – common user-interface – common user-interface features across multiple applicationsfeatures across multiple applications AppleApple WebWeb WindowsWindows

► Integration Integration – across application packages– across application packages file formatsfile formats

► Consistency Consistency – common action sequences, terms, – common action sequences, terms, units, layouts, color, typography within an units, layouts, color, typography within an applicationapplication

► 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

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

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

Usability Usability MotivationsMotivations

► Life-Critical systemsLife-Critical systems ApplicationsApplications: air traffic, nuclear reactors, military, : air traffic, nuclear reactors, military,

emergency dispatchemergency dispatch 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 : E-mail, ATMs, games, education, search engines, cell phones/PDAengines, cell 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

Usability MotivationsUsability Motivations

► Exploratory, Creative, CollaborativeExploratory, Creative, Collaborative ApplicationsApplications: Web browsing, search engines, : Web browsing, search engines,

simulations, scientific visualization, CAD, simulations, scientific visualization, CAD, computer graphics, music composition/artist, computer graphics, music composition/artist, photo arranger (email photos)photo arranger (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, : Trust, security, accuracy,

veracity, error handling, user tech-savy-nessveracity, error handling, user tech-savy-ness

•Time to learn•Speed of performance•Rate of errors•Retention over time•Subjective satisfaction

Universal UsabilityUniversal Usability

► Interface should handle diversity of Interface should handle diversity of usersusers BackgroundsBackgrounds AbilitiesAbilities MotivationMotivation PersonalitiesPersonalities CulturesCultures

► Question, how would you design Question, how would you design an interface to a database an interface to a database differently for:differently for: A. right-handed female, Indian, A. right-handed female, Indian,

software engineer, technology savvy, software engineer, technology savvy, wants rapid interactionwants rapid interaction

B. left-handed male, French, artistB. left-handed male, French, artist

Universal UsabilityUniversal Usability

► Does not mean ‘dumbing Does not mean ‘dumbing down’down’ Ex. Helping disabled has Ex. Helping disabled has

helped others (parents w/ helped others (parents w/ strollers, elderly)strollers, 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

Physical VariationPhysical Variation► AbilityAbility

Disabled (elderly, Disabled (elderly, handicapped, vision, handicapped, vision, ambidexterity, ability to ambidexterity, ability to see in stereo see in stereo [SUTHERLAND])[SUTHERLAND])

SpeedSpeed Color deficiencyColor deficiency

► Workspace (science of Workspace (science of ergonomicsergonomics)) SizeSize DesignDesign

► Lots of prior researchLots of prior research

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 weight, height, etc. (static and dynamic)and dynamic)

Large variance reminds us Large variance reminds us there is great ‘variety’there 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

Cognitive and Perceptual Cognitive and Perceptual VariationVariation

► Bloom’s TaxonomyBloom’s Taxonomy knowledge, knowledge,

comprehension, comprehension, analysis, application, analysis, application, synthesis, evaluationsynthesis, evaluation

► MemoryMemory short-term and short-term and

workingworking long-term and long-term and

semanticsemantic► Problem solving and Problem solving and

reasoningreasoning► Decision makingDecision making► Language and Language and

communicationcommunication

Cognitive and Perceptual Cognitive and Perceptual VariationVariation

► Language and Language and communicationcommunication

► Search, imagery, Search, imagery, sensory memorysensory memory

► Learning, skill Learning, skill development, development, knowledge acquisitionknowledge acquisition

► Confounding factors:Confounding factors: FatigueFatigue Cognitive loadCognitive load BackgroundBackground BoredomBoredom FearFear Drugs/alcoholDrugs/alcohol

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 quieter soundtracks, fully visible playing fields, softer visible playing fields, softer colors, personality, colors, 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, Style, pace,

top-down/bottom-up, top-down/bottom-up, visual/audio learners, dense visual/audio learners, dense vs. sparse datavs. sparse data

PersonalityPersonality► No simple taxonomy of user No simple taxonomy of user

personality types. Ex. personality types. Ex. Myers-Briggs Type IndicatorMyers-Briggs 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 Weak link between personality types and personality types and interfacesinterfaces

► 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

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 Telephone #s and

addressesaddresses► 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

Users with DisabilitiesUsers with Disabilities► Federal law to ensure access to IT, including Federal law to ensure access to IT, including

computers and web sites. (1998 Amendment to computers and web sites. (1998 Amendment to Rehabilitation Act)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

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, Check email on the road,

in bright sunshine, riding in bright sunshine, riding a bikea bike

► Speech RecognitionSpeech Recognition► Head mounted optical Head mounted optical

micemice

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, Present procedures,

directions, and instructions directions, and instructions accessible to even poor accessible to even poor readersreaders

Design feedback sequences Design feedback sequences that explain the reason for that explain the reason for error and help put users on error and help put users on the right trackthe right track

Reinforcement techniques Reinforcement techniques with other deviceswith other devices

► Good target area for a final Good target area for a final project!project!

ElderlyElderly► ReducedReduced

Motor skillsMotor skills PerceptionPerception Vision, hearing, touch, mobilityVision, hearing, touch, mobility SpeedSpeed MemoryMemory

► Other needsOther needs Technology experience is varied Technology experience is varied

(How many grandmothers use (How many grandmothers use email? mothers?)email? 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

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-Psychological - improve self-image, self-

confidenceconfidence Creativity – art, music, etc. explorationCreativity – art, music, etc. exploration

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 Like familiar characters and repetition (ever had

to babysit a kid with an Ice Age DVD?)to babysit a kid with an Ice Age DVD?) Don’t like patronizing comments, inappropriate Don’t like patronizing comments, inappropriate

humorhumor► Design: Focus groupsDesign: Focus groups

Accommodating Hardware and Accommodating Hardware and Software DiversitySoftware Diversity

► Support a wide range of hardware and Support a wide range of hardware and software platformssoftware platforms

► 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 Enabling web services from large to small (size

and resolution)and resolution) Support easy maintenance of or automatic Support easy maintenance of or automatic

conversion to multiple languagesconversion to multiple languages

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 Raising the computer consciousness of the general publicgeneral public 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!

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