Scenario

It's Friday night and Aaron, an avid party-goer, wants to throw a party. He has a ton of music but doesn't want to have to order the songs in a coherent manner or spend the entire party handling the music when he could be enjoying his friends. He's got the music and the sound system but none of the patience.

Aaron is focused on two things – having fun and throwing a party.

  • Goal: Throw a party without all the work.
    • Minimize time during the party dedicated to music management
    • Optimize number of songs heard that will be enjoyed

Aaron (admin user) has just heard about this awesome new app TroupeTunes. He goes through the setup process and proceeds to add music to his library.

  1. He adds music to the library (details through the GUI)
  2. He selects the music that he would like to be available to his guests and saves it to a playlist (details through the GUI)
  3. He sets the desired playlist as active – this marks the list as the one for attendees to vote on
  4. He goes to the webapp and votes for the songs that he likes
  5. He punches the "START THE PARTY" button, which begins playing music

It is 11pm and Aaron's friends are all in his basement listening to music but wishing "their song" would come on. He tells them they can go to http://aaronsparty.com and vote for whichever songs they would like to listen to. Julia (regular user) is attending the party and goes to the URL on her smartphone.

  1. Julia loads the page
  2. Julia marks several songs as ones that she likes
  3. Julia marks more songs as ones that she dislikes
  4. Julia submits her votes

When the song that was currently playing ends, one of the songs that Julia voted for starts to play next and she can't believe it. With the help of TroupeTunes, Aaron's party goes well and he doesn't have to spend any time away from his friends messing with an ipod – his friends vote like Julia and hear what they want to hear.

Designs

Design 1:

Storyboard

Aaron starts the program and logs in as the admin. He is presented with the main control screen. From he here can views all the songs in his library, playlists he created, edit his library/playlists, and 'start the party'. He realizes he wants the new Lady Gaga song. To add the song to his library he clicks on the upload song button which brings up your standard file dialog. From here he browses to the location of the song and clicks the upload button. Song added! There is a party coming up so Aaron wants to create a new playlist. He clicks the playlist button on the side then the new playlist button. This brings up a dialog where he enters the name and a description. Now that the playlist is created he can search through his library and drag songs to the playlist area or right click and ad them to the playlist. Now it's the night of the party so Aaron logs in and clicks playlist. He then sets the playlist he recently created as the active playlist. Now he can click the 'Start Party!' button and the music will begin playing and partygoers can now vote on the songs they like/dislike.

Julia goes to arronsparty.com to vote on the songs she wants to hear. She is directed to the "neutral" view which displays all the songs in the playlist in a scrollable list in alphabetical order. To vote for a song she drags and drops a song on the green, 'like' side. To vote against a song she drags the song to the red, 'dislike' side instead. To see the songs she's liked or disliked she clicks on the 'like' or 'dislike' button. If she were to click on the 'like' button the songs in the middle would be all those she 'liked' and the 'like' side would be replaced with a gray, 'neutral' side.

Assessment

Learnability

The design for the library is very similar to that of grooveshark and other music programs. Therefore, the learnability curve should be relatively low. In addition, the file dialogs are the standard file dialogs so learnability will again be high. The drag and drop voting screen is more difficult to learn as it isn't like any normal voting interface. The songs have a textured touch to them to give an affordance of dragging which should aid learnability. The green, red, gray color scheme was picked to aid in learnability.

Visibility

The visibility of the vote screen is limited as one must use the scrollbar to see more songs and can only see all the songs in one category (like, neutral, dislike) at a time. In addition the screen doesn't display how many votes the songs have gotten from other users. The visibility of the active playlist is limited. The music library screen takes up a lot of screen estate to improve visibility of the songs in the library.

Efficiency

The vote screen is less efficient than a standard up/down arrow click voting system as dragging and dropping is slower than a click. It could also be annoying to have to drag and drop ~50 songs. The alphabetical order aids in knowing where to find a song although it may take a long time depending on the song's relative position. The admin screen has a search field to improve the speed of finding songs if the library is very large. Adding songs one by one with a dragging operation is not efficient. Creating and deleting a playlist is quick although as mentioned actually adding songs could be slow. When songs are in the same folder, uploading them will be more efficient by using the standard crtl/shift options for multi-select.

Error Prevention

Drag and drop makes it harder to place a song in the wrong category over a click. Although to correct an error, one has to change views which is less efficient. To delete a song from the playlist one simply drags it off the playlist bar. If the wrong playlist is started the admin selects the correct playlist and sets it as active to fix the problem.

Design 2:

Storyboard

Aaron starts the web app and sees this view. He notices there is no music in any of the panes. He realizes he needs to add music to the library

He then goes to the file and edit menu. Under File, he sees and option for Add Folder to Library. He clicks this and is presented with the standard open file dialog for his operating system. He conveniently has all his music in one folder, and selects it. He now music in the panes. He currently has Music Library selected on the left, and he sees a listing of artists, albums and songs. As he clicks an artist or an album, the panes filter by the selection. He clicks Rick Astley on the artists pane, and then sees all albums and songs by him in the other panes. He drags and drops a few of the songs to the pane labeled Current Playlist. He sees he can edit the vote count to seed particular songs, but he decides to not do this. He goes back to file, and saves the playlist. He notices the playlist is now listed on the left pane under Music Library. He then uses the option Set Current Playlist As Active to have this playlist listed. He also notes a new option for Active Playist appears on the left hand side.

