From CS 160 User Interfaces Sp10

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


Group Roles

All members were equally involved during the design phase of the application.

  • Charlie Hsu created the presentation and contributed screenshots and writing to the writeup.
  • Conor McLaughlin added functionality to various views of the implementation and edited the writeup.
  • David Zeng wrote portions of the writeup, added icons and assisted in debugging parts of the application.
  • Vidya Ramesh added functionality to various views of the implementation, wrote the README file, and edited the writeup.
  • Wei Yeh built the clip playing and editing interface, polished various views in the interactive prototype, and edited the writeup.

Source Code and Video


Problem/Solution Overview

Our application, iDance, 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 a dance group's productivity:

  • 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 arise 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 are able to rehearse dance routines much more efficiently.


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, reordering them as necessary. Lastly, the user can choose to name the routine. Routine creation is a 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: Instead of displaying the start and end times of the song next to the UI Slider, we decided to display the amount of time into the clip and the amount of item the clip has remaining. We also added an indicator so the user can track where they are in the clip that they are playing. Both of these will make it more apparently where the music is starting and playing from.
  • Issue from LoFi: Users wanted to rename clips and routines when they wanted to.
  • Changes: We added a button near the navigation bar to be able to rename a clip. The button solution is straight forward for new users and does not clutter the UI.
  • 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.
  • Issue from LoFi: Users were unsure as to the nature of the green button and did not know it added a clip between the 2 existing clips.
  • Changes: We added a button to make the adding of clips more apparent. Users can rearrange the order of the clips to move it to a specific place in the clips list.

Unimplemented Portions of the Interface

The following are annotated images of the unimplemented portions of our interface slated for the next iterations of our design. Greater detail on these unimplemented portions can be found below in the Prototype Overview.


The only real portion of our application that is unimplemented in terms of the interface is the Favorites view. However, even that view has been implemented in the most basic of ways with absolutely no functionality attached to it.

Favorites View

In later iterations, we will add buttons to enable marking of clips and routines as favorites.


The layout is already in place inside the Single Routine view. The play button will allow the user to listen to the clips inside the Routine's view and will automatically go to the next clip once finished with the current clip, acting like a playlist. The forward/backwards buttons allow the user to rewind or move ahead to other clips.

Storyboards of Tasks

Medium (Make a clip)

Charlie is the leader of his dance group, Group X. During one practice, he realizes that he needs to add a clip for their routine and calls a break to go to his iPhone and use his new application, iDance.

He starts off in the songs view and chooses the song "Bleeding Love". He sees that it has no clips so far, so he goes to add one clicking on the 'add new clip' button.

By moving the sliders, he is able to pinpoint the spot he wants to target. He also renames it from the default name. After making one more clip, he now has 2 ready to go clips for practice.

Easy (Edit an existing clip)

Later on in practice, Charlie realizes that he made a slight error in the clip length and will now go back to change it. He once again goes through the songs interface to see the clips that he made.

He goes into the intro clip to change the length of the clip to be a little shorter. The data is automatically saved, so he's done instantly! The information in the view has also updated.

Hard (Make a routine)

Later in class, Charlie is deciding what to do for the next practice. He decides they need to start putting things together, so he's going to combine the clips into a routine. He goes to the routines view to see if there's any routines that will be of use.

Seeing nothing he can use, Charlie decides to make a new routine. He decides to name the routine "Difficult Parts" because it's a very exhausting dance number.

Next, Charlie has to add clips to the routine and presses the "Add clip to Routine" button. This takes him through the song list and song view which he selects Bleeding Love and the clip he created earlier. After choosing the clip, he is taken back to his routine page, and he can see the clip he added.

After adding another clip, Charlie now has the routine he wants. He can remove them or rearrange them if he wants, but he seems to be happy with the way it is. Charlie's now set to make a magical performance!

Prototype Overview

Implemented UI Overview

Omitted Functionality

  • Creating favorite clips and routines

We omitted this because designating "favorite" clips and routines was more of a bonus usability feature than a task-critical feature. We will still be able to perform the core tasks of splicing music and creating routines without the Home page favorites, and we can still access songs and routines relatively quickly, even without the convenience of the Favorites page.

  • Repeat and prompt-to-play functionality

These functionalities were omitted because we believed that they were not necessary to demonstrate the basic tasks our application features. Playback of clips and routines is important, and enhanced features such as repeat and prompt-to-play were important features to our experimental users, but we felt these were supplemental convenience features whose absence would not detract from the core utility of the application.

  • Persistent data storage

This functionality was omitted in particular with regards to the Clip data type that we support in our application. The routines are persistent and stored across uses of the application if they do not contain clips, but the clips within them must be recreated during each use, therefore the routines with clips are not saved. This is because the song source which we are accessing in order to create the clip is not constant between the simulator and the actual iPod Touch device. This makes storing the clips a very tricky and difficult task that will require a lot of concentrated attention to implement. This functionality is not representative of the tasks that we wish to carry out on our application for this particular iteration so we decided to save adding this functionality for the next iteration.

  • Routine play-back

This functionality is the ability to play a routine so that all the clips are played in the correct order, immediately one after another. We decided to omit this functionality because it was not essential to the three tasks that we wanted to implement. During this iteration, we thought it would be best to keep the focus of our attention on carrying out the three tasks. We believe that adding this functionality will require a greater depth of knowledge of the Media Player framework and will require lots of planning to implement seamless transitions between the various clips. Since we already decided not add persistent data storage of the clips, it seemed logical to also leave this functionality for the next iteration.

  • General aesthetic and graphic design

General aesthetic design was very limited, and we hope to create more eye-friendly color schemes/interfaces in the next few iterations. However, for a first prototype, we felt interactivity and functionality was much more important than aesthetic design.

Wizard of Oz Techniques

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

Code Documentation

We used the Media Player framework that is packaged in iPhone SDK 3.0. This framework provides the basic functionality of playing and accessing the user's iPod library. However, it is restricted to read-only access and any changes made by the user must be stored within the application's data. Within the framework, the classes of MPMediaQuery, MPMediaItem, and MPMusicPlayerController were essential to the implementation of our application.

The documentation for the framework can be found here:

Presentation Slides And README File

File:Igroup int presentation.pdf


[add comment]
Personal tools