Modeling Tangible User Interfaces - Tufts University

Modeling Tangible User Interfaces - Tufts University

Modeling Tangible and Specifying User Interfaces Comp150 TUI Spring 2007 1 Tangible User Interfaces - Design Space QuickTime and a TIFF (LZW) decompressor are needed to see this picture. Designers Outpost [Klemmer et al.2001] Tangible Video Editor [Zigelbaum et al. 2005] ComTouch [Jacob et al. 2001] URP [Underkoffler and Ishii. 1999] QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Senseboard [Jacob et al. 2001] PeoplePretzel Shaer et al. 2004] Media Blocks [Ullmer et al. 2003] Navigation Blocks [Camarata et al. 2002] Quetzal [Horn et al. 2006] Tangible Query Interfaces [Ullmer et al. 2003] Comp150 TUI Spring 2007 2 Why to Model? Highlight system properties: observability, predicatability, access points, etc. Expose design issues: what is physical what is digital, physical syntax, expected and unexpected interactions. Explore and compare alternative designs.

Communication Communicate design within multidisciplinary teams Design documentation Implementation Guide implementation Identify boundary cases Analysis Comp150 TUI Spring 2007 3 TUIML: Tangible User Interface modeling Language 1 TAC Palette

structure QuickTime and a TIFF (LZW) decompressor are needed to see this picture. TAC Palette 2 Dialogue 3 Interaction behavior QuickTime and a TIFF (LZW) decompressor are needed to see this picture. QuickTime and a TIFF (LZW) decompressor are needed to see this picture. Dialogue diagram Interaction diagram Comp150 TUI Spring 2007

4 Describing the Structure of a TUI using TUIML Tokens: Physical objects that represent digital information. Users interact with tokens to access and manipulate digital information. Constraints: Physical objects that provide context to tokens manipulation by constraining the ways in which tokens can be manipulated. A constraint constrain the manipulation of a token 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. TACs encapsulate a set of manipulation actions that can be performed upon a token in respect to a set of constraints. Comp150 TUI Spring 2007 5 TUIML Representation of Tokens and Constraints Tokens Constraints Constraint Representation Conceptual Relations

Action/Manipulation Surface Identity, presence, position (x,y,z), spatial relations, order, number, group, containment Add, remove, move, stack, line up, cluster, separate etc. Rack Identity, presence, position (x), spatial relations, order, number, proximity Add, remove, slide Indentation Presence, identity Add, remove Knob

Position (), identity Rotate Attributes: Length slider Slide Shape Color Size Texture Position (x1,x2), identity Connector Connection, identity Connect, disconnect Comp150 TUI Spring 2007 6 Combining Tokens and Constraints into TACs

m Building model Query Parameter Wind tool Message Play indentation Comp150 TUI Spring 2007 7 URP [Underkoffler and Ishii 1999] A TUI for urban planning. Combines physical building models with physical interactive tools to help urban planners perform analysis of shadows, proximities, reflection, wind and visual space. Physical interaction objects include:

Building models A wind tool A material wand A clock dial A distance measuring tool Comp150 TUI Spring 2007 8 The TAC Palette TAC 1 2 Representation Variable Token Constraint building building model surface

other buildings distance Distance tool Association Manipulation TAC graphics Action Response Add displays shadow according to time. Remove Removes related info from display move Updates display Add

Displays distance remove Hides distance m Two buildings Surface Comp150 TUI Spring 2007 9 The TAC Palette TAC 1 2 3 Representation Association Manipulation

TAC graphics Action Response Add displays shadow according to time. Remove 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 building model surface other buildings distance wind

simulation Distance tool Wind tool m m Comp150 TUI Spring 2007 10 Describing Behaviors Using TUIML 1 TAC Palette structure QuickTime and a TIFF (LZW) decompressor are needed to see this picture. TAC Palette 2 Dialogue

3 Interaction behavior QuickTime and a TIFF (LZW) decompressor are needed to see this picture. QuickTime and a TIFF (LZW) decompressor are needed to see this picture. Dialogue diagram Interaction diagram Comp150 TUI Spring 2007 11 Interaction Model for TUIs Comp150 TUI Spring 2007 12 Dialogue diagram - URP addBuilding

/shadow(F) mov e orie n. addBuilding /shadow(T) remove Buildin g / shadow( F) mov e orie n. addBuilding /shadow(T) wind mate r.

