View Source

Briefing

Our project is called VoiceComposer, and it's intended to let users quickly record a melody they're thinking of onto their smartphone.

Scenario tasks

Record a melody line.
Change one of the notes in your melody.
Add a harmony line.
Export the song.

Prototype photos

	These photos are of the second version of our prototype. Our app runs on an android phone. The phone was represented by a 5''x7'' index card.
	If the user tried to use any Android functionality besides VoiceComposer, they got this screen.
	This screen appears when VoiceComposer is first opened. (The a, d & d thing stands for our names.) We have a section that says "No saved songs", and below that a "+ Start new song,"
	Click "+Start new song." The menu bar at the top reads, from left to right, "Record, Play, To start \| Undo, Redo \| Save, Exit." Below that to the left we have "Track Properties," with an image of a speaker and an eye (for toggle sound and toggle visible). We used to have a piano here, which you could tap to change the instrument, but we took that out in the second iteration. (On playback, you don't hear your own voice, but a piano or whatever instrument you selected.) To the right of that we have the track, with each of the lines representing and labeled with a note (a, b, c...), the timer across the top denoting how far into the song we are, and a red vertical line where you can set the point in the song you're at by dragging it around with the dragger on the bottom. Finally, the bottom is labeled "Tracks", and has four colors (here labeled red, green, yellow, blue). Red currently has a box selection around it.
	Say the user clicks blue to begin recording on the blue track. The square selection moves to blue, and the color of the timer line becomes blue. The first task is to record a melody. When record is hit, the blue line progresses across the track. The user hums or sings into the phone and a line of the appropriate color is drawn. When recording begins, all other icons on the menu gray out, and the record button turns into a stop button.
	After the user finishes singing (three notes here, the first two of the same pitch), he presses stop. The menu returns to the original menu, and now we have some notes on the track.
	Our second task was to edit a note. Say the user taps on one of these notes to edit it. The note plays, the interface zooms into the note (the note stays the same color, and if there were other notes nearby, they would also be visible in this view) and a transparent overlay pops up with these options. You can manipulate the note by dragging it or extending and shortening it (dragging a note causes it to play all the notes it's dragged to.) We actually tried two alternatives for this note-editing view; this zoomed-in interface, and a not zoomed-in interface where you edit the note straight on the track. The zoom, we hoped, would require less accuracy of users to get the exact note lengths they want, but it was difficult to tell which was more effective in the paper prototype, because our "playback" wasn't very accurate anyway. X exits this mode without changes, OK saves changes, and the trash can deletes the note.
	Say the user drags the note down, then exits the mode. The note now appears lower on the track. If the note were dragged below the track, the lines on the track would become more dense to accommodate the lower note.
	Our third task was to have the users add a harmony line. Many users didn't realize what the different colored tracks were for until we got to this task. This was one of the tasks that changed a lot between our prototypes; you used to access a different screen and get whole new tracks to add harmonies on, but for this iteration, we wanted tracks to act like layers in Photoshop. The user picks the green track (changing the color of the timer line to green and making the blue lines on the screen transparent) and clicks record. The line again progresses across the screen, scrolling the timer when it nears the edge of the screen, and you can now record green lines without disturbing the blue lines. The blue notes play as you're singing, so that you can harmonize with yourself. If you were still on the blue track, the new lines would record over the old lines, and the old lines would not play back to you. If you don't want the blue track to play back to you, you can mute that track using the icon on the track properties. None of our users used this function.
	The completed piece. I don't think the green lines are actually supposed to overlap, though.
	The user presses save, then exit. The song is now visible on the main screen, with its title, time of last edit, and options to rename, export, save as, and delete. These buttons weren't actually implemented in our paper prototype. Our fourth task, "Export," was considered done when users found the button.

Observations

First design

There should be time markings along the screen, probably in increments of five seconds in so, so users can tell how far they are in the song.
The "cut track" button that used to be in the menu bar was confusing, and no one figured out what it meant.
We needed to work on how best to represent multiple tracks that would play simultaneously, given the limited screen space.
People didn't want to tap "main menu" to exit the editing mode, because they were afraid it would discard their changes. We needed either some indication that the app was saving automatically, or an explicit "save" button.
There used to be a button with a picture of a piano on it, which would change the instrument used to play a track. One user thought that such a button ought to display an on-screen piano keyboard, so that users could enter notes without having to sing into the microphone.
The main menu should have functionality to duplicate a song, or copy it to a different name.
The feedback for editing individual notes, particularly the indication of which note was currently selected, needed improvement.
One (more than one?) user tried to add a harmony line by using the touch screen to add new notes to the same track.

Revised design

A user pointed out that the buttons next to a saved song on the main menu (export, rename, etc) were too small to accurately select with a finger on a phone touch screen.
Similarly, the "mute/unmute" and "hide/show" buttons on the edit screen might be small and confusing. (However, they'll likely be more recognizable on an actual phone than a quick pencil drawing.)
The layer metaphor might be confusing. One user tried tapping on the layer buttons for a while before finding the "record" button, so we might need some feedback on what the buttons do, especially when there are no notes in the song.
Also, one user recorded over their existing notes before figuring out how to add a second line. We might want to convey more explicitly that they need to change tracks before recording if they want to preserve what they've already written.
The "save" and "exit" buttons might still need some work. In particular, maybe "save" should prompt for a title the first time a song is saved.
One user tried to tap and drag on the screen to select notes in a rectangular region. We need to figure out what the app should do if a user taps on empty space in the editing screen: does it start a selection, create a new note at that time and pitch, or do nothing? Should the selection be one-dimensional (time) or two-dimensional (time and pitch)?

Prototype iteration

Since users found the top menu bar confusing, we removed one of the buttons and replaced the "Main Menu" button with "Save" and "Exit" buttons.
We decided that editing individual notes would be done through a modal overlay, so that users could use more of the limited screen space to swipe and drag.
Audio editors commonly support arbitrarily many tracks, which can be moved around, created, and deleted. Our prototype originally used a scrolling list of tracks, but users seemed confused by adding and changing tracks. We replaced that with a layers metaphor where there are exactly four tracks that are overlaid on top of each other on the same staff.
We added small time markings at the top of the editing screen, as suggested by users