From CS 160 User Interfaces Sp10

Revision as of 07:30, 5 April 2010 by Vidya Ramesh (Talk | contribs)
Jump to: navigation, search


Group Roles

Problem/Solution Overview

Our application iCutDanceMusic is targeted towards dance group leaders and choreographers. Music is an integral part of the dance process, but dancers often use music in specific ways that conventional music players do not address.


Early on, we identified 3 tasks that reduce the productivity of a dance group:

  • Manually stopping and rewinding a section of music repeatedly
  • Attempting to seek to an exact time in the music for consistency
  • Needing to burn or compile sections of music for practice

These 3 tasks come about because of the need to practice a specific section of a song many times in order to perfect coordination. Even if only 10 seconds is wasted per cycle of stop/seek/rewind, this can lead to hours wasted over the course of multiple practices.


Our application seeks to resolve the issues above by allowing the user to dynamically splice and save clips of music from a whole song. By saving multiple clips and combining them, they will be able to create a 'routine' of clips, which can be used for performances or seamless integration of practicing many separate sections of music at once. By automating the process of starting/stopping a clip as well as putting clips together, dance groups may be more efficient in their practice methodology.


Easy - Editing a Saved Clip

This task has an user going into an existing clip and changing the length of the clip. Minimal movement is needed besides changing start and end times and saving, making this a fast and simple task for users.

Normal - Creating a New Clip

Creating a new clip requires more actions than editing one, making it a normal-difficulty task. Users first choose the song which the clip will come from, adjust the clip start/end times and then save and name the clip.

Hard - Creating a Routine

Creating a routine involves putting together multiple clips into a playlist organization. Users will repeatedly add clips and select the appropriate clip from the appropriate song. Lastly, the user must save the routine. Routine creation is difficult multi-step task, covering many of the application's features.

Revised Interface Design

Changes to Design Interface

After the user testing done in the Low-Fidelity Prototype assignment, there were a large number of changes we made to the design based on user feedback. Below, we display a table describing general changes to the design based on the user feedback.

Before (Lo-Fi) After (Interactive) Rationale for Changes
  • Issue from LoFi: While playing a cut piece of music, users sometimes had difficulty determining the length and location of the clip in the song. The scrubbers also brought up some issues; should they disappear or become disabled at certain points?
  • Changes: LALALA this is what we did to address this issue!
  • Also, renaming clips was an issue, and now we've fixed that too.
  • Issue from LoFi: Changing the order of songs in a routine with our lo-fi prototype required the user to add and remove clips until the desired order was achieved.
  • Changes: We realized that iPhone natively supports drag and drop for table view cells. We used this functionality to provide an easier method of reordering clips inside of a routine.
  • Also, we made that big "Add New Clip" button, see the presentation notes for more writing on this.

Unimplemented Portions of the Interface

For this section, I am planning to take screenshots of our final interactive prototype and draw on them with Photoshop, adding the following features:

  • Creating favorite clips and routines
  • Repeat, prompt-to-play for clips and routines
  • General aesthetic and graphic design

Storyboards of Tasks

Here, we will want to go through all three of our main tasks (renaming/re-marking a clip, creating a new clip from scratch, creating a routine). We'll want to make storyboards for all three, similar to those in our lo-fi prototype, but just drawn out as graphics, with interspersed screenshots.

Prototype Overview

Implemented UI Overview

Here is a caption for the song list view (picture is a PLACEHOLDER).

Song List View [reference to picture of view]

This is the main view to see all the songs the user can create clips with. Accessed from the 'Songs' tab, it is hooked up to the iPod music library to display all the songs the user owns. I don't think this is actually implemented in the prototype Each song has a counter on the right to display how many clips exist for the song. By default, each song has 1 clip, which is the entire song itself. Selecting a specific song takes the user to that song's clip view.

Song Clip View [reference to picture of view]

This view allows users to see the clips they have made so far for a specific song. The top bar has a back button which goes back to the Songs View. The edit button allows for users to rearrange and delete the clips they have already created. We used the default table view, which has red buttons on the right side to delete. [reference to picture of edit view] At the bottom of the page is a button that allows users to create new clips, which will take them to the Play/Edit View. Choosing a clip can either take the user to the Play/Edit view or back to the Routine View if they were creating a routine.

Play/Edit View [reference to picture of view]

This view is the main interface that users will be working with to create, edit and save views. The top has information about the song and directly below that is the name of the clip. For a new clip, that information will be blank until it is saved. To rename a clip, merely double-tapping on the name of the clip allows the user to change the name. (NO, WE USE A RENAME BUTTON) The majority of the editing is done on the custom UI slider, which has 2 movable sliders that indicate the desired start and end of the clip. Just like the regular iPhone, the information displayed on the left and right of the UI slider is the amount of time that we have played into the clip (OR SONG?), and the amount of time remaining in the clip(OR SONG?). There is also information above the slider that displays the start and end time of the clip to the user. The bottom row of the view has buttons to stop/start, repeat (will this be implemented? NO) and save the clip. When the user chooses to play the clip, a yellow indicator appears in the slider to show where in the song the music is playing. When the user saves a new clip, a pop-up will appear to name the clip. When the user saves an existing clip, a pop-up will indicate that the information has been saved.

Routines List View [reference to picture of view]

Like the song list view, this view displays the saved routines that that user has already created. There are buttons to edit the existing list as well as to add a new routine. Choosing the edit function allows for the user to delete an entire routine, or change the order that the routines are displayed. Selecting a routine takes the user to that routine's view.

Routine View [reference to picture of view]

A routine view contains the list of the clips that the routine comprises. The navigation bar contains the name of the routine, an edit button and a button to go back to the Routine List page. Editing allows for users to delete/rearrange the clips in the routine. At the same time, the button to go back to the Routine List turns into an "Add clip" button. This allows the user to add clips to a routine, as well as prevents the user from going back to another while trying to edit the routine. Below the navigation bar is another bar to play the clips on the routine in order. The bar contains 3 buttons to play/stop the clip, and to advance/return one clip.

Check this with the final implementation of the Routine View. Make sure to check that we addressed the difficulty of adding an initial clip to a new routine (see lofi prototype)

Omitted UI

   *  Creating favorite clips and routines
   * Repeat, prompt-to-play for clips and routines
   * General aesthetic and graphic design 
  • Creating favorite clips and routines

This was left out because it was not a part of the three tasks.

  • Buttons to add clips/songs to favorites

This was left out because it was not a part of the three tasks.

Wizard of Oz Techniques

We used no Wizard of Oz techniques in this interactive prototype.

Code Documentation

Someone needs to talk about how we utilized the iPod API library here!

Presentation Slides

Last updated: almost midnight Sunday

File:Igroup int presentation.pdf

File:Igroup int presnotes.pdf

[add comment]
Personal tools