DESIGN:
Paper prototypes, focusing on the right problem: We discarded the concept of having a multimodal interface, i.e. our final design focuses entirely on ear training and does not have the “record and share” functionality.
...
Learnability, heuristic evaluation: In our earlier computer prototype, users had a difficult time interpreting multiple notes delivered by the interface while ear training. We discovered that learnability is best achieved by playing a single note at a time, and allowing users to guess them in succession. This design can also be smoothly expanded in many simple ways, for example, to allow for chords, or timed play.
OVERALL APPEARANCE
Color, heuristic evaluation: Our color scheme from GR4 was criticized by several of our GR4 testers, so we completely revamped it. We went from a plain white, gray, black color scheme to a wood based color scheme that uses black and a few pastel colors to draw attention to immediately relevant features. One of our user testers expressed that pianos don’t actually change color when touched and our TA pointed out that some of the colors we used earlier are very saturated, so we changed our piano's response on click be a much more modest color changes.
Fig: Overall Appearance
PANELS
...
Learnability, paper prototyping: As mentioned earlier, the panel design gives the user the flexibility to skip reading the instructions and still know what to do in order to go back and read them. This increases the learnability and turned out to be a much better design that the dialog box.
Fig: First Panel
Fig: Second Panel
Fig: Third Panel
PIANO
Color scheme, heuristic evaluation: As mentioned earlier, the color scheme of the piano was redone to be much milder. Default colors are a pale golden gradient for the white keys, to subtly match the wood in the page background, and the black keys have a slight white gradient on the edges.
...
Mode visibility, heuristic evaluation: Several of our user testers felt that exercises lacked a feeling of completion, so we came up with the idea of persisting a correct guess (once the correct note is clicked, it remains highlighted in pale green until the next exercise is begun), which helps indicate the completion of an exercise and improves learnability by encouraging the user to try something else, besides the piano (i.e. the "New Tone" button).
Fig: Piano
SETTINGS
External consistency, heuristic evaluation: The settings dialog was cleaned up and a "Save" button was added, since some users were confused about when settings went into effect.
Fig: Settings
...
IMPLEMENTATION
Playing the piano was revamped completely in between GR4 and GR5. Previously, there were a number of problems with playing on the piano
i. scratchy wav files with a hiccup at the beginning of each file
...
iii. it only supported Chrome (Firefox used to give a mpeg/mp3 can’t be loaded error)
All of the above affected how smooth our interface felt when played on browsers, as scratchy audio and notes cutting each other off did not feel like a real piano. We fixed all the above problems by using .ogg files instead of .mp3 files. We also used better quality files we found after in a MIDI library on github.
The biggest design decision to simplify the exercise structure made our implementation even simpler, as we no longer needed to generate a database of exercises. Instead, the application now randomly chooses one out of a subset of notes to test the user with.
We do not actually have a backend (i.e. all our code is javascript, css and html). Also, out javascript code is very modular. We have pseudo-classes for piano, exercise_controller, cookie_management and so on similar to the structure for the “Rules” and “Board” we saw in the Checkerboard homeworks.
...
EVALUATION:
Many of our users were people who we interviewed back during the need-finding stage. they previously expressed interest in testing the final product, so they were easy to call back for a round of testing.
BRIEFING
...
We will add scores according to the accuracy of the user on the test, and give them labels such as “bronze”, “silver”, and “gold” according to their performance in each difficulty level.
...
REFLECTION:
We learnt a bunch of things over the course of the semester, for example
i. the importance of prototyping, and that users will always bring forward issues that never occurred to us before talking to them
...