Introduction to HCIIntroduction to HCIHuman Computer InteractionHuman Computer Interaction

CIS 6930/4930CIS 6930/4930Section 4188/4186Section 4188/4186

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)

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 ChoiceMy Choice► 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

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. windows Trust (ex. windows

crashing)crashing)► What makes it hard?What makes it hard?

Varies by cultureVaries by culture Multiple platformsMultiple platforms Variety of usersVariety of users

► Think of a game Think of a game you’ve played with a you’ve played with a bad interfacebad interface UNIXUNIX

► 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’ needs2.2. Ensure proper reliabilityEnsure proper reliability3.3. Promote appropriate standardization, Promote appropriate standardization,

integration, consistency, and portabilityintegration, consistency, and portability4.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 Ex. difference between a space satellite, car a space satellite, car engine, and fighter jetengine, and fighter jet

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 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, – 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/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 usersInterface should handle diversity of users

BackgroundsBackgrounds AbilitiesAbilities MotivationMotivation PersonalitiesPersonalities CulturesCultures

► Question, how would you design an interface Question, how would you design an interface to a database differently for: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► Does not mean ‘dumbing down’Does not mean ‘dumbing down’

Ex. Helping disabled has helped others (parents Ex. Helping disabled has helped others (parents w/ strollers, elderly)w/ strollers, elderly)

Ex. Door handlesEx. Door handles► Goal: Address the needs of more users - Goal: Address the needs of more users -

unlike yourself!unlike yourself!

Physical VariationPhysical Variation► AbilityAbility

Disabled (elderly, handicapped, vision, Disabled (elderly, handicapped, vision, ambidexterity, ability to see in stereo ambidexterity, ability to 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► Field of Field of anthropometryanthropometry

Measures of what is 5-95% for weight, Measures of what is 5-95% for weight, height, etc. (static and dynamic)height, etc. (static and dynamic)

Large variance reminds us there is Large variance reminds us there is great ‘variety’great ‘variety’

Name some devices that this would Name some devices that this would affect.affect.

► note most keyboards are the samenote most keyboards are the same► screen brightness varies considerablyscreen brightness varies considerably► chair height, back height, display anglechair height, back height, display angle

► Multi-modal interfacesMulti-modal interfaces► AudioAudio► Touch screensTouch screens

Cognitive and Perceptual Cognitive and Perceptual VariationVariation

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

analysis, application, synthesis, analysis, application, synthesis, evaluationevaluation

► MemoryMemory short-term and workingshort-term and working long-term and semanticlong-term and semantic

► Problem Solving and reasoningProblem Solving and reasoning► Decision makingDecision making► Language and communicationLanguage and communication► Search, imagery, sensory Search, imagery, sensory

memorymemory► Learning, skill development, Learning, skill development,

knowledge acquisitionknowledge acquisition► Confounding factors:Confounding factors:

fatigue, cognitive load, fatigue, cognitive load, background, boredom, fear, background, boredom, fear, 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, quieter Why? (Hypotheses: less violent, quieter

soundtracks, fully visible playing fields, softer soundtracks, fully visible playing fields, softer colors, personality, closure/completeness)colors, personality, closure/completeness)

Can we measure this?Can we measure this?► What current games are for women?What current games are for women?► Style, pace, top-down/bottom-up, Style, pace, top-down/bottom-up,

visual/audio learners, dense vs. sparse datavisual/audio learners, dense vs. sparse data► No simple taxonomy of user personality No simple taxonomy of user personality

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

► Think about your application, and see if user Think about your application, and see if user personality is important!personality is 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 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

Users with DisabilitiesUsers with Disabilities► ContrastContrast► Text descriptors for web imagesText descriptors for web images► Screen magnificationScreen magnification► Text to Speech (TTS) – JAWS (web pages)Text to Speech (TTS) – JAWS (web pages)

Check email on the road, in bright Check email on the road, in bright sunshine, riding a bikesunshine, riding a bike

► Speech RecognitionSpeech Recognition► Head mounted optical miceHead mounted optical mice► Eye Gaze controlEye Gaze control► Learning what helps those with Learning what helps those with

disabilities affects everyonedisabilities affects everyone Present procedures, directions, and Present procedures, directions, and

instructions accessible to even poor instructions accessible to even poor readersreaders

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

Reinforcement techniques with other Reinforcement techniques with other devicesdevices

► Good target area for a final project!Good target area for a final 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-confidencePsychological - improve self-image, self-confidence Creativity – art, music, etc. explorationCreativity – art, music, etc. exploration

► 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 games, virtual worldsCell phones, text messages, simulations, fantasy games, 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 babysit a kid with an Ice Age Like familiar characters and repetition (ever had to babysit a kid with an Ice Age

DVD?)DVD?) Don’t like patronizing comments, inappropriate humorDon’t like patronizing comments, inappropriate humor

► 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