1/15/17

Overview

• Short introductions
• Chapter 1 What is interaction design? – part 1
• What is human-computer interaction (HCI) and why do we need it?
Lecture 1 • What is interaction design (ID)?
• What is user experience (UX)
Chapter 1 part 1: What is • Course syllabus

interaction design? • Assignments

• Discussion of Individual Homework assignment H1:
Christine Lisetti • Website creation, Project Brainstorming, AngularJS start
• Reading assignments for next class and for next week
Human-Computer Interaction
CAP 4104 / CAP 5109 • Quiz 0

1 2

Short introductions

• Dr. Christine Lisetti • Research interests

• Associate Professor • Human-computer interaction with
• Office: focus on
• ECS 361 • intelligent virtual agents and
• Office Hours: • affective computing
• Wednesdays 3:30pm - 5pm • Application areas:
• and by appointment • health avatars and
• 3D simulation for learning social
Short introductions • Email: lisetti@cis.fiu.edu skills

3 4

And now about you...

• In 15 seconds, tell us:

• your name
• your level: Graduate or Undergraduate
What is Human-computer
interaction (HCI) and why do we
need it?

5 6

1
 1/15/17

Why was HCI needed? HCI: a working definition

• A discipline “concerned
• In the late 1970s and early 1980s, shift: • with the design, evaluation, and implementation of interactive computing
• from systems for human use and
• large computers in secured rooms • with the study of major phenomena surrounding them” (ACM SIGCHI, 1992)
• operated only by engineers
• to
• small computers
• operated by people without a technical background
• in homes and workplaces
• So
• ease of use,
• the human side,
• user acceptance,
all became more important!

7 8

Constraints of people matter

• Technology was the constraint for years

• But now it’s not
• User needs/goals (“domain knowledge”)
• User capabilities
• User context (including groups)
• User values

9 10

11 12

2
 1/15/17

Changes in HCI research

• The main topics of HCI have shifted over time:

• 1980s
• Word processing and database interfaces
• 1990s
• Web usability, e-mail, groupware
• 2000s
• User-generated content, tagging, social networking
• 2010s
• User experience, interaction design, aesthetics, emotions, virtual agents What is interaction design?

13 14

Dilemma What to design

• Which is the best way to interact with a smart TV? • Need to take into account:
• Standard remote device? • who the users are
• Apple slimline remote control? • what activities are being carried
• Minnum’s new keyboard? out
• where the interaction is taking
place

• Need to optimize the

interactions users have with a
product
• so that they match the users’
activities and needs

http://minuum.com

15 16

Understanding users’ needs Domain knowledge isn’t enough

• Need to take into account

• what people are good and bad at

• Consider
• what might help people in the way they currently do things

• Think through
• what might provide quality user experiences

• Listen to
• what people want and get them involved

• Use
• tried and tested user-centered methods

17 18

3
 1/15/17

Human capabilities matter So what is interaction design?

• Physical abilities
– Human factors • “Designing interactive products
– Perception to support the way people
communicate and interact in
their everyday and working
• Mental abilities lives.”
– Psychology • Preece, Sharp and Rogers
– Linguistics (2015)

• “The design of spaces for

human communication and
interaction.”
• Winograd (1997)

19 20

Is interaction design beyond HCI? Goals of interaction design

• Main difference between Interaction Design (ID) and Human- • Develop usable and enjoyable products
Computer Interaction (HCI) • Usability means
• Is one of scope • easy to learn
• ID has much wider net • effective to use and
• ID is concerned with • provide an enjoyable experience
• the theory
• research, and • Involve users in the design process
• practice of designing user experiences for all manner of technologies,
systems and products
• HCI traditionally had a narrower focus (see definition earlier)

21 22

Which kind of design? Relationship between ID, HCI and other fields

• Number of other terms used emphasizing what is being designed, Academic disciplines contributing to ID:
e.g. • Psychology
• user interface design • Social Sciences
• software design • Computing Sciences
• user-centered design • Engineering
• product design
• Ergonomics
• web design • Informatics
• experience design (UX)

• Interaction design is the umbrella term covering all of these

aspects
• fundamental to all disciplines, and
• approaches concerned with
• researching and designing computer-based systems for people

23 24

