Introduction to HCIIntroduction to HCIHuman Computer InteractionHuman Computer Interaction

Thanks to Indiana University USAThanks to Indiana University USAFor BSIT-2For BSIT-2ndnd (M+E) (M+E)

Contents and GoalsContents and 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 usersA computer science course focused on users

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

Definition of HCIDefinition of HCI► HCI deals with the design, evaluation and implementation HCI deals with the design, evaluation and implementation

of interactive computing systems for human use and with of interactive computing systems for human use and with the study of major phenomena surrounding them. the study of major phenomena surrounding them. It defines how a user will interacts with a software/hardwar.It defines how a user will interacts with a software/hardwar.

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 UsabilityUsability SafetySafety

► Example: a car with poor HCIExample: a car with poor HCI► Take 5 minutes for everyone to write down one common Take 5 minutes for everyone to write down one common

device with substantial HCI design choices and discuss device with substantial HCI design choices and discuss with the neighbor the pros and cons. How does it affect with the neighbor the pros and cons. How does it affect you or other users?you or other users?

My My ChoiceChoice

► iPod by Apple iPod by Apple ComputersComputers

► Pros:Pros: portableportable powerpower ease of useease of use functionsfunctions

► Cons:Cons: scratches easilyscratches easily no speech for car useno speech for car use 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 Research Academics/Industry 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) ModelingModeling

► Context sensitive/awareContext sensitive/aware► PersonalizablePersonalizable► UbiquitousUbiquitous

Usability RequirementsUsability Requirements► Goals:Goals:

UsabilityUsability UniversalityUniversality UsefulnessUsefulness

► Achieved by:Achieved by: PlanningPlanning Sensitivity to user needsSensitivity to user needs Devotion to requirements analysisDevotion to requirements analysis TestingTesting

Bad InterfacesBad Interfaces► InabilityInability► ConfusingConfusing► SlowSlow► Trust (ex. windows crashing)Trust (ex. windows crashing)► What makes it hard?What makes it hard?

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

Requirements AnalysisRequirements Analysis1.1. Find users’ needsFind users’ needs2.2. Ensure proper reliabilityEnsure proper reliability3.3. Promote consistencyPromote consistency4.4. Complete projects on schedule and within budgetComplete projects on schedule and within budget

Find User’s NeedsFind 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

ReliabilityReliability► Actions / functions as specifiedActions / functions as specified► Data displayed must be correctData displayed must be correct► Updates correctlyUpdates correctly► No bugNo bug► High in Privacy, security, accessHigh in Privacy, security, access► Low in data destruction, tamperingLow in data destruction, tampering

Usability MotivationsUsability Motivations► Life-Critical systemsLife-Critical systems

ApplicationsApplications : air traffic, nuclear reactors, military, emergency : air traffic, nuclear reactors, military, emergency dispatchdispatch

RequirementsRequirements : reliability (even under stress): reliability (even under stress) Not as importantNot as important : cost, long training: cost, long training

► Industrial and Commercial UseIndustrial and Commercial Use ApplicationsApplications : banking, insurance, inventory, reservations: banking, insurance, inventory, reservations RequirementsRequirements : short training, ease of use, speed: short training, ease of use, 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

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

RequirementsRequirements : accuracy, user satisfaction: accuracy, user satisfaction Diff icult iesDiff icult ies : 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

•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 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

Universal UsabilityUniversal Usability► Does not mean ‘dumbing down’Does not mean ‘dumbing down’

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

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

users - unlike yourself!users - unlike yourself!► Everyone is often not at full Everyone is often not at full

faculties at all timesfaculties at all times

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

web sites. (1998 Amendment to Rehabilitation Act)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 Disabilities - SolutionUsers with Disabilities - Solution► 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► Speech RecognitionSpeech Recognition► Eye Gaze ControlEye Gaze Control

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