MAS965: Social Visualization
Prof. Judith Donath
Assignment 3 - Visualizing Conversations
Oct 5, 2004

Francis Lam

0. Visualizing conversation
0.1 Some thoughts

Goodwin's paper give me an insight of how our bodies work cooperatively during our communications, and how our gestures, postures and speeches affect the messages we want to convey. To visualize a conversation or to do a conversational analysis, we need to scrutinize the balance between these factors over numerous contextual changes in spatial and verbal aspects.

We response to these changes reflexively. Small gestures, body orientations, the time of silence, the spatial difference and the utterance are all examples of the factors that can bring us a hint of this instinctive awareness. In essence, my concept of the following conversation visualizations is a process of depicting those significant factors that lead to a contextual change collaboratively.
1. Visualizing a real world conversation
1.1 Structure

1: Material world

2: Verbal context / physical context

3,4: Person
- size: speech duration
- shape: gesture
- position: proximity
- inner pink circle: voice intensity / intonation

5: Orientation / eye contact
1. Visualizing a real world conversation
1.2 Context

I observed a conversation held while I was having a project meeting with my partners. We had three people in our group and all of us were new to each other. The environment and the mapping to the visualization are shown in the above image. The part that I visualized is in the middle of the conversation where J had just finished talking about a presentation of a new product he found related to our project.

The visualization depicts how people were giving comments about this product and how they finally turned to a discussion of another topic. Duration and volume of the speech, gesture change, body orientation or eye contact, spatial difference and area of focus (spatial and verbal contexts) are depicted in a series of images on the right over time. They are assumed to be animated on the same material space (shown in light gray circle) to demonstrate the significance of their mutual relationships in changing the contexts.
1. Visualizing a real world conversation
1.3 Sketches over time


Detailed view

1. Visualizing a real world conversation
1.4 Superimposing time frames

Here is an attempt to superimpose all the frames to illustrate the patterns of the varying people positions and global area of focus
1. Visualizing a real world conversation
1.5 Exploring contexts

Attempts have been made to explore different conversation patterns, such as a dinner gathering or a mass lecture, by using the same visualization paradigm
1. Visualizing a real world conversation
1.6 Experimenting gesture depictions

Generic shape transformations (e.g. scaling and skewing) are definitely not enough to depict the complexity of human gesture in context. In here, I try to experiment with an anthropomorphic approach to create a set of circle-like characters, which symbolize some basic human gestures and emotions.
1. Visualizing a real world conversation
1.7.1 Interactive sketch#1

The size of the cirle means the duration of the speech. The longer he talks, the bigger is the circle.

The inner expanding pink circle indicates the person who is speaking and also shows the intensity of his/her voice.
1. Visualizing a real world conversation
1.7.2 Interactive sketch#2

Eye contact pr body orientation is demonstrated by dragging around the pink circle.
1. Visualizing a real world conversation
1.8 Adding words

Actual words are wrapped around the circle representing the speaking person. They inherit the voice properties of the circle and by fading out the previously spoken words, a rotating effect of types can be observed where the person is speaking. The words can provide a comprehensible view and meaning of the abstract forms such as shape and position, why the person is here and why he/she is talking to someone with this gesture.
2. Visualizing an online conversation
2.1 Concept

I take another approach to visualize the online conversation as many of the factors mentioned in the real world conversation, such as gesture and body orientation, are missing.

By the asynchronous nature of many online conversations, I started thinking about doing this visualizing in an accumulating format, because the words are likely to arrive in a sequential order separately.

Inspired by some brick-dropping games, I use some colored bricks to represent messages. They fall from the top of the screen and accumulate in the bottom according to the sequence of arrival. The size, the color and the lateral position of the brick account for the final structure of the building, in which, I wish to unveil the pattern of the conversation.

2. Visualizing an online conversation
2.2 Context

I took a thread of messages in the message board of, which is a high-traffic portal for designers and artists, and visualize it as a brick building. The thread was initialized by a web-designer who asked comments on his new work.

I use the final structure to depict the difference between the number of people expressing compliments and criticisms. Complimenting messages are dropped on the right side of the central axis while criticizing comments on the left, and the size of the brick represents the body length of the message. In this case, there were more short complimenting replies in the beginning and it ended up with more long criticisms at last.

2. Visualizing an online conversation
2.3 Final structures

(Click for larger image)