From CS 160 User Interfaces Sp10

Jump to: navigation, search



  • Aneesh Goel: coloring/tracing the dots prototype, script writing, narration, computer during trial runs
  • Alex (Yu) Li: letter/word tracing prototype, video editing and production, facilitator during testing, prototype pictures
  • Mohsen Rezaei: greeter for the trial run, wrote results discussion, and appendix.
  • Wilson Chau: made icons for the prototype, wrote mission statement, prototype statement, and test methods
  • Joe Cadena: made the matching view/album for the prototype, wrote the prototype section, compiled the critical incidents log
  • Everyone: helped make the prototype, helped with the trial runs, helped film footage for the video

Mission Statement

iBC's is a fun and interactive edutainment tool for young kids to learn their ABC's, 123's and more! Through our prototype testing we wanted to discover how kid friendly our interface is and how we should adapt our program to better fit the users needs. The target audience of our project is kids around the age of 3-5. However in addition to the main user group, the childrens' parents will also be using the application in order to change settings. Taking into account our user group, we tried to make our program easy to use with lots of audio for kids who cannot read yet. The main goal of our project is to create a portable solution for parents that are on the go and want their child to learn ABC's and at the same time entertain children who are bored. Combining the two different mediums of tracing and coloring, we are able to create an application to help kids not only learn to write but also connect what they are writing to corresponding pictures. Our project is a highly portable solution to a common problem both parents and children face alike, satisfying the need for the child to be entertained while at the same time learning their ABC's.


We created a paper prototype for our iBC's iPhone application. First we printed a picture of an iPhone and glued it to a piece of cardboard. Then we cut out the screen so that we could put our own hand drawn screens in its place. For the different tasks that we had to do we made template screens and then sub-screens which would slide under the template screens. For example, in our letter tracing task, we used the same commands and icons for every letter so we simply made a template of the letter tracing screen and additional sub-screens with different letters and corresponding pictures. We then connected all the template screens together and also made a huge strip out of all the sub-screens so that we could slide both strips under the iPhone cutout to get the correct screen layout.

Work in Progress

Here we have the sub-screens of the 'Matching Game' at the top of the page and the hollow number sub-screens for the 'Numbers' page at the bottom.
On top is the hollow letters that are the sub-screens of the lower case letter tracing screens along with the score screen and upper case hollow letter sub-screens.
The top part of the picture contains the template screen for 'Album' and 'Settings' while the bottom has the template screens for 'Menu', letters, drawing canvas, and numbers.


Menu with buttons that lead to all other screens: Settings, Album, capital letters, lower case letters, numbers, Matching Game, and Words.


In order to enter the settings page, the parent must first input the correct password. This prevents kids from accidentally changing settings of the application, since settings and scores viewing is a task reserved for the parent.
This is the settings page, there are four main settings that the parent can choose to turn on/off and at the bottom there is also a button that links to the 'Scores' page. 1)When the random cards setting is turned on, the letters or numbers will appear in a random fashion. 2)If alphabet audio is turned on, when the child enters the tracing page, the letter/word/number on the screen will be repeated to them. 3)If feedback audio is turned on, when the child gets something right, or wrong there will be corresponding sounds. 4)If stroke direction is turned on, then on the tracing page, arrows will appear helping the child trace the letters with the correct stroke direction.
This is the scores page, where parents can check up on their child's progress from the Matching Game.


This is the main 'Album' page, where the user can see all saved pictures and click on a thumbnail to enlarge the picture.
Enlarged version of the picture.

Letter Tracing

This is the capital letter tracing screen.
This is the lower case letter tracing screen.
Clicking the 'All Letters' button at the bottom of the lower/capital letters screen will lead to this page showing all the letters of the alphabet the child can trace.
Clicking on the picture at the bottom of the letter tracing screen will take the user to the canvas, where they can connect the dots and color the picture.

Number Tracing

This is the letter tracing screen. Since the user didn't right the number correctly, the 'Try Again' prompt shows up on the screen.

Matching Game

The user can connect matching pairs in the 'Matching Game'. Green lines means the connected pair is correct, and a red line means the connection is wrong.
After the user has finished a page, then a score will appear and shaking the phone will bring up a new Matching Game screen.

