Modeling Tangible User Interfaces

1
Modeling Tangible User Interfaces
2
The Design Space of TUIs
Designers Outpost Klemmer et al.2001
ComTouch Jacob et al. 2001
Senseboard Jacob et al. 2001
Media Blocks Ullmer et al. 2003
Navigation Blocks Camarata et al. 2002
Tangible Query Interfaces Ullmer et al. 2003
3
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
Implementation
4
A Framework for modeling TUIsToken and
Constraints (TAC) Paradigm

• 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

5
Describing a TUI using TUIVIS
TAC Palette
Dialogue diagram
Task diagram
6
Graphical Representation of Tokens and
Constraints
Constraint Representation
surface
rack
indentation
knob
slider
connector
Tokens
Constraints
7
Combining Tokens and Constraints into TACs
8
The TAC Palette
TAC Representation Representation Representation Association Manipulation Manipulation
Variable Token Constraint TAC graphics Action Response
1 building building model surface other buildings Add displays shadow according to time.
1 building building model surface other buildings Remove Removes related info from display
1 building building model surface other buildings move Updates display
2 distance Distance tool Two buildings Surface Add Displays distance
2 distance Distance tool Two buildings Surface remove Hides distance
9
The TAC Palette
TAC Representation Representation Representation Association Manipulation Manipulation
Variable Token Constraint TAC graphics Action Response
1 building building model surface other buildings Add displays shadow according to time.
1 building building model surface other buildings Remove Removes related info from display
1 building building model surface other buildings move Updates display
2 distance Distance tool Two buildings Surface Add Displays distance
2 distance Distance tool Two buildings Surface remove Hides distance
3 wind simulation Wind tool Buildings surface Add Displays wind
3 wind simulation Wind tool Buildings surface Remove Hides wind
3 wind simulation Wind tool Buildings surface move Updates wind
10
Describing 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
Source Representation
Timer
System
User Interaction
Tacit Interaction
Trigger
11
Constructing 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
  cant 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.

12
Dialogue Diagram
13
Task DiagramURP - distance measuring
14
Constructing 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?

15
Task DiagramURP - distance measuring
16
Summary
TAC Palette
Dialogue diagram
Task diagram
17
Project 1, Part 2Analyzing 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?

18
Next week

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

19
Designers Outpost Klemmer 2001(An Interactive
Surface)
Back
20
Tangible Query Interfaces Ullmer 2003(A
TokenConstraints System)
Back
21
ComTouch Chang 2003(A Haptic Interface)
Back
22
Web Stickers (Paper Based)