Human Computer Interface
Lecture1. Introduction
UI Hall of Fame or Hall of Shame?
UI Hall of Shame!
▣How do you cancel?
Outline
▣HCI introduction▣Course overview
▣ Human▲ the end-user of a program▲ the others in the organization
▣ Computer▲ the machine the program runs on▲ often split between clients & servers
▣ Interaction▲ the user tells the computer what they want▲ the computer communicates results
Human-Computer Interaction (HCI)
What is HCI?
Design
Organizational & Social Issues
Technology Humans
Task
These Factors Influence Each Other & Design
“Now that mice are included with most computers, applications assume a mouse will be used as a the pointing device”
HumansTechnology
Task
Design
Organizational & Social Issues
These Factors Influence Each Other & Design
“Now that mice are included with most computers, applications assume a mouse will be used as a the pointing device”
HumansTechnology
Task
Design
Organizational & Social Issues
Factors Influence
“People change their knowledge as they perform, i.e., they learn”
HumansTechnology
Task
Design
Organizational & Social Issues
Factors Influence
“People change their knowledge as they perform, i.e., they learn”
HumansTechnology
Task
Design
Organizational & Social Issues
User Interfaces (UIs)
▣ Part of application that allows people▲ to interact with computer▲ to carry out their task
▣ User vs. Customer vs. Client▲ user is a term only used by 2 industries -> bad!▲ customer – the person who will use the product
you build▲ client – the person/company who is paying you
to build itHCI = design, prototyping, evaluation, &
implementation of UIs
Why Study User Interfaces?
▣ Major part of work for “real” programs
▲ approximately 50%
▣ You will work on “real” software
▲ intended for people other than yourself
▣ Bad user interfaces cost
▲ money (5% satisfaction -> up to 85% profits)
▲ lives (Therac-25)
▣ User interfaces hard to get right
▲ people are unpredictable
What is Usability?▣Ease of learning
▲ faster the second time and so on...
▣Recall▲ remember how from one session to the next
▣Productivity▲ perform tasks quickly and efficiently
▣Minimal error rates▲ if they occur, good feedback so user can recover
▣High user satisfaction▲ confident of success
Interface Hall of Shame or Fame?
Interface Hall of Shame
▣Hard to tell the difference between the two icons & names
Who Builds Interfaces?
▣A team of specialists (ideally)▲graphic designers▲interaction / interface designers▲technical writers▲marketers▲test engineers▲software engineers▲customers
Keys to Designing & Building Successful Interfaces
▣Design cycle▣Customer-centered design▣Task analysis & contextual inquiry▣Rapid prototyping▣Evaluation▣Programming▣Iteration
Interface Design Cycle
Design
Prototype
Evaluate
Customer-centered Design
“Know thy Customer”▣Cognitive abilities
▲visual & aural perception
▲physical manipulation
▲memory
▣Organizational / job abilities
▣Keep customers involved throughout project
Task Analysis & Contextual Inquiry
▣Observe existing work practices▣Create scenarios of actual use▣Try-out new ideas before building
software
?
Rapid Prototyping
▣ Build a mock-up of design
▣ Low fidelity techniques▲ paper sketches▲ cut, copy, paste▲ video segments
▣ Interactive prototyping tools▲ HTML, Visual Basic,
HyperCard, Director, etc.
▣ UI builders▲ Fusion, NeXT, Visual Cafe
Fantasy Basketball
Evaluation
▣Test with real customers (participants)
▣Build models▣Low-cost techniques
▲expert evaluation▲walkthroughs
Programming
▣Toolkits▣UI Builders▣Event models▣Input / Output models▣etc.
Iteration
Design
Prototype
Evaluate
At every stage!
Goals of the Course
▣ Learn to design, prototype, & evaluate interfaces▲ discover the tasks of prospective customers▲ cognitive/perceptual constraints that affect design▲ techniques for evaluating an interface design▲ importance of iterative design for usability▲ technology used to prototype & implement UI code▲ how to work together on a team project▲ communicate your results to a group
key to your future success
Project Description
▣ Each of you will propose an interface idea
▲ fixing something you don’t like or a new idea
▣ Groups
▲ 3 students in one group
▲ work with students w/ different skills/interests
▣ Cumulative
▲ apply several HCI methods to a single interface
Project Process Overview
▣ Project proposal (individual)
▣ Break-up into groups
▣ Project task analysis & “sketches”
▲ i.e., rough proposals that can & will change
▣ Low fidelity prototyping & testing
▣ Build 1st interactive prototype
▣ In class presentations & critiques
▣ Heuristic evaluations (individual)
ESP
Low-fi Prototyping & Testing
Project Process Overview (cont.)
▣ Heuristic evaluation summary
▣ Build 2nd interactive prototype
▣ In lab demo & critiques
▣ Customer testing of 2nd prototype
▣ In class presentation & critiques
▣ Build 3rd prototype
▲ “real” interface, but not necessarily “real”
app.
Research Notebook (Example)
Project Examples (cont.)
▣SiteSketch▲web page design▲sketch-based
SiteSketch
Project Examples (cont.)
▣CD Jukebox
CD JukeBox
Project Examples (cont.)
▣Clothes Shopper▲online shopping▲knows your prefs & sizes
Clothes Shopper
Project Examples (cont.)
▣ Interactive TV Guide▲find shows, program VCR to record, etc.
Interactive TV Guide
Project Examples (cont.)
▣Electronic book reader▲ take advantage of all the online texts
on the net
Electronic Book Reader
Project Examples (cont.)
▣Nutrition tracker
Nutrition Tracker
Project Examples (cont.)
▣cUIzine▲recipe tool for the home
cUIzine
Project Examples (cont.)
▣Tech support help desk▲ avoid using the phone for getting help
Tech-Support Help Desk
Project Examples (cont.)
▣Regular expression builder▲visual tool▲lets beginners build regular expression
Regular Expression Builder
Project Examples (cont.)
▣Apartment finder▲ kinda obvious!!! :)
Apartment Finder
Project Examples (cont.)
▣Read WWW over phone▲find structure in pages & build voice
menus▲navigation problem▲cache common paths & reorder?
▣PDA brainstorming tool▲small portable computers in a group
meeting (say Palm Pilots)
PDA Brainstorming
Project Examples (cont.)
▣Runner’s training log▲input daily workouts▲reports▲reminders
▣PDA for shopping▲scan in UPC & tells you whether a good price
▣Home entertainment control -“no more remotes”
Total Entertainment Control
Project Examples (cont.)
▣Football play design program▲sketch players & show how they will
move▲simulate plays
▣Customized web newspaper
Web Newspaper
Project Examples (cont.)
▣PDA Baseball score keeper▲have stats of the players on your PDA▲keep track of what happens during the
game▲upload stats after the game
PDA Baseball Scorekeeper
PalmStock
PalmStock
InkChat
Josh
Back-end
Ed
Brian
Cliff
Rendezvous
Nutrition/Exercise Tracker
Trippin’
Books
▣Two recommended textbooks▲Human-Computer Interaction by Alan
Dix, et al., 2nd edition, 1998.▲Developing User Interfaces by Dan
Olsen, 1998.
Assignments (tentative)
▣Individual▲2-3 written
▣Group▲3-4 written assignments▲all group work handed in on Web (group
web site)
Grading
▣A combination of▲TEST (30%)▲individual assignments,
participation(40%)▲group project (30%)
demos/presentation (group component)project write-ups and exercises