CPSC 581

Human Computer Interaction IIInteraction Design

Your Hosts

Saul Greenberg & Nic Marquardt• human computer interaction • ubiquitous comuting• computer supported cooperative

work

with help from various others

Your Hosts

contact information• saul.greenberg@ucalgary.ca or

nicolai.marquardt@ucalgary.ca • MS 680 – Interactions Laboratory

office hours• by appointment:

o email to arrange one

• by email any time• drop in for urgent requests

o but no guarantees!

EP 2 126 678 patent, Claim 1

A computer-implemented method, comprising: at a device with a touch screen display•detecting a movement of an object on or near the touch screen display;•in response to detecting the movement, translating an electronic document displayed on the touch screen display in a first direction;characterized by•in response to translating, in the first direction, the electronic document beyond an edge of the electronic document while the object is still detected on or near the touch screen display, displaying an area beyond the edge of the document; and•in response to detecting that the object is no longer on or near the touch screen display, translating the electronic document in a second direction until the area beyond the edge of the electronic document is no longer displayed.

From US Patent 7,469,381

From US Patent 7,469,381

From US Patent 7,469,381

From US Patent 7,469,381

Do it differently

Course Description

Advanced topics and applications in HCI • emphasis on developing design skills for highly interactive

human-computer interfaces

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

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

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

Do it differently

Structure

merged class and labs• lectures• in-class practicum on exercises• on-going design critiques

o by myselfo the TAo class members

• ‘spontaneous’ design exercises

Do it differently

How you will be evaluated

60% - 3 major projectso cycles over ~7 classeso sketcheso critiqueo implementations o demonstrationso portfolio

How you will be evaluated

20% - many exercises•series of sketching exercises

o replicate sketching methodo apply sketching method

•interface design methodologieso apply a design method

•Participationo class discussions and critiqueso presentations of own work

Exercises are ‘on demand’ vs. schedules

How you will be evaluated

10%: sketchbook• progressive descriptions of visual ideas • illustrates application of methods taught in class• habitual use – quantity!

How you will be evaluated

10%: portfolio• professional-looking visual summaries of designs• professional portfolio

o illustrative of worko archives of code and supporting documentso summary of accomplishments.

• 3 visual summaries (1 / project)• 1 professional portfolio (web plus print)

Do it differently

Resources & materials

course site• www.cpsc.ucalgary.ca/~saul/

lecture materials• slides and readings

your supplies• Sketching User Experiences:

the workbook (2012)• sketchbook• portfolio materials• prototyping supplies

optional C# / WPF manuals• your choice

.

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

Do it differently