Intro to HCI / Why is Design Hard? - University of Manitobaumdubo26/COMP3020/lecture2_IntroToHCI.pdf · Intro to HCI / Why is Design Hard? September 12, 2016. ... Fall 2016 COMP 3020

Fall 2016 COMP 3020 1

Intro to HCI / Why is Design Hard?

September 12, 2016

Announcements

A02 notes:

http://www.cs.umanitoba.ca/~umdubo26/COMP3020/

A01 notes:

http://www.cs.umanitoba.ca/~bunt/COMP3020/lectureNotes.html

Fall 2016 COMP 3020 2

Announcements

Assignment 1 is posted

Due Sept 23 by 5:00pm on UMLearn

A1 is an individual assignment

Please read through it and bring any questions to class on Wed

Fall 2016 COMP 3020 3

Fall 2016 4COMP 3020

Fall 2016 COMP 3020 5

Today

Interfaces vs. Interactions

Historical Overview

Interaction Paradigms

Visionaries

Why is design hard?

What makes a good interface?

6Fall 2016 COMP 3020

What makes a good experience?






Now you…

Tell me about something you’ve used that provided you with a good experience.

Why?

10Fall 2016 COMP 3020

why…

…are we now talking about experiences as opposed to just “interfaces”?

11Fall 2016 COMP 3020

Terminology: Interaction

What is the difference between an interface and interaction?

Fall 2016 COMP 3020 12

Interaction

An interface refers to what is presented to the user

Could be a visual, physical, or auditory presentation

Includes what you can manipulate

An interaction is the dialogue between the computer and the user

The actions the user must invoke to perform a task and the corresponding responses

The dialogue is ongoing

Fall 2016 COMP 3020 13

Fall 2016 COMP 3020 14

Interactive Cycle

Reproduced from Dix, Finlay,Abowd, & Beale (2004)

Computer User

Input

Output

presentation

articulationperformance(execution)

observation(interpretation)

Fall 2016 COMP 3020 15

Interactive Cycle

Input/output channels constitute the interface

Allows the system and user to communicate

Computer User

Input

Output

presentation



Interface

Fall 2016 COMP 3020 16

Interactive Cycle

The conversation between the system and user constitutes the interaction

The interaction is the entire dynamic process.

Computer User

Input

Output

presentation



Interface

Fall 2016 COMP 3020 17

Interactive Cycle: Steps

1. The user formulates a goal and plans a method to achieve the goal

2. The user translates the method into the system input language

3. The system executes the method instructions and updates its state

Computer User

Input

Output

presentation



Interface

Fall 2016 COMP 3020 18

Interactive Cycle: Steps

4. The system translates its state into its output language

5. The user interprets the results, and repeats the cycle

Computer User

Input

Output

presentation



Interface

Interactive Cycle

The interactive cycle requires both the user and the system to make several translations:

From user’s intention to system input language

From input language to core system language

From core system language to output channel

From output channel to user’s interpretation of output

If the interface isn’t properly designed, these translations can result is two “gulfs”

Fall 2016 COMP 3020 19

Gulf of Execution (Don Norman)

The manner in which the user must translate his/her plans into input the system can understand is not always natural or intuitive

A gulf of execution arises when the user has difficulties providing instructions that are executable by the system

Examples? Fall 2016 COMP 3020 20

Gulf of Evaluation (Don Norman)

A Gulf of Evaluation arises when the users has trouble interpreting system output in light of his/her goals

Reflects the amount of effort the user has to exert to determine how well his/her expectations and intentions have been met

Examples?

Fall 2016 COMP 3020 21

Gulf of Evaluation

“The gulf is small when the system provides information about its state in a form that is easy to get, is easy to interpret, and matches the way the person thinks of the system” (Norman, “Design of Everyday Things”)

Fall 2016 COMP 3020 22

Interface Impacts the User’s Task

The more “translating” the user has to do, the more difficult it is for the user to accomplish his/her task

I/O channels affect what can and cannot be expressed

Sometimes interaction language is far from how the user would naturally do a task (i.e., the domain language)

Requires extra effort on behalf of user to translate back and forth

Fall 2016 COMP 3020 23

Evolution of Interaction Paradigms

Over time, interaction paradigms have shifted focus from the machine to the user

The focus has shifted from what is easiest and fastest for the computer to what interfaces and interactions naturally suit users tasks

Fall 2016 COMP 3020 24

Fall 2016 COMP 3020 25

Overview of History of Interaction Paradigms

Paradigms

Batch interfaces

Conversational interfaces

Graphical interfaces

Ubicomp

Visionaries

Vannevar Bush, Douglas Engelbart, Mark Weiser

Batch Interfaces (~1945-1965)

The user provides the system with all instructions in a single batch job

Instructions entered on punch cards, magnetic tape, paper tape

No interactivity

All system output presented to the user once the entire job was executed, often on a paper printout

Users: high degree of training required

System time was far more expensive than human time (e.g. $100s/hr vs. ~$10/hr)

Fall 2016 COMP 3020 26

Fall 2016 COMP 3020 27

Conversational Interfaces or Command-Line Interfaces

Time Period: ~1965-1985+

Interaction style:

User enters commands in text at the command-line

System executes command

Sometimes feedback is displayed

System can request information from user during interaction

Fall 2016 COMP 3020 28

