human computer interface lecture1. introduction. ui hall of fame or hall of shame?
TRANSCRIPT
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