Introduction to HCIIntroduction to HCI

Human Computer InteractionHuman Computer Interaction

CIS 4930/5100CIS 4930/5100

Section 6344/2614Section 6344/2614

What are your goals What are your goals for the class?for the class?

►What is Human-Computer Interaction?What is Human-Computer Interaction? Also known asAlso known as

►Man-Machine Interaction Man-Machine Interaction ►Computer-Human InteractionComputer-Human Interaction

►What are your learning objectives?What are your learning objectives?

►How much effort do you want to How much effort do you want to expand for learning those objectives?expand for learning those objectives?

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 communityHCI community

What the class will look likeWhat the class will look like

► Lectures (participation grade)Lectures (participation grade)► Readings + QuizzesReadings + Quizzes► ProjectsProjects

Initial user studyInitial user study 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 have always Work on a project you have always

wanted credit to work onwanted credit to work on

►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

Participation ExerciseParticipation Exercise

►Why should we study HCI?Why should we study HCI?

►What if you were to design the Future What if you were to design the Future Fast Food Drive-through Ordering Fast Food Drive-through Ordering System?System? Okay, let’s now evaluate itOkay, let’s now evaluate it Who does it serve better? Worse?Who does it serve better? Worse?

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) Whose fault is this?Whose fault is this?

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

► Consider a program, device, or product’s interfaceConsider a program, device, or product’s interface How would you describe the interface?How would you describe the interface? How would you describe the product to your friend?How would you describe the product to your friend? Would you buy the product again?Would you buy the product again? Would you buy a product from the same company again?Would you buy a product from the same company again?

My My ChoiceChoice

► iPod by Apple iPod by Apple ComputersComputers

► Pros:Pros: PortablePortable AppsApps Ease of useEase of use # of controls# of controls

► Cons:Cons: Scratches easilyScratches easily ProprietaryProprietary Many have oneMany have one

Introduction (continued)Introduction (continued)

► What are the ramifications? What are the ramifications? Success Stories: Microsoft, Linux, Amazon.com, Success Stories: Microsoft, Linux, Amazon.com,

Google Google Competition: Firefox vs. Internet ExplorerCompetition: Firefox vs. Internet Explorer Copyright Infringement Suits - Apple vs. Microsoft Copyright Infringement Suits - Apple vs. Microsoft

(Windows) and Napster vs. The music industry (Windows) and Napster vs. The music industry Mergers: AOL and Time Warner Mergers: AOL and Time Warner Corporate Takeovers: IBM's seizure of Lotus Corporate Takeovers: IBM's seizure of Lotus Privacy and Security issues: identification theft, Privacy and Security issues: identification theft,

medical information, viruses, spam, medical information, viruses, spam, pornography, national securitypornography, national security

2010 Pearson Addison-Wesley. All rights reserved

What fields does HCI cover?What fields does HCI cover?

►Computer ScienceComputer Science►PsychologyPsychology►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► GesturesGestures► 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

►Define, measureDefine, measure► 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?

Importance of Design

►http://www.masternewmedia.org/news/2005/04/17/bad_user_interface_design_can.htm

Requirements AnalysisRequirements Analysis1.1. In designing a building I want inhabitants In designing a building I want inhabitants

to move between floorsto move between floors1.1. Ascertain users’ needsAscertain users’ needs

2.2. Ensure proper reliabilityEnsure proper reliability

3.3. Promote appropriate standardization, integration, Promote appropriate standardization, integration, consistency, and portabilityconsistency, and portability

4.4. Complete projects on schedule and within budgetComplete projects on schedule and within budget

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: 1994 Pentium FDIV bugcase: 1994 Pentium FDIV bug Cost to Intel: $475 millionCost to Intel: $475 million

► Privacy, security, access, Privacy, security, access, data destruction, tamperingdata destruction, tampering

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 Smart phonesSmart phones

► 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 applicationunits, layouts, 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/ASCII/FlashWord/HTML/PDF/ASCII/Flash

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

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 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. 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 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► 1998 Amendment to 1998 Amendment to

Rehabilitation ActRehabilitation Act Federal law to ensure access to IT, Federal law to ensure access to IT,

including computers and web sites including computers and web sites ► 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 Attention deficient, hemisphere

specific, etc.specific, etc.► Keyboard, mouse, color Keyboard, mouse, color

alternativesalternatives

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 bikebright sunshine, riding a bike►Mac OS X and Windows Mac OS X and Windows

Universal AccessUniversal Access► 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 (How Technology experience is varied (How

many grandmothers use email? many grandmothers use email? mothers?)mothers?)

Uninformed on how technology could Uninformed on how technology could help themhelp them

Practice skills (hand-eye, problem Practice skills (hand-eye, problem solving, etc.)solving, etc.)

► Touch screens, larger fonts, louder Touch screens, larger fonts, louder soundssounds

► Silver surfersSilver surfers

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

Goals for Academic HCIGoals for Academic HCI► 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!

Participation ExerciseParticipation Exercise

►What if you were to design the Future What if you were to design the Future Fast Food Drive-through Ordering Fast Food Drive-through Ordering System?System?

Near & Future Near & Future InterfacesInterfaces

► Sci-Fi InterfacesSci-Fi Interfaces Star TrekStar Trek Minority ReportMinority Report Iron Man 2Iron Man 2

► GamesGames Dance Dance RevolutionDance Dance Revolution Guitar Hero/Rock BandGuitar Hero/Rock Band Microsoft Kinect, Nintendo Wii, Playstation MoveMicrosoft Kinect, Nintendo Wii, Playstation Move

► Smart PhonesSmart Phones► 3D TV and movies3D TV and movies

•Time to learn

•Speed of performance

•Rate of errors

•Retention over time

•Subjective satisfaction