human-computer interaction · human-computer interaction what is hci what is hci figure: original...
TRANSCRIPT
Human-Computer Interaction
Human-Computer Interaction
Hanli Wang (�¢m)
Email: [email protected]
Department of Computer Science and Technology,Tongji University
Human-Computer Interaction
Table of Contents
What is HCI
Why HCI
About this courseCourse objective and what to learnInstructorCourse materialsTeaching informationGrading
IntroductionDesign CycleBirth of HCI
Summary
Human-Computer Interaction
What is HCI
What is HCI
Figure: Original image courtesy ofMicrosoft Research. Figure: Original image courtesy of
Noah’s Ark Lab.
“Human-computer interaction is a discipline concerned with the design, evaluation and
implementation of interactive computing systems for human use and with the study of
major phenomena surrounding them.” - ACM SIGCHI
Human-Computer Interaction
What is HCI
What is HCI
Figure: Original image courtesy ofMicrosoft Research. Figure: Original image courtesy of
Noah’s Ark Lab.
“Human-computer interaction is a discipline concerned with the design, evaluation and
implementation of interactive computing systems for human use and with the study of
major phenomena surrounding them.” - ACM SIGCHI
Human-Computer Interaction
What is HCI
What is HCI
Figure: Original image courtesy ofMicrosoft Research. Figure: Original image courtesy of
Noah’s Ark Lab.
“Human-computer interaction is a discipline concerned with the design, evaluation and
implementation of interactive computing systems for human use and with the study of
major phenomena surrounding them.” - ACM SIGCHI
Human-Computer Interaction
Why HCI
Why HCI
I Human: a person who tries to accomplish a goal
I Computer: runs applications (software) locally or remotely
I Interaction: “dialogue” between human(s) and computer(s)
I The interaction between user(s) and computer(s) is achievedvia an interface - user interface.
HCI purpose:
To design a good user interface to aid persons to accomplish goalssafely, effectively, efficiently and enjoyably.
Human-Computer Interaction
Why HCI
Why HCI
I Human: a person who tries to accomplish a goal
I Computer: runs applications (software) locally or remotely
I Interaction: “dialogue” between human(s) and computer(s)
I The interaction between user(s) and computer(s) is achievedvia an interface - user interface.
HCI purpose:
To design a good user interface to aid persons to accomplish goalssafely, effectively, efficiently and enjoyably.
Human-Computer Interaction
Why HCI
Why HCI
I Human: a person who tries to accomplish a goal
I Computer: runs applications (software) locally or remotely
I Interaction: “dialogue” between human(s) and computer(s)
I The interaction between user(s) and computer(s) is achievedvia an interface - user interface.
HCI purpose:
To design a good user interface to aid persons to accomplish goalssafely, effectively, efficiently and enjoyably.
Human-Computer Interaction
Why HCI
Why HCI
I Human: a person who tries to accomplish a goal
I Computer: runs applications (software) locally or remotely
I Interaction: “dialogue” between human(s) and computer(s)
I The interaction between user(s) and computer(s) is achievedvia an interface - user interface.
HCI purpose:
To design a good user interface to aid persons to accomplish goalssafely, effectively, efficiently and enjoyably.
Human-Computer Interaction
Why HCI
Why HCI
I Human: a person who tries to accomplish a goal
I Computer: runs applications (software) locally or remotely
I Interaction: “dialogue” between human(s) and computer(s)
I The interaction between user(s) and computer(s) is achievedvia an interface - user interface.
HCI purpose:
To design a good user interface to aid persons to accomplish goalssafely, effectively, efficiently and enjoyably.
Human-Computer Interaction
Why HCI
Why HCI
I Human: a person who tries to accomplish a goal
I Computer: runs applications (software) locally or remotely
I Interaction: “dialogue” between human(s) and computer(s)
I The interaction between user(s) and computer(s) is achievedvia an interface - user interface.
HCI purpose:
To design a good user interface to aid persons to accomplish goalssafely, effectively, efficiently and enjoyably.
Human-Computer Interaction
Why HCI
Why HCI
I Human: a person who tries to accomplish a goal
I Computer: runs applications (software) locally or remotely
I Interaction: “dialogue” between human(s) and computer(s)
I The interaction between user(s) and computer(s) is achievedvia an interface - user interface.
HCI purpose:
To design a good user interface to aid persons to accomplish goalssafely, effectively, efficiently and enjoyably.
Human-Computer Interaction
About this course
Course objective and what to learn
Course objective and what to learn
Course objective: To give you the grounding necessary to understand
the principles and practice of HCI and how to use the knowledge to
create better interactions between human and computer.
I Foundations:
I HumanI ComputerI Interaction
I Design process:
I Design basicsI Design rulesI Evaluation techniques
I Models and theories:
I Cognitive modelsI Task analysis
Human-Computer Interaction
About this course
Course objective and what to learn
Course objective and what to learnCourse objective: To give you the grounding necessary to understand
the principles and practice of HCI and how to use the knowledge to
create better interactions between human and computer.
I Foundations:
I HumanI ComputerI Interaction
I Design process:
I Design basicsI Design rulesI Evaluation techniques
I Models and theories:
I Cognitive modelsI Task analysis
Human-Computer Interaction
About this course
Course objective and what to learn
Course objective and what to learnCourse objective: To give you the grounding necessary to understand
the principles and practice of HCI and how to use the knowledge to
create better interactions between human and computer.
I Foundations:
I HumanI ComputerI Interaction
I Design process:
I Design basicsI Design rulesI Evaluation techniques
I Models and theories:
I Cognitive modelsI Task analysis
Human-Computer Interaction
About this course
Course objective and what to learn
Course objective and what to learnCourse objective: To give you the grounding necessary to understand
the principles and practice of HCI and how to use the knowledge to
create better interactions between human and computer.
I Foundations:
I HumanI ComputerI Interaction
I Design process:
I Design basicsI Design rulesI Evaluation techniques
I Models and theories:
I Cognitive modelsI Task analysis
Human-Computer Interaction
About this course
Course objective and what to learn
Course objective and what to learnCourse objective: To give you the grounding necessary to understand
the principles and practice of HCI and how to use the knowledge to
create better interactions between human and computer.
I Foundations:
I HumanI ComputerI Interaction
I Design process:
I Design basicsI Design rulesI Evaluation techniques
I Models and theories:
I Cognitive modelsI Task analysis
Human-Computer Interaction
About this course
Instructor
Instructor: Hanli Wang
I Professor in CS.
I Research interests: Digital Video Coding, Computer Vision,Machine Learning, Multimedia Big Data, etc.
I Web: http://mic.tongji.edu.cn
I Email: [email protected]
I Lab: Multimedia and Intelligent Computing Lab (MIC), Rm425, Telecom Building
I Office: Rm 424, Telecom Building
Human-Computer Interaction
About this course
Course materials
Course materials
I Textbook:Alan Dix, Janet Finlay, Gregory D. Abowd, and Russell Beale,
Human-Computer Interaction, 3rd Edition. Prentice Hall, 2004.
ISBN-10: 0-13-046109-1.
I Other readings:Andrew Sears and Julie A. Jacko, The Human-Computer
Interaction Handbook: Fundamentals, Evolving Technologies and
Emerging Applications, 2nd Edition, CRC Press, 2007. ISBN-10:
0-8058-5870-9.
I Online resources:I Coursera HCI course by Prof. Scott Klemmer:
https://class.coursera.org/hciucsd-005/lecture.
I UC Berkeley HCI course by Prof. John Canny:
http://bid.berkeley.edu/cs160-fall12/index.php/Main Page.
Human-Computer Interaction
About this course
Teaching information
Teaching information
Teaching assistant
- Jiangchuan Wei (Master student in CS), Email:[email protected]
Teaching hours
- Tuesday 8:00AM-9:40AM
Teaching venue
- F-202
Human-Computer Interaction
About this course
Grading
Grading
I Quiz (You need prepare an exercise book and bring it with youevery class) + Assignments (28%)
I Class participation (12%)I Team Project (60%)
I 4 students per team (e.g., 89 students =⇒ 22 teams with only1 group consisted of 5 students), team leader
I Theme: web interfacesI Plenty of design freedomI Interactive prototype, no need to implement much (or any)
back-end functionalityI Apply HCI methods for design
Human-Computer Interaction
About this course
Grading
Grading
I Quiz (You need prepare an exercise book and bring it with youevery class) + Assignments (28%)
I Class participation (12%)I Team Project (60%)
I 4 students per team (e.g., 89 students =⇒ 22 teams with only1 group consisted of 5 students), team leader
I Theme: web interfacesI Plenty of design freedomI Interactive prototype, no need to implement much (or any)
back-end functionalityI Apply HCI methods for design
Human-Computer Interaction
About this course
Grading
Grading
I Quiz (You need prepare an exercise book and bring it with youevery class) + Assignments (28%)
I Class participation (12%)
I Team Project (60%)I 4 students per team (e.g., 89 students =⇒ 22 teams with only
1 group consisted of 5 students), team leaderI Theme: web interfaces
I Plenty of design freedomI Interactive prototype, no need to implement much (or any)
back-end functionalityI Apply HCI methods for design
Human-Computer Interaction
About this course
Grading
Grading
I Quiz (You need prepare an exercise book and bring it with youevery class) + Assignments (28%)
I Class participation (12%)I Team Project (60%)
I 4 students per team (e.g., 89 students =⇒ 22 teams with only1 group consisted of 5 students), team leader
I Theme: web interfacesI Plenty of design freedomI Interactive prototype, no need to implement much (or any)
back-end functionalityI Apply HCI methods for design
Human-Computer Interaction
About this course
Grading
Grading
I Quiz (You need prepare an exercise book and bring it with youevery class) + Assignments (28%)
I Class participation (12%)I Team Project (60%)
I 4 students per team (e.g., 89 students =⇒ 22 teams with only1 group consisted of 5 students), team leader
I Theme: web interfacesI Plenty of design freedomI Interactive prototype, no need to implement much (or any)
back-end functionalityI Apply HCI methods for design
Human-Computer Interaction
About this course
Grading
Grading
I Quiz (You need prepare an exercise book and bring it with youevery class) + Assignments (28%)
I Class participation (12%)I Team Project (60%)
I 4 students per team (e.g., 89 students =⇒ 22 teams with only1 group consisted of 5 students), team leader
I Theme: web interfaces
I Plenty of design freedomI Interactive prototype, no need to implement much (or any)
back-end functionalityI Apply HCI methods for design
Human-Computer Interaction
About this course
Grading
Grading
I Quiz (You need prepare an exercise book and bring it with youevery class) + Assignments (28%)
I Class participation (12%)I Team Project (60%)
I 4 students per team (e.g., 89 students =⇒ 22 teams with only1 group consisted of 5 students), team leader
I Theme: web interfacesI Plenty of design freedom
I Interactive prototype, no need to implement much (or any)back-end functionality
I Apply HCI methods for design
Human-Computer Interaction
About this course
Grading
Grading
I Quiz (You need prepare an exercise book and bring it with youevery class) + Assignments (28%)
I Class participation (12%)I Team Project (60%)
I 4 students per team (e.g., 89 students =⇒ 22 teams with only1 group consisted of 5 students), team leader
I Theme: web interfacesI Plenty of design freedomI Interactive prototype, no need to implement much (or any)
back-end functionality
I Apply HCI methods for design
Human-Computer Interaction
About this course
Grading
Grading
I Quiz (You need prepare an exercise book and bring it with youevery class) + Assignments (28%)
I Class participation (12%)I Team Project (60%)
I 4 students per team (e.g., 89 students =⇒ 22 teams with only1 group consisted of 5 students), team leader
I Theme: web interfacesI Plenty of design freedomI Interactive prototype, no need to implement much (or any)
back-end functionalityI Apply HCI methods for design
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I 10 mins of PPT presentation (in English) + 5 mins of QAI Project report (in English) + source code
I Soft-copy should be delivered to TA (also with PPT)I Hard-copy should be handed inI Cover letter including project title, member’s name, ID,
team-assigned weight, etcI Interface snapshot, detailed analysis about applying HCI
methods, highlight each member’s duty and contribution, etc
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)
I 10 mins of PPT presentation (in English) + 5 mins of QAI Project report (in English) + source code
I Soft-copy should be delivered to TA (also with PPT)I Hard-copy should be handed inI Cover letter including project title, member’s name, ID,
team-assigned weight, etcI Interface snapshot, detailed analysis about applying HCI
methods, highlight each member’s duty and contribution, etc
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I 10 mins of PPT presentation (in English) + 5 mins of QA
I Project report (in English) + source codeI Soft-copy should be delivered to TA (also with PPT)I Hard-copy should be handed inI Cover letter including project title, member’s name, ID,
team-assigned weight, etcI Interface snapshot, detailed analysis about applying HCI
methods, highlight each member’s duty and contribution, etc
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I 10 mins of PPT presentation (in English) + 5 mins of QAI Project report (in English) + source code
I Soft-copy should be delivered to TA (also with PPT)I Hard-copy should be handed inI Cover letter including project title, member’s name, ID,
team-assigned weight, etcI Interface snapshot, detailed analysis about applying HCI
methods, highlight each member’s duty and contribution, etc
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I 10 mins of PPT presentation (in English) + 5 mins of QAI Project report (in English) + source code
I Soft-copy should be delivered to TA (also with PPT)
I Hard-copy should be handed inI Cover letter including project title, member’s name, ID,
team-assigned weight, etcI Interface snapshot, detailed analysis about applying HCI
methods, highlight each member’s duty and contribution, etc
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I 10 mins of PPT presentation (in English) + 5 mins of QAI Project report (in English) + source code
I Soft-copy should be delivered to TA (also with PPT)I Hard-copy should be handed in
I Cover letter including project title, member’s name, ID,team-assigned weight, etc
I Interface snapshot, detailed analysis about applying HCImethods, highlight each member’s duty and contribution, etc
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I 10 mins of PPT presentation (in English) + 5 mins of QAI Project report (in English) + source code
I Soft-copy should be delivered to TA (also with PPT)I Hard-copy should be handed inI Cover letter including project title, member’s name, ID,
team-assigned weight, etc
I Interface snapshot, detailed analysis about applying HCImethods, highlight each member’s duty and contribution, etc
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I 10 mins of PPT presentation (in English) + 5 mins of QAI Project report (in English) + source code
I Soft-copy should be delivered to TA (also with PPT)I Hard-copy should be handed inI Cover letter including project title, member’s name, ID,
team-assigned weight, etcI Interface snapshot, detailed analysis about applying HCI
methods, highlight each member’s duty and contribution, etc
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I Mark policy:
I∑
(team-assigned weights) per team = 1.0I team-assigned weights are firstly given by team based on
consensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policyI Project report and quiz will not be accepted lateI Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)
I Mark policy:I
∑(team-assigned weights) per team = 1.0
I team-assigned weights are firstly given by team based onconsensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policyI Project report and quiz will not be accepted lateI Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I Mark policy:
I∑
(team-assigned weights) per team = 1.0I team-assigned weights are firstly given by team based on
consensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policyI Project report and quiz will not be accepted lateI Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I Mark policy:
I∑
(team-assigned weights) per team = 1.0
I team-assigned weights are firstly given by team based onconsensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policyI Project report and quiz will not be accepted lateI Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I Mark policy:
I∑
(team-assigned weights) per team = 1.0I team-assigned weights are firstly given by team based on
consensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policyI Project report and quiz will not be accepted lateI Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I Mark policy:
I∑
(team-assigned weights) per team = 1.0I team-assigned weights are firstly given by team based on
consensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policyI Project report and quiz will not be accepted lateI Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I Mark policy:
I∑
(team-assigned weights) per team = 1.0I team-assigned weights are firstly given by team based on
consensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policyI Project report and quiz will not be accepted lateI Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I Mark policy:
I∑
(team-assigned weights) per team = 1.0I team-assigned weights are firstly given by team based on
consensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policy
I Project report and quiz will not be accepted lateI Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I Mark policy:
I∑
(team-assigned weights) per team = 1.0I team-assigned weights are firstly given by team based on
consensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policyI Project report and quiz will not be accepted late
I Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I Mark policy:
I∑
(team-assigned weights) per team = 1.0I team-assigned weights are firstly given by team based on
consensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policyI Project report and quiz will not be accepted lateI Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
About this course
Grading
Grading (Cont’d)
I Team Project (60%)I Mark policy:
I∑
(team-assigned weights) per team = 1.0I team-assigned weights are firstly given by team based on
consensus, indicating the relative contribution; will beadjusted by instructor after reading PPT and report
I final mark Sfi = min (Sg ·N · wi, S
g), where Sg = givenmark and wi = ith member’s weight, N = number ofmembers per team
I E.g., w1 = 0.3, w2 = 0.1, w3 = 0.4, w4 = 0.2, Sg = 50, N = 4,then Sf
1 = 50, Sf1 = 20, Sf
3 = 50, Sf4 = 40
I Late policyI Project report and quiz will not be accepted lateI Assignment lose 20% per day
I Tell TA your team information due in the 4th week (Mar. 27)
Human-Computer Interaction
Introduction
Design Cycle
Interaction Design Cycle
I Human-computer interaction is a discipline concerned with the design,evaluation and implementation of interactive computing systems for human useand with the study of major phenomena surrounding them.
I Human: a person who tries to accomplish a goalI Computer: runs applications (software) locally or remotelyI Interaction: “dialogue” between human(s) and computer(s)I To design a good user interface to aid persons to accomplish goals safely,
effectively, efficiently and enjoyably.
Human-Computer Interaction
Introduction
Design Cycle
Interaction Design CycleI Human-computer interaction is a discipline concerned with the design,
evaluation and implementation of interactive computing systems for human useand with the study of major phenomena surrounding them.
I Human: a person who tries to accomplish a goalI Computer: runs applications (software) locally or remotelyI Interaction: “dialogue” between human(s) and computer(s)I To design a good user interface to aid persons to accomplish goals safely,
effectively, efficiently and enjoyably.
Human-Computer Interaction
Introduction
Design Cycle
Interaction Design CycleI Human-computer interaction is a discipline concerned with the design,
evaluation and implementation of interactive computing systems for human useand with the study of major phenomena surrounding them.
I Human: a person who tries to accomplish a goal
I Computer: runs applications (software) locally or remotelyI Interaction: “dialogue” between human(s) and computer(s)I To design a good user interface to aid persons to accomplish goals safely,
effectively, efficiently and enjoyably.
Human-Computer Interaction
Introduction
Design Cycle
Interaction Design CycleI Human-computer interaction is a discipline concerned with the design,
evaluation and implementation of interactive computing systems for human useand with the study of major phenomena surrounding them.
I Human: a person who tries to accomplish a goalI Computer: runs applications (software) locally or remotely
I Interaction: “dialogue” between human(s) and computer(s)I To design a good user interface to aid persons to accomplish goals safely,
effectively, efficiently and enjoyably.
Human-Computer Interaction
Introduction
Design Cycle
Interaction Design CycleI Human-computer interaction is a discipline concerned with the design,
evaluation and implementation of interactive computing systems for human useand with the study of major phenomena surrounding them.
I Human: a person who tries to accomplish a goalI Computer: runs applications (software) locally or remotelyI Interaction: “dialogue” between human(s) and computer(s)
I To design a good user interface to aid persons to accomplish goals safely,effectively, efficiently and enjoyably.
Human-Computer Interaction
Introduction
Design Cycle
Interaction Design CycleI Human-computer interaction is a discipline concerned with the design,
evaluation and implementation of interactive computing systems for human useand with the study of major phenomena surrounding them.
I Human: a person who tries to accomplish a goalI Computer: runs applications (software) locally or remotelyI Interaction: “dialogue” between human(s) and computer(s)I To design a good user interface to aid persons to accomplish goals safely,
effectively, efficiently and enjoyably.
Human-Computer Interaction
Introduction
Design Cycle
Interaction Design CycleI Human-computer interaction is a discipline concerned with the design,
evaluation and implementation of interactive computing systems for human useand with the study of major phenomena surrounding them.
I Human: a person who tries to accomplish a goalI Computer: runs applications (software) locally or remotelyI Interaction: “dialogue” between human(s) and computer(s)I To design a good user interface to aid persons to accomplish goals safely,
effectively, efficiently and enjoyably.
Human-Computer Interaction
Introduction
Design Cycle
Interface Design Cycle
Click here for HCI overview video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Interface Design Cycle
Click here for HCI overview video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Interface Design Cycle
Click here for HCI overview video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Bad design costs lives
I In 1995, AA965 crashed into a
mountain, killing 151 passengers and
8 crew membersI On approach to Rozo airport in
ColombiaI Pilot skipped some of the approach
proceduresI Pilot typed in “R” and system
completed full name of airport toRomeo
I Guidance system executed turn atlow altitude to head for Romeoairport
I 9 seconds later plane struckmountain
http://en.wikipedia.org/wiki/American Airlines Flight 965
Human-Computer Interaction
Introduction
Design Cycle
Bad design costs lives
I In 1995, AA965 crashed into a
mountain, killing 151 passengers and
8 crew members
I On approach to Rozo airport inColombia
I Pilot skipped some of the approachprocedures
I Pilot typed in “R” and systemcompleted full name of airport toRomeo
I Guidance system executed turn atlow altitude to head for Romeoairport
I 9 seconds later plane struckmountain
http://en.wikipedia.org/wiki/American Airlines Flight 965
Human-Computer Interaction
Introduction
Design Cycle
Bad design costs lives
I In 1995, AA965 crashed into a
mountain, killing 151 passengers and
8 crew membersI On approach to Rozo airport in
Colombia
I Pilot skipped some of the approachprocedures
I Pilot typed in “R” and systemcompleted full name of airport toRomeo
I Guidance system executed turn atlow altitude to head for Romeoairport
I 9 seconds later plane struckmountain
http://en.wikipedia.org/wiki/American Airlines Flight 965
Human-Computer Interaction
Introduction
Design Cycle
Bad design costs lives
I In 1995, AA965 crashed into a
mountain, killing 151 passengers and
8 crew membersI On approach to Rozo airport in
ColombiaI Pilot skipped some of the approach
procedures
I Pilot typed in “R” and systemcompleted full name of airport toRomeo
I Guidance system executed turn atlow altitude to head for Romeoairport
I 9 seconds later plane struckmountain
http://en.wikipedia.org/wiki/American Airlines Flight 965
Human-Computer Interaction
Introduction
Design Cycle
Bad design costs lives
I In 1995, AA965 crashed into a
mountain, killing 151 passengers and
8 crew membersI On approach to Rozo airport in
ColombiaI Pilot skipped some of the approach
proceduresI Pilot typed in “R” and system
completed full name of airport toRomeo
I Guidance system executed turn atlow altitude to head for Romeoairport
I 9 seconds later plane struckmountain
http://en.wikipedia.org/wiki/American Airlines Flight 965
Human-Computer Interaction
Introduction
Design Cycle
Bad design costs lives
I In 1995, AA965 crashed into a
mountain, killing 151 passengers and
8 crew membersI On approach to Rozo airport in
ColombiaI Pilot skipped some of the approach
proceduresI Pilot typed in “R” and system
completed full name of airport toRomeo
I Guidance system executed turn atlow altitude to head for Romeoairport
I 9 seconds later plane struckmountain
http://en.wikipedia.org/wiki/American Airlines Flight 965
Human-Computer Interaction
Introduction
Design Cycle
Bad design costs lives
I In 1995, AA965 crashed into a
mountain, killing 151 passengers and
8 crew membersI On approach to Rozo airport in
ColombiaI Pilot skipped some of the approach
proceduresI Pilot typed in “R” and system
completed full name of airport toRomeo
I Guidance system executed turn atlow altitude to head for Romeoairport
I 9 seconds later plane struckmountain
http://en.wikipedia.org/wiki/American Airlines Flight 965
Human-Computer Interaction
Introduction
Design Cycle
Bad design costs lives
I In 1995, AA965 crashed into a
mountain, killing 151 passengers and
8 crew membersI On approach to Rozo airport in
ColombiaI Pilot skipped some of the approach
proceduresI Pilot typed in “R” and system
completed full name of airport toRomeo
I Guidance system executed turn atlow altitude to head for Romeoairport
I 9 seconds later plane struckmountain
http://en.wikipedia.org/wiki/American Airlines Flight 965
Human-Computer Interaction
Introduction
Design Cycle
Bad design costs lives
I In 1995, AA965 crashed into a
mountain, killing 151 passengers and
8 crew membersI On approach to Rozo airport in
ColombiaI Pilot skipped some of the approach
proceduresI Pilot typed in “R” and system
completed full name of airport toRomeo
I Guidance system executed turn atlow altitude to head for Romeoairport
I 9 seconds later plane struckmountain
http://en.wikipedia.org/wiki/American Airlines Flight 965
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of designI Low fidelity techniques
I Paper sketchesI Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of designI Low fidelity techniques
I Paper sketchesI Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of designI Low fidelity techniques
I Paper sketchesI Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of designI Low fidelity techniques
I Paper sketchesI Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of design
I Low fidelity techniquesI Paper sketchesI Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of designI Low fidelity techniques
I Paper sketchesI Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of designI Low fidelity techniques
I Paper sketches
I Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of designI Low fidelity techniques
I Paper sketchesI Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of designI Low fidelity techniques
I Paper sketchesI Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of designI Low fidelity techniques
I Paper sketchesI Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Design Cycle
Prototyping
I A strategy for efficientlydealing with things thatare hard to predict
I A mock-up of designI Low fidelity techniques
I Paper sketchesI Video segments
I Interactive prototypingtools
I HTML, Flash,Javascript, C#, etc
Click here for Prototyping video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Birth of HCI
Birth of HCI
Click here for Birth of HCI video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Birth of HCI
Birth of HCI
Click here for Birth of HCI video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Introduction
Birth of HCI
Birth of HCI
Click here for Birth of HCI video offered by Prof. Scott Klemmer.
Human-Computer Interaction
Summary
Summary
I Definition and importance of HCI
I Brief overview of HCI design cycle
I Prototyping
I Course materials and grading
Don’t forget – find your team members, and tell us on Mar.27 (the 4th class)!
Human-Computer Interaction
Summary
Summary
I Definition and importance of HCI
I Brief overview of HCI design cycle
I Prototyping
I Course materials and grading
Don’t forget – find your team members, and tell us on Mar.27 (the 4th class)!
Human-Computer Interaction
Summary
Summary
I Definition and importance of HCI
I Brief overview of HCI design cycle
I Prototyping
I Course materials and grading
Don’t forget – find your team members, and tell us on Mar.27 (the 4th class)!
Human-Computer Interaction
Summary
Summary
I Definition and importance of HCI
I Brief overview of HCI design cycle
I Prototyping
I Course materials and grading
Don’t forget – find your team members, and tell us on Mar.27 (the 4th class)!
Human-Computer Interaction
Summary
Summary
I Definition and importance of HCI
I Brief overview of HCI design cycle
I Prototyping
I Course materials and grading
Don’t forget – find your team members, and tell us on Mar.27 (the 4th class)!