Modeling Tangible User Interfaces

1Comp150 TUI Spring 2006

Modeling Tangible User InterfacesModeling Tangible User Interfaces


The Design Space of TUIsThe Design Space of TUIs

Designers’ Outpost [Klemmer et al.2001]

Navigation Blocks [Camarata et al. 2002]

Media Blocks [Ullmer et al. 2003]

Senseboard [Jacob et al. 2001]QuickTime™ and a

TIFF (LZW) decompressorare needed to see this picture.

ComTouch [Jacob et al. 2001]

Tangible Query Interfaces [Ullmer et al. 2003]


Why to Model?Why to Model?

Highlight system properties: observability, predicatability, modes etc.

Expose design issues Compare alternative designs.

Communicate design to SW engineers Communicate design to ‘customers’ Design documentation

Generate code from technology independent spec. Integrate novel technologies

Analysis

Communication

Implementation


Tokens: Physical objects that represent digital information

Constraints: Physical objects that constraint the manipulation of tokens by: Suggesting how to manipulate a token Physically constraining Providing a frame of reference

TAC: A relationship between a token and a set of constraints which encapsulates a set of manipulation actions

A Framework for modeling TUIsA Framework for modeling TUIsToken and Constraints (TAC) ParadigmToken and Constraints (TAC) Paradigm


Describing a TUI using TUIVISDescribing a TUI using TUIVIS

interaction

3

dialogueassociation

1 2

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.





TAC Palette Dialogue diagram

Task diagram


Graphical Representation of Graphical Representation of Tokens and ConstraintsTokens and Constraints

Data Token

Tool Token

Constraint Representation

surface

rack

indentation

knob

slider

connector

Tokens Constraints


Combining Tokens and Constraints Combining Tokens and Constraints into TACsinto TACs

m

n


The TAC PaletteThe TAC Palette

TAC Representation Association Manipulation

Variable Token Constraint TAC graphics Action Response

1 building building model surface

other buildings

Add displays shadow according to time.

Remove Removes related info from display

move Updates display

2 distance Distance tool Two buildings

Surface

Add Displays distance

remove Hides distance

m

n

m


The TAC PaletteThe TAC PaletteTAC Representation Association Manipulation

Variable Token Constraint TAC graphics Action Response

1 building building model surface

other buildings

Add displays shadow according to time.

Remove Removes related info from display

move Updates display

2 distance Distance tool Two buildings

Surface

Add Displays distance

remove Hides distance

3 wind simulation

Wind tool Buildings

surface

Add Displays wind

Remove Hides wind

move Updates wind

m

n

m

m

n


Describing the Tangible DialogueDescribing the Tangible Dialogue

High level states

Transitions

Element Description

Internal state A vector of the current values of application variables

Physical state

A vector of instantiated TAC relationships

Tasks A set of tasks that could be completed within this state. These tasks can be performed either sequentially or in parallel depends on the satisfaction of their preconditions

wind

move

mater.ial

orien.t

time

dist.

Source Representation

Timer

System

User Interaction

Tacit Interaction

Trigger


Constructing the Dialogue DiagramConstructing the Dialogue Diagram

What is the initial state of the system? What tasks are users willing to accomplish while interacting with

the URP interface? Start from the start state and repeat until you can’t find new

states: What event change the set of tasks users can perform in this state? Create a new state, describe the new set of tasks.


Dialogue DiagramDialogue Diagram

wind

move

time

mater.

orien.

addBuilding /shadow(T)

addBuilding /shadow(T)

removeBuilding /shadow(F)

addBuilding /shadow(F)

removeBuilding numOfBuilding=2/shadow(F)

removeBuilding numOfBuilding>2/shadow(F)

wind

move

time

mater.

orien.

dist.


Task DiagramTask DiagramURP - distance measuringURP - distance measuring

Legend

Building model

Distance tool

n,m >=0 n<=m/2


Constructing a Task DiagramConstructing a Task Diagram

What is the physical state of the system prior to the first action aimed at accomplishing this task?

What are the actions users perform toward accomplishing this task?

What physical interaction objects are needed for each action? What is the physical state of the system after an action was

performed? What is the internal state of the system after an action was

performed? When does the system physical state goes back to its state prior

to the execution of the first action?


Task DiagramTask DiagramURP - distance measuringURP - distance measuring

Legend

Building model

Distance tool

n,m >=0 n<=m/2


SummarySummary

interaction

3

dialogueassociation

1 2







TAC Palette Dialogue diagram

Task diagram


Project 1, Part 2Project 1, Part 2Analyzing TUIsAnalyzing TUIs

What to submit: A TAC Palette A dialogue diagram At least two task diagrams Discussion of the following topics:

• Observability and predictability:» Does the physical state of the system indicate to the user the internal state of the

system? Is there information in the internal state that is not presented in the physical state?

» Does the physical state of the system contain enough information to enable the user to determine what tasks are available for him to perform? Assuming multiple users interact with the system at the same time. Does the physical state of the system indicate to users what tasks they can or cannot perform in parallel? If possible bring an example of two tasks that different users cannot perform in parallel.

• Modes» Certain actions are meaningful only in certain contexts. Bring an example of a user

action that is meaningless in one context and has a meaning in another. • Physical Syntax

» Does the physical state of the system indicate to users which actions are legal/illegal?


Next weekNext week

Introduction to technologies Reading Start working in teams on a technology demo


Designer’s Outpost Designer’s Outpost [Klemmer 2001][Klemmer 2001]

(An Interactive Surface)(An Interactive Surface)

Back


Tangible Query Interfaces Tangible Query Interfaces [Ullmer 2003][Ullmer 2003]

(A Token+Constraints System)(A Token+Constraints System)

Back


ComTouch ComTouch [Chang 2003][Chang 2003]

(A Haptic Interface)(A Haptic Interface)

Back


Web Stickers Web Stickers (Paper Based)(Paper Based)

Documents

Modeling Tangible User Interfaces