CS487 - Human Computer Interacton

Introducton
Week 1
 Today’s
Agenda
Course
01
Overview

02 Introducton to
HCI

03 A Brief
History

04 Course Mini-
Project

05 Finishing Thoughts
About This Course

✗The frst 40 years of computer science were concerned mainly with

computers themselves—making them faster, smaller, more reliable,
and beter understood mathematcally

✗Perhaps that's stll the main concern of the feld as a whole, but
today computer scientsts devote increasing atenton to computers
in their real-world context, which usually involves the people who
use them

✗Computers may be complex systems, but human beings are even

more complex, and when we try to understand how computers and
people work together—well, there's a lot to cover
3
What This Course is…

✗This course will introduce the broad feld of human-computer

interacton (HCI):
✗the psychological basis of cogniton and percepton;
✗the variety of interacton devices, media, and styles;
✗methods for designing systems and evaluatng their usability; and
✗the principles and guidelines the feld has developed

➡ The success of most systems today, especially consumerproducts,

depends largely on HCI decisions
4
What This Course is NOT…

✗This course does not focus on programming tools and methods for
implementng interfaces. Of course, that's a valuable topic, but
semester tme is barely enough for the topics and techniques we
do cover

✗Once you know how to design and assess a good user interface,
learning the libraries and tools for implementng them is relatvely
straightorward
✗

5
Topics to be
Covered
1 Introducton to HCI
2 Understanding the problem
3 Understanding users and user studies
4 Task & requirement analysis
5 Design and prototyping
6 Models of human informaton processing and interacton
7 Cognitve walkthrough
8 Psychological and physiological constraints
9
10 Heuristc evaluaton
Perspectves & overview of the UI design process
6
Learning Objectves
Upon successfully completng this course, students will be able to:

✗Propose interacton design solutons

✗Study existng design practces and challenges

✗Explore potental design opportunites and tradeofs

✗Evaluate designs and view them from critcal perspectves

✗Validate designs with rapid prototyping and iteraton

✗Communicate the tackled problems and proposed designs 7

Textbook and Course Materials

Human-Computer Interacton,
by Alan Dix et al., 4th Editon, 2004
The Design of Everyday Things, by Don
Norman, Revised and Expanded Editon, 2013
Alternatve, Any textbook that covers
course topics

* Lecture notes and additonal

reading material will be available on 8
Blackboard
Course Assessment

Homework-Project – Week 11
10% (Due date)

10% Quiz - Weeks 4

20% Mid Exam 1 - Week

5
20% Mid Exam 2 - Week
10

40% Final Exam - Week 13

9
Communicaton

Dr. Redhwan Nour - Email:

[email protected] (Dr. Abdul Ahad
-Siddiqi)
Include your name/ID in every email
[email protected]
- Place course number/secton and email topic in the subject line
(e.g. CS487 - Project Queston)

Microsof Teams
- Individual/group meetngs can be set up upon request
All announcements regarding the course will be posted on
Blackboard and/or emailed to your TaibahU email address

Check detailed course syllabus on blackboard!

10
 Today’s
Agenda
Course
01
Overview

02 Introducton to
HCI

03 A Brief
History

04 Course Mini-
Project

05 Finishing Thoughts
Why are we here?

✗Computng is everywhere!
✗From desk-top to set-top to palm-
top to fip-top to wrist-top …

✗User interfaces mater

✗for efciency, for convenience, for
commercial success, even for life
and death

✗People tme is more expensive than

computer tme
12
✗Everyone has stories of bad
How Did we Get Here?

✗Once, it was enough if the system just worked (most of the tme)

✗Once, the burden was on the user

✗Today, you have to care about:

✗ Success of the system+ well-being of the users

➡ Both depend on good UI, hence, HCI

13
So What is
HCI?
✗HCI examines what happens when a human and a computer system interact
to perform a task
✗Task might be playing, learning, communicatng, ...
■ Examples: write document, calculate budget, solve equaton, learn topic,
drive home, monitor air trafc, …

✗Narrowly: 1 user, 1 computer

✗Focus on sofware, layout and operaton of UI

✗Broadly: people and computers

✗Users’ mental processes, work practces 14
HCI More Formally

✗HCI (human-computer interacton) is the

study of how people interact with computers Psychology,
and to what extent technology is or is not Engineering, Sociology,
Computer Ethnograph
developed for successful interacton with sience y
human beings HCI
✗HCI discipline is mainly concerned with:
Design
✗Design, evaluaton and implementaton of
interactve computng systems for human use

