1. CPSC 581 Human Computer Interaction II
Interaction Design Lecture /slide deck produced by Tony Tang, University of Calgary, Canada
(Thanks to Saul Greenberg)
Notice: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known,

2. Your Hosts Tony Tang & Teddy Seyed human computer interaction
ubiquitous computing
computer supported cooperative work
with help from various others

3. Your Hosts
Contact information
MS 680 – Interactions Laboratory
Piazza Forum ( or
Office hours
by appointment:
to arrange one
by any time
drop in for urgent requests
but no guarantees!

4. Course Description Advanced topics and applications in HCI
emphasis on developing design skills for highly interactive human-computer interfaces

5. Course Description Advanced topics and applications in HCI
emphasis on developing design skills for highly interactive human-computer interfaces
work within research GUI topics
challenge you to search for creative interaction design

6. Course Description Advanced topics and applications in HCI
emphasis on developing design skills for highly interactive human-computer interfaces
likely topics selected from:
novel devices (smart phones, physical user interfaces)
novel interaction techniques (multi-touch, sensors, tangibles) …
other things you will learn
sketching and portfolio methods
C# / WPF / Visual Studio

7. Course Description Advanced topics and applications in HCI
emphasis on developing design skills for highly interactive human-computer interfaces
incorporate ‘best practices’ of interface design into your everyday skills
creativity via applied exercises
idea brainstorming via visual sketches
sketch and prototype development
implementation
portfolio summaries
critical analysis of interface designs

8. Structure merged class and labs lectures
in-class practicum on exercises
on-going design critiques
by myself
the TA
class members
‘spontaneous’ design exercises
Meetings: MW 10:00~12:15

9. How you will be evaluated
50% - 3 major projects (15% each) & 1 practice project (5%)
cycles over 6~7 classes
sketches
critique
implementations
demonstrations
portfolio

10. Grading Principle: Socks-Off-o-Meter
Still on | Very conventional design; very little effort to innovate beyond what is well-known and well-understood. Hanging on my toes | Some novel ideas derived from thought and analysis, and presented through design. Off my foot | Very novel ideas, showing a lot of effort and thought was put into design. Across the room | Surprising, pleasing, evocative of feeling. Truly exciting in design, presentation and thought.
Forget about grades. Worry about trying to impress. Do things that no one else has done before.
Worry about trying to be creative. Socks-off-o-meter. You are trying to get a job, you are trying to show off your design and implementation skills.

11. How you will be evaluated
20% - many exercises
series of sketching exercises
replicate sketching method
apply sketching method
interface design methodologies
apply a design method
exercises are ‘on demand’ vs. schedules
10% - participation
class discussions and critiques
presentations of own work

12. How you will be evaluated
10%: sketchbook
progressive descriptions of visual ideas
illustrates application of methods taught in class
habitual use – quantity!

13. How you will be evaluated
10%: portfolio
professional-looking visual summaries of designs
professional portfolio
illustrative of work
archives of code and supporting documents
summary of accomplishments.
4 visual summaries (1 / project)
1 professional portfolio (web)

14. Resources & materials course site lecture materials your supplies .
lecture materials
slides and readings
your supplies
Sketching User Experiences: the workbook (2012)
sketchbook
portfolio materials
prototyping supplies
optional C# / WPF manuals
your choice .

15. Wee bit of Motivation
What are we doing in this class?

19. Design: from materialist to experiential
Movement: object-centered to experience-centered design It is not the physical entity or what is in the box (the material product) that is the true outcome of design. Rather, it is is the behavioural, experiential, and emotional responses that come about as a result of its existence and its use in the real world. -- Bill Buxton

20. Only this way will we be able to move away from the culture of engineering hacker to creative designer.
Indeed, this has been done very successfully by some companies: Web animation (e.g., Flash), Video Editing, Sound engineering systems, Game Engines, to name a few, where the companies targetted the creative non-programming end user.
This successfully led to this new age of creativity in New Media Design that we are now living within.
Unfortunately, Computer Science and Engineering has had very little to do with this revolution.

21. You are a Designer, not a Technician
Sketchbook
carry one constantly
collect / generate / develop a multitude of ideas
Tools
see what is out there
your media choice affects what you create
Aesthetics
they matter – being a ‘dweeb’ is no excuse
Critique
challenge all designs you see
present yours – don’t be shy!
Portfolio
collect your works
be proud