COMP 3020: Human-Computer Interaction I

Fall 2017James (Jim) Young

James Young, with acknowledgements to Anthony Tang, Andrea Bunt, Julie Kientz, Saul Greenberg, Ehud Sharlin, Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry

IN THE CASE OF A FIRE ALARM:• REMAIN CALM• IF IT IS SAFE, EVACUATE THE CLASSROOM OR LAB• GO TO THE CLOSEST FIRE EXIT• DO NOT USE THE ELEVATORS

IF YOU NEED ASSISTANCE TO EVACUATE THE BUILDING,

INFORM YOUR PROFESSOR OR INSTRUCTOR NOW!!!• IF DURING A BUILDING EVACUATION YOU NEED TO REPORT

AN INCIDENT OR A PERSON LEFT BEHIND: CONTACT ONE OF THE BUILDING FIRE WARDENS OR CALL SECURITY SERVICES 204-474-9341

• DO NOT REENTER THE BUILDING UNTIL THE “ALL CLEAR” IS DECLARED BY A FIRE WARDEN, SECURITY

SERVICES OR THE FIRE DEPARTMENT

today

foundations of Human-Computer Interaction

foundations of Human-X Interaction

foundations of design for Human-X Interaction

course goals and overview

3

what is HCI?

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 definition

COMP 3020 4

what is an interface?

a method of enabling a person to interact with a system

software (MS windows,…)hardware (keyboard, mouse..)display (monitor, 3D,..?)etc…

using computers only?

COMP 3020 6

interfaces

7

8

Bad Design is Everywhere

COMP 3020Fall 2017 9

bad design is everywhere

10

bad design affects us

MoneyA $200 withdrawal turns into $20000Bad font choice “,” looks like “.”

Lives: Therac-25 Radiation MachineMassive doses of radiation led to several deathsCause: confusing and inconsistent interface meant that the radiation shield was often not put in place – even for trained expert users!

11

Anticipated snarky response: “But, I wouldn’t make those mistakes!”

Maybe, but you’re not the only one working on most projects. Your team might still make that mistake.

Here’s the problem:You are typically not the user.You have your own biases.

13

Buying Pop with a Cell Phone (Japan 2003)

Fall 2017 COMP 3020 14

Bill Moggridge, Designing Interactions, 2007 Lecture at Stanford https://www.youtube.com/watch?v=kVkQYvN4_HA

15 Steps

35 minutes

2nd Phone

Cash Deposit

Communication Challenges

COMP 3020 15

http://www.projectcartoon.com

Communication Challenges (cont)

COMP 3020 16

http://www.projectcartoon.com

“It’s just common sense”

Dunning-Kruger Syndrome(Wikipedia)

Fall 2017 COMP 3020 17

what this course is about…understanding why bad design is so prevalent

learning and practicing methods for “good” design

hands-on experience with multiple design methods: involving users, prototyping, testing

how to design, build and evaluate interfaces18

summary

design is everywhere

good design is hard

poorly designed things have big consequences

good design practices can help

you’re going to be a good designer

19

Dr. James Young (Jim)

contact:E2-582 EITCyoung@cs.umanitoba.ca Always include [COMP 3020] in subject

office hours: Mon / Wed: 14:30-15:30By appointment (send e-mail)

my research

(working with robots!)

http://hci.cs.umanitoba.ca/projects-and-research?author=56

basic course information

WebsiteUMLearnhttp://cs.umanitoba.ca/~young/Courses/HCI2017(jimyoung.ca then navigate)

Q/A Forum - D2L

22

http://cs.umanitoba.ca/%7Eyoung/Courses/HCI2017

ROASS

posted on UMLearn(most things on UMLearn)

23

assessment

note: you must earn a passing grade on each component to pass the course.

24

Component WorthAssignments (x2) 10%Project (BIG!!) 30%Mid-term (in class) 15%Final (2 hr, scheduled) 45%

participationTreat all with respect – be constructive in all discussionsCome to class prepared – read carefully prior to class meetingsBe an active listener – be attentive, be engaged, use in-class technology with discretionAsk challenging questionsComment, build on, or clarify others' contributionsHelp your classmates use technologiesPost useful or interesting information to the class discussion boardVisit the instructor during office hours to chat, to ask questions, or to give feedback.

assignments – 10%

26

Assignment Worth DueA1: Thinking about design 4% Sept 22, 5pm

A2: User-centered design 4% Oct 4, 5pm

Quizzes: (4) 2% Sept 27, Oct 11, Oct 23, Oct 30

Anticipated snarky response: “Hey, that totals to 12%!”

project – 30%opportunity for you to engage in hands-on design with a real project

groups of three to four people; you will choose your groups (details to follow)

web technologies (no background required, but not taught in class)

details to follow

major undertaking27

Project – 30%

ALL DUE AT START OF CLASS! See online - binderclass website (jimyoung.ca)

28

Project Component Worth DueP0: Group formation Sept 22

P1: User research 20% Oct 16

P2: Sketching, ideation and lo-fi prototype

20% Nov 3

P3: hi-fi prototype 45% Nov 24

P4: heuristic evaluation 15% Dec 6

project - web tech

HTML, CSS, JS, Jquery

Tutorials are provided

Quizzes given!

writing….

takes a lot of time, more than you think

is hard, harder than you think

a major component of the assignments and project – COMMUNICATION!

What You Can Expect of MeI will be here on timeYour assignments will be graded in a timely manner

Typically within 1-2 weeks

Posts will be responded to in a timely mannerTypically within 1-2 days

If I don't know the answer to your question, I will find outI will treat you as professional colleaguesYou will have a chance to evaluate the course

My Expectations of You

Be here on timeTurn in everything on timeSpeak up in class

Turn off cell phones, no textingNo email, IM, web surfing during class

Respect each otherThere are no stupid questions/ideas

know when things happen..

Schedule posted on UMLearn. Watch it!

I probably won’t remind you

handing in assignments

Assignments are due at 5pm on the day specified

Hand in on UMLearn

I will not accept late assignments

quizzes done on UMLearn34

NO LATE ASSIGNMENTSI can’t stress this enough

think about the real world… hard drive crashed – boss doesn’t carelaptop stolen – boss doesn’t carebroke your arm – boss doesn’t care

plan ahead, work ahead, USE CLOUD SOFTWARE, e.g., dropbox, spideroak, wuala, etc…

academic dishonesty

not worth it

permanent mark on transcript

failure in course

we are smarter than you think- it’s usually pretty obvious

Questions, comments, queries?

• …

37

Coming up…

What is a good interface?How do we design for people?

38

39

40

Dr. James Young (Jim)

contact:E2-582 EITCyoung@cs.umanitoba.ca Always include [COMP 3020] in subject

office hours: Mon / Wed: 2:30-3:30By appointment (send e-mail)

COMP 3020: �Human-Computer Interaction IIN THE CASE OF A FIRE ALARM:todaywhat is HCI?what is an interface?interfacesSlide Number 7Slide Number 8Bad Design is Everywherebad design is everywherebad design affects usSlide Number 12Slide Number 13Buying Pop with a Cell Phone (Japan 2003)Communication ChallengesCommunication Challenges (cont)“It’s just common sense”what this course is about…summarySlide Number 20my researchbasic course informationROASSassessmentparticipationassignments – 10%project – 30%Project – 30%project - web techwriting….What You Can Expect of MeMy Expectations of Youknow when things happen..handing in assignmentsNO LATE ASSIGNMENTSacademic dishonestyQuestions, comments, queries?Coming up…Slide Number 39Slide Number 40Slide Number 41