Tracing Words

This is the word tracing screen that works much like letter tracing.

Completed Prototype

This is our completed prototype with all the parts. The main part of our prototype is a cardboard cutout of an iPhone with sliding strips that go through it.

Video Prototype

Video prototype for iBC's: Media:GroupM_lofi_prototype.mov‎

  • Tasks in the video:
    • 1) Tracing the letter 'B' (moderate)
    • 2) Connecting-the-dots of a balloon, finger painting the picture and then saving the picture (difficult)
    • 3) Playing the Matching Game (moderate)
    • 4) Changing the Settings (done by parent, easy)
    • 5) Accessing the Album and deleting a picture (done by parent, easy)

How did we make it?

The focus of our video prototype was to highlight the key functionality of our application as well as “sell” the idea of its beneficial rewards. In doing so, we chose to format our video prototype as an infomercial aimed at our primary user group. To accomplish this task, we began by creating a script that captured real-life scenarios where our application could validate as a favorable solution. Next, we focused on spotlighting the interface operations that addressed our user tasks. Using stop-motion animation together with a cardboard iPhone/iPod, we displayed the functionality of our application through the use of hand-drawn views and accessories. Finally, to harmoniously merge the project together, we divvied out the character roles created in the script and captured numerous amounts of video footage addressing the contextual aspect of our prototype.

New interesting techniques

Because the platform our application accommodates affords a smaller work area, we designed a crafty cardboard prototype that allowed our “computer” to efficiently switch between views and manage the major operations of the user. We accomplished this by separating the base functionality of each view from its interactive features and by creating two individual sliding strips of interface based on the separation (template and sub-screens). When combined with the cardboard prototype, we had a multilayer prototype that allowed easy access to any combination of functionality and features by simply sliding the independent strips to the desired view. The efficiency of our design became apparent during user testing (in order to keep the attention of our young user group we had to quickly change the views since they are notorious for having short attention spans) and also filming of our stop motion.


The biggest difficulty we faced during the production of our video prototype was incorporating paint and sound effects into the numerous stop-motion pictures we used for the animation portion of our video. Our application is heavily based on audio and visual prompts so in order for us to accurately portray finger gestures combined with sound effects, we depended greatly on post-production “add-ons” through Premiere to achieve our desired result. Patience and timing proved to be the key to overcoming this difficulty.

Another difficulty we faced stemmed from the contextual consistency of our video shots. Although we created an effective script, access to key elements such as an appropriate cast, relevant attire, and desirable locations were limited. This confined our video production to a satirical abstraction of our intended message. We solved this difficulty by exaggerating the context and by emphasizing the usefulness of our application in the depicted scenario.

What worked well?

The most effective tool we utilized was stop-motion animation combined with advance editing software (Premiere). Through this video technique and software, we were able to convey the functionality of our application using only a cardboard cutout, hand-drawn interfaces, and video footage of use acting out our roles. Although a major portion of our interface relies on audible prompts, the stop-motion animation and editing capabilities proved useful when highlighting the visual aspect of our application.

The other effective tool was a well-written script created early in the production. This helped guide our group through every phase of the production and allowed for expansion on key ideas. Since most of our production did not occur in the chronological order of our final video, we relied heavily on the script to keep our focus and track our progress.

Test Method

Aneesh Goel: Computer
Alex (Yu) Li: Facilitator
Mohsen Rezaei: Greeter/ Observer
Wilson Chau: Observer
Joe Cadena: Observer


When selecting the participants for our prototype testing we wanted to get two children and a parent. We wanted the parent to test the interface and the 'Settings' page. Furthermore, we can get better feedback with the parent there, since the parent would better communicate what they thought where the advantages and disadvantage of our prototype. Adults would also be better at conveying the thoughts of their children, who may be a little shy around strangers. It was also nice to get kids that were at the extremes of our target user group range (3 to 5). Testing the edges of our age range allowed us to better see what was too complicated or easy for the children.

  • 1. Female, Age 5
  • 2. Female, Age 3
  • 3. Parent


