Human-Computer Interaction 1. Introduction to HCI and UCD Dr. - - PowerPoint PPT Presentation

▶
human computer interaction
SMART_READER_LITE
LIVE PREVIEW

Human-Computer Interaction 1. Introduction to HCI and UCD Dr. - - PowerPoint PPT Presentation

Apr 06, 2024 89 likes •750 views

Human-Computer Interaction 1. Introduction to HCI and UCD Dr. Sunyoung Kim School of Communication & Information Rutgers university Todays agenda Who are we? Warm-up exercise What is this course about? Syllabus

slide-1
SLIDE 1
  • Dr. Sunyoung Kim

School of Communication & Information Rutgers university

Human-Computer Interaction

  • 1. Introduction to HCI and UCD
slide-2
SLIDE 2

Today’s agenda

  • Who are we?
  • Warm-up exercise
  • What is this course about?
  • Syllabus
  • Evaluation
  • Class policy
  • History of HCI
  • What is HCI?
slide-3
SLIDE 3

Instructor

Sunyoung Kim

Office: Room 329 in SC&I Email: sunyoung.kim@rutgers.edu Website: http://www.sunyoung.kim.org Office hours: Tuesday 1-2pm

slide-4
SLIDE 4

Warm-up exercise

  • Draw two different doors
slide-5
SLIDE 5

Warm-up exercise

  • Volunteers? Send your drawings to sunyoung.kim@rutgers.edu
slide-6
SLIDE 6

Human-Computer Interaction

slide-7
SLIDE 7

Human-Computer Interaction

  • Information input/output
  • Information stored in memory
  • Information processed and applied
slide-8
SLIDE 8

Human-Computer Interaction

  • Desktop, Laptop, Tablet
  • Smartphone, Smart watch
  • Activity tracker, Wearables
  • Autonomous car, Dron …
slide-9
SLIDE 9

Human-Computer Interaction

slide-10
SLIDE 10

Interaction design cycle

slide-11
SLIDE 11

Syllabus

slide-12
SLIDE 12

Grading

  • 30% Group project
  • 25% Individual project
  • 25% Quizzes
  • 20% Class participation
  • 10% Reading response
  • 5% Attendance
  • 5% Discussion and class activities
slide-13
SLIDE 13

Grading: reading response

  • Due Tuesday midnight, before class
  • Reading is posted on the website
  • Submit a reading response (a summary of reading) to Canvas

discussion board

  • Will be graded
  • 2 = good
  • 1 = partial
  • 0 = no submission
slide-14
SLIDE 14

Quiz (25%)

  • 5 quizzes
  • Format: a number of short-answer questions
  • Schedule and grades

Date Weight Topics 2/8 20% HCI basics & Understanding users 2/22 20% UI Design principles 3/22 20% Prototyping and Visual Designs 4/19 20% Evaluating interfaces 4/26 20% All materials

slide-15
SLIDE 15

Group project (30%)

  • We will design a mobile application to tackle a real-world problem
  • Form a team of 3 students to work for a project throughout the

semester

  • When forming a group, you want to make sure that your group

members have different skillsets (e.g., drawing, writing, programming, etc.)

slide-16
SLIDE 16

Group project (30%)

  • Schedule and grades

Stage Due ( by midnight) Assignment Weight

1/24 Submit team contact memo check 1 1/31 Project proposal 5% 2 2/7 User & task analysis 10% 3 2/28 Proposed solution, Workflow, Sketch and Low-fi prototype 10%

  • 3/7

Mid peer evaluation 5% 4 3/28 Hi-fi prototype 15% 5 4/25 User testing: Heuristic evaluation 5% 6 5/3 (in class) Final presentation 20% 7 5/9 Final report & video submission 20%

  • 5/9

Final peer evaluation 10%

slide-17
SLIDE 17

Individual assignment (25%)

  • We will prototype a smartwatch application to tackle a real-world

problem

  • Schedule and grades

Stage Due (midnight) Weight Assignment

1 1/24 1/31 5% Project proposal (2.5%) Proposal revision (2.5%) 2 2/14 15% User & task analysis (Persona) and Scenario (Storyboards) 3 3/7 15% Proposed solution & Workflow 4 3/21 15% Sketch & Low-fi prototype 5 4/11 10% User testing: Cognitive Walkthrough 6 4/19, 26 (in class) 20% Final presentation 7 5/5 20% Final submission

slide-18
SLIDE 18

