COSC 341: Human Computer Interaction
Pourang P. Irani
COSC 341 People
Pourang P. Irani
▪ Professor, Tier 1 Principal’s Research Chair
- UBC Okanagan: 2022 – Present
▪ Professor, Tier 2 Canada Research Chair
- University of Manitoba: 2013 - 2022
▪ Assistant, Associate Professor
- University of Manitoba: 2002 - 2011
▪ BSc, PhD in Computer Science (Co-op)
- University of New Brunswick: 1992 – 2002
COSC 341 2
youth and children well-being
Fascination with…
tech gadgets
power of human brain (imagining, learning)
human migration patterns
COSC 341 3
COSC 341 4
COSC 341 People
▪ Lectures: Mon/Wed 9:30 – 11:00 am
▪ Office hours: Mon 11:30-12:30, Wed 11:30-12:30
- Or by appointment
▪ Office: FIPKE 304
▪ Email: pourang.irani@ubc.ca
- Always include COSC 341 in subject
- Expect ~24hr turnaround (~48hrs on weekends)
- Preferred: Canvas Inbox
COSC 341 5
Research Interests
▪ Human-Computer Interaction
▪ Data Visualization
▪ Mobile & Wearable Computing
▪ Comfort for Interactive Tech
▪ Data Transparency/Safe AI
▪ Ubiquitous Analytics
- Website: https://cmps.ok.ubc.ca/about/contact/pourang-irani/
COSC 341 6
Sample project
▪ Sample Project:
- Texting while walking? Should we support it?
https://www.youtube.com/watch?v=wl0JojWH1rQ
https://hci.cs.umanitoba.ca/projects-and-
research/details/crashalert
https://www.cbc.ca/news/canada/manitoba/
manitoba-researchers-eye-walking-texting-
safety-app-1.1319784
COSC 341 7
Cell Phone Policy
COSC 341 8
COSC 341 People
▪ Teaching Assistants (TAs):
Tarik Hasan Satabdi Das
- Role:
Coding support
Lab support
Grading/Marking
Canvas updates/responses
COSC 341 9
Syllabus
What to expect
How to be successful
Next steps
Course Emphasis
▪ How to design,
implement and
evaluate user
interfaces that
satisfy users’
needs
COSC 341 11
Design
▪ Design principles and guidelines
▪ Human capabilities/limitations
▪ Devices capabilities/limitations
COSC 341 12
Build/Implementation
▪ Android UI development
▪ Techniques for constructing a high-fidelity prototype
▪ Methods for transforming user data into prototypes
COSC 341 13
Evaluate
▪ Interviews/questionnaires
▪ Performance models
▪ Experiment design
▪ Heuristic evaluation
COSC 341 14
Questions?
COSC 341 15
Course Objectives
▪ Acquire the fundamentals of Human-Computer Interaction
▪ Develop a toolbox of proper design guidelines
▪ Acquire GUI programming skills
▪ Learn a variety of interface evaluation techniques
▪ Develop critical UI evaluation skills
Keep eyes wide open to UI/UX of all
interactive devices
COSC 341 16
Grading
▪ Evaluation Criteria for COSC 341:
- Labs 20%
- Midterm Exam 20% (Wednesday February 26th at 9:30 am)
- Final Exam 30% (TBA)
- Project 30%
COSC 341 17
Labs
20% Lab 0
20% Lab 1
20% Lab 2
20% Lab 3
20% Lab 4
COSC 341 18
In-Class Activities (Bonus)
Approximately 10 in-class activities (1 mark for each)
In-class activity marks will be added to your lab marks
Please note that bonus marks from Labs or Project will not
overflow to other components
COSC 341 19
Late Lab Submission Policies
▪ Labs due dates will be posted on Canvas
- You are allowed to submit your labs, lab 0 to lab 4, up to 1 day
late (i.e., up to 24 hours late for each lab).
- No lab submissions will be considered 24 hours after the due
date/time.
- Please note that if the late submission date falls on a weekend,
there will be no TA or instructor support available for labs.
COSC 341 20
Late Project Steps Submission Policies
▪ Project steps due dates will be posted on Canvas
▪ No late submissions will be considered for project steps
COSC 341 21
Course Project
▪ Design, build/implement and evaluate mobile user interfaces
that satisfy users’ needs
▪ The course project will be group-based (4 members per group)
▪ Deliverables with tentative dates
- Project descriptions to follow
COSC 341 22
Project Group Work
▪ Duties should be distributed equally among members.
- Each group member should be given the opportunity to
participate in all aspects of the project
▪ Group members evaluate one at the end of the term
▪ Group composition with TA/instructor
▪ Email you topics of interest (~2 projects) and send them to me at
pourang.irani@ubc.ca & TAs
▪ Project topics must be finalized by January 17, 2025
COSC 341 23
Development Platform
▪ The course project will be on a Mobile platform
▪ There will be a few lectures on Android Application Development
▪ You will need to learn Android dev on your own time
- Unfortunately, this is not a course in Mobile programming
▪ In-class instruction will focus on HCI theories, concepts and
methods
COSC 341 24
Questions?
COSC 341 25
Resources
▪ Primary Text (Optional):
Jenny Preece, Yvonne Rogers and Helen Sharp. Interaction design:
Beyond Human-Computer Interaction, Wiley and sons. 3rd Edition.
E-book available on UBC library)
▪ Other Material:
Alan Dix, Janet Finlay, Gregory Adowd, and Russell Beale. Human-
Computer Interaction, Prentice Hall.
▪ Lots of online resources for Android programming
COSC 341 27
Getting Help
▪ Office Hours
- Lecture and assignment help
▪ Canvas
- Staff will monitor (best-effort response)
- When posting
Answer questions, but don’t be too explicit
No code taken directly from assignment
Build one collaborative answer
Be nice
COSC 341 28
Next Steps
▪ Project Step 0
- Group formation (Qualtrics survey)
- Project ideas
- Project research
COSC 341 29
Do you have any recent or memorable experiences
with good or bad UIs?
COSC 341 30
COSC 341 31
Example – Flight Finder
COSC 341 32
Example – Flight Finder
COSC 341 33
Example – Flight Finder
COSC 341 34
Example – Flight Finder
COSC 341 35
Example – Flight Finder
COSC 341 36
Example – Flight Finder
COSC 341 37
Example – Flight Finder
COSC 341 38
Example – Flight Finder
COSC 341 39
Example – Flight Finder
COSC 341 40
Example – Flight Finder
COSC 341 41
Example – Please let me out!
COSC 341 42
COSC 341 43
COSC 341 44
Norman Doors
▪ https://www.youtube.com/watch?v=qtCEoGyfsxk
COSC 341 45
Bad design is everywhere
COSC 341 46
Do faucets have it right?
COSC 341 47
Examples – Petro Canada Gas Pump
Here is two pictures of the gas pump, sadly the display on the
screen isn't what it was when we were confused. What the screen
said was: "Press OK when finished".
The first picture is just the original, the second has some words on
it describing some of the keys. As you will notice no OK key to be
found.
Devin (former Comp 3020 student)
COSC 341 48
Examples – Petro Canada Gas Pump
COSC 341 49
Examples – Petro Canada Gas Pump
COSC 341 50
COSC 341 51
New Laptop With No Keyboard:
https://www.youtube.com/watch?v=9BnLbv6QYcA COSC 341 52
Good Design?
COSC 341 53
Good Design
COSC 341 54
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
COSC 341 55
Goals of HCI
▪ Understand factors that determine how people interact with
technology
▪ Observe human behavior with technology and optimize the user
experience
COSC 341 56
Goals of HCI
▪ Develop tools, techniques, and general guidelines to enable
building usable systems
Image taken from www.hitreach.co.uk
COSC 341 57
Terminology: User Interface
▪ A user interface is the place where a person expresses intention to
an artifact, and the artifact presents feedback to the person.
presents feedback
express intention
person artifact
COSC 341 58
User Interfaces
▪ Does a microwave have an interface?
▪ A refrigerator?
▪ A door bell?
▪ A hammer?
COSC 341 59
User Interface
▪ The place where humans and computers meet
▪ The human's view of the computer
Buxton (2001)
COSC 341 60
Interactive System Architecture
User Interactive System
mental
model system
model
present feedback
express intention
COSC 341 61
Interactive System Architecture
User Interactive System
mental
model system
model
perceive present
express translate
COSC 341 62
Model-View-Controller (MVC)
present
View
perceive notify
mental system
model Model model
express
change
Controller
translate
COSC 341 63
Graphical Temperature Control
Temperature
draw
value
widget
View changed
present notify
perceive
temperature max = 30°
is halfway, Model temp = 18°
too hot min = 10°
express
translate change
mouse
movement
mouse Controller change temp
events to 18°
COSC 341 64
Speech Temperature Control
text to
hear “Temperature speech value
is 18 degrees.” View changed
present notify
perceive
temperature max = 30°
is 20° Model temp = 18°
min = 10°
express
translate change
say “Set
temperature to Controller change temp
18° degrees.” speech to 18°
recognition
COSC 341 65
Interface vs. Interaction
▪ What is the difference between an interface and interaction?
▪ Interface refers to the external presentation to the user
- Controls (what you can manipulate to communicate intent)
- Feedback (what the program uses to communicate its response)
▪ Interaction refers to actions by user and system over time
- interaction is a dialog with a cycle alternating between the user
manipulating controls and the system responding with feedback
COSC 341 66
Interface and Interaction Design
▪ What is the interface?
▪ What is the interaction?
▪ Why is this good interaction design?
COSC 341 67
Interaction Design
▪ Challenging because of variability in users and tasks
- Varying levels of expertise, skills (learning curves, training,
assistance)
- Range of tasks performed with the same tool
- Preferences (styles, habits, content)
▪ No one “right way” to design an interface, interfaces can always be
improved
COSC 341 68
Why Care About Interfaces?
• UIs are a major part of real-world systems
• You will work on real-world systems
– intended for people other than yourself
• Bad user interfaces cost:
– Money
– Lives (e.g., Therac-25)
– Time
COSC 341 69
Empowering People
▪ Well designed interfaces empower people to
do things they couldn’t otherwise do
- Desktop publishing, grassroots journalism
(blogs), movie production, music production,
image editing, assistive technologies, …
▪ A well designed tool can change the world
- The web browser, Linux, iPhone,
spreadsheet, email, instant messaging, git,
live streaming, …
COSC 341 70
Questions?
COSC 341 71