The experiment took place in the kitchen on the dining table of the partipants home. After we arrived at the house and introduced ourselves we took 15 minutes to set up our experiment on the table. We laid out our prototype and set up the camera over it to capture the participants interacting with it. We were sure to get a camera angle that captured only what the user was doing with the prototype and not their faces. We had the participant sit on one side of the table with the facilitator and the computer standing next to the participant with the observers sitting on the other side of the table taking notes. When we started the experiment we had the greeter talk to the participant for a little bit, asking for their names and then turning it over to the facilitator.


  • 1. Letter Tracing (Moderate) - One of the main functions of our application, this task involved choosing the right button to get to the letter tracing page, listening to the instructions given by the computer, something along the lines of "Trace the letter B in the color red". The user was then supposed to correctly choose the color and trace the letter on the screen. From the letter tracing screen, they could then press the picture under the letter to get to the canvas screen where the child could connect the dots and color.
  • 2. Connect the Dots/ Coloring (Difficult) - If they chose to connect the dots and color from the letter tracing screen they would be taken to this task. From this screen they could choose a stroke color and width and connect the dots or color the picture. After they are finished with the picture the user could choose to save the picture or they could go back to the main menu.
  • 3. Settings (Easy) - This was a task aimed more at the parents of the children, and was meant to test the design of our settings screen. From the main menu if they clicked on the settings icon they would first be taken to a password lock screen. After entering a password the user would be taken to the settings screen where they could turn on or turn off different settings. From this screen they could also go to another screen where they could look at scores for the matching game.
  • 4. Matching Game (Moderate)- In this task the user matches letters to pictures with words starting with the same letter. A green stroke represents a correct answer pair and a red stroke represents a wrong answer. After matching all 5 letters to their respective pictures a score along with audio will popup to provide feedback. This score will be recorded internally and will be available to view later in the Scores page from Settings.
  • 5. Viewing the Album (Easy)- From this screen the user can choose from an album of thumbnails to enlarge and view. The user can also delete pictures by dragging them to the trash bin from this screen.


1) Greet participant, ask for name/age, when ready turn over to facilitator
2) Facilitator will further introduce application to user and then ask them to first try out the capital letter tracing task
3) Facilitator will let the participant find the task from the main menu and enter the task
4) When screen is changed, computer will give instructions for the given screen, telling the user to trace the item in a certain color
5) Facilitator will let user choose a color and then trace the item on the screen after which the computer will place feedback on the screen
6) After this the facilitator will ask the user if they want to color a picture starting with the same letter
6a) If yes, ask the user how they think they would go on doing that
6b) If no, ask user how they think they would go back to home screen
7) If they continue to the connecting the dots/ coloring screen, facilitator will tell user to pick a color and start
8) After they are done connecting the dots/ coloring the picture ask them if they would like to save the picture and if so how they think they would go on to do that
9) Ask them to go back to home screen
10) If they would like to go to album, ask them which button to press to get there
11) From the album ask them to try and view a picture and then return to the Album page from that picture
12) After viewing the picture, ask them to try and delete a picture
13) Ask user to try the matching game
14) If it is an adult using the application ask them to go to the settings page and change some settings
15) Let the user try out any other functions or try any tasks they want again
16) When done thank the user and ask them to fill out a post evaluation questionnaire

Test Measures

One of the main things we looked for when observing the participants using the prototype was whether or not the interface made sense to the children. We really wanted to see if the children knew how to get from screen to screen, task to task. After doing a task we really wanted to know whether or not they knew how to change to different letters or numbers and how to get back to the menu screen. We really tried to make our prototype very intuitive not only in the flow of the screens but also in the use of the icons for different functions.

Another thing we were looking for is how quickly the children would pick up different aspects of the interface. Although we tried to make our application as intuitive and kid-friendly as possible we also knew that we couldn't spell out each and every detail. Knowing this we wanted to see how quickly the participants were able to pick up different things that might not be as obvious to children.

Although we didn't measure the times explicitly we were sure to keep track, roughly, of how long the participants took for each task and where they got stuck if they did. This was important to keep track of because we wanted to know if our expectations of the length of each task was in line with what the actual task time was.


Intro: In our iPhone application, iBC's, some tasks are performed by children approximately ages three to five, and some are performed by their parents. In our prototyping session, the first and second users were kids of age 5 1/2 and 3 1/2, respectively, and the third user was one of their guardians.