Class policies

  • Be mindful during class time (aka no Facebook, Instagram, twitter,

snapchat, groupme, and so forth during class)

  • Respect and collaborate with your team members
  • All assignments are due by midnight before the class
  • Assignments will not be accepted late
  • Notify two days in advance if you have to miss taking a quiz
  • Cheating (official) will get you an F in the course
slide-19
SLIDE 19

Reaching me

Do not email me directly!

  • Use Piazza
  • http://piazza.com/rutgers/spring2017/iti547230hci/home
  • If other students will benefit from an answer, ask publicly on Piazza.

If it’s personal, use Piazza private messaging feature

  • Feel free to share your thoughts on other students’ questions
  • You can ask/answer questions anonymously
slide-20
SLIDE 20

Class websites

  • Class materials- http://www.sunyoungkim.org/class/hci.html

Access to slides- ID: rutgers PW: hci

  • Q&A- https://piazza.com/class/ixqfurlp5uz774
  • Assignments, Grades & Discussion -

https://onlinelearning.rutgers.edu/canvas-login

slide-21
SLIDE 21

Questions?

slide-22
SLIDE 22

History of HCI

slide-23
SLIDE 23

ENIAC (1943)

  • The world's first all electronic numerical integrator and computer
  • Military use: calculates artillery-firing tables
  • 1,800 square feet of floor space, weighed 30 tons, consumed 160

kilowatts of electrical power

slide-24
SLIDE 24

Vannever Bush (1945)

  • Identified the information storage and retrieval problem: new

knowledge does not reach the people who could benefit from it

  • A call to action for making knowledge widely available
  • Conceiving Hypertext and the World Wide Web
slide-25
SLIDE 25

J.C.R. Licklider (1960)

  • Foreseen “Man-Computer Symbiosis”
  • Interactive real time system and programming large scale information

storage and retrieval

  • Natural language understanding
  • Facilitation of human cooperation in the design of systems
  • Combined speech recognition, hand-printed character recognition
  • Foreseen Graphical user interface (GUI)
slide-26
SLIDE 26

Ivan Sutherland (1963)

  • Sketchpad: drawing package introduced many ideas/concepts found in

today’s interfaces

  • Hierarchical structures defined objects and sub-objects
  • Object-oriented programming: master picture with instances
  • Constraints, icons, coordinates, copying, pen input, etc.
  • Clipping & zooming
slide-27
SLIDE 27

Douglas Engelbart (1964)

  • The first mouse

“Develop new techniques, procedures, and systems that will better adapt people’s basic information-handling capabilities to the needs, problems, and progress of society.”

slide-28
SLIDE 28

Xerox Star (1981)

  • First commercial personal computer

designed for business professionals

  • First system based upon usability

engineering

  • WYSIWYG
  • $15,000
slide-29
SLIDE 29

Apple Macintosh (1984)

slide-30
SLIDE 30
slide-31
SLIDE 31

And nowadays…

slide-32
SLIDE 32

We are moving away from traditional ways of interacting with computing devices.

slide-33
SLIDE 33

Read the paper and post your response to Canvas

Reading

slide-34
SLIDE 34

What is HCI?

slide-35
SLIDE 35

Human-Computer Interaction

slide-36
SLIDE 36

What is HCI?

  • The study of how humans interact with computer systems: a broad

term that covers all aspects of the ways in which people interact with computing systems

  • The design of a user interface (UI) to allow a user to interact with

computer systems with minimum effort and frustration

Psychology Design Computer Science Human- Computer Interaction

slide-37
SLIDE 37
  • HCI is concerned with the design, evaluation and implementation of

interactive systems for human use and with the study of major phenomena surrounding them. (from ACM SIGCHI Curricula for Human-Computer Interaction, 1992)

  • Focus is on the users’ goals and tasks (User-Centered Design

approach)

What is HCI?

slide-38
SLIDE 38

User-Centered Design (UCD)

slide-39
SLIDE 39

User-Centered Design (UCD)

slide-40
SLIDE 40
slide-41
SLIDE 41

User-Centered Design (UCD)

“Users in the loop”: To involve your users all throughout the project

  • Who are users?
  • How do we involve users?
slide-42
SLIDE 42

User-Centered Design (UCD)

Six “mantras” of UCD

  • Understand your users (needs, ‘wants’, goals, tasks, context, etc.)
  • Design based on the data collected from studying users and their

