Design Patterns for Visualization of User Activities in a Synchronous Shared Workspace

—Scholars in fields such as Computer-Supported Collaborative Learning (CSCL) have extensively covered the general theme of distributed collaboration in the past few decades. Recent advances in web technologies have pushed forward the boundaries of what is possible to create on the web, aiding the development of various types of collaborative software. Standing on the shoulders of previous research, and in the light of the new web technologies, we here outline the development of what we label a “synchro-nous shared workspace”. The purpose of the system is to serve as a web-based collaboration tool for small groups of geographically and/or temporally dispersed persons within a learning context. Designing this type of system presents interesting challenges on how to graphically visualize the presence of others and their activities, i.e. awareness information. Further, the system provides other types of functionalities such as visualizing previous activities and real-time manipulation of media objects that provides challenges for designers. Utilizing a “design pattern” approach, this paper explores visualization patterns for collaboration in shared workspaces in order to support mutual awareness and coordination activities. Five design patterns were implemented in the system and evaluated by a small group of online learners. The results support the notion that visualization of awareness information is a complex issue and that the work to provide effortless coordination of collaboration is a research interest that needs more attention.


INTRODUCTION
Computer-Supported Cooperative Work (CSCW) and Computer-Supported Collaborative Learning (CSCL) both regard groups of people working or learning together in a coordinated computer-mediated activity [1]. One of the key concerns in these fields is the importance of supporting the activity of coordination between geographically and/or temporally dispersed users (See for example [2]). Coordination is an interdisciplinary research field where scholars from areas such as management science, psychology and computer science try to understand the mechanism from diverse perspectives [3].
Coordination is aided by mutual awareness of other persons engagement in an activity [4], and as such, mutual awareness and the collection, distribution and visualization of data carrying awareness information has been a field of interest for researchers ever since CSCW, CSCL and mediated collaboration became popular in the early to mid-1990s.
Awareness research has progressed and matured through the years, and [5] provides a summary of the field. In the paper, the author focuses on the importance of reducing the cognitive load when engaging in the activity of coordinating collaboration. While recognizing the immense work that has been put into the field by researchers through the last decades, the author also states that there is a need to further explore awareness. The author concludes with a call to researchers to explore what awareness is and its impact on collaboration, as well as ways to visualize awareness information with the goal of supporting effortless coordination.
Answering this call for further investigation into awareness research, I argue that there is yet another factor motivating exploration into this field of research. As the technologies that underpin the modern web have become more capable, opportunities arise for developers to explore innovative web applications supporting collaboration between users, as well as new models of visualizing awareness information. Ever since the computer hardware and software became capable of collecting, distributing and visualizing bits of data about co-present users and what they are up to, researchers have been trying to stretch the possibilities of the technology available. Without getting too technical in this paper, one of the most significant technological advances on the web is possibly the web socket, enabling fast, efficient communication between the server and users of a web resource through small packets of data. This allows developers to create web applications that for example can send and receive data of user activities between the server and client almost instantaneously.
The overall aim of the research project is to further explore mediated collaboration, utilizing this new technology, by developing a prototype application following a design science research approach.
In this paper, we are interested in the visualization of users and their activities for the purpose of supporting the coordination activity in, what we label, a "synchronous shared workspace". The idea is to enable small groups of people (under 10) to share documents, leave comments and annotations, incorporate external resources like Twitter feeds and YouTube clips and collaboratively fill the workspace with different types of objects needed in a work or learning situation. We will utilize the concept of "design patterns" to describe different ways of visualizing the activity of the users.
The specific research question concerned in this paper is: "How can we visualize collaboration activities in a synchronous, shared workspace?" PAPER DESIGN PATTERNS FOR VISUALIZATION OF USER ACTIVITIES IN A SYNCHRONOUS SHARED WORKSPACE We will share our experiences with creating visualization of the activities in a synchronous shared workspace and discuss the users' perception of the visualization.

II. DESIGN SCIENCE RESEARCH
While the behavioral sciences aim to explain human behavior and interaction between humans, information systems and organizations, design science focus on the creation of artifacts. Design science can be traced back to Herbert Simon and "The Sciences of the Artificial" from 1969, where a design science is described as a problemsolving activity with the purpose of coming up with new technologies. The outcome of a design science research activity is an artifact in the form of a construct, a model, a method or an instantiation [6]. One of the main arguments for a design science is to make IS research more relevant to practice [7] [6]. According to [8], design science tends to favor relevance over rigor, while the opposite is true for behavioral sciences. This does not mean design science lacks rigor, but rather the process is less well defined [8].

III. DESIGN PATTERNS
In order to communicate ways of visualizing activity in a synchronous, shared workspace, we will use the concept of "design patterns". Design patterns have been utilized as a concept in many disciplines, originating from architecture [9] as a way to describe techniques to solve common, re-occurring problems in design. The concept of "design patterns" has since then been adopted into several scholarly fields. Within the computer software field there are several utilities for design patterns, predominantly in software engineering [10]. Within the field of Human-Computer Interaction (HCI), there is an on-going discussion of how, and if, design patterns is useful in designing user interfaces [11]. But as [12] suggests, design patterns can be used to document the design of technology supporting cooperative activities, and serves as a way of storing and communicating knowledge on how to design features of a system. As [13] suggests, the resulting artifacts of a design science research effort can be expressed and communicated using design patterns. But while design patterns are a way to describe often-used "best practices" within a field, in this paper we depart from that notion. As one of the fundamental objectives of design science research is to support innovation, using design patterns in the traditional sense would stand in conflict with the purpose of design science research. Using the design pattern approach, we propose to describe not only existing ways to design user interfaces, but also to describe proposed, nascent and innovative interface artifacts.
One of the main concerns facing scholars is that of how to describe a design pattern, given that a pattern can be on different abstraction levels and used in different contexts. Discussing patterns for interaction design, [14] argues that there is no standardized way of describing design patterns in this context, but suggests a way that describes a situation, the problem the pattern should solve, the context and solution according to the original idea of Alexander, and also used by for example [15]. Following that example, in this paper we will describe design patterns in the following manner: We will accordingly provide a name for the design pattern, a context where it can be used, the problem it tries to solve, the solution to the problem, and finally describe how the design pattern was used in the system and provide examples of where the design pattern can be found elsewhere in literature.
Since design patterns are contextual, in the next section we will present the synchronous shared workspace in more detail as well as the design patterns we are exploring.

IV. THE SYNCHRONOUS SHARED WORKSPACE SYSTEM
The system, labeled a web-based "synchronous shared workspace", was developed with the purpose of enabling interaction and collaboration among students and educators within higher education. The system used a range of web technologies that together created a real-time workspace, graphically resembling an office whiteboard where users could share and collaborate around documents and other media objects.
The overall design requirements for the system have been assembled from a previous study on awareness visualization, an observational study where we observed two computer-mediated tutoring sessions between teachers and students as well as two focus group sessions where teachers discussed the requirements of a synchronous shared workspace. Further, design requirements have been collected from the vast collection of texts on awareness research. This process has been previously highlighted in several papers and brief papers (see for example [16][17]), and will therefore not be elaborated on in this paper.
This paper discusses a subset of the design requirements of the system. The requirements are 1) Document sharing, 2) Real-time visualization of activities, and 3) Historical representation of past activities. The documentsharing requirement challenged us in how to allow users to upload files to the system and how to visualize this activity to the other co-present users. Real-time visualization made us consider ways to visually represent the current activities of users in the system, and the third requirement made us explore ways to visualize past events in the system. While the general system design itself is not the main concern in this paper, a brief overview of the system is provided here for context.

A. System overview
The left, dark, part of the system depicted in Fig. 1, is the private part of the system. Top left is a user presentation with image and name. Below is a slider widget used to "rewind" the system to a previous state, discussed later in the paper. Further down, a log resides where the activities of other users are displayed as text messages, also elaborated upon later on in the paper. Finally, there is a function to create a new text box in the system. What happens in the "dark" part of the system is not shared with co-present users. Occupying the rest of the browser window is the synchronous shared workspace. Every action PAPER DESIGN PATTERNS FOR VISUALIZATION OF USER ACTIVITIES IN A SYNCHRONOUS SHARED WORKSPACE the user conducts there is visually shared between the users in near real-time.
With this background in mind, we will in the following sections describe the design patterns we used in the system to visualize awareness information.

B. Design pattern I
Name: Telepointer. Context: A real-time synchronous shared workspace. Problem: It can be difficult for users to coordinate collaboration if they do not know where the current focus of co-present users is.
Solution: Visualize where the focus is of each copresent user within the system.
Examples of use: Stream data of the position of every cursor whenever they are moved. Visualize the position of the users' cursors in the system and augment the cursors with the name of the user the cursor belongs to. Lower the opacity of the cursors so that they do not interfere with the usage of the system (Fig. 2). Users can then see where the focus of all co-present users is, and their current interaction with objects in the system. Other uses of telepointers can be found in research in for example [18], [19] & [20].

C. Design pattern II
Name: Drag-and-drop sharing. Context: A real-time synchronous shared workspace. Problem: Collaboration efforts depend on users sharing files, texts and links with each other. Visualization of this activity is important to support the coordination effort. Solution: Users should be able to easily add objects from their computer to the shared workspace. Further, copresent users should see this activity while it occurs, to be able to coordinate the collaboration.
Example of use: Utilizing the drag-and-drop principle of user interface design, dragging and dropping an object into the shared workspace part of the browser window will immediately start a file upload. When the file upload is initiated, a note is added in the log on who started the upload along with the filename and a timestamp. As the file upload is finished, the contents of supported file types will be displayed (for example an image, video files) for all users. File types that are not supported in the system gets an icon displayed in the shared interface. Other uses of this type of file sharing can be found in [21], [22] & [23].

D. Design pattern III
Name: Object locking mechanism. Context: A real-time synchronous shared workspace. Problem: Two or more users should not be able to manipulate the same object at the same time. To aid the coordination effort, the activity of manipulating an object should be visualized.
Solution: A locking mechanism on objects would prevent two or more users to manipulate the same object at the same time. Visualization of who is editing.
Example of use: When a user is editing a text in a textbox or moving or resizing an object in the workspace, the object would be locked for others to edit. The object will be highlighted to visualize its locked state. If moved or re- sized, everyone will see the action and the telepointer of the user executing the action will show who was responsible for the action. A log entry will be created for the action once it was finished. For related research into locking mechanisms, see [24], [25] & [21].

E. Design pattern IV
Name: Activity log. Context: Historical visualization of past activities in a synchronous shared workspace.
Problem: Even though the system is synchronous, there is a need to provide a historical perspective, providing context for current use.
Solution: A logging function, where activities are available to be seen by all users, together with information about who performed the action.
Example of use: As users are active in the system, everything is logged in the private part of the system. The log consisted of the name of the activity, the user who performed the activity and a timestamp as to when the activity occurred. Logs displaying previous activities are found in numerous other applications.

F. Design pattern V
Name: Time slider. Context: Historical visualization of past activities in a synchronous shared workspace.
Problem: Even though the system is synchronous, there is a need to visualize a historical perspective, providing context for current use.
Solution: The ability to rewind the system, allowing users to see the workspace as it looked in a past time.
Example of use: The user can drag a slider widget (see Fig. 3), and the further they drag it to the left, the further the system will reverse in time. The leftmost position represents the time where the workspace was created. While dragging, a text above the slider will indicate where in time the user is, or, as illustrated, if the user is viewing the live workspace. Objects in this historical state cannot be moved or manipulated in any way, i.e. they were frozen in time. Nor is this state of the user interface shared, and when a user time-travel the interface becomes private. The user then has the choice of "reviving" an object on the workspace. When revived, the document will be visible in the current view of all visitors, and can be manipulated again. The implementation and evaluation of the system was made in an online university course. The students were enrolled in an online masters program called "Education, communication and IT". The students, working in geographically dispersed groups of 3-5 members, were given the task to collaboratively create a "course module" in the system, thus allowing them to explore the system. The system was in a "beta" state, i.e. not completely tested for errors, but otherwise it was fully functional.

PAPER DESIGN PATTERNS FOR VISUALIZATION OF USER ACTIVITIES IN A SYNCHRONOUS SHARED WORKSPACE
The object of analysis is the traces of interaction left behind after the task had been finished as the system created detailed logs of the usage of the system. Further, the students had an assignment of writing a report analyzing their experiences using the shared workspace. Those reports were also considered when evaluating the use of the design patterns. The students were informed of the purpose of the research project and that the activities were logged and would be used in the research project.
The students were given a few weeks time to finish the task and write their analysis of the system. After this period, we began the analysis by an examination of the traces of interaction in the system and a meta-analysis of the students' reports were conducted.

VI. CONCLUSION
Upon examining the logs and reading the reports from the students, it became apparent that the system did not support effortless coordination of the collaboration activity.
The first design pattern, Telepointer, was reported as confusing. One user stated in her analysis that seeing the pointers moving around the workspace as co-present users were performing various tasks in the system, while not hearing anyone speak or seeing anyone was eerie and invoked almost a ghost-like experience. We suggest that in order for a telepointer to be effective supporting coordination in a synchronous shared workspace, it needs to be complemented with more functionality to communicate between group members.
Further, the log revealed signs of insecurity in the usage of the system in general, and a widespread skepticism as to the functionality. For example, as users uploaded objects to the system via drag-and-drop as in design pattern number two, it was often followed by a text in a text-box asking if the co-present users were seeing the object uploaded. A similar behavior was seen when users manipulated objects in the workspace. We suggest that in order for this type of visualization of activity in the system to function properly, it would perhaps be a good idea to provide a feedback loop, where users uploading or manipulating objects was provided with a notion that the result of their actions were being received by the other copresent users.
Design pattern number four, the historical log, was not discussed in any length in the students' reports, nor could we see any trace of activity relating to the presence of the log. This could be interpreted in two ways; either it was not seen or it was functioning in the intended way supporting the coordination activity. This suggests that there is a need to explore the functionality of the log further. Nevertheless, the cumulative nature of the log could potentially be a problem, where usage of the system over time would generate a massive log of usage data, leading to a problem of how to graphically represent the data in the graphical user interface. This also needs to be further explored.
The last design pattern, the time slider, was unfortunately by the time the test was conducted, somewhat unstable, providing a less that optimal experience for the users. However, we could still see a potential for this type of design pattern. In the logs, we could see that the students used the time slider, rewinding the workspace to a previous state in time. It seemed to spark curiosity, but the flawed functionality of the beta state of the system makes it difficult for us to draw any conclusions regarding its ability to support effortless coordination.
The outcome of this research is that visualization of the activities of co-present users and is complex. The results from our explorative study show promise and the students using the system is recognizing the presence and activities of each other, but the coordination of the collaboration can not be said to be effortless.
This research project will continue with further exploration into awareness visualization in the synchronous shared workspace, implementing the results from the outcome of this paper. The design patterns presented here will be elaborated on, creating additional design patterns that are more detailed, addressing the concerns raised by the users.