From CS 160 User Interfaces Sp10

Revision as of 05:18, 15 March 2010 by Vidya Ramesh (Talk | contribs)
Jump to: navigation, search


Introduction and Mission Statement (5 pts)

The system being evaluated is a complete lo-fi paper prototype of our music marking and editing software, which is targeted specifically at dancers and choreographers. The purpose of the project is to eliminate the need for repetitive tasks that distract from the actual process of dance, 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 (marking 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

  • Charlie Hsu
  • Conor McLaughlin wrote mission statement, wrote part of results and methods, wrote discussion, and acted as observer in test 3.
  • David Zeng wrote prototype & results, edited discussion, acted as computer in all tests/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

Prototype (10 pts)

We made a iPhone bezel out of cardboard that would be able to contain 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 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, delete and add buttons, done button for editing.
  • 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.
  • 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.
  • Bottom: Another clips page, with no clips. User can still play the whole song.
  • 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.
  • 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.

Video Prototype (35 pts)

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

All three users had a little bit of trouble distinguishing what to do at the very beginning. User 3 tried to click 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

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

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.

Discussion (10 pts)

Issues Raised by Test

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.

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)

The appendix should include copies of all materials involved in the experiment. This includes your consent form, demo script, and any instructions or task descriptions you handed out or read out loud to your participants. Finally, it should include all the raw data you gathered during the experiment. Merge the critical incidents logged by the observers and list them here. The appendix materials and screenshots do not count in your 4-5 page total.

Experiment Materials

File:IGroup ConsentForm.pdf

File:Video Script.doc

Media and Raw Data

Observation Logs

[add comment]
Personal tools