From CS 160 User Interfaces Sp10

(Difference between revisions)
Jump to: navigation, search
(β†’Video Prototype (35 pts))
(β†’Media and Raw Data)
Line 231: Line 231:
=== Observation Logs ===
=== Observation Logs ===

Current revision as of 00:22, 16 March 2010


Introduction and Mission Statement (5 pts)

The system being evaluated is a complete lo-fi paper prototype of our music clipping and editing software, which is targeted specifically at dancers and choreographers. The purpose of the project is to eliminate the need for repetitive and tasks that distract from the actual process of dancing. This includes having to repeatedly search for the same point in music for a choreographed piece or splice multiple songs together for a routine. In order to fulfill this purpose, we had three practiced dancers and choreographers go through the exercise of conducting three practical application tasks (clipping a song, editing a pre-existing clip and saving it, and creating a new routine) to see if our current lo-fi prototype indeed reaches the standard of our purpose. Following from this, our mission is to unobtrusively use mobile technology to help dancers become more efficient and better in their respective dances or choreography.

Team Member Roles

All users were equally involved in design and creation of the lo-fi prototype.

  • Charlie Hsu scheduled two target users, facilitated two tests, took video of another test, wrote the video script, and edited the video/stop animation.
  • Conor McLaughlin wrote mission statement, wrote part of results and methods, wrote discussion, acted as observer in test 3, narrated and acted in the video prototype.
  • David Zeng wrote prototype & results, edited discussion, acted as computer in all tests/video and recorded the main video.
  • Vidya Ramesh wrote the other parts of results and methods, wrote the consent form, acted as a facilitator in one test and a camera person in another test, and contacted one of the target users.
  • Wei Yeh acted as observer in all three interviews, edited the stop-motion animation, and danced in the video prototype.

Prototype (10 pts)

We made an iPhone bezel out of cardboard that contained all of our screens. The interface was made with index cards, along with metallic clips to imitate some of the movement and to create handles for the smaller objects. We used some color to distinguish among buttons and to make the interface a bit more intuitive, as well as aesthetically pleasing.

Image Caption
  • Left: Various buttons and small cutouts. Includes: keyboard and save pop-out (appears when clips/routines are saved), delete/add/done buttons for when users have pressed the edit button.
  • Right: Our iPhone bezel with our home page. The home page is the favorites screen with the stored favorite routines and songs of the user. The main navigation is done by the tabs at the bottom.
  • Top Left: The song library page, accessed from choosing the songs tab. Stores all of the songs that will be used in the application. Used when accessing clips (Tasks 1 & 2) and choosing clips for a routine (Task 3)
  • Top Right: The clips page. Displays all clips of a certain songs and allow user to create/edit clips. Choosing 'edit' pops up red delete buttons and replaces the 'edit' button with the 'done' button. Show in task 2 and 3 to edit clips and add clip to routine.
  • Bottom: Another clips page, with no clips. User can still play the whole song. Creating clips adds more to the page. Shown in Task 1 & 3.
  • The main page for clip editing, which uses a horizontal layout as opposed to a vertical one. The green and red sliders indicate the start and end of the clip which is currently being played/edited. The exact start and end times are displayed as well as the song name. The clip name is at the top. The repeat button allows for a user to continuously replay a clip. The play/stop button starts a clip at the red slider and ends at the green slider. The user can save the changes he made using the save button. Used in Tasks 1 & 2.
  • Top Left: Routine information for a specific routine name (displayed at the top). The play/forward/backward buttons allows a user to shuffle through the clips that they have put into the routine. Choosing edit removes the buttons as well as pops up delete buttons on the far right, and add buttons in between the clips.
  • Top Right: The main routine page, accessed from the routines tab. Displays all the currently saved routines and allows users to create a new routine.
  • Bottom Left: The routine overlay for when the user chooses to edit a routine. All buttons displayed as well as the done button.
  • Bottom Right: The routine overlay for creating a new routine. Empty, except for a single add button.
  • All pages shown in Task 3.
  • A complete view of all the components of the lo-fi prototype. Songs are on the left, routines are on the right, with the clip view on the bottom and some extra parts on the top.

