Tuesday Week 3: Tangible Bits Theory and Practice of...

Tuesday Week 3: Tangible Bits

1

Theory and Practice of Tangible User Interfaces

Tangible BitsImplications for user interfaces

week 03


2


Lecture Outline•

Designing Interactions

•

Tangible User Interfaces

•

Group forming exercise


3


Designing InteractionsFrom designers’

perspective

The term “interaction design”

was coined by Moggridge

in late 1980’s. Until then, design was mostly design of physical things, but now

it includes computer interface design.

Bill Moggridge, co-founder of IDEO


4


Interaction Loop

Bill Verplank

from Moggridge

(2006)


5


Design as CommunicationDesign is a conversation between designer and user, even though the designer is no longer present once the user enters the scene. Norman (2004)


6


Design as CommunicationDesign is a conversation between designer and user, even though the designer is no longer present once the user enters the scene.

Norman (2004)

designer’s

conceptual

model

user’s

conceptual

model

system

/ object

Conceptual models [Norman, 2004]


7


Design as a Form of Mediated Communication

Human-computer interaction can be thought of as a form of mediated communication between the end user and the system designer, who must structure the system so that it can be understood by the user, and so that the user can be led through a sequence of actions to achieve some end result. (Dourish, 2004)


8


Designed affordancesMessages from designer to user, attracting attention to the set of desired possible actions. (Norman, 2004)


9


•

Peripheral Attention

Primary space, secondary space (e.g., windows and dashboards)

•

Pattern recognition and spatial reasoning

Opportunities to arrange data spatially

•

Information density

A picture really can be worth a thousand words (e.g., diagrams)

•

Visual metaphors

File cabinets, trashcans, desktop tools

GraphicalHistorical Development of HCI

EmbodiedGraphicalTextualSymbolicElectrical

Macintosh System 4.2, 1987


10


User Interfaces: The Current State of Affairs

Hands, eyes, tools, and interactions

“The computer is inherently a tool for the mind—not the hands.”

From Abstracting Crafts

(McCullough, 1996)


11


Eyes are in charge and hands are underemployed

McCullough (1996)

photo from Moggridge

(2006)


12


Eyes are in chargeEyes guide tools, read notations, appraise designs. Eyes see wholes, and compare many objects simultaneously.

McCullough (1996)


13


Hands bring us knowledge of the world

They are the most subtle, sensitive, probing, differentiated, and the most closely connected to the mind. They deserve to be admired.

McCullough (1996)


14


Hands are underrated

By pointing, by pushing and pulling, by picking up tools, hands act as conduits through which we extend our will to the world.

McCullough (1996)


15


Eyes activate the hands and hands direct the eyes

Hand-eye coordination distinguishes humanity as the maker of things: homo faber.

McCullough (1996)


16

Theory and Practice of Tangible User InterfacesHand-eye skills [adopted from McCullough, 1996]

coarse, discrete

fine, continuous

eyes-in-charge

hands-in-charge

forcing objects

playing music

sorting coins

detecting events, e.g. someone entering classroom

driving in stop and go traffic

sculpting

knitting


17

Theory and Practice of Tangible User InterfacesHand-eye skills [adopted from McCullough, 1996]

coarse, discrete

fine, continuous

eyes-in-charge

hands-in-charge

forcing objects

playing music

sorting coins

detecting events, e.g. someone entering classroom

driving in stop and go traffic

sculpting

knitting

pointing with a mouse

typing with a keyboard

information tool users

mechanical tool users


18


ToolsDeep in our nature, we are tool users as well as symbol users.


19


Tools and MediationTools shape the way human beings interact with reality. The shaping of external activities eventually results in the shaping of internal ones, and vice versa.

Subject Object

Tool

Activity Theory


20


Tools and MediationUse of tools is an accumulation and transmission of social knowledge.

Activity Theory


21


ToolsAesthetics of the tools lost in the flood of PCs?


22


Embodied Interaction

EmbodiedGraphicalTextualSymbolicElectrical


23


Combining the skillful hand with the reasoning mind

Computers let us turn the table —

to apply something we know about using tools to achieve richer symbolic processing.


24


Tangible BitsSeamless couplings between physicality and virtuality

“We live between two worlds: our physical environment and digital

space.”

(Ishii, 2007)


25


At the border between elements


26


At the borderWe live on the border where bits meet atoms. In the flood of pixels from the ubiquitous GUI screens, we are losing our sense of body and places. [Ishii, 1997]


27


Coincidence of input and output spaces

Tangible User Interfaces


28


Curlybot[Frei, Su, & Ishii, 2000]


29


[Raffle, Parkes, & Ishii, 2004]

Topobo


30


Coincidence of input and output spaces


31


Coupling tangible representations to digital information and computation

Tabletop TUIsTangible User Interfaces


32


Urp[Underkoffler

& Ishii, 1997]


33


Illuminating Clay[Piper, Ratti, & Ishii, 1999]


34


AudioPad[Patten, Recht, & Ishii, 2004]


35


Actuated Workbench[Pangaro, Maynes-Aminzade, & Ishii 2002 ]


36


PICO[Patten & Ishii 2007 ]


37


Embodiment of mechanisms for interactive control with tangible representations

Augmented everyday objectsTangible User Interfaces


38


Music bottles[Ishii et al., 2000]


39


I/O Brush[Ryokai, Marti, & Ishii, 2004]


40


GUI

Painted bits Generic remote control

TUI

Tangible bits

Coincidence of input and output space

TUI vs. GUI


41


Tangible User Interaction Loop [Ishii, 2006]


42


Tangible User Interaction Loop [Ishii, 2006]


43


Combining the skillful hand with the reasoning mind

TUI Interaction Loop


44


Tuesday Next Week (Sept 18)

•

Tokens, tools, and containers

•

Taxonomy of Tangible User Interfaces


45


For this Thursday (Sept 13th, 2007)

•

Read Physical Computing:

•

Analog input: p.102-104•

Soldering: p.41-42

•

Don’t forget to bring your laptop and lab kit on Thursday

•

Post your lab homework (diffuser and code) on the course website

•

Office hours this week: Tuesday

(today), 3:30-4:30 in 110 South Hall


46


Midterm ProjectDesign a Tangible User Interface that takes advantage of your hands to manipulate digital information. Apply it to a topic of your research interest (e.g., tool for communication, learning/education, design, etc.). Your project may be based on a completely new design or redesign

of familiar everyday objects.

•

9/25 Form a group (maximum of 3 members) for your project and write a 1-page proposal and post it on the course website

•

10/9 Progress sketches due (post your sketches on the course website)•

10/23 In-class midterm project presentation. Present your poster and optional mockups


47


Group forming exercise

1.

Select topics you are interested in developing Tangible User Interface for

(5 minutes)

2.

Meet at least 15 people (15 minutes)

3.

Form a group (10 minutes)

Game Sustainability

& Health Education Communication Music

& Art


48


Thanks!

Tuesday Week 3: Tangible Bits Theory and Practice of...

Documents

Transcript of Tuesday Week 3: Tangible Bits Theory and Practice of...