Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Corrected links that should have been relative instead of absolute.

Design

Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).

DJ Interface


This is the interface used by the DJ to manage their music library, edit and create playlists, and start playing a playlist/open it up for voting. We elected to have two main panes. One displays all the songs in the library, while the other allows for the editing of playlists. This choice of one detail pane for the music library was motivated by our paper prototyping when we found out that multiple panes (such as one for song details and one for album organization) led users to be confused about how to use the interface. Another key design choice was to allow users to add songs to a playlist by dragging them. This choice was motivated by our paper prototyping when all the testers tried to drag songs but weren't 'allowed' to do so. In addition, we allowed for multi-select drag after computer prototyping and realizing there was an efficiency problem. An 'add song to playlist' dialog box was an
alternative to dragging but we found dragging to be much more intuitive and efficient for users.

...

Computer prototyping showed that plus and minus buttons were more compact than words on a mobile phone device enabling the buttons to stay on the same line. In addition, neutral was changed to a vote count to give information to the users about how popular a song was. A vote count also makes it clear whether or not the users vote had been counted, a visibility problem noticed from the computer prototyping. Overall, the design of the voting interface was driven by simplicity and this fact was positively commented on in the heuristic evaluations.

Implementation

Describe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface.

...

The voting interface was implemented within the framework of the existing open source application that we branched. This framework used jamon with linked java classes to handle requests. In addition to the templates, jQueryMobile was used, which adapted html compiled in a set syntax into a nicely displayed list that scales with various mobile platforms. This ended up working very well for us and, though it took a lot of tweaking, eventually made the interaction between music database and end user more simple.

Evaluation

Users

Describe how you found your users and how representative they are of your target user population (but don't identify your users by name).

User was a graduate student with some interest in music, not much in parties. User was friend.

User is an undergraduate with interest in music and parties. User not interested in throwing parties. User was friend.

User is also an undergraduate with interest in music and parties. User is somewhat interested in throwing small parties. User was friend.

Briefing

Users were given the same briefing from the paper prototyping.

Scenario Tasks
Add Music
  • Add the album "The Fame Monster" by Lady GaGa to the library.
  • Add the "Music" folder to the library

...

  • "Like" a song
  • "Like" a song, then change it back to neutral
  • "Dislike" for any offscreen song

Usability Problems

 List the usability problems you found, and discuss how you might solve them.

Many users identified problems with drag and drop functionality with multiple items(Minor).  Swing's interface for this is somewhat less than intuitive, and more time could have been spent here.

...

User would have liked ability to save playlist using keyboard shortcut versus file menu (Minor). Add standard keyboard save shortcut.

Reflection

Discuss what you learned over the course of the iterative design process. If you did it again, what would you do differently? Focus in this part not on the specific design decisions of your project (which you already discussed in the Design section), but instead on the meta-level decisions about your design process: your risk assessments, your decisions about what features to prototype and which prototype techniques to use, and how you evaluated the results of your observations.

...