Keywords

1 Introduction

Internet use has been growing every day, and so is its use as a means to foster human relationships. As a consequence, social networking systems are becoming increasingly present in people’s lives. The basic idea behind CODES is to take advantage of such means in order to facilitate collective music creation.

CODES is the result of academic research, and is an interactive system that allows users to create musical compositions collaboratively and without needing any previous knowledge on music theory [1]. Collaboration happens over the Web and, therefore, contributors do not need to be in the same physical location.

Since CODES is in development for over ten years, some of the technologies used are outdated. The goal of the current research project is to reengineer the system based in Web Standards [2], considering their benefits for rich Web applications, such as: plugin independence; standardization (and a resulting multi-platform support); ease for responsive implementation.

2 CODES Overview

CODES is an RIA that aims at allowing novices in music to collaborate in the creation of music pieces. These songs are called “music prototypes” in CODES, because the system tries to facilitate music creation based on prototyping: a user posts an initial draft of the song and invites collaborators; everyone in the group provides their individual contributions – they may also discuss their ideas through the system’s cooperation tools; at some stages they can save different versions of the song; finally, this process of collaboratively creating versions, discussing ideas, assessing and refining versions of the song leads to a definitive version of the music piece, which may be published for the general public of the website [1].

The original (previous) design of CODES was organized into three levels: the Public level – when users are not logged in or, if logged in, where you can search for people and songs; the Intermediary level – when a user selects one song for editing (he/she will have access to versions and collaborators of that song); and finally the Prototyping level, which presents the collaborative editor.

3 Current Issues

Since we are reengineering the system, we also decided to redesign its UI and interaction. Therefore, initially, we carried out a simplified heuristic evaluation [3] with three members of the development team, just to identify any usability and UX problems that should be avoided already in the first versions of the new system (formative assessment).

We found a total of 27 different problems, mainly related to clarity (design, visual organization), feedback and efficiency issues. For instance, small problems like filling a field and pressing “Enter” on the keyboard not causing to trigger the desired action (you have to click a button on the screen), or more complex problems, such as the user not being able to identify where a collaborator made changes in a composition.

The main problems found during evaluation were how the versions of the song under work are listed for the user to choose from, and also the level of awareness about where changes have occurred and what was their context (why changes were made, in which order, etc.). For the user to edit a song in the original CODES, he/she must select a sequence of options that are progressively revealed through the tabs My Prototype > Version > Contribution (Fig. 1). The first problem with this approach is that the user takes a long time to reach his/her goal, that is to edit a song. Secondly, when contributions are listed they are very numerous, and it is not clear that you can combine them to open in the editor. It is also not clear which is the latest version and which are the latest contributions.

During heuristic assessment, evaluators have an experience that is similar to the user using the system. So, considering user’s interaction with the system, and that the goal for that user is the editing task, the process described above was perceived as not being suited for the task. We assume that it would be more appropriate to quickly get to the edition of the latest version and, while at this task, to have access to previous versions and contributions from other users.

4 Proposed Solution and Concept Criteria

In addition to the problems encountered in the initial assessment, we have considered, for redesigning the system, some new criteria that we defined during the concept stage for the new version. Among the main proposed criteria, we may point out: minimalist design (only the necessary elements on the webpage); task-based page organization; and improvements in navigation (website structure), including simplified navigation. We have also considered the requirements for general mechanisms of the original CODES system: version control, argumentation/negotiation, modification requests, and support for the perception of actions and intentions of the group (awareness) [4].

We believe that the newly proposed design criteria already potentially solve many of the problems observed in the previous version, since they are based on the experience of our team in the field of HCI, and also on modern best practices of Web application usability.

Fig. 1.
figure 1

Detail of the prototypes, versions and contributions screen.

Full size image

The solution to the main problem, of the versions list presentation, is to bring this information to the task where it is needed: the editing task (Fig. 2). This means, during the composition the user will have access to the other versions for comparisons and to discuss them. In the original CODES, navigation and selection of versions was done in a previous step, and only then they were opened for edition (Fig. 1).

5 Final Considerations

A challenge that we still have in the design relates to compliance with the task of collective composition. We need to find a UI design solution that enables communication among collaborators during the task of musical composition, both synchronously and asynchronously. It is also necessary to be possible to refer to specific elements of the composition in these conversations.

Fig. 2.
figure 2

Draft of the new editor screen, including versions and contributions.

Full size image

One of the possibilities points out to the metaphors that are already familiar to current Web users, for the collaborative editing of texts and worksheets. Users work in a single version, and they can navigate through the history of changes and their respective authors, as well as restore these “checkpoints”.

To test the validity of our hypotheses, regarding the efficiency, flexibility, clarity to the user and task conformance of the new design, will require testing with real users using a first prototype of the new version of CODES.