Conversational Interfaces

Users: expert users

Why?

Advantages

Highly flexible: by combining commands, many sophisticated operations are possible

Disadvantages

Requires recall rather than recognition

During system execution, the user has little control

Why can the above be causes for concern?

Fall 2016 COMP 3020 29

Vannevar Bush

Head of the Office of Science and Research Development

Involved in many WWII activities

In 1945 he wrote the inspirational and forward-thinking article “As We May Think”

Key idea: technology should support and augment human intelligence

Fall 2016 COMP 3020 30

Vannevar Bush

The memex machine:

A device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.

User can build associative trails

User can annotate content

His proposal for the physical instantiation of the memexsounds a lot like today’s desktop computers

Even suggested having multiple monitors

Also proposed direct connection to nervous system for input

Fall 2016 COMP 3020 31

Douglas Englebart

Also advocated the need for computers to augment human intellect

Primarily known for inventing the mouse

Demonstrated in a 1968 video known as “The Mother of All Demos”:

Copy/Paste

Hypertext

Computer-supported collaborative work

Fall 2016 COMP 3020 32

Beyond the Knowledge Worker

Ivan Sutherland’s Sketchpad (1963):

Input using a light pen

Direct manipulation

Early “WYSIWYG”

Computers useful for artists, draftsmen, etc

Interfaces closer to task domains

Fall 2016 COMP 3020 33

Graphical Interfaces

Time period: 1985 -

Hardware advances

High-resolution display, keyboard, mouse

Typical style of GUI: WIMP

Windows, Icons, Menus and Pointers

Fall 2016 COMP 3020 34

First Commercial GUIs

Xerox’s 8010 Star Information System (1981) first commercial

Followed by Apple’s Macintosh

First GUI desktop to be widely adopted

Graphical Interfaces: Interaction Style

Users in control

System waits for input, responds

Recognition vs. recall

Enables discovery and experimentation

Most focus on direct manipulation

Sense of directly manipulating objects of interest (Shneiderman, 1982)

Simulated real-world metaphor

What is it and why is this useful?

Fall 2016 COMP 3020 35

Fall 2016 COMP 3020 36

Graphical Interfaces

Desktop metaphor

Interaction language closer to user’s own language and that of the task domain

E.g.,

Files, folders, trash cans (now recycling bins)

Users

Broader audience

But is training still required?

Fall 2016 COMP 3020 37

Interaction Styles

Where are we heading?

What other paradigms can we explore?

Fall 2016 COMP 3020 38

More Recent Interaction Paradigms

Utilizing computational power should not always require sitting at a desk

In the 1990’s two new visions:

Virtual Reality

Ubiquitous computing

Fall 2016 COMP 3020 39

Mark Weiser

“The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.” (Scientific American, 1991)

Computing should fade into the environment

Fall 2016 COMP 3020 40

Ubicomp

Ubiquitous computing (ubicomp) is currently an active research area

Goal is to create language of interaction so close to task domain that the computer and its interface essentially become invisible

Not conscious of the fact that we are interacting with a computer

Fall 2016 COMP 3020 41

Ubiquitous Computing Approaches

Make greater use of context in interaction

“the interrelated conditions in which something exists or occurs”

In interaction design, examples of relevant context include:

Details of the user’s physical location

The user’s emotional state

Information on others present

Why is context important?


Increase the range of input and output devices

Sensors (e.g., heat, light, sound, etc.) throughout the environment

Artifacts in different sizes and form factors (e.g., palm pilots, smart phones, etc.)

Computation embedded in situationallyappropriate devices

Fall 2016 COMP 3020 42


Add computational intelligence

Machine learning and other techniques from the field of Artificial Intelligence to:

Make sense of all of the new input data

Tailor the interface/interaction accordingly

Goal is not necessarily to automate the users task

Instead, computational intelligence can enable the device to:

Act in a more situationally appropriate manner

Help the user sort through data to find interesting data points

Fall 2016 COMP 3020 43

Fall 2016 COMP 3020 44

What is the Ultimate Goal?

Interfaces should meet the tasks that users want to perform

Users shouldn’t have to adapt their behaviour or learn new interaction techniques

Fall 2016 COMP 3020 45

Inspirational Videos

MIT’s Counter-Intelligence (Bonanniet al., 2005)

IO Brush (Ryokai et al. 2004)

Why is design hard?

46Fall 2016 COMP 3020

“The user is not like me”

Familiarity with the interface problems being solved

Confidence

Designer’s setting vs. user’s setting

Designers have different skills (perceptual, cognitive, or domain)

47Fall 2016 COMP 3020

appropriation

48

http://www.museumofunintendeduse.com/

Fall 2016 COMP 3020

http://www.museumofunintendeduse.com/

context: how are smartphones used?

Fall 2016 COMP 3020 49

50Fall 2016 COMP 3020

Designer’s Fallacy:

A designer can design into a technology, its purposes and uses.

Reality:

no control, hope for the best

Strategy:

try to understand people and how they already use the technology or similar technologies

Fall 2016 COMP 3020 51

Documents

Intro to HCI / Why is Design Hard? - University of Manitobaumdubo26/COMP3020/lecture2_IntroToHCI.pdf · Intro to HCI / Why is Design Hard? September 12, 2016. ... Fall 2016 COMP 3020