Summary of the results from the interface: Some of the icons and features were unfamiliar to the kids in our prototyping. They were unsure about what they could do after finishing a task and needed help understanding what those unfamiliar buttons were. After the first time they were helped through the interface, they could fully perform tasks by themselves without getting any help. Both children demonstrated more interest in selecting their own colors than tracing the item using the color the application prompted them to write in. The parent had no trouble changing settings or viewing the album and was able to assist the children in using the application when they were confused.

  • First user (5-year-old girl):
    • Accessing the Picture Album: This is the second time the user played the game. In the main menu screen she picked the picture album section. She got confused about what the little rectangles were in the picture album screen and thought that the empty spaces shown, which were indicating no picture in the picture album view are pictures that she can view. With a little help she figured out that only the colorful pictures in the album view are the pictures that she can click, enlarge, and view. After clicking on one of the pictures she didn't know what to do, so she clicked on the home screen, which she was now very familiar with, to go back to the main menu. After trying some other features the user went back to the album section again and tried to see what the other features were. She tried the erase button, shaped as a trash can, but it didn't work as she expected. As a result of the confusion, she tapped on the home button to go back to the home screen once more.
    • Tracing Letters: The 'ABC' button, which takes the user to tracing letters, was the first thing that grabbed this user's attention in both the first and second time using our interface prototype. Right after seeing the letter tracing view she chose a color and started tracing the letter in her desirable color without listening to the instructions given to her. The second time performing the same task, after the instructions were given, she chose the right color and started tracing the letter. This task was performed a couple of times upon the user's request but most of the times the user wanted to choose the colors she desired and ignored the instructions that were given at the time of opening the letter tracing view.
    • Saving a Fully Traced and Colored Picture: After entering the objects tracing and coloring, the user chose a color, without any problem, and traced the dots on the canvas. After she finished tracing the object she decided to go back to the home view.
  • Second user (3-year-old girl):
    • Accessing the Picture Album: Didn't understand how to reach the album view from the main menu view (didn't know how to read).
    • Tracing Letters: After entering the tracing environment forgot to pick a color and went right into tracing the letter. After a bit realized that she needs to pick a color, but as a result she picked a different color than the one said in the instructions. After finishing this round, wanted to try again. This time picked the right color and traced with care.
    • Saving a Fully Traced and Colored Picture: This is the task that users usually performed after tracing a letter or word. This user was not interested in entering the tracing dots and coloring objects at anytime during the prototype session.
  • Third user (parent of the first and second users):
    • Application Settings: She presses the icon for the settings, which was very clear for the user, in the main menu. In the password request page, input password quickly. When entered the settings environment knew how to interact with different controls without any problem. After changing a couple of the settings, went back to the home screen by pressing the home button.
    • Picture Album: Pressed the album button in the main menu view and investigated the different icons in the album view. Shortly after entering the album view, dragged one of the existing pictures in the album into the trash can without any problem.


The first user had the most control over the whole interface. She learned the prototype/interface very quickly as she went along. After finishing her first round of playing with the games and features in the application she excitedly wanted to play with the whole thing all over again. It seemed like she was very absorbed by the functionalities. It was interesting to notice that she, probably out of habit, knew what to do in the letter tracing section of the application. However many times without any pause, she clicked on a color and started tracing the letter shown on the view, without listening to the instructions from the application. We noticed that in the tracing section she didn't want to follow the instructions given to her by the computer. In the beginning, she always grabbed the color she wanted and started tracing. After a while and after receiving couple of "Try Again" notifications, she changed her style and realized that she needed to follow the instructions given in the beginning to receive a good score and "Excellent" notification. Interestingly, after learning that she had to listen to the instructions to choose the correct color, she was patient while the instructions were being announced and she never interrupted or ignored them after knowing that the instructions were helpful. One last thing was, since we have a panda picture on the main menu, the user thought that it would do something when she clicked on it. This was very disappointing for her and her face showed us her reaction.

