Curated by: Luigi Canali De Rossi

Monday, March 31, 2003

How To Create A Visually Oriented Real-Time Chat And Collaboration Environment

Sponsored Links

Chat-based Visual Collaboration Environment
MIT Chat Circles 2
= breakthrough tool
Online Chat Environment

The Sociable Media Group at MIT Media Lab have once again come up with a truly interesting online prototype.

A follow up to their original Chat Circles this new prototype introduces some novel concepts and ideas.
(See the original Chat Circles interface at:

If you are interested in interface and visual interaction design you cannot miss looking at this highly innovative and experimental online chat environment.

Chat Circles contains many good ideas that can be further refined for use in live collaboration and real-time communication tools.

Here they key ones from the MIT Chat Circles original info:


You may choose any username you like. No password is necessary to enter the chatroom.

When you first enter the chat room your circle is displayed in the upper left-hand corner of the screen. A written message appears next to your circle asking you to move out of the corner in order to start chatting.

**Moving and speaking**

To move yourself, simply click on your colored dot, hold down the mouse button and drag yourself around. The chatroom is much bigger than what appears in the initial window, you can explore the rest of the room by moving yourself around or by expanding the chatroom window.

To speak, simply start typing and you will see your message displayed inside the message bar at the bottom of your window.

Once you hit the ENTER key, your message will be posted inside your colored circled so that other people in the chatroom can see what you said.

When you post a message, your circles grows to accommodate the text. Your circle will display your message for a few seconds then it will shrink again to its original size.

**Hearing Range**

In ChatCircles, every user has a "hearing range". This means that you can only "hear" (i.e. see) the messages of users who are inside your hearing range, that is, users who are visually close to you on the screen.

If a user is so far away from you as to be outside of your hearing range, you still see their circle, and you still see their circle growing when they post something; but you do not see the text of the message they posted. In order to do so, you need to move your circle closer to their circle.

This proximity-based filtering is used to break large groups into conversational clusters on the screen, giving each user a personal view of the chatroom space.

**Log (history)**

ChatCircles keeps a graphical log of conversations in the chatroom. To get to the log, simply click on the "Chat Log" button at the bottom of the chat window. Each user's activity is shown as set of lines over time, with the user's name on top of it.

1. the vertical dimension is time

2. each horizontal bar represents a posting

3. when you mouse over a horizontal bar, the text of that posting gets displayed

4. hollow bars denote messages that were posted outside your hearing range; you do not have access to those postings' text when you mouse over their bars

Must see this feature!


The action traces show where participants have been and the places where they have spoken. Users' movements and conversations color the space, making all activity into an expressionist sketch.

As you move around in the chatroom you leave movement traces behind you. These traces are ephemeral and disappear rapidly.
As you speak, you leave traces in the chatroom that last for several hours. These traces do not reveal the text of your messages, they simply convey the fact that someone spoke at that place. These "spoken" traces slowly fade out in the course of ten hours.

Here is below is a link to a GALLERY of the traces left by users; these are beautiful images created by people as they interacted in ChatCircles2. See them at: gallery/index.htm

see also: #indexTraces


On right (or left) upper corner of your ChatCircles2 window, you will see a map of the entire chatroom.

1. the chatroom is much bigger than your viewing window, so the map shows you how much of the entire room you are actually seeing at any given point. It also shows you where your viewing window is placed in relation to the rest of the room.

2. the map shows the placement of each picture - pictures are depicted as faint rectangles

3. you can see where other users are placed in the chatroom by looking at the colored dots in the map: each colored dot is a different user

4. when someone posts a message in the chatroom, you see their dot blinking to indicate posting activity

5. as you move around the chatroom you see your dot moving in the map, so you always know where you are in relation to others


The background of ChatCircles is punctuated with pictures that are updated frequently. Most of these pictures come automatically from Yahoo's most popular content page. The pictures are frequently updated and, sometimes, you might find that all of the pictures in the chatroom refer to a common theme.

Each picture has a "viewing range", which means that, in order for you to actually see the picture, you need to be within its viewing range. If you are outside of its range (i.e. too far away from it), you will see the outline of the picture.

The images on the background introduce topics for conversation, helping to define the space as a social environment.


To use Chat Circles 2 you need only to enter a screen name and select a color. No registration or password is required.
Access it now at:

To find out more about what Chat Circles is, please go to:

A white paper about Chat Circles is available at: chat_circles.pdf

If you have any doubts about how to use Chat Circles, please see:

Hats to the people behind MIT Chat Circles 2:
Fernanda B. ViƩgas
Professor Judith Donath

MEng Researchers:
Joey Rozier
Rodrigo Leroux

Undergraduate Researchers:
Matthew Lee
Grace Lee

Contact them at:

Try Chat Circles now for free at:

Must experience it to understand it.

Readers' Comments    
blog comments powered by Disqus
posted by Robin Good on Monday, March 31 2003, updated on Tuesday, May 5 2015

Search this site for more with 








    Curated by

    New media explorer
    Communication designer


    POP Newsletter

    Robin Good's Newsletter for Professional Online Publishers  



    Real Time Web Analytics