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.
This screen appears when the app 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. 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. |
 |
The first task is to record a melody. When record is hit, the red line (here represented by a blue line) progresses across the track. The user hums or sings into the phone and a line of the appropriate color is drawn. Here the line is supposed to be red, since the red track is selected.
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 (two notes here), he presses stop. The menu returns to the original menu, and now we have some notes on the track. |
 |
some text |
 |
some text |
 |
some text. |
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.
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
"it's an eye?"
"this is clearly volume"
opened song to export
"export is tiny"
tapped on the layer buttons for a while before Record
used Undo to "change a note"
tried to drag a rectangle on the screen to select notes
should we make tapping on whitespace create new notes?
should we make dragging select multiple notes? vertical/horizontal?
recorded over layer before figuring out how to add harmony
should make "exit" say "menu" or something?
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