In case of the second user, she had a hard time following the controls and events, and she also found it difficult finishing tasks explained to her. It seemed like because of her age she was not comfortable with the Matching Game task, as mentioned by the parent at the end of the prototyping session. Comparing the first and second user, we noticed that this user was really attracted to the shapes, colors, and the layout of the application. She got confused when she received the "Try Again" prompt after not being able to complete the task. It almost felt like she did not understand what tasks needed to be completed. Whenever she receive hooray/"Excellent" signs from the application, she could not stop smiling, showing that she was not dissuaded even by receiving "Try Again" prompts. This was interesting to observe and it was also a good comparison to the first user. This showed us that kids aged 5 and higher are more logical than younger children. After a while this user stopped working with the interface and was distracted by other things. In general, it was good that we got to test our interface with this age because now we know that easier tasks might be a better choice for kids of age 3-5.

At last, it was the time to see what the parent thought about the whole program. The idea was to let her get a feel for how the interface was for the kids. The settings that we designed for the parents of our users is password protected. This user was satisfied seeing that kids could not enter the settings and change the options. This was important for her because she wanted to keep track of what the kids did and how they performed their tasks. She also liked the fact that she was able to edit the photo album of the the application because she said that kids would like to draw and erase a lot and that would make it easier for them to do so. Also she said that it is easy to erase unwanted saved drawings. At the end of the sessions she commented on the letter tracing section and mentioned that the kids were not following the instructions since they love to color and trace their letters in the colors they desire.

In general, we were happy that most of the interface was suitable for the kids. We learned that kids love free style drawing and love to freely trace letters and words. We also learned that the kids were not familiar with the shaking feature of the iPhone. Even after being taught that they can shake to wipe the whole view, they never actually tried/used it. We also learned that we need to make the interface a bit more suitable for kids younger than 5. The parent also pointed this out at the end of the session. Furthermore, we observed and learned that we can have a better color picking interface since the kids requested for other colors that we didn't and couldn't have in our tracing and drawing views. These are all the problems/bugs that we found in our design that will be addressed in our final application design and we are hoping that these fixes will make our application even more enjoyable for the kids.

There were couple of features that the kids did not try during this prototyping sessions that we think could have been really important to test for our final design. Some of these features include: sound/song for letters and words tracing, undo button for undoing the last stroke for all the tracing and drawing views, and info button for some views.


1) User 1 object recognition may be because of poorly chosen images for the matching game. One view depicted images of a vampire, fire, and an umbrella and the user was unable to match the correct letters to the images.

  • Severity: 3. Minor usability problem

2) Users relied on symbol recognition to maneuver throughout the application choosing those they’re most familiar with, i.e. upper case and lower case tracing was chosen the most often compared to the matching game. Features displayed with words may require an audio prompt or helpful picture to aid our users.

  • Severity: 3. Minor usability problem

3) Although instructions for each activity were provided to the users, a freedom to choose was also desired. The users liked the ability to choose their own colors and their own words to write.

  • Severity: 3. Minor usability problem

4) User 1 was unsure what to do when Words View displayed with landscape orientation. The view requires the user to rotate the device but offers no prompt other than a sideways-orientated view.

  • Severity: 3. Minor usability problem

5) User 2 was unable to find the action leading to the matching game. Currently, the leaf marked “Matching Game” contains no visual connection to a matching activity and, for a child, may prove troublesome.

  • Severity: 4. Major usability problem: important to fix

6) User 1 was unaware of her options during the matching activity. When incorrectly connecting a letter to an image, the line turns red. The user was unaware that she could erase her last trace and try again.

  • Severity: 3. Minor usability problem

7) User 1 was confused when she saw the contents of the saved album view. Stars were used as placeholders for empty slots but the user thought these were images themselves. Additionally, the user was unaware that she could select her previously saved image and view it as a larger image.

  • Severity: 3. Minor usability problem

8) User 2 watched as user 1 completed the evaluation and, when her turn, knew the basic functionality of the prototype. Functionality easy to learn.

  • No Severity.

9) Upon completion of user 2’s evaluation, user 1 requested to “play” with the prototype again so we conducted a second round evaluation with user 1.

  • No Severity.

10) Use of a house as an icon to identify the home menu very effective. Each user was aware of its use and became familiar of its purpose.

  • No Severity.


[add comment]
Personal tools