Scenario

Josh lives off-campus, and doesn’t have any musical instruments at his apartment. He goes to his friend Bob’s fraternity, and is fascinated by Bob playing piano in the fraternity. Josh knows how to sing, and has wanted to learn piano for a long time.

Josh says to Bob that as a singer, he can listen to someone singing and sing at the same tone himself. Bob is amazed, and says that he would not be able to play a piece of piano music he heard someone play. Josh realizes that even though he can listen to a piano and sing accordingly, he doesn’t actually know what exact musical notes they are. Hence, he too would not be able to play on a piano the songs he sings so well!

Both Josh and Bob are eager to receive ear training, a process by which, given enough time, they will be able to hear a piece of music and play it at once.

Individual design sketches

Joy:

Design 1 - Generic Web App

This design allows the user to explore the application as they like, and they can choose to enter “Train” mode, which has a series of test-sequences, arranged by difficulty, that the user can try. Train mode is where the ear training happens. The app will play a tone/sequence of tones that the user guesses, and the app will give feedback in the form of displaying correct and incorrect notes on the music bar above, as well as the letter notes. Entering settings mode allows the user to change basically every aspect of the app experience.

Design 2 - On a phone, with little screen space.

This design simplified the previous design down to its bare necessities.
Most difficult was allowing comfortable interface with a piano keyboard, and still getting enough feedback on a small screen.

Design 3 - Game!

This seemed a natural extension of a piano app. If we’re catching keyboard input and playing music, there’s no reason not to integrate them into a “reverse guitar hero” game. The game would have two modes, seeing notes and playing them, a la guitar hero, and the reverse, hearing notes and playing them (feedback in form of musical notation and applause). One concern is that the game is not very stunningly musical on easy levels.

Pramod

Design 1:

It allows users to ear train. After hitting start, machine starts playing notes according to difficulty level, and the user guesses the notes by playing them on keyboard. User can also share expertise (which difficulty level he is doing) to his friends. (Hitting “share expertise” button will give him a link, which states his expertise, to email to other people.

Design 2:

It allows users to “free-play” keyboard as well as record what they play. The user can extract the recorded music and get it as a text of notes, to refer at a later time or email to friends.

Design 3:

It’s a gamified version which maintains a scoreboard of people who play in the same computer.

Keshav:

All designs have a create account page. A home page which is a sort of list of items. And lesson pages. The designs differ on, among other things, how everything is structured.

Design 1

Each item on the list is the name of a song. The songs listed on top are easier, the songs further down are tougher. Clicking on the song name, opens up an interactive ear training session where you are trying to pick upthe notes of that particular song. All lesson pages look exactly the same, and only differ on which song the user is being trained on.

Design 2

Each item on the list is a lesson. Example lessons would be “Introduction to (the layout of a) piano”, “How to give input using the keyboard”, “Ear training - beginners”, etc. Not all the pages look the same. In addition to the ear training lesson pages, there are also “informative pages”, which present material such as learning about the layout of a piano.

Design 3

In this design (although not drawn out properly), the user is supposed to have a longer form to fill out in order to enter his previous experience. When the user logs in, he already sees a bunch of items on the list marked as “Done”. These will exactly be the things that the user probably knows as inferred from the information provided while creating the account. The user is, however, given the option to go through these courses by marking them as “todo”.

Design and storyboards

After Josh (from the scenario) returns back to his apartment, he browses the internet, and he finds the following apps. Let’s walk through what Josh finds and does. (Later, after going through each of the apps, he also lets Bob know.)

Storyboard 1 : Explore Piano App

This design is simple and has only two modes -- play and train -- both of which have a similar UI.

Play Mode:
Josh is defaulted to the play mode when app starts. He sees the keys annotated with their notes and the respective keys in the keyboard to play them (he can tell the keyboard keys, as they have A, S, D, F,..., and he infers the other annotated letters are notes, as they go from A to G). He starts pressing the keys in the keyboard, and hears the Piano play, and at the same time the keys in the interface turned yellow showing what keys he pressed. He sees the “record” button, and plays some random music. He sees that the “record” button turned to “stop” button so he know he can stop. Then, when he presses “extract”, he sees the notes he played. He is excited, and sends that to Bob.

However, he found no real training of his ear, so he hit the “train” tab to go to “train mode”.

Train Mode:
He sees some more things in this mode. First, he sets his difficulty level to beginner. Then, he presses the big button with triangle inside it, which he thinks is “start” button (affordance!). Then, the computer plays a note. Since he didn’t expect it, he didn’t hear it properly. He looked around the screen to play it again, and saw a “replay” button on the side of “Now Playing” pane, which lets him know that the computer is playing notes from the song “Happy Birthday”. He pressed “replay,” and heard the note again. He inferred that since it’s a “train” mode, he should guess what that note is, so he presses a key. He knew he pressed a wrong key, because there was something red and green on the bars that looked like sheet music. He didn’t know how to read it, so he went to settings to try to find whether he could change the display. There he found that he could display it as letters “A through G,” which was more convenient for him. He chose that, and trained for a long time. He finished the whole song, and came back later to find him on the same screen. He had seen a “next” button besides “Now Playing,” which he now found the importance of. He hit “next”, and started training on the next song.

Storyboard 2 : Lesson Plan Tutor

This design is significantly more structured and complicated.

Josh enters the website, which suggests that he should create an account. He obviously ignore the suggestion and jumps straight to the content. His navigation page looks like the “table of contents” page of a book, giving him the feeling that each of the listed items is a chapter of some sort. The correct meaning is close, i.e. each listed item describes a lesson plan for learning piano. He chooses the first one, called “Introduction to Piano”, and is presented with a rendering of a piano keyboard that he can click and hear. The page details how on the right there are keys of higher pitch, and on the left there are keys of lower pitch. It also explains what a pitch is in the first place. The next lesson is about ear training. He presses the start key, and hears a tone. After that, he sees a “guess the note” text show up. He clicks on a piano key he thought he heard. But he is wrong, and the key he clicked gets a brief red cross, and a different key gets a brief green check. This tells him what the actual answer was and he realizes he guessed “too high”. He hears the next sounds again in a few seconds time, and is eager to do better.

After staying on for about 15 minutes. Josh realizes that he does not want to start from the beginning the next time he returns, and that he would rather continue from where he left of. So he decides to create an account.

Storyboard 3 : Game

Josh finds another ear training app, which was a game.
As soon as he sees the interface, he knows it’s a game because he sees a guitar-hero-like interface, which he had seen before. He sees the “Play Solo” and “Invite” button on the right. He infers that he can play with Bob because of “invite” button. On clicking invite, the button changes to a text box with a link in it that is already selected. Below the link, it reads “Share this link with your friend to invite him”. Since Bob is not around right now, Josh just copies the link, opens a new browser window and pastes it on the address bar. He can now see a scoreboard, and his actions on each of the browser sessions affect the score of different people on the scoreboard.

Analysis of storyboards

Storyboard 1 : Explore Piano App

On the first storyboard, the user gets everything on the same page. This has some advantages and disadvantages. The advantages include efficiency (everything is within reach) and flexibility (click on the settings tab, and personalize your display as you wish to).

Learnability is sort of at a midpoint. It is good since the user can just click around on the page and figure out what the different things on the page do. However, the user needs to be willing to explore. Not all the buttons’ functionality is obvious by just looking at the page.

The user gets immense flexibility, by getting a large number of modifiable settings, and also the option to set the difficulty level. However, the flexibility comes at the cost of safely. Since all the options are provided to the user on one page, is it much more likely to click something by mistake when not intending to do so.

Storyboard 2 : Lesson Plan Tutor

On this storyboard, learnability is really high since the lessons can be structured in a way to introduce different features one at a time, including a walkthrough of the features. This does not necessarily have to be limited to introducing concepts of music to a novice user, but can be extended to introducing different aspects of the UI (how to play the piano using the keyboard, keyboard shortcuts). It also allows us to make sure that we don’t present to the user something the user doesn’t understand (i.e. never display sheet music before we are sure the user understands musical notation).

Although the components of any particular page is not flexible, the user has flexibility in the sense that he can go to whichever lesson he wants to gain from. Moreover, While creating an account, the user can specify his previous experience, and hence the lessons on things the user already knows can be automatically marked as skipped. As such, the interface does a good job of catering to both complete novice users and intermediate users, encouraging them to only look at the stuff they will find most beneficial.

The structure of the lessons allows the UI to be designed in a way as to be less cluttered, and hence safer.

Storyboard 3 : Game

This storyboard is sort of the first storyboard + social aspects added. As such, regarding flexibility, efficiency, learnability, safety it shares the same state as storyboard 1. However, it has the additional option of inviting a friend to join you and hence makes the platform more social.

Summary of analysis

All our designs allow the user to use their computing device as a musical instrument (hence allowing Josh to play and practice piano even though he does not own one), and all our designs also enable ear training.

The second storyboard does a better job at introducing novices to piano. If Josh knows how to sing but does not really know how the keys on a Piano are laid out, we would like to have the introduction as presented in storyboard 2.

Storyboard 1 and 3 are better for Bob since he doesn’t have to create an account, and he is not bothered by all the extra tutorials he does not care about. Storyboard 3 also allows Bob and Josh to have a good time ear training together without requiring Josh to come over to Bob’s fraternity.