4
 1/15/17

Relationship between ID, HCI and other fields Relationship between ID, HCI and other fields

Design practices contributing to ID: • Interdisciplinary fields that ‘do’ interaction design:
• Graphic design • HCI
• Product design • Ubiquitous Computing
• Artist-design • Human Factors
• Industrial design • Cognitive Engineering
• Film industry • Cognitive Ergonomics
• Computer Supported
Co-operative Work
• Information Systems

25 26

Working in multidisciplinary teams

• Many people from different backgrounds involved

• Different perspectives and ways of seeing and talking about

things
What about the user experience
• Benefits
• more ideas and designs generated (UX)?
• Disadvantages
• difficult to communicate and progress forward the designs being
create

27 28

Why was the iPod user experience such a

The User Experience
success?
• How a product behaves and is used by people in the real world
• the way people feel about it and their pleasure and satisfaction • Quality user experience from
• when using it, looking at it, holding it, and opening or closing it the start
• “every product that is used by someone has a user experience: • simple
• e.g. newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2010) • elegant,
• “all aspects of the end-user's interaction with the company, its services, and its • distinct brand
products. (Nielsen and Norman, 2014) • pleasurable
• must have fashion item, catchy
• Cannot design a user experience names
• only design for a user experience • cool, etc.

29 30

5
 1/15/17

The User Beauty matters, flow matters

Experience
• But it’s not
just the
Model
Human
Processor
• Emotions matter

31 32
http://headrush.typepad.com/creating_passionate_users/2007/01/what_comes_afte.html

Beauty matters, flow matters Beauty matters, flow matters

33 34
http://headrush.typepad.com/creating_passionate_users/2007/01/what_comes_afte.html http://headrush.typepad.com/creating_passionate_users/2007/01/what_comes_afte.html

Concept of flow Context matters

• People have other values, things to do

• Concept of flow (Csikszentmihalyi, 1997) refers to • economics
• state of intense emotional involvement • philosophy and critique and culture
• that comes from being completely involved in an activity (e.g. playing • programmers forget this! But they shouldn't
music)
• and where time flies
• Instead of designing web interfaces to cater for visitors who know what
they want,
• induce a state of flow,
• leading the visitor to some unexpected place,
• where they become completely absorbed

35 36

6
 1/15/17

Doing things... in context

Course syllabus

37 38

Course Objectives My personal goal for you in the course

• Upon successful completion of this course, students should be able • In addition to content-specific objectives reflected by the topics in
to: the course calendar, I have these personal goals for each student:
• Describe and apply core methodologies from the field of HCI • to get you to think deeply and carefully about the subject,
• Define a user-centered design process that explicitly takes account of the fact • to help you to genuinely like the subject,
that the user is not like the developer or their acquaintances • to provide knowledge and skill useful to you in your career following life in
• Design, prototype, implement and evaluate usable and satisfying graphical college,
interactive computer interfaces • to engender a deeper interest (perhaps in some of you) that can be pursued
• Implement simple graphical user interfaces using AngularJS beyond this course, and
• to have a little fun in the process.​

39 40

Class time Class time

• Class time will be split between • In summary, it is our goal for you to master the development
• content-based lectures activities of the ID lifecycle process.
• devoted to covering course materials, sometimes highlighting or skimming through the
slides. • You are exposed to each activity in several ways.
• in-class activities. • So you will need to
• provide an initial opportunity for experience with the interaction design (ID) • first read the book before the lecture on the topic, according the schedule on
development lifecycle activities. the course website
• Outside of the classroom, you will acquire more in-depth hands-on • then I will review the highlights in lectures, and you will get some initial
experience in individual assignments and a team term project. practice via in-class exercises.
• Finally, you will apply them in a more realistic hands-on situation through
• individual homework assignments, and a
• semester-long team project assignments.

41 42

7
 1/15/17

Prerequisites Textbooks
• Required • Optional References
• Jenny Preece, Helen Sharp, David Benyon, Phil Turner, and
• Undergraduate students must have successfully completed Yvonne Rogers. Interaction Susan Turner. Designing
Programming II (COP-3337). Design: Beyond Human- Interactive Systems: Designing
• All students must be able to Computer Interaction, 4th Edition, Interactive Systems: A
Wiley, 2015. Comprehensive Guide to HCI,
• program in a high-level programming language, and
• Additional reading material will UX and Interaction Design, 3rd
• become proficient on their own in the basics of AngularJS by the middle of be provided on the course
the semester. Ed., Addison Wesley, 2013.
website. ​

