89
Human-Computer Interaction Human-Computer Interaction Hanli Wang (¢m) Email: [email protected] Department of Computer Science and Technology, Tongji University

Human-Computer Interaction · Human-Computer Interaction What is HCI What is HCI Figure: Original image courtesy of Microsoft Research. Figure: Original image courtesy of Noah’s

  • Upload
    others

  • View
    18

  • Download
    0

Embed Size (px)

Citation preview

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

Interface Design Cycle

Human-Computer Interaction

Introduction

Design Cycle

Interface Design Cycle

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)!

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)!