experiences

  • You, the designer, are not the users!
  • Prototype
  • Evaluate
  • Iterate, iterate, and iterate!!!
slide-43
SLIDE 43

Why UCD?

slide-44
SLIDE 44

Why UCD?

slide-45
SLIDE 45

Why UCD?

slide-46
SLIDE 46

Interface Bloat

slide-47
SLIDE 47

Interface Bloat

slide-48
SLIDE 48

User-Centered Design (UCD)

Trying to satisfy the needs of all users may mean that you fail to satisfy the needs of any one user

slide-49
SLIDE 49

User-Centered Design (UCD)

slide-50
SLIDE 50

Why is User-centered approach important?

  • We interact with computing systems

in every facet of our everyday lives

  • When interacting with computing

systems, they do it through a user interface

  • How a user interacts with a computer

is different for each system

  • People do not accept products with

poor interfaces

  • If a system doesn’t work as expected,

it is not a user’s fault but a designer’s fault!

slide-51
SLIDE 51

You can become a(n):

  • Interaction designer
  • User Experience designer/researcher (UX)
  • Product Manager (PM)
  • Information Architect (IA)
  • Usability Specialist
  • And many more…

If you are good at HCI

slide-52
SLIDE 52

Individual assignments

slide-53
SLIDE 53

Individual assignments

  • 25% of the total grade
  • We will prototype (proof-of-concept) a smartwatch application to

deal with an interesting real-world problem

slide-54
SLIDE 54

Images from https://www.verizonwireless.com/archive/mobile-living/tech-smarts/android-smartwatch-features/

Smartwatch can let you:

  • 1. Get directions
  • 2. Connect to your phone from afar
  • 3. Use voice search
  • 4. Stay informed (both external and on-body data)
  • 5. Play music, book flights, shop, and more
  • 6. Respond to message on the fly
slide-55
SLIDE 55

Individual assignments: themes

  • Real-time data collection & retrieval on the go
  • Facilitating physical space and location
  • Connect body movement data with other information
  • Healthcare & wellness
  • Environmental protection
  • Mutual communication & interaction
  • Anything else that is fun and useful
  • Be creative!
slide-56
SLIDE 56

Individual assignments

slide-57
SLIDE 57

Individual assignments

slide-58
SLIDE 58

Individual assignments: themes

  • Real-time data collection & retrieval on the go
  • Facilitating physical space and location
  • Connect body movement data with other information
  • Healthcare & wellness
  • Environmental protection
  • Mutual communication & interaction
  • Anything else that is fun and useful

# No meetup, buddy-finding, study-group finding type apps

slide-59
SLIDE 59

1. Identify an interesting problem that a smartwatch app can solve from the given themes. To do this, you need to brainstorm a bit. 2. Describe the problem you are trying to solve with a new smartphone

  • application. What is the context, what is the problem, why is it a

problem, and why is a smartwatch app a proper solution? 3. Set up a homepage – use a google site 4. Turn in your writing to Canvas before next class

# You will have one revision cycle to make sure your idea makes sense. # Note that you will work on this project throughout the semester. You will also be doing a presentation near the end of the semester and submitting a report about this project. So make sure to pick something that excites you!

Individual assignments

slide-60
SLIDE 60

Group project

slide-61
SLIDE 61

Group project

  • We will build a mobile application to tackle a real-world problem
  • Form a team of 3 students to work for a project throughout the

semester

  • When forming a group, you want to make sure that your group

members have different skillsets (e.g., drawing, writing, programming, etc.)

  • Themes of the project will be provided in the next class
  • Question?
slide-62
SLIDE 62
  • Name
  • Year
  • Recent interests/hobbies
  • What you are good at (Skills

& expertise)

  • What you can contribute to

working on a group project

  • What you want to learn from

this class

slide-63
SLIDE 63
slide-64
SLIDE 64

By next class

Reading

1. UCID Ch. 2-4 2. Paper: Beyond Being There # discussion paper 3. Book: The Essentials of Interaction Design (Chapter 5) 4. Paper: An Infrastructure for Engagement # discussion paper

q Submit two drawings of a door by tonight q Submit a paragraph of your individual project proposal by 1/24 (Tue) 11:55PM q Submit your team information by 1/24 (Tue) 11:55PM

  • Name: Give your team a name
  • Members: Names and preferred contact info
  • Skills Inventory: List of who is good at what
  • Communication Plan: How will you communicate as a team?
  • Rules: Things you all agree to do