✗Study of the major phenomena surrounding

interactve computng systems for human use 15
Why is This Important?

✗Most human actvites involve technology

✗No longer just about the desktop!

✗Computer systems (in one way or another)

now afect every person in society

✗Product success depends largely on ease of

use, not necessarily power
➡ Usability is crucial!

16
Usability Goals

✗Combinaton of:

✗ Satsfacton (utlity, efectveness, experience)

✗ Safety/robustness (low user error rate)

✗ Efciency (performance speed, movement)

✗ Learnability (tme to learn to get work done)

✗ Memorability (retenton over tme or when using infrequently)

✗So, a usable system is easy to learn, easy to remember how to use,

efectve, efcient, safe, and enjoyable to use 17
HCI !=
Usability
✗Usability is only one part of HCI, but has been one of its main
goals

✗HCI studies involve:

✗Developing guidelines and standards that support designers

✗Developing methods to evaluate the user experience of a given

product/system
✗Using mathematcal models to predict users’ performance with a system (e.g.,
laws for mouse movement tme and models that predict search tme
or mental efort)
18
✗Investgatng new interacton paradigms or new ways of integratng
How Do We Improve
Interfaces?
✗Educate sofware professionals

✗Draw upon fast accumulatng body of knowledge regarding H-C

interface design

✗Integrate UI design methods & techniques into standard sofware

development methodologies now in place

19
How Do We Know a UI is
Good?
✗“Looks good to me” isn’t good enough!

✗Analyze using “common sense”

✗ Utlize both subjectve and objectve metrics

✗Develop a theory of “human cognitve processing” to predict users’

problems

✗Test the UI on actual users; problems arise

✗Generalize fndings and develop guidelines for avoiding problems, i.e. usability
engineering 20
Above All Else…

✗Know the user!

✗Physical & cognitve abilites (& special needs)

✗Personality & culture
✗Knowledge & skills
✗Motvaton

✗Two fatal mistakes:

1. Assume all users are alike
2. Assume all users are like the designer
21
Six Aspects of
HCI
✗ Human abilites (percepton, memory, ...)

✗ Technologies (windowing, mouse, VR, ...)

✗Design methods (prototyping, lifecycles, ...)

✗Evaluaton methods (experiments, observaton, ...)

✗Guidelines and results (what has been proven to work in partcular

situatons, e.g., typography)

✗Implementaton tools and techniques (another course)

22
HCI’s Impact on Society

✗We can now use computers as an

every- moment- partner

✗Less and less training is required for

most
applicaton and devices

✗Some examples

✗Touch screen: direct interacton with objects

✗Voice control: for some people the only way to

interact with computers 23
HCI’s Impact on Culture

✗Smartphones have changed how we spend

our "empty tmes": should we read the
news? answer emails? chat with friends?
play a game? should we just be bored?

✗Social Media have infuenced how we stay

in touch with each other and how to fnd
new friends

✗Games, more than entertainment, can be

used as social and even productve
tools 24
HCI’s Impact on Economy

✗Massive increase in productvity

✗HCI found how to speed up input and

reduce its complexity

✗People can perform tasks faster than

they used to

✗Reduced need for training

✗More people can use technology

than 25
ever before
A Walk Through Time

Classical HCI Contemporary

1 HCI
3

Modern HCI

26
A Walk Through Time
- First Wave, Early 80’s
- Contemporary
Classical HCI HCI
1 3

All cognition happens

inside a user’s brain

Modern HCI

27
Classical HCI

✗Key concepts:

✗Applying psychology research

✗Cognitve modeling —>

✗Methods:
✗Controlled lab experiments
✗User modeling
✗Rigid guidelines
✗User requirements 28
A Walk Through Time

Classical HCI Contemporary

1 HCI
3

Maybe cogniton doesn’t all

happen inside a user’s
brain
2

Modern HCI
- Second Wave, Late 80’s, Early 90’s
- 29
Modern HCI

✗Key concepts:

✗External & distributed cogniton —>

✗Situated acton
✗Ethnomethodology & ethnography
✗Actvity theory

✗Methods:

✗Intensive, long term involvement

✗Rapid prototyping 30
A Walk Through Time
- Third Wave, Mid to Late 2000’s
Classical HCI -
1 Contemporary HCI
3

We need to take culture

and context into account,
too

Modern HCI

31
Contemporary HCI

✗Key concepts:

✗Turn to design
✗Turn to culture
✗Turn to the wild —>
✗Turn to embodiment

✗Methods:

✗Exploratory, creatve methods (inspiraton seeking)

✗User involvement 32
 Project Theme
Improve Something Out There!
 Project
Overview
Summary:
✗Evaluate the usability of an interface (of a website, an applicaton or any
computatonal system) and propose a validated redesign that will improve
the user experience
Goals:
✗Evaluate existng computng-related task or problem
✗Develop interface design alternatves for the task or problem
✗Implement a prototype of your design
✗Evaluate your design
Teams:
* Project concept and details are courtesy of Prof. David G. Kay @UCLA
What to Improve?

✗Think about the problems people face when:

✗Traveling
✗Shopping
✗Gaming
✗Health care
✗Working

✗Can be any aspect of daily life!

✗Design to support one partcular kind of actvity or 35

Characteristcs of a Good Project

✗You are passionate about it

✗The problem itself is clear: your prototype will fulfll a clear goal

✗It is novel

✗It needs to be well scoped

✗It is not just another app :)

36
Project
Phases
✗The project is organized around the following milestones:
Part 0 - Team formaton & topic choice
Part 1 - Existng system evaluaton
Part 2 - Design alternatves and evaluaton
Part 3 - New design proposal

✗Each team is expected to deliver a report at the end of each phase

37
Deliverables
Details
✗P0 - Team formaton & topic choice - (Week 3)
✗ Submit a one-page document with a team name, members names and
IDs, and topic or existng system to be studied

✗P1 - Existng system evaluaton - (Week 7)

✗ Determine three or four typical tasks that a user might perform on the site
or with the applicaton

✗ Find at least three typical users of the system and do a walkthrough,

following the guidelines discussed in class, of the users atemptng
to complete each of your selected tasks

✗ Submit a usability evaluaton report that briefy describes your 38

Deliverables Details (cont.)

✗P2 - Design alternatives and evaluation - (Week 10)

✗ Use the knowledge gained in Part 1 and from class to develop a design
alternatve that improves the problematc areas you identfed in your
usability evaluaton (you can have more than one design)

✗ Build a prototype of your new design using any prototyping tool

✗ Test your prototype on at least three people, asking each to perform the
original selected tasks, and follow the guidelines for working with users

✗ As faws or improvements become apparent during your user testng,

iteratvely adjust your design and prototype and re-test the changed aspects

✗ Submit a report that includes your design details and describes the prototype 39
and evaluaton process and what changes resulted from the user testng
Deliverables Details (cont.)

✗P3 - New design proposal - (Week 12)

✗ Write a proposal describing your improved design

✗ The major part of the proposal should describe the new design and how
it improves the usability issues you identfed in Part 1

✗ Of course you can include illustratons as appropriate

✗ Submit your design proposal document along with a document that

describes the contributons made by each member of the team (one
or two sentences for each member is sufcient).

40
General Reports Guidelines

✗Each report should:

✗include team members names and IDs

✗be of at least 2 and at most 4 pages (except P0 report)

■ Body font size: 12
✗follow
■ Linethespacing:
following1.5styling
lines specifcatons:
■ Page margins:
Normal (1” or
✗be submited
2.54cm top, at botom,
the end of its respectve week (Saturday, by midnight)
lef, and right)
✗Only one member of the team should do the submission

41
Project Presentaton

✗Final week of classes (Week 15)

✗10-15 minute project summary

✗Motvaton - what existng problem are you addressing?

✗Evaluaton (existng) - what problems does existng system have?
✗ReDesign - what does your soluton look like?
✗Evaluaton (new) - what did you do and what were the results?
✗Conclusions - if you had more tme, what would you do next?
42
Finally, Project Grading

✗Design is subjectve, and so is this course

✗I can't really run a unit test and grade your design :)

✗Wow us with your work and respect the deadlines

✗The entre process is designed around feedback

✗Milestones will be graded and feedback will be provided when needed

✗You must act on feedback (does not mean saying yes!)

✗Focus on putng efort on the design and searching for feedback!

43
Resources & More…
Textbooks Chapters:
✗Human-Computer Interacton - Ch1 and Ch2
Credits:
✗Some slides content and illustratons are courtesy of:
✗ Prof. David G. Kay @UCLA, <link>

✗ Prof. John T. Stasko @GeorgiaTech, <link>

✗ Nigini Oliveira et al. @The Allen School, <link>

✗Slides design and infographics, <slidescarnival.com>

44