Video Prototype (35 pts)

iCutDanceMusic Video Prototype: Media:iGroup_lofi_prototype.mp4

Creation Process

We begun the creation of our video prototype by creating the stop-animation clips of our three tasks. This was done by filming a video with one of our members' digital cameras; the computer enacted out a performance of the task using the paper prototype, and the cameraman held the camera straight above the paper prototype. We then took snapshots of the video at times relevant to the task, and imported these in as a "still image sequence" into our video editor, Sony Vegas.

We then created a script and backstory for our video prototype, and filmed the scenes. We then recorded narration as the narrator watched the videos, to create accurate voiceover timing. Finally, the video was put together using Sony Vegas.

New Techniques

By capturing the stop-animation with snapshots taken from a continuous video, we were able to focus one person's complete attention on performing the task, and another person's attention on getting a good shot. This made the creation of our stop-animation relatively quick; we further specialized by having our "computer" in user testing perform the task. Using a continuous video to pull snapshots from also allowed the task performer to make mistakes with little consequence: we'd simply continue rolling the tape and repeat the erroneous action once more. Using a video also allowed us to comment via audio throughout the filming: our videographer could state "do not capture this section," as a reminder to refrain from capturing snapshots during that section of the video.

From a video-editing standpoint, we sped up a lot of our raw footage in the production of our video prototype. This allowed the viewer to see the task at hand (a dance group practicing + music management), but alleviated boredom and redundancy when displaying the large amount of time a music seek takes.


SAM Animation was our largest difficulty in the video editing process. We attempted to create an animation at 3 frames per second, and SAM Animation exported a video with tags set for 3 FPS, instead of a standard 30 FPS video with redundant frames. This made the export from SAM animation extremely difficult to integrate with other video editors and live footage shot at 30 FPS. When rendered in Sony Vegas, the SAM animation clips became a blurry mess due to the rendering software attempting to blur together 3 FPS into 30 FPS. Resolving this problem took hours: we finally found a built-in alternative to Sony Vegas where we could import a still-image sequence and set the velocity of the sequence. Though not perfect, this minimized blur on the stop-motion animation.

We also had difficulties due to the assignment of roles. Conor was slated to do the narration, and Charlie to do the video editing. Re-recording narration was much more difficult with two people than it would have been, had Charlie been doing the narration as well as the video editing. In this case, Charlie could have simply redone the narration as his own leisure, with knowledge of how he wanted it timed, as the needs arose, instead of needing to coordinate with Conor.


We decided a heavier focus on narration would be better than an user attempting to explain his/her thoughts out loud, and we ended up having zero audio taken from the filming of the backstory. We felt this was a good decision and a success: not only were we unprofessional actors to begin with, but voicing out thoughts also seemed tacky and forced. Liberal use of narration was the correct choice.

Using a commercial-level video editor also allowed us to integrate audio at advanced levels. We were able to import narration and music, splice the audio as needed, and adjust audio levels for a consistent volume throughout.

Method (5 pts)


  • Task 1: Cut a new clip and save it [Medium]
  • Task 2: Edit an existing clip and save it [Easy]
  • Task 3: Create a new routine with pre-existing clips [Hard]

It should be noted that the tasks do not ascend in order of difficulty because a user would most likely first use the application with no prior clips saved, so the initial task is that which would come foremost upon first using the application.