43 44

Grading Reading assignments

• Quizzes 10% • You will be responsible for

• Class participation 10% • keeping up with readings in the book per the schedule given in the course
calendar.
• Individual Homework 20% • setting your own reading pace to keep ahead enough to be prepared for class
• Term project 35% discussions and exercises.
• knowing where we are in our class discussions,
• Final Exam 25% • with respect to finding your place in the class lecture slides.

45 46

Quizzes Class participation

• Quizzes will cover the material of the previous and current week. • Getting full credit for the in-class exercises is easy.
• No make-up quizzes will be given. • This is truly a case where showing up is half the battle.
• Just be there and be willing to participate in each in-class activity and
do a good job of it.
• In assessing the "do a good job" part of this activity for each
individual, I will be looking for:
• Presence or absence of the individual
• Preparedness, knowledge of material
• Care and correctness in applying it
• Intangibles (getting into role, etc.)

47 48

8
 1/15/17

Homework Term projects

• Homework assignments will be individual assignments • Students will work on their term project in teams,
• available on the course website, and • formed early at the beginning of the semester.

• due at the beginning of class according to the course schedule listed on the • The term project will involve
website. • designing,
• implementing, and
• evaluating a system in terms of the concepts and using the methodologies
• Students in CAP5109 will have an additional assignment discussed in class.
• to conduct a small literature review related to their term project, • Students will incrementally go through the phases of the interaction design
• based on selected reading material. (ID) lifecycle, including
• requirements gathering and analysis,
• design,
• paper prototyping,
• computer prototyping, and
• several methods of usability analysis and evaluation.
• The course will also involve the implementation of simple user interfaces
using AngularJS.
49 50

Final exam Course website

• There will one exam: • Website: www.cis.fiu.edu/~lisetti/hci

• a two-hour final exam pre-scheduled on PantherSoft during final week. • ID:
• It is currently scheduled on Thursday 04/27/2017 9:45 am - 11:45am (I do • Password:
not schedule final exams, FIU does).
• You can already check the time and classroom on your PantherSoft account
under this course.
• No make-up exams will be given, no exception.

51 52

Individual Homework assignment (H1) –

DUE next Thursday
a. Administrative
• Pick three different project ideas that you would be interested in working on
• make a rough sketch of a user interface (a scanned or photographed sketch on paper is best)
• and write a 1 paragraph proposal for each, further fleshing out the idea.
• Create one Adobe .pdf file for each project idea (use the le name convention: hw1-idea1.pdf,
hw1-idea2.pdf, hw1-idea3.pdf).
• Post your write-ups and sketches for each idea on your web page in your order of preference
• These will be used to help form project teams.
b. Brainstorming Assignment
• Create a personal course web page with your name and email address at the at the top and

Assignments • post it to a server: The School of Computing & Information Sciences (SCIS) provides students
with a webspace available to host your own website (see instructions on assignment postd
website)
c. AngularJS
• Start working your way through AngularJS tutorial (angularjs.org)

Go to www.cis.fiu.edu/~lisetti/hci/homework.html for details and further

instructions

53 54

9
 1/15/17

Reading Assignments for QUIZ 0 – demographics and feedback

next class and next week
• Getting to know you…
• Reading Assignment for next class • Getting some feedback from you
• Course Syllabus handout
• Course Schedule on our website at URL:
www.cis.fiu.edu/~lisetti/hci/schedule.html
• Chapter 1 - What is interaction design
• skim through it
• Lecture Notes (Powerpoint slides) on Chapter 1
• go to www.cis.fiu.edu/~lisetti/hci/schedule.html
• download the slides from the link under the first Lecture “Overview of HCI and ID,
Syllabus” which includes both lectures (Tuesday and Thursday) on Chapter 1
• Quiz 1 for next class will be on the lecture notes
• Reading assignment for next week
• Chapter 9 – The Process of Interaction Design (i.e. ID lifecycle)

55 56

10