wind removeBuilding numOfBuilding=2 /shadow(F) dist. time mate r. time removeBuilding numOfBuilding>2 /shadow(F) Comp150 TUI Spring 2007 13 Task Diagram - URP Wind Simulation Comp150 TUI Spring 2007 14 Analyzing URP Observability and predictability: Does the physical state of the system indicate to the user the internal state of the system? 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? 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 legalillegal? Does the physical state of the system indicate to users how actions can be combined into sequences in order to perform a task? Comp150 TUI Spring 2007 15 The Marble Answering Machine (MAM) (Durrel Bishoph 1992) Comp150 TUI Spring 2007 16 MAM - TAC Palette Comp150 TUI Spring 2007 17 MAM - Dialogue diagram

Comp150 TUI Spring 2007 18 MAM - Task diagrams Call back Play Comp150 TUI Spring 2007 19 Tangible Query Interfaces Ullmer, Ishii, Jacob 2003 Using physically constrained tokens to express, manipulate and visualize parameterized database queries. Comp150 TUI Spring 2007 20 Tangible Queries - TAC Palette Representation Association Manipulation

TAC Graphics Action Response TAC Variable Token Constraints 1 Query Parameter (upper bound) Upper slider Bar, lower slider Slide setUpperBound()

2 Query Parameter (lower bound) Lower slider Bar, upper slider Slide setLowerBound() 3 Query parameter Parameter bar Rack Other bars Add

displayQueryRes() Slide displayQueryRes() Remove displayQueryRes() Comp150 TUI Spring 2007 21 Tangible Queries - Dialogue Diagram Comp150 TUI Spring 2007 22 Tangible Queries - Task Diagrams Adjust upper bound Slide bar Comp150 TUI Spring 2007 23

Summary TUIML 1 TAC Palette structure QuickTime and a TIFF (LZW) decompressor are needed to see this picture. TAC Palette 2 Dialogue 3 Interaction behavior QuickTime and a TIFF (LZW) decompressor are needed to see this picture. QuickTime and a TIFF (LZW) decompressor

are needed to see this picture. Dialogue diagram Interaction diagram Comp150 TUI Spring 2007 24

Recently Viewed Presentations

  • Boeing ATN/IPS Activities

    Boeing ATN/IPS Activities

    Boeing and Honeywell are continuing work to investigate/define other aspects of ATN/IPS. Currently performing lab trials with Honeywell and Boeing ATN/IPS ground systems, sending/receiving CM and CPDLC messages. Scheduled to perform SATCOM and VDLM2 testing over this year and next....
  • Section 320 IPC - forensicindia.com

    Section 320 IPC - forensicindia.com

    definition of grievous injury Any of the following injuries are grievous. Emasculation (Depriving a male of masculine vigour) Permanent privation of sight of either eye.
  • Big Question: - PC\|MAC

    Big Question: - PC\|MAC

    hour hand. rain forest. graham cracker. rhinestone. chain reaction. racquetball. ... but little by little they began to raise their voices. Raise. is often confused with . rise. ... Juan had let the alarm clock buzz and gone back to...
  • Identifying the Elements of A Plot Diagram

    Identifying the Elements of A Plot Diagram

    Identifying the Elements of A Plot Diagram Student Notes Plot Diagram Plot (definition) Plot is the organized pattern or sequence of events that make up a story. Every plot is made up of a series of incidents that are related...
  • Mentoring and Academic Success

    Mentoring and Academic Success

    Big Brother/Big Sister. Embedded. Check and Connect. Empowering Males of Color. My Brother's Keeper. Tutoring. Cross-age. Peer tutoring. What do these programs have in common. How are they different. What did these tell you about academic success
  • Data Representation Methods

    Data Representation Methods

    Loser Tree Each match node stores the match loser rather than the match winner. Min Loser Tree For 16 Players 4 3 6 8 1 5 7 3 2 6 9 4 5 2 5 8 4 3 8 *...
  • Similarities and Differences

    Similarities and Differences

    Rollovers accepted from other 529 programs MET Prepay tuition with three contract options Purchase credit hours, in semester increments, at today's prices for future use Best benefit at Michigan public institutions for tuition and mandatory fees Refund amounts payable to...
  • Scheduling (from Dr. Diane Pozeksky 80% of software

    Scheduling (from Dr. Diane Pozeksky 80% of software

    Inspection implies peer review of work in progress. Inspections. Introduced by Michael Fagan in 1976 (IBM Systems Journal) Formalized process. Specific roles and steps. Heavy preparation and follow-up. Used for documents and code.