He then hears the first song being played. He goes to aaronsparty.com, and sees his songs listed. By each song is a 3 position slider ranging from hate to like. As he drags it, he sees the vote count increment or decrement by one. The listing is by order of votes, so he sees the song drop to the end or beginning after releasing the slider. He goes back and quits the webapp to stop the music.

Assessment

Learnability

The design for the library and playlist is not radically different from the interface most computer music players use. The file open/save dialogs are the standard operating system dialogs, so learnability should be quite high. Aaron has to remember to set the playlist as active, and that this will automatically start playback of music. It might be better to have a way to set playlist as active to activate listing, but control playback in another fashion. For the vote listing, the user is likely familiar with sliders, resulting in a easy to learn interface.

Visibility

Visibility of the current state, the songs listed and their votecounts is very clear from the users votelist perspective. The admin would have to check the "active playlist" from the library to see the current state. There isn't much affordances to the admin that making selections in the various library panes causes filtering.

Efficiency

Adding songs is facilitated by having an add folder option, which recursively checks subfolders for music files. If the user has an organized file structure, this works well. Voting is a relatively quick swipe. For the first users, going through all songs may be troublesome. Since all songs have the same votecount, voting on it will instantly move the song all the way up or down the list. Adding songs to the playlist is a drag and drop operation, with normal options for selecting multiple songs at once. It can be inefficient if the user remembers only some of the details about a song he wants to add(remembers only the album or title).

Error Prevention

Undoing votes is an easy drag in the other direction. However, the user must find the song again as it moves in the list. The admin can select a song from the playlist and delete it with the delete key. There is not an easy way to stop playback of the incorrect playlist, the user would have to quit, or set another playlist as active.

Design 3:

Storyboard

Aaron starts the webapp and notices that his library is empty. He uses the "Add" field/file-dialog box at the bottom of the library viewer pane to add folders or individual files to his Library. These files populate the tree on the far left pane which is sorted as shown with Root->Artist->album. He wants to add Rick Astley's "Never Gonna Give You Up" to a playlist, so he either scrolls down the full list that is in the library view by default or utilizes the tree to narrow his view to Rick Astley, or even to Rick Astley - Whenever You Need Somebody. If he would prefer searching using a name, he can begin typing it in the Search box at the top of the Tree View pane. This results in a continuous update of the listing of songs reflecting those that match his query. Upon selecting the song, he can drag it to a playlist on the right in order to add it. Once he has a playlist he likes, he can set the playlist as active by clicking its tab when it is already the foreground tab. Multiple playlists are rendered as separate tabs and the active tab dictates the playlist to which drag and drop songs are added. Once the playlist is set to active, he begins to hear the music play. Exiting the webapp will stop the music playing.

Aaron then goes to arronsparty.com and sees this screen. He uses the up and down arrows the increment or decrement the number of votes for each song by 1. These scores are stored when he presses the vote button, and their impact can be heard when the next song is played.

Assessment

Learnability

The design of the library and playlist management screen is very much like the design of media players such as foobar2000. The file dialog that is triggered is the standard operating system dialog that a user sees when attaching a file to gmail or adding a folder to Winamp so learnability should be pretty easy. Assuming he remembers to set the playlist as active, the music will begin to play and party-goers will be able to vote. For voting, any user familiar with Reddit, Digg, or even youtube voting should be able to pick up the effects of the up and down arrows rather quickly.

Visibility

The visibility of the current state is very clear – votecounts are shown numerically and update upon a yay/nay vote. The admin must set the active playlist from the library in order to see their state. The tree view should grant some affordances that the tree will help filter to a subsection of the library in much the same way that the "folders" view of explorer filters to the folder's contents in windows. There needs to be a better affordance to notify the user that clicking an already active tab will make it start to play.

Efficiency

Although the add dialog allows the selection of folders, multiple files or a single file with great efficiency, there are no affordances that this is the case. Voting is also rather efficient, as the default action is no action and an up or down click can be quickly made. As songs are listed by the order in which they are when the page is loaded and not re-ordered while still voting, the songs should appear in a logical order without any huge jumps. Adding songs to the playlist is a drag and drop operation, with normal options for selecting multiple songs at once. The query box can be incredibly efficient if it is extended to search all metadata of a song rather than just the artist or title. As-is, it improves efficiency.

Error Prevention

If a user mis-votes, it can be undone by pressing the same button – the up arrow is an upvote toggle, as is the downvote. As the list an individual user sees is not re-ordered during voting it should be quite simple. Voting is not finalized until the "Vote!" button is pushed. Removing accidentally added songs to the playlist is easy, they can simply drag the song back onto the library pane to remove it. If the admin begins playing the wrong playlist he can either select the correct playlist or click its tab again to toggle activeness off.

  • No labels

1 Comment

  1. Anh Dang Viet Nguyen

    - Clear scenario and analysis.

    - Since this is an interface for planning, DJ interface may want to have some focus on calendar, scheduling, and song order.

    - For user phone interface, focus on quick ranking and voting.

    - One thing to think about is that clubs hire DJ because DJs are the people who can read the crowd mood and play the suitable song to control the mood. So live playlist editing interface is also important.