InteractivePrototype-Group:iGroup
From CS 160 User Interfaces Sp10
Contents |
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
Videos
- 'Easy' Task Video (Editing an Existing Clip): Media:igroup-int-easytask-narrated-video.mp4
- 'Medium' Task Video (Cutting a New Clip): Media:igroup-int-medtask-narrated-video.mp4
- 'Hard' Task Video (Creating a Routine): Media:igroup-int-hardtask-narrated-video.mp4
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.
Problem
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.
Solution
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.
Tasks
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 |
|---|---|---|
 |   |
|
 |  |
|
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.
Favorites
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.
In later iterations, we will add buttons to enable marking of clips and routines as favorites.
Prompt-to-Play
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. The currently playing clip will be highlighted and a small slider will pop up in the tableviewcell underneath the song metadata to inform the user of where the play point is in the clip. The tableview will also automatically scroll for the user as the currently playing song moves beyond those on screen.
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
 Song List 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. Selecting a specific song takes the user to that song's clip view. |
 Song Clip 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 editing interface, which has red buttons on the left side to delete table entries. Users can also rearrange clip order by dragging them on the right. [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: This view is the main interface that users will be working with to create, edit and save views. The navigation bar contains the name of the clip and a button to rename the clip. 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, and the amount of time remaining in the clip. 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 and save the clip. When the user chooses to play the clip, a green indicator appears in the slider to show where in the song the music is playing. At the moment, all data is automatically saved when the user edits the clip. |
 Routines List 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. Choosing to add a new routine takes the user to a routine page with no clips and a default name. The new routine is automatically saved into the routines list view. |
 Single Routine 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. The "Add Clip to Routine" button allows the user to add clips to the current routine. Finally, the "Rename" button allows the user to rename the current routine. |
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: http://developer.apple.com/iphone/library/documentation/MediaPlayer/Reference/MediaPlayer_Framework/index.html#//apple_ref/doc/uid/TP40006952
Presentation Slides And README File
File:Igroup int presentation.pdf
