Chat Spaces Werner Geyer*, Andrew J Witt**, Eric Wilcox*, Michael Muller*, Bernard Kerr*, Beth Brownholtz*, and David R Millen* *IBM Thomas J. Watson Research Center One Rogers Street Cambridge, MA 02142, USA {werner.geyer, eric_wilcox, michael_muller, bernard_berr, beth_brownholtz, david_r_millen}@us.ibm.com
**Harvard Design School 48 Quincy Street Cambridge, MA 02138, USA
[email protected]
Abstract Chat Spaces are rich persistent chats that provide lightweight shared workspaces for small to medium-scale group activities. Chat Spaces can accommodate brief, informal interactions (similar to Instant Messaging), and can also support longer-term complex threaded conversations including large numbers of people and shared resources. Our design maps a hierarchical thread representation onto a time-ordered two-column user interface. This mapping allows a user to follow the global dynamics of the entire thread in the chronological column on the left while being able to participate in a selected topical branch in a second column on the right. We also present a dynamic thread map that provides an overview of the entire conversation and supports quick navigation of topical branches in the thread.
do items, and a simple form of persistent chat. This paper extends our previous work by bringing lessons learned with ActivityExplorer to inform the design of a new, more structured chat space. The user interface of AE uses a standard tree representation for an activity thread similar to traditional online conversations in discussion databases, newsgroups, or threaded email. These tree representations are very useful to visualize the structure of a conversation. However, we have observed two major difficulties using trees in AE:
Categories & Subject Descriptors: H.5.3 [Information
Interfaces and Presentation]: Group and Organization Interfaces — Collaborative Computing; H.4.1 [Information Systems Applications]: Office Automation — Groupware. General Terms: Design, Human Factors. Keywords:
Chat, thread, navigation, activity-centric collaboration, shared workspace, conversation.
INTRODUCTION
Previous work with activity-centric collaboration concerned architectures [2] and user experiences [4] in a new collaborative environment called ActivityExplorer (AE). ActivityExplorer provides access to shared, heterogeneous collections of documents arranged in a tree-like structure called “activity threads.” ActivityExplorer used six types of shared objects: messages, files, shared screens, folders, toPermission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. DIS2004, July 18–21, 2004, Cambridge, Massachusetts, USA.
Copyright 2004 ACM 1-58113-787-7/04/0007...$5.00.
• Small-scale collaboration that involves few people concentrated on a single topic is “over”-represented by a tree interface. Each turn creates an indentation in the tree representation and the reply chain can easily exceed the visible screen real estate. A simple chronological structure like in a chat session seems to be sufficient and perhaps more efficient as a representation. • More complex collaborations characterized by hundreds of objects in an activity thread often contain several “active” topics (branches). A tree view makes it difficult to identify new and evolving contributions, which tend to appear at the ends of branches – furthest from the root of the tree. Also, in a tree view it is often difficult to navigate and read the on-going conversation in a temporal fashion. Again, we thought that a temporal representation where contributions are displayed in a chronological view would aid in reading and navigating the conversation. This paper describes a design exploration of an alternative user interface for representing activity threads. Our goal was to provide an alternative to the hierarchical tree structure of an activity, and thus take advantage of the temporal aspects of collaboration in order to overcome the aforementioned difficulties. We chose a chat interface as the basis for our explorations. Our design introduces “Chat Spaces” a rich persistent chat UI that organizes collaborative activity content (i.e., text messages, files, hyperlinks, shared screens etc.) chronologically. Each Chat Space is structured as a linear conversation but also supports simple threading
capabilities. Chat Spaces, in the simplest interaction, can accommodate brief and informal exchanges (like today’s IM tools). They can also support longer-term complex discussions incorporating a larger number of people and shared resources. We use the term “chat space” because each persistent chat in our approach, while unitary, may contain a structure similar to that of a shared workspace. DESIGN CHALLENGE
In a chronological representation of an activity thread each item in the thread (message, file, image etc.) is represented as an entry in a linear, time-ordered journal. In this approach, the activity thread becomes one large chat transcript consisting of heterogeneous entries. Flattening the structure down to a linear transcript works well for small-scale group work where activity threads have a single topic. The chronological representation solves the problem of finding new contributions by automatically showing the most recent additions at the trailing end of the transcript. However, just as the pure hierarchical thread view has its difficulties, a pure chronological representation does not necessarily scale to accommodate all cases. Complex activity threads are characterized by hundreds of objects with several topics receiving additional contributions at any given time. More precisely, each leaf in the tree of the thread represents a potential parallel branch in the conversation. In a strict chronological representation these postings show up interspersed with postings of other parallel branches (see middle of Figure 1). It may become difficult to follow the logical sequence of the entire conversation and participate in single branch within the thread. A straightforward solution to this problem would be to visualize each branch in the thread as a separate transcript on the screen (see right column of Figure 1). However, this solution does not scale for threads with a larger number of branches. CHAT SPACES USER INTERFACE
The Chat Spaces user interface was designed under the assumption that a single user will engage in a single branch of a discussion thread at a time, but would also like to maintain sufficient awareness of active contributions to other branches. Our two-column design suggests a multitranscript approach in which the first view always represents the entire conversation in chronological order. Since we allow any conversation to branch along the reply structure similar to email, a chronological ordering of postings alone is not guaranteed to correspond to topical ordering. We include a second view that isolates the current branch of the conversation. The branch displayed corresponds to the selection made by the user in the chronological view. The transcript of the selected branch is shown in a second column. When the conversation branches, additional columns could be used to view and contribute to parallel conversations. The design in this paper is based on thread data from AE user studies [4].
Figure 1. Mapping a thread onto two columns. Conversation Window
The conversation window (see Figure 2) allows users to view, update, and edit a Chat Space. Its visual organization is similar to an instant messaging window: chat transcripts appear in the upper part of the window, while the posting entry field (E) appears below. In addition to text messages, postings can consist of files, images, tasks, and screenshares. Figure 2, for example, shows an annotated image that is displayed inline within the chat transcript. The chronological column (B) on the left lists all entries in the conversation ordered by creation time. The branch column (F) on the right displays all entries in the conversation branch between the selected posting and the root node of the thread. Since each posting is a reply to its parent, the branch in the second column constitutes a unique and distinct chat within the larger conversation. Figure 1 illustrates how a hierarchical thread is mapped onto the chronological and branch columns. Selecting a posting (C) in the left column determines which branch is displayed on the right. This approach allows a user to drill down into and participate in a topic (branch) while still being able to view other parallel discussions in the Chat Space. New postings are appended to the bottom of the left column regardless of branching. All postings in the chronological column that are part of a branch are marked with the number of preceding and succeeding branch entries. The number of predecessors equals the total count of items from the root to the current entry. The number of successors equals the total count of subsequent generations. This allows a user to determine if a new posting appearing at the bottom of the chronological column is part of a branch. Tree-level navigation is facilitated not only by the twocolumns but also by the child-navigation buttons (G) attached to each entry in the branch column. At the bottom of each entry, a row of radio buttons indicates each reply. If a user selects one of these buttons, the corresponding posting appears below the current selection in linear thread order. These buttons thus provide a way to navigate messages that are hierarchically adjacent. Chat Spaces encourage branching by providing convenient opportunities to contribute to the conversation. At the bottom of each posting in a conversation, both in the chronological and branch columns, the interface includes an
Figure 2. Conversation window and buddy list.
in-line reply button (H). By clicking this button, a small inline reply field appears immediately below the selected posting. Replies are threaded into the branch structure of the conversation, and thus accessible in the chronological and branch views. The timeline (D) to the left of the chronological column represents the time span of the overall conversation. Each tick mark represents a posting in this conversation. The timeline serves as a visual summary of the conversation and as a means to navigate to individual entries. The timeline highlights unread postings by shading the time span since the user has last visited this conversation. The user can pop up a window that displays additional meta information about the conversation (not shown in Figure 2). This window includes a list of all the people who are involved, or a list of related Chat Spaces. Spawning a new Chat Space from within an existing Chat Space creates a link posting in the transcript and adds the newly created Chat Space to the relation list.
Conversation Map
While in-line buttons for conversational navigation facilitate contextual browsing, they do not sufficiently visualize the global structure or enable a user to jump easily between branches. Our interface includes a conversation map (A) that allows a user to navigate and view the entire Chat Space. The conversation map provides a generational structure overview of all the postings in a particular conversation. The postings are organized as rows of boxes, with each row representing a generation in the thread. Each box corresponds to a single posting. The first row contains one box representing the root node. Each box on the second row represents a reply to the root node; every box on the third row represents a reply to a postings on the second row; and so forth. The static row arrangement gives an initial view of the conversational structure. The dynamic behavior of the visualization reveals more structure as the user navigates from entry-to-entry. Each row is dynamically reconstructed
user all the Chat Spaces shared with the selected buddy (J). It describes the selected person’s recent activity in corresponding Chat Spaces. Clicking on a Chat Space opens it in the conversation window. The Watch Zone (K) allows a user to bookmark and watch Chat Spaces that are of particular interest. Visual alerts and indicators show activity within these Chat Spaces. RELATED WORK
Our design work on Chat Spaces was stimulated by our previous research on Activity Explorer [2, 4]. Chat Spaces also extends our previous design explorations on thread arcs [3]. LifeStreams [1] investigated time-based management of personal data but did not focus on persistent threaded chats. Smith et al. [5] explored non-persistent threaded chats. CONCLUSION
Figure 3. Dynamics of the conversation map.
when a posting is selected in the map. All postings in the branch of the selected posting slide into the same column and are highlighted and surrounded by a vertical box (see Figure 2). Additionally, all the children of the selected post are highlighted in subsequent rows in outlined orange. All other postings of the thread are marked as gray boxes. This distinguishes the particular branch of a conversation from other entries, enabling the user to navigate entire branches of the conversation more efficiently. For example, a user can quickly jump to the end of a branch, or navigate deeply within the reply structure by clicking on highlighted entries in the map. The user can navigate to siblings of a selected posting to view all replies. The list of postings is scrolled and updated in the branch column of the conversation window to reflect any selection in the conversation map. Likewise, using the navigation buttons within the branch column also updates the conversation map. Figure 3 details the dynamic behavior of the conversation map. We begin navigating the thread by selecting the root element. The conversation map highlights the root element as selected and indicates that there are two direct replies (children) white and outlined in black. In step 1, the user selects reply 1. The map displays reply 1 as selected and indicates that reply 1 has three direct replies (again white outlined in black). In step 2, the user selects reply 3. The entire row 3 is now moved to the left so that reply 3 is aligned with the current selection. Row 4 is also moved to the left so that all direct children of reply 3 are displayed left-aligned directly under reply 3. Buddy List
Chat Spaces also features a buddy list (see Figure 2) that is designed to provide awareness of people and their associated Chat Spaces. The Chat Space icon (I) after each buddy name indicates the number of Chat Spaces in which this person is active. Expanding a buddy in the list shows a
The Chat Spaces user interface design provides a new way to navigate and contribute to a threaded conversation. It maps a hierarchical thread representation onto a timeordered two column user interface. This mapping allows a user to follow the global dynamics of the entire thread in the chronological column on the left, while participating in a selected topical branch in a second column on the right. This approach can accommodate brief, informal interactions (similar to instant messaging), and can also support longer-term complex threaded conversations with large numbers of people and shared resources. In this paper, we have limited our application to threaded chats. However, the techniques described can be applied to any threaded conversation, e.g., those found in newsgroups, discussion databases, or email. The Chat Spaces user interface described in this paper was a prototype implementation that was built in Macromedia Flash MX®. We are currently working towards the development of a fully functioning prototype system that connects to a backend server. To that end, we are planning to collect real usage data to better understand the interaction dynamics of our design. REFERENCES
1. Freeman, E., Gelernter, D. Lifestreams: A Storage Model for Personal Data. ACM SIGMOD Bulletin, March, 1996. 2. Geyer, W., Vogel, J., Cheng, L., Muller, M. Supporting Activity-centric Collaboration through Peer-to-Peer Shared Objects. Proc. ACM Group 2003, Nov 2003. 3. Kerr, B. THREAD ARCS: An Email Thread Visualization. Proc IEEE InfoViz 2003, Oct 2003. 4. Muller, M., Geyer, W., Brownholtz, B., Wilcox, E., Millen, D. R. One Hundred Days in an Activity-Centric Collaboration Environment based on Shared Objects. Proc ACM CHI 2004, Vienna, Austria, Apr 2004. 5. Smith, M. Cadiz, JJ., Burkhalter, B. Conversation Trees and Threaded Chats. Proc ACM CSCW 2000, Nov 2000.
