...
We used the Vexflow API to render the sheet music in a HTML5 canvas and the Audiolet API to play the rendered sheet music using computer-generated tones. . The song presented ("Twinkle Twinkle Little Star") was hardcoded; in actuality, we would need an interface for the vocal director of the musical group to input their songs, which would be another design project altogether. The playback controls are from the jQuery-UI library, and we added listeners to changes in those controls that would affect the appropriate variables in our playback code.
Recordings
Comments
A set of comments exists for each recording for simple organization. These were implemented as collapsible elements using Bootstrap so long comment chains can be hidden for a recording that the user is not looking at. Each accordion heading displays information about the recording and allows it to be played, while the inner accordion sections held comments. Comments are not persisted because it was too difficult to persist recordings, and it only makes sense to persist comments if recordings can be persisted. We believe this is not a big issue because this class is focused on UI design rather than backend implementation.
...
- Entering into the site for the first time is confusing. Our users took longer than we would have liked to realize they should head to the "Songs" tab to accomplish the first task. In other words, we need more affordances on our home page that direct the users towards the "Songs" page; this should also improve the efficiency of the site as a whole since the "Songs" page is the site's major feature. Possible solutions include a large button at the top, an overlay with an arrow that points to the "Songs" tab, or some very visible guiding text that briefly explains what a user should do to get started.
- The guiding text on the "Choose a song" page seems like an affordance for clicking. One of our users tried to click on one of the words in the guiding text ("Listen - Record - Comment") since he thought it was a link to where he wanted to go. Possible solutions include rewriting the guiding text into complete sentences or changing the font style (into italicized) and color (from blue) to remove the clicking affordance.
- There is no way to stop playing saved recordings. Our users noticed a bug in our interface - once they start playing one of the recordings they've made, there is no way to stop that playback. A solution for this is to simply add a stop button for the recordings or add states to the existing play button so that it can be toggled.
- The computer-generated playback doesn't stop automatically when the user is done recording. Some users tried to record themselves singing with the computer-generated playback, which is fine, but it was very annoying for them to have to manually stop the playback of the music after they stopped recording. A solution for this is to add an event listener that stops the playback of the computer-generated music when the "Stop Recording" button is pressed.
- "Currently Recording" mode is not visible enough. The only indication that a user was currently recording was the updating of the timestamp next to record button. Possible solutions here include adding an icon or text to indicate the mode either near the record buttons or at the top of the page.
- There is no way to change the volume of recording playback. The solution here is to add volume control for playing back the recordings.
- It was not clear that the site does not allow tempo to be changed once playback of a song has begun; one user thought it was a bug. The solution here is to add guiding text for the playback controls.
- The metronome was very faint. One of our users thought the metronome was too faint for his needs, so it would be worthwhile to add a volume control for the metronome as well.
- There is no way to tell what measure the computer is currently playing when playing back the song. The solution here is to highlight the measure (or note) that is currently being played and would involve changing our code slightly so that playing a note triggers an event that causes highlighting in our HTML5 canvas.
Reflection
The iterative design process allowed us to address our website's main features and usability issues in stages. We believe all of the prototyping techniques used in this class were useful in different ways.
...