The team arrived fifteen to twenty minutes prior to the appointed interview time and set up our equipment. Ten minutes before the appointed time the greeter, the one who e-mailed the volunteers in this case, went down to greet the user and bring them to the test area. Seating was arranged so the computer sat either across or next to the user while the facilitator always sat next to the user to be ready to answer any questions. The videographer set up behind the user while the observer sat some distance away from the user so as to not serve as a distraction. The facilitator explained the process and intention of the experiment and explained each individual's roles upon which we introduced ourselves and tried to make the user feel more comfortable. After he or she signed the consent waiver, we proceeded with the experiment in the process laid out by the LoFi article. After completion, we asked the user's thoughts on the process and the interface itself, and then proceeded to conclude the experiment and thank him or her with an appropriate thank-you gift we had prepared (Jamba Juice gift cards).

User #1

The first user was the choreographer and captain of an ethnic dance team based out of Cupertino. The dance team is made up of UC Berkeley students and competes in multiple nationwide competitions ever year. The choreographer uses a software program called Sony Acid to currently mix and edit music. The user was selected because of her position on the dance team.

Testing Environment #1:

The first user test of the low fidelity prototype was conducted in the outdoor tables behind the Free Speech Cafe. Luckily, we were able to grab two tables to ourselves in the farthest corner of the patio area and there was no other people in the surrounding area.


  • Greeter/Videographer: Charlie
  • Facilitator: Vidya
  • Observer: Wei
  • Computer: David

Overall Observations :

This test went extremely well even though it was the first low fidelity prototype test with an actual potential user. The user seemed to feel more at ease with the test once we explained that the test was not testing her abilities, but rather the prototype. However, the user did remark multiple times that she felt pressured or stressed out when she felt unsure what to do. She seemed more at ease and amused with the testing when the "computer" started singing in order to imitate music playing. This particular user was very good at thinking out loud and rarely needed prompting to voice her thoughts.

User #2

The second user is one of the co-captains of a prominent dance team on the UC Berkeley campus. Their members include individuals from the local areas/schools and each member dances in a choreographed pieces ranging multiple genres of dance. The user herself was chosen because she is both a seasoned dancer and choreographer, so she had experience on both sides of the dance isle.

Testing Environment #2:

The second user test was conducted in one of the alcoves in the upper two floors of Soda. Unfortunately, we were forced to share the alcove with another group of students, but there was only a minimal amount of ambient noise and we were able to get a good section of the alcove's table to ourselves.


  • Videographer: Vidya
  • Greeter/Facilitator: Charlie
  • Observer: Wei
  • Computer: David

Overall Observations:

The test went well, but we ran into more usability problems than with the initial interview. The user seemed to not feel at ease and had to be prompted multiple times to speak her reactions to the interface. Even though she claimed the interface was "straightforward", she had a lot more difficulty doing the tasks then we anticipated. The interview also did not flow as smoothly as the first interview.

User #3

The third user is one of the co-captains of a prominent dance team on the UC Berkeley campus. She was chosen because she is both a seasoned dancer and choreographer for multiple styles of dance. She had insight into both the practice and construction of dance routines.

Testing Environment #2:

The third user test was conducted in the alcove just off the main entrance to the fourth floor of Soda. Because of the time and day, only one to two people passed by during the test and we were able to conduct it in relative privacy. There was very little ambient noise and only those involved in the experiment were at the location.


  • Greeter/Facilitator: Charlie Hsu
  • Observer: Wei
  • Observer: Conor
  • Computer: David

Overall Observations:

The test went very well, but, like user #2, we still ran into more usability problems than the initial interview. The entire experiment felt a little uncomfortable and the user did not seem completely at ease, which is probably contrary to how the user would feel in a more comfortable dance setting. The user was a little reticent to voice her thoughts, so we had to prompt her a few times to hear her thoughts on the manner, but when she encountered something she did not completely like or had a thought on she was not afraid to ask or comment.

Results (5 pts)

The interviews were successful in revealing bugs and obscurities in the main tasks we imagine the application would be used for.

Task 1: Cut a new clip and save it [Medium]

