Tangible User Interface Design

Final Prototype

2009-12-11T08:18:00.001-08:00

The following are the objects we used:

The printer sits on the side ofhte surface until it is needed at the end of the interaction. It it made out of blue foam and paper, then painted.

These are the cards that are given to students by professors assigning work on pieces of interest. They are the size of a credit card so that they fit easily into the wallet, and have a graphical representation on the front which not only gives a preview of the piece, but gives the impression of an invitation to see the piece. Finally, there are terms of interest scattered on the front of hte card in font size relative to the importance of the word. This supplements having to refer back to the asisgnment prompt.

Tour guide objects are used to represent tour pieces. When placed on the surface they will recall all the elements contained in the tour, and embody the iconic image of the tour guide holding up a flag when moving through a space so people in the group can identify them. These objects are made out of foam, paper and paint as well.

I chose to build the objects out of foam because I thought it was more dynamic then using the laser cutter or rapid prototype machine. I can easily build a CAD model to implement in either of these machines, but as I was prototyping the figurines I found that the process was dynamic, I was constantly building on my original idea, and it was hard to anticipate what something was going to feel like in my hands unless I built it myself. That being said there are some really interesting services which democratize design by allowing common people to create professional looking projects. One such service can be found at ponoko.com

Final Prototype W/ Annotations:

Second Iteration -

2009-12-11T07:52:00.000-08:00

The Davis Attract Kiosk is located at the center of the lobby in the Davis Museum.

When the user approaches the kiosk, it becomes evident that there are two types of objects displayed (a third object may be given to students by their professors.) One object represents "items within a tour that the curator has grouped throughout the museum" and "items within an exhibition" (professors may also give their students objects representing relvant pieces for academic work).

Placing any of these objects on the surface calls a scatter view of the pieces associated with the tour or exhibit. A tour deck additionally appears with contact of an object on the surface, and exists concurrently with the exploration of the pieces. This improves the fluidity of hte program because the creation of hte tour occurs dynamically as the pieces are being explored.

When the user has chosen pieces they would like to see, a tour order is automatically generated in the most convenient geographical order, and previewed and printed.

Original Low FIdelity Prototype

2009-12-11T07:29:00.000-08:00

When an object representing a specfic piece of artwork in the museum is placed on the surface, a number of options materialize on the screen of the surface prompting the user to select an action (for example: tour, exhibitions, information, etc.) involving the specific piece.

Once the user has sufficiently explored the different pieces, they can put a "tour object" on the surface that calls a reel to appear at the bottom of the screen. They can then drag representations of the pieces of interest into the reel to customize the order of the tour.

When a map object is put onto the surface a visualization of the museum appears with a path between pieces in the order determined by the user is portrayed. It can then be printed with the placement of a printer object on the surface.

Based on the discussion at our first design review however, we realized that we had some problems in fluidity and categorization. Having each piece be portrayed independantly by an object creates an impossible problem for scalability to larger collections. Also, having the user step through additional steps once they have put theobjec ton the surface was convoluted and inconsistent. Furthermore, the whole flow of hte system was very "wizardy"; it was not fluid at all and didn't integrate well with the natural actions of the user. At this point we decided to go through a second iteration of the design process and rethink our interaction scenario.

The Project

2009-12-11T07:05:00.000-08:00

After our original discussion about comelling projects spaces, we decided to go forward with Davis Attract - originally the curatorial tool - because it was compelling, relevant (because we wanted to design specifically for Wellesley's Davis museum) and within the scope of the course and our abilities. Our first activity was defining the problem:

Intended Users:

female students between the ages of 17-23

faculty and staf of the college - men and women between the ages of approximately 30-55

with basic to average computer skills

with more selective interests than the general public.

Problem Addressed:

Currently there are no tools, especially at the Davis museum, which allows visitors to customize their visit according to their interests.

There is no tool which guides visitors specifically to pieces they want to see.

Goals:

Excites the visitor upon entrance to the museum by introducing them to pieces of artwork using a fun and novel tool.

Streamlines the visitors movement and experience through the space among pieces of interest.

Main Tasks:

Select an object representing tours, exhibitions and/or courses, place on the surface.

Explore the pieces contained in each category.

Identify pieces of interest and build a tour deck.

Preview/edit tour

Print customized tour.

We began by following the design process prescribed in the syllabus:

-> storyboard ->visual design ->Lo-Fi Prototype ->Hi-Fi Prototype

Assignment 3: Reflections on Visions of Invisible Computing

2009-12-08T19:59:00.000-08:00

Main Tenents: The Computer for the 21st Century

This article by Mark Weis discusses the desire for ubiquitous computing. He attempts to present a new way of thinking about computers and contextualizes his arguement by presenting an archetypal example of ubiquitous computing: writing. He claims that the disappearance of computers into the fabric of everyday life is a consequence of human psychology and to acheive that end development must focus on "embodied virtuality" - that is drawing computers out of their plastic shells. Rather than focusing on simulating the world, he advocates enhancing the world that already exists by strategically tucking functionality into preexisting common artifacts. He relates this concept to the changing implementation of motors in factories, then talks about a modern implementation in the tabs, pads and boards he built.

Main Tenents: Tangible Bits: Towards Seamless Interfaces Between People, Bits and Atoms

This article by Hiroshii Ishii and Brygg Ullmer discusses the importance of bridging the gaps between the physical world and cyber space, as well as the foreground and background of human activities. They advocate developing tools which capitalize on pre-existing artifacts and conventions as representations for the seamless interfacing between the physical and virtual realm. They discuss a number of case studies, including metaDESK, transBOARD, and ambientROOM, in which this concept was a design precept.

Comparison of Tangible Bits and Computer
Both articles fundamentally make recommendation for easing interactions with computers with the integration of familiar objects. Whereas Mark Weiser advocates familiar objects which are themselves computers, however, Hiroshii Ishii and Brygg Ullmer focus on using familiar objects and conventions for designing objects which interface between the virtual and physical world. Tangible Bits doesn't focus so much on making computers ubiquitous as it looks to capitalize on appropriate physical objects, intruments, surfaces and spaces for computational mediation.

Relevance to our project:

Davis Attract falls more in to the realm of capitalizing on familiar objects to ease interaction with the computer - the Microsoft Surface - as perscribed by Tangible Bits. We developed a set of objects which capitalize on certain familiar cultural artifacts (such as the tour guide holding up an identification wand for our tour object) and direct visual analogies (a printer for the print function) which help users anticipate their functionaliuty. They are intended to seemlessly integrate into the interaction with the computer by minimizing confusion on their functionality.

tangible user interfaces, in action

2009-11-30T12:11:00.000-08:00

We have been studying tangible user interfaces for almost a semester, and while I think digitizing and improving common tasks is an interesting exercise, I have been skeptical about the necessity to simplify already simple every day tasks. For example, I recall reading an article earlier in the semester about a system which eased scheduling by having each task be represented by a tangible object which users could physically move to different cells representing different time slots. This information was then transmitted to a computer which documented the placement of the tasks. I thought this was interesting technically, but was critical of the actual improvement. That is, until I found myself inadvertently mocking up tangible user interfaces for other such "simple" tasks: I am working with another team of students on an Olin project which requires a substantial final deliverable documenting the product development process we employed. In the early stages of brainstorming and organizing our paper, we grabbed butcher paper to represent the entirety of the document, and used color-coordinated post-it notes to represent different hierarchical bits of content within the document (instead of typing out the outline using a word processing software on a single computer). We then sat around the butcher paper discussing potential organizations and flows, putting down and moving the post-it notes until they were in the appropriate order. This is the perfect anecdote for a useful tangible interaction, albeit non-digitized. We unknowingly mapped certain types of information to specific objects which we then manipulated physically for the desired outcome. It is an easy extension to have the resulting layout transmitted directly to an electronic device to eliminate the step of recopying the document electronically. Unfortunately I can't show photos of this exercise because it is protected under an NDA aggreement, but I thought it was a nice little example of the ways we improvise tangible collaborative tools and demponstrate that there are effective ways to improve tasks I originally assumed were simple and had little room for improvement.

Additional Research on Curatorial Data Collection

2009-10-26T12:33:00.001-07:00

The Curatorial Tool is meant to facilitate data collection on exhibition interest, visitor flow, etc. to be used by a curator or event planner to improve or cater the visitor experience to a certain end.

Literature Search on Curatorial Data Collection

The following is a sample of research from the ACM database relevent to the topic of tangible user interaces for curation and experience design.

Re-Thinking Real Time Video Making for the Museum Exhibition Space
Cati Vaucelle et al.

This article focuses on a system for visitors to author the content of hte exhibition space by creating their own movies and telling stories using robots. It further looks at making the interactive learning experience more fluid by minimizing the feedback time from input to output of the video creation process. This may be an interesting tool to document what museum visitors find educational or interesting during their visit.

From Interaction to Trajectories: Designing Coherent Journeys Through User Experiences
Steve Bedford et al.

This paper examines trajectories through user experiences. It makes recommendations for designers to improve interactive experiences by identifying general requirements for new tools and platforms to support the devlopment and orchestration of future user experiences. It additionally provides the framework for compiling and analyzing extensive craft knowledge of users. While this article examines tools for curators to improve the experience of viewers, it is aimed at technologies that directly interact with the audience instead of ones that passively aggregate adn present info to curators and event planners.

Situated Play in a Tangible Interface and Adaptive Audio Museum Guide
Ron Wakkary, Marek Hatala

This paper looks first at museum learning as a specific type of play-learning which lends itself well to the playful nature of a TUI museum guide. While relevant to the experiential aspect of curatorial activities, like the previous article it examines TUIs as tools to actively interact with visitors instead of a tool for curators and event planners which may exist passively in the actual setting.

Interactive Spatial Multimedia for Communication of Art in the Physical Museum Space
Karen Kortbek, Kaj Gronbaeck

This article addresses the seamless integration of interaction technologies into the art museum without disrupting the art, ie: spatially bounded audio, floor-based multimedia and multimedia interior. Again the authors address a tangible user interface as an interaction tool for the visitor rather than the curator.

Given existing tools in a similar space, one potential interaction with a curatorial TUI tool could include:

Some micro-controller tool (ie. a camera, motion detector, RFID card, etc.) could monitor the flow aorund a certain art piece, physiological monitors could acocunt for biological reactions to certain pieces, cameras could document the duration of viewing in front of a given piece, etc. This information could be transmitted back to an interactive surface on which a curator could physically represent the data collected. For example, to predict visitor flow through an exhibition, existing flow information could be visualized on the surface and respond to the reorganization or movement of exhibition component representations on the surface (similar to Urp.)

Brainstorm for TUI Project

2009-10-26T12:22:00.000-07:00

The following are four preliminary ideas for our TUI project. We independantly thought of projects/ideas we found personally compelling, then regrouped to discuss them further. THe following four ideas were identified as feasible and compelling to the whole group. We each chose one idea to examine the more in depth before choosing a final project.

1. Sensory Memory Recall for Brainstorming
Problem: brainstorming is currently very one-dimensional since it is heavily text based which does not lend itself extremely well to creativity.
Users: designers, students, researchers, communication impaired, everyone who thinks....

2. Curatorial Data Collection
Problem: No unified way to collect data on and represent/brainstorm experimental sensory experiences: predominately through trial and error, mental notes of craft knowledge.
Users: curators, event planners, artists (especially installation artists)

3. Sharing Spaces
Problem: You can't be in two places at once -> there is no "surround sound experience". There is no way for two involved parties to communicate with eachother while simultaneously sharing expereinces from their environments.
Users: couples, friends, families, anyone physically apart.

4. Child Communication
Problem: Children don't have the vocabulary and communication experience to be able to communicate effectively.
Users: children, parents, doctors, teachers

Notes From Class, Week of October 20, 2009

2009-10-26T12:09:00.000-07:00

This discussion was intended to help identify important and potentially relevant gestures and ideas for our prospective TUI projects.

In interaction design, want products to be:

useful
useable
desireable

What makes products useful, useable and desireable?

aesthetics
novelty
affordability
ubiquity
discoverable
simplicity
robustness
eliminate "gulf of execution"
intuitiveness

Components of gestures:

duration of gesture
direction of gesture
location (wrt person or tool)
shape/form
# of manipulating appendages
speed/acceleration
pressure
frequency/repetition
contact points
orientation/rotation

Notes From User Defined Gestures for Surface Computing, Jacob O. Wobbrock, Meredith Ringel Morris, Andrew D. Wilson.

How do you determine what type of gestures are appropriate for what applications?

User interviews to identify appropriate gesture tools
user design patterns
empathy
common, natural gestures

Conclusions from paper:

One hand gestures are better
Doesn't matter how many fingers involved
difference between interactions resulting from windows knowledge vs. natural gestures windows design capitalizes on (ie. pointing and touching = mouse point and click.)

Primitive Gestures Identified in Paper:

Tap
Drag
Circle
Pinch/Spread
Draw Shapes
Hold

Real Life Gestures:

FLick
Rotate
Tilt
Drop
Wave
Push
Side of Hand
Shake
Sweep

Gestural Based Interfaces- Recycled Primitives:

hold to select group
pinch to minimize
spread to enlarge
present to activate
tap to select
wave to activate - put hand in to activate
flick to scroll
flick to delete
circle to group
shake to clear

Notes From Class, Week of October 13, 2009

2009-10-26T11:57:00.000-07:00

Brainstorming the Circumstances for Tangible User Interfaces- This in-class exercise was meant to demonstrate the breadth of areas of opportunity for tangible user interface design.

Who Wants to Share?

friends
audience
family
colleagues
colalborators
artists
publicists
community leaders
historians
kids
teachers
researchers
comedians
performers
curators
writers
editors
elderly
travellers
parents
long distance relationships
reporters
the nostalgic

What do they want to share?

photos
descriptions
sounds
video
excitement
metadata
direction of sound
movement
culture
pain
physiological markers
growing patterns in the community
subgroups in community
mementos
emotions
articles, references
scents/smells
ambiance
texture
movement
point of view
sketch/handwriting
taste
color
nois/sound
lighting
trace of trail
lexicon
energy
calendar
patterns

Where/In What Context Would They Want to Share?

museum exhibit
cafe
workplace
police station
reunion
school
meeting
performance
at home
hospital
parades/rally
party
bulletin board
memorial/landmark
nodes of transportation
libraries
restaurants
parks
remote communities

When Do They Want To Share?

daily
weekly
over dinner
at professional conferences
memorial days
"bad news"
celebrations
media

2009-10-09T09:14:00.000-07:00

Framework Case Study: Urp

A Taxonomy for and Analysis of Tangible Interfaces
Kenneth P. Fishkin

Note: I will not redefine the urban planning tool URP as I have already done so in a previous blog post.

When constructing a framework for Urp using Fishkin's taxonomy, we must keep in mind hte various components and interactions involved with using Urp. Below is an example list:

1. the surface (onto which data is projected)
2. building models (including road strips)
3. material wand (glass/brick)
4. wind tool
5. distance measuring tool (reminiscent of dimension tool in Solidworks)
6. clock

We will visualize the intersection of the various embodiment and metaphorical components of Urp according to Fishkin's taxonomy:

Metaphor/ Embodiment	None	Noun	Verb	Noun/Verb	Full
Metaphor/ Embodiment	None	Noun	Verb	Noun/Verb	Full
Full		Traffic Strips
Nearby					Light/Shadow Projection
Env.	Material Wand		Wind Generator and Visualization	Ruler Drag and Measure
Distant				Changing Time on Clock Face

Criteria for Placements:

Embodiment

1. Full - In the limit case, the output device is the input device: the state of the device is fully embodied in the device.
The placement of the traffic strips results in the immediate visualization of traffic flow, intersections result in the flow of traffic through intersections, etc.

2. Nearby - In this case, the output takes place near the input object, typically, directly proximate to it.
The projected alteration of light/shadow directly below the architectural figurine is a direct result of the figurine's movement.

3. Environmental -In this case, the output is ‘‘around’’ the user, typically in audio though others are possible-"non-graspable".
The placement of the wind-generator results in the visualization of wind around the architectural figurines.
Implementing the material wand results in the resultant transformation of the projected light/shadow from the figurine.
Using a physical ruler to visualize distance.

4. Distant -In this case, the output is ‘‘over there,’’ on another screen, or even another room.
Changing the time on the physical clock results in the change of the projected light/shadow.

Metaphor

1. None- Sometimes, there is no metaphor employed at all.
Using a wand to alter the building material of figurines.

2. Noun- In some systems, an analogy is made to the physical shape/look/sound of object(s) in the system.
Architectural figurines are direct metaphors of real buildings.
Road strips are direct metaphors for streets.

3. Verb- The analogy is to the act being performed (the ‘‘verb’’), largely independent of the object it is being performed on.
Placement of the wind generator to visualize the wind flow and speed.

4. Noun and verb- Noun and verb are now related, with an appeal to analogy, but the physical and virtual objects still differ.
Physically changing the hour and minute hands on the clock face changes the projection of light/shadow accordingly.
Using the ruler to drag and measure the distances.

5. Full- At this level of metaphor, the user need make no analogy at all—to their mind, the virtual system is the physical system.
The actual visualization of light and shadow on the surface as a result of multiple inputs.

Frameworks for Urp

2009-10-09T04:39:00.000-07:00

Framework Case Study: URP

Getting a Grip on Tangible Interaction: A Framework on Physical Space and Social Interaction
Eva Hornecker, Jacob Buur

Note: I will not redefine the urban planning tool URP as I have already done so in a previous blog post.

Reflecting on Urp-

Urp users engage in a lightweight (TM) interaction when using Urp, each haptic direct movement (TM) of the figurines results in an immediate, albeit fluid, visual transformation on the Urp surface. Each figurine is a direct mapping of an architectural item, users can not only easily identify the figurines, but can easily physically manipulate them to their desired configurations. Because the main interaction being implemented is cause-effect between moving the figurines and having an immediate visual response on the surface, Urp also exhibits isomorph effects (TM). That is, it is very easy to identify and manipulate figurines in a way that is intuitive to users because they can anticipate and identify the visual response of light and shadow from extensive experience. The fact that this manipulation is occurring on a horizontal surface indicates the existence of the inhabited space with non-fragmented visibility (SI): as many people can participate in these interactions as can fit around the surface the visuals are being projected. People who are not directly interacting with figurines can at least observe and gain meaning from the configurable materials (SI) on the surface: the manipulation of figurines contextualizes the surface space and acts as a communication piece.

The fact that each figurine is mapped to a single object is an embodied constraint (EF). Because each figurine represents one and only one object, it allows for the immediate recognition by all participants and promotes the ability to "grab and move" without requiring tailored representation (EF), the interpretation or prior knowledge of metaphors. Furthermore, because the surface is a horizontal table, there exist multiple acess points (EF) from which users can "grab and move" these items.

The ease with which users can manipulate and communicate using Urp inherently gives it representational significance (ER). Because collaboration and externalization (ER) is promoted by the ease with which it's used, the results seem to be more meaningful to the users.

Framework Terminology:

Theme: Tangible Manipulation (TM)

Haptic Direct Manipulation:

Can users grab, feel and move ‘the important elements’?

Lightweight Interaction:

Can users proceed in small, experimental steps? Is there rapid feedback during

interacting?

Isomorph Effects:

How easy is it to understand the relation between actions and their effects? Does the system provide

powerful representations that transform the problem?

Theme: Spatial Interaction (SI)

Inhabited Space:

Do people and objects meet? Is it a meaningful place?

Configurable Materials:

Does shifting stuff (or your own body) around have meaning? Can we configure the space at all and appropriate it by doing so?

Non-fragmented Visibility:

Can everybody see what’s happening and follow the visual references?

Full-Body Interaction:

Can you use your whole body?

Performative Action:

Can you communicate something through your body movement while doing what you do?

Theme: Embodied Facilitation (EF)

Embodied Constraints:

Does the physical set-up lead users to collaborate by subtly constraining their behavior?

Multiple Access Points:

Can all users see what is going on and get their hands on the central objects of interest?

Tailored Representation:

Does the representation build on users’ experience? Does it connect with their skills and

invite them into interaction?

Theme: Expressive Representation (ER)

Representational significance:

Are representations meaningful and of long-lasting importance? Are physical and digital representations of the same strength and salience?

Externalization: Can users think and talk with or through objects, using them as props to act with? Do they give discussions a focus and provide a record of decisions?

Perceived Coupling:

Is there a clear link between what you do and what happens?

Notes on URP, Sept. 14

2009-09-23T16:25:00.000-07:00

These are notes taken while reviewing the article "Urp: A Luminous-Tangible Workbench for Urban PLanning and Design" by John Underkoffler and Hiroshii Ishii and preparing to present to the class on September 15th.

1. Design Concept

Urp has 6 components:

the surface (onto which data is projected)
building models (including road strips)
material wand (glass/brick)
wind tool
distance measuring tool (very reminiscent of dimension tool in Solidworks)
clock

Urp attaches projected forms to physical architectural models which are comfortable, intuitive and applicable given the spatial and geomtric nature of the urban planning endeavor. Physical objects are mapped to tangible representations whereas non-material components (ie. material, wind) are mapped to projections and intangible representations, preserving the benefits of 1-to-1 mappings.

2. Use Scenarios

1. Urban Planners (and tangentially, architects):
Use Urp to construct and analyze relationships between architectural structures and existing settings, and to help communicate designs to clients and senior planners/architects who are resisting the movement to "computerize".

2. Clients:
Helps communicate ideas by visualizing physical settings to clients who aren't familiar with the conventions of representing structures in traditional ways (architectural figurines are immediately identifiable and familiar to people with absolutely no experience.)

3. Students:
Rapid prototyping and collaboration.

Actual interaction scenarios:
-Place architectural figurines on surface and have shadows created for a given point in time, determined when the user physically changes the hour and minute hand on a clock placed on the surface.
-construction material determined by tapping "G" (glass) or "B" (brick) side of material wand to figurine, have light reflection created for time in day manifested on the surface.
-identify roads and intersections by placing road "strips" on the surface, can visualize reflections from buildings on to road.
-calculate the direction and speed of windflow at the pedestrian level around monuments by setting windtool on the surface and orienting in the desired direction of the wind.

3. Interaction Techniques:

Building Placement: place architectural figurines on surface, rotate/move as desired.
Calculate Shadow and Light Reflection: place clock on map and manipulate hour and minute hands to given time to anticipate shadow and light reflection.
Establish Roads: Place road strips on surface to represent traffic flow.
Establish Building Material: Tap "G" (glass) or "B" (brick) side of wand to figurine to assign building material.
Wind Generation: Place wind generator on surface and rotate to determine the direction and wind flow at the pedestrian level.
Measure Distances: Tap ruler to points to measure.

4. Implementation

-I/O bulb (input/output bulb, bidirectional light) sends video footage from surface to:
-Glimpser, a low level machine vision system which visually identifies tags on items placed on the surface. Passes the tag info to:
-Voodoo, a software tool which recognizes the tags as items previously inventoried by the user. Information about the specific tag is returned to:
-I/O bulb, which projects information specific to the object identified onto the surface.

5. Interface Related Skills and Knowledge:
-Architectural figurines, shadows and reflections are all extremely intuitive and familiar to humans because we interact extensively with each every day.
-Capitalizes on our familiarity with metaphorical indicators (ie. mice) to ease use with the wands.

Final Comments:

I think Urp is interesting from an implementation perspective, but it brings up a question I struggle with while studying tangible user interface design. TUI design (and User Centered Design in general) is frequently instigated by the need to simplify a process by redesigning its tools' user interfaces using forms humans are familiar with. Is simplifying processes so that even novices can use them effectively necessarily the best exercise? If anyone can use our tools to accomplish anything, how do we distinguish ourselves? Furthermore, will the fact that we are bringing tasks traditionally requiring training and expertise to the layman result in lower quality implementation? For example, after having read this article on Urp I felt like even I could be a decent Urban Planner despite the fact that I hardly even knew what Urban Planners did before I read it. I can assure you that I am absolutely not qualified to organize urban settings, though I could easily manipulate metaphorical ones using Urp.