Refining and Communicating Tangible Interaction Comp 150 TUI

Refining and Communicating Tangible Interaction Comp 150 TUI Spring 2006 1

Critiquing the Design Review Ø Ø Design strengths: Design weaknesses: Ideas for improvement: What aspects are missing in this design: § § § § Boundary cases Expected but not specified Unexpected but possible What interactions are possible at a given a context? How does the set of possible interactions changes with the context? What interactions are possible to be carried out concurrently? (bring examples) Ø Is there enough information to address the : § § SW design HW design Physical design (bring examples) Comp 150 TUI Spring 2006 2

Refining the Design of Tangible Interaction Ø Task Analysis: § List the tasks users expect to accomplish using this system. Ø Conceptual modeling: § § § Identify a set of objects required for accomplishing these tasks. For each object list its attributes. Identify the relations between objects Describe what actions can be performed upon each object. Ø Representation: § Decide which objects are represented physically/digitally: • • § Map conceptual actions to physical actions, identify constraints. Map relationships between concepts to physical relations. Construct TAC palette Ø Syntactic modeling: § § Build a high-level state diagram: what tasks can be accomplished within each state, consider how the system changes states, consider temporal relation between tasks. Use a task diagram to describe the actions and interaction objects necessary for carrying out each of the tasks. Consider temporal relations between actions. Comp 150 TUI Spring 2006 3

The Design Space of TUIs Designers’ Outpost [Klemmer et al. 2001] Com. Touch [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] Comp 150 TUI Spring 2006 4

Why to Model? § § § Highlight system properties: observability, predicatability, modes etc. Expose design issues Compare alternative designs. Communication § § § Communicate design to SW engineers Communicate design to ‘customers’ Design documentation Implementation § § Generate code from technology independent spec. Integrate novel technologies Analysis Comp 150 TUI Spring 2006 5

A Framework for modeling TUIs Token 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 Comp 150 TUI Spring 2006 6

Describing a TUI using TUIVIS 1 association TAC Palette 2 dialogue 3 interaction Dialogue diagram Task diagram Comp 150 TUI Spring 2006 7

Graphical Representation of Tokens and Constraints Tokens Constraint Representation surface rack indentation knob slider connector Comp 150 TUI Spring 2006 8

Combining Tokens and Constraints into TACs Comp 150 TUI Spring 2006 9

The TAC Palette TAC 1 2 Representation Variable Token Constraint building model surface other buildings distance Distance tool Association Manipulation TAC graphics Action Response � Add displays shadow according to time. Removes related info from display move Updates display Add Displays distance remove Hides distance Two buildings Surface Comp 150 TUI Spring 2006 10

The TAC Palette TAC 1 2 3 Representation Association Manipulation TAC graphics Action Response � Add displays shadow according to time. Removes related info from display move Updates display Two buildings Surface Add Displays distance remove Hides distance Buildings surface Add Displays wind Remove Hides wind move Updates wind Variable Token Constraint building model surface other buildings distance wind simulation Distance tool Wind tool Comp 150 TUI Spring 2006 11

Describing the Tangible Dialogue Ø High level states Element Description Internal state A vector of the current values of application variables Physical state A vector of instantiated TAC relationships mo ve ori en. t ti me 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 wi nd ma ter. ial dis t. Ø Transitions Source Representation Timer System User Interaction Tacit Interaction Trigger Comp 150 TUI Spring 2006 12

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 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. Comp 150 TUI Spring 2006 13

Dialogue Diagram add. Building /shadow(F) mo ve ori en. add. Building /shadow(T) remov e. Build ing /shado w(F) mo ve ori en. win d mat er. add. Building /shadow(T) win d mat er. remove. Building num. Of. Building=2 /shadow(F) dist. time remove. Building num. Of. Building>2 /shadow(F) Comp 150 TUI Spring 2006 14

Task Diagram URP - distance measuring Comp 150 TUI Spring 2006 15

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? Comp 150 TUI Spring 2006 16

Task Diagram URP - distance measuring Comp 150 TUI Spring 2006 17

Summary 1 association TAC Palette 2 dialogue 3 interaction Dialogue diagram Task diagram Comp 150 TUI Spring 2006 18

Project 1, Part 2 Analyzing 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? Comp 150 TUI Spring 2006 19

Next week Ø Introduction to technologies Ø Reading Ø Start working in teams on a technology demo Comp 150 TUI Spring 2006 20

Designer’s Outpost [Klemmer 2001] (An Interactive Surface) Back Comp 150 TUI Spring 2006 21

Tangible Query Interfaces [Ullmer 2003] (A Token+Constraints System) Back Comp 150 TUI Spring 2006 22

Com. Touch [Chang 2003] (A Haptic Interface) Back Comp 150 TUI Spring 2006 23

Web Stickers (Paper Based) Comp 150 TUI Spring 2006 24