# Redesigning Interaction in CODES

Elisa Oliveira, Evandro Manara Miletto, Luciano Vargas Flores

► To cite this version:

Elisa Oliveira, Evandro Manara Miletto, Luciano Vargas Flores. Redesigning Interaction in CODES. 15th Human-Computer Interaction (INTERACT), Sep 2015, Bamberg, Germany. pp.590-593, 10.1007/978-3-319-22723-8_68. hal-01610776

HAL Id: hal-01610776

https://inria.hal.science/hal-01610776

Submitted on 5 Oct 2017

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# Redesigning Interaction in CODES

Elisa Leo de Oliveira, Evandro Manara Miletto, and Luciano Vargas Flores*

Instituto Federal do Rio Grande do Sul (IFRS), Porto Alegre, Brazil
elisaleoo@gmail.com,
{evandro.miletto,luciano.flores}@poa.ifrs.edu.br

**Abstract.** Our research group is currently working on the user interface and interaction redesign of CODES, a system for collective music creation on the Web. Cooperative work over a piece of music in CODES follows a cyclic, prototyping approach, which brings some challenges for interaction design. This poster summarizes our redesign concept guidelines, the problems we identified through evaluation of the previous version, and our proposed solutions. The main issues addressed were task conformance, site structure and navigation, aesthetics, and simplicity.

**Keywords.** Music-making · Prototyping · CSCW · HCI · UI evaluation.

## 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 co-
operation 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 Project type > 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 simpli-
fied navigation. We have also considered the requirements for general mechanisms of
the original CODES system: version control, argumentation / negotiation, modifica-
tion 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 experi-
ence of our team in the field of HCI, and also on modern best practices of Web appli-
cation usability.

<figure><img src="image_2.png" /><figcaption>Fig. 1. Detail of the Prototypes, Versions and Contributions screen.</figcaption></figure>

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, dur-
ing 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 communica-
tion 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.
<figure><img src="image_3.png" /><figcaption>Fig. 2. Draft of the new Editor screen, including versions and contributions.</figcaption></figure>

One of the possibilities points out to the metaphors that are already familiar to cur-
rent 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 respec-
tive 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.

**Acknowledgements.** We thank CNPq and CAPES LIFE for funding this research, and IFRS – Campus Porto Alegre for the support provided to its development.

**References**

1. Miletto, E.M.: CODES: an Interactive Novice-Oriented Web-Based Environment for Co-operative Musical Prototyping. Doctorate Thesis – PPGC, Universidade Federal do Rio Grande do Sul, Porto Alegre (2009)

2. W3C: Web Design and Applications, http://www.w3.org/standards/webdesign

3. Nielsen, J.: Heuristic Evaluation. In: Nielsen, J., Mack, R.L. (eds.) Usability Inspection Methods. John Wiley & Sons, New York (1994)

4. Hoppe, A.F., Miletto, E.M., Flores, L.V., Pimenta, M.S.: Cooperation in Musical Prototypes Design. In: 13th International Conference on Computer Supported Cooperative Work in Design, pp. 698–703. IEEE Press, Los Alamitos (2009)