All three users had a little bit of trouble distinguishing what to do at the very beginning. User 3 tried to press on the favorite songs, thinking it was a button. Despite the pause at the beginning, all three were able to see the tab interface and successfully go to the songs tab on their own. The choosing of the song was very intuitive for people as they progressed through the screen. There was one misunderstanding where User 1 thought that the song did not exist because the slot said "0 clips." When the users reached the clip view for cutting music, there was a slight pause in all three users as they questioned what the sliders were for. After some experimentation, they understood that the sliders were to mark the start/end of the song. All three played and paused the clip they chose. User 1 asked about the repeat button and how it worked. At the end, the saving was very straightforward and they were able to complete the task.

Task 2: Edit an existing clip and save it [Easy]

User 1 was lost for a while before she realized that she had to navigate back to the clips library to select another clip. For the most part, Task 2 went smoothly after the users had been acclimated to the environment through Task 1. Users 2 and 3 both commented on being able to rename a song instead of saving the changes.

Task 3: Create a new routine with pre-existing clips [Hard]

Similar to Task 1, the users were a bit confused on where they should go. User 2 was especially lost and we actually had to point the way. After the initial confusion, the users were able to start creating a new routine. At the routine creation screen, User 3 commented that the 'add' button wasn't specific enough for new users. User 3 also did something unexpected, creating a new clip at the same time and adding it to the routine. Nevertheless, the interface for adding song clips was very smooth. User 1 wanted to be able to rearrange the songs in the editing interface. After naming and saving the routine, the users also were able to experiment with the play buttons on the routine screen, playing the clips they had added to the routine. They had questions about which clip would initially play if the 'play' button was initially pressed.


The majority of the problems encountered during the testing was confusion about where to go. This could be a lack of familiarity with the iPhone design (2 of the 3 users do not own an iPhone) or even something that is not apparent with the lo-fi prototype. There was also some uncertainty related with behavior of buttons which were resolved with some minor experimentation.

Discussion (10 pts)

Issues Raised by Testing

Modify Current Functionality

Issue: Difficulty adding an initial clip to a new routine.

  • The size of the green plus button for a completely empty routine confused the user as to its ability to add songs to the routine.

Solution: For a new routine, adding the green plus button itself to a table cell with the text 'Add New Song' contained in the table cell. Serves a mini-tutorial for the use of the plus button.

Issue: When playing a cut piece of music, difficulty telling the length and location of the clip in the song.

  • When a user finishes editing the start and end points for a clip and saves it, the scrubbers go away so as to not be accidentally modified. When that happens there is no clear indication as to where the start and end points are for a regular play-through of a clip.
  • Users also attempted to move the scrubbers while the music was playing, a feature we didn't mean to allow.

Solution: When the clip is saved and the scrubbers disappear, the non-used portions of the song are darkened while the actual play section is given a brighter shade of the play bar's color for the Song view.

Implement New Functionality

Functionality: Merge two clips together.

  • User wanted to merge two clips together when creating her routine, but the application currently has no functionality to allow two clips to be merged together.

Solution: Give the user the option to merge two clips from the same song into one. This would involve having to implement multiple sets of scrubbers as the clips do not necessarily have to intersect given the proposed user solution. That would mean changes to both the Song view and the Clips library view (not necessarily practical).

Functionality: Allow users to use to swap songs within the routine.

  • User wanted to change the order of two songs, but the only way to do that currently is to remove a song and then add it between two songs.

Solution: iPhone has built in functions for swapping table cells, so when a user has pressed edit, putting his or her finger on the song will allow them to move it to whatever place pleases them in the Routine List view.

Functionality: Allow users to rename clips/routines.

  • Users are unable to change the current saved names of existing clips/routines, as that is only done in the initial creation of the clip/routine.


  • Whenever a user chooses 'save clip' the "Save As" popup would appear with the current name already in the text field. This would allow the user to rename or keep the filename as is. Downside: user is almost forced to try and re-name the routine/clip every time.
  • Add a button near the title to allow the user to re-name. Downside: adds another button and makes it more clutters.
  • Add functionality to automatically have a keyboard appear when the user double clicks on the title. Downside: not very intuitive for beginning users

Testing Could Not Reveal

Missing: No realistic audio.

We could not actually play the appropriate point of a song after a user had created a clip or routine, so we could not see how users interacted with the scrubbers when looking for that perfect point in a song for the song view. Also, we could not provide live audio feedback when users move the scrubbers. The purpose of the project is to help with audio for dance, so missing such undoubtedly impacts the experiment.

Missing: Unable to actually add anything to favorite songs or routines.

Because it was not one of our three chosen tasks, we neglected to actually add the functionality for adding a song or routine to your favorites page. Because of this, we did not get to see whether a user would rather add songs from the Song Library or the Favorites view.

What We Learned

The users revealed very good information about how slight ambiguities and lack of feedback can hamper our application. We now know we need to make slight visibility changes to the Routines List view and Song views. We plan to implement all of our proposed solutions except for the ability to merge two clips, which we want to discuss further before committing. We do not want to limit the freedom of a user when editing his or her music or making clips, but we do need to consider whether multiple scrubbers and non-contiguous clips would be detrimental to the user experience of the application. All users also seemed hesitant about whether to navigate through navigation views or use the tabs to get to the Song Library, so perhaps limiting ourselves to only one navigation structure would eliminate this ambivalence.

Appendix (5 pts)

Experiment Materials



Media and Raw Data

We filmed the user test of one of our users. The raw footage from that is linked below.



Observation Logs

Interview 1

  • very amused by prototype and computer

Task One

  • notice there are no clips on the favorites screen chose a song
  • notice start and end markers and notice she could drag them
  • not sure what Repeat does
  • saved and named it

Task Two

  • went back from clip editing screen
  • clicked on a new clip
  • comment: clip markers should be at either ends of the clip (show clip instead of show song)
  • not sure how to edit it…
  • went back to clips screen
  • presses back to clip
  • comment: should show clip only, and then show entire song upon pressing "Edit"

Task Three

  • immediately noticed the + button and pressed it
  • added a clip
  • slightly confused about the double +s after adding a clip
  • comment: want to be able to rearrange while editing


  • she uses Sony Acid
  • merge separate clips into one clip
  • fading
  • rearranging
  • play button on Clips page

Interview 2

Task One

  • tried to use paperclips to make clips

Task Two

  • went pretty smoothly

Task Three

  • really stuck on clips page, got confused about "Edit"
  • had to be directed to Routines page


  • pretty straightforward
  • be able to auto-replay
  • if a clip is already saved, might not need markers

Interview 3

Task One

  • immediately recognized sliders
  • pressed on the favorite songs label trying to get to favorite songs, but then found the songs tab

Task Two

  • wonders if there's a way to piece together two cuts
  • did not have a problem editing a song to a longer length after recognizing the sliders in the first task

Task Three

  • really quick, already showing outlier signs of power law of practice
  • created a new clip (as we're creating a routine)
  • wondered if she could play it while in Routine editing mode
  • need to make sure able to make a new clip as adding a routine
  • plus button wasn't completely sure about for adding a new clip to the routine, needed some time before decided to press it


  • didn't know + was a button
  • liked the idea of autoplay and prompting for the next song

Critical Incidents

Interview 1

Task One

  • not sure what Repeat does and if it would be useful in this particular view(Severity 3)

Task Two

  • clip markers should be at either ends of the clip, showing the clip instead of showing the song (Severity 2)
  • not sure how to edit clips, or what editing entails (Severity 4)

Task Three

  • immediately noticed plus button is used to add a clip to the routine (Severity 0)
  • slightly confused about the double +s after adding a clip (Severity 1)
  • suggested feature to allow rearranging of clips in a routine (Severity 4)

Interview 2

Task Three

  • got really confused about what "Edit" does on the Clips view and about the different modes in the Clips view (Severity 4)

Interview 3

Task One

  • immediately recognized sliders (Severity 0)

Task Three

  • slightly confused about plus button (Severity 3)
Personal tools