From CS 160 User Interfaces Sp10

Jump to: navigation, search



  • Aneesh Goel: programmed the back-end core data part of the program
  • Alex (Yu) Li: worked on the front-end user interface (set up views and linked things) and created pictures of the canvas and letters; worked on the wiki
  • Mohsen Rezaei: worked on the front-end user interface (set up views and linked things) and helped make pictures for the views
  • Wilson Chau: worked on the swiping change view aspect of the program, and the drawing implementation
  • Joe Cadena: programmed the back-end album functions; worked on the wiki
  • Everyone: worked on the wiki and presentation

Prototype Source Code and Video

  • The transition from low-fi to interactive prototype was not very difficult for our group. We didn't experience any huge problems, although we did have a tough time setting up the core data to store all our saved information. In our low-fi prototype, we had already planned out the look and feel of the whole application so it was just a matter of translating what we had on paper into views and links in Xcode.
  • Some of the limitations of the low-fi prototype were addressed in our interactive prototype. For example in our low-fi testing, it was difficult and cumbersome for the "computer" to trace the user's finger movements on the letter tracing page. This issue is taken care of in our interactive prototype, since the user can directly draw on the tracing screen now. Furthermore, in our interactive prototype, we also changed many things such as icons and functionality based on the responses we got back from our low-fi testing. These changes can be seen in the Changes Table below in the Revised Interface Design Section.
  • Additionally since we had a limited amount of time, we decided to focus on the major aspects of our three main tasks and opted for completeness instead of functionality for some of the views. These functions can be seen in the Unimplemented Table below in the Revised Interface Design Section.

Problem and Solution Overview

Our application, iBC's, is a fun and interactive edutainment tool targeted towards young preschool children between the ages of 3 and 5, and their parents or guardians. In a child's early development, parents want an application that is both educational and entertaining for their kid. However, this is not ideal in many everyday situations where it is impossible to bring along toys or games to keep the child entertained. Parents need something that is both portable and teaches their children ABCs and simple words, while they are busy trying to work, drive, or perform any number of other tasks. Therefore, our solution to this problem and main goal of the project is to create a portable, edutainment application for the user that helps young children learn to write through tracing the alphabet, numbers, and words, and at the same time entertain the child who is bored. In order to do this we are combining two different mediums: tracing and coloring. By using these two mediums, we are able to create an application that helps kids not only learn to write but also learn the meaning of what they're writing by connecting words and letters to corresponding trace-the-dots pictures. Additionally, we have also implemented a picture and letter matching quiz game that allows parents to keep track of their kid's progress. iBC's is a highly portable solution to the 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.


  • The three tasks we chose to implement are the same three we chose from our Contextual Inquiry. We believe these three tasks reflect the main functions of our application (tracing and coloring) and also covers some of the interesting features (for example deleting and saving a picture). The tasks are appropriately difficult and complex, ranging from simply viewing the album to coloring and saving a connect-the-dots picture. Furthermore the three tasks are cohesive and form a compelling story of why the user might want to use the application (children can trace and color letters and pictures in order to entertain themselves).

Picture Task Description
Easy - Viewing and Accessing the Album
  • From the main screen the user can click on the "Album" button to access the album page. From there the user can look at saved images and select one to view by simply tapping on it. Images can be deleted by dragging to the trash can icon.
  • This task is analogous to the user saving the child's coloring book or workbook pages; the child's work can be stored for later use and viewing.
Medium - Tracing a Letter
  • From the main menu, the user can select "abc", "ABC", or "123" to get to the letter/number tracing screen. Each button goes to fundamentally the same task, but with a different set of characters to trace. From the tracing screen the user can then select a color of their choice (the default is set to black) by tapping on a color pencil and then trace the letter, or if they desire a different letter they can swipe near the bottom of the screen (by the picture) to change to a different letter.
  • This is one of the main focuses of our application (the other being coloring and tracing a picture), where the child can trace letters in order to practice both recognizing and writing characters.
Hard - Connect the Dots, Coloring, and Saving
  • From the letter/number tracing screen, the user can access the canvas/drawing page by simply tapping on the picture near the bottom of the screen. Then a related connect-the-dots image will load and the user can trace and color the picture.
  • When the user is done coloring, they can click on the save button (the floppy disk) and save their lovely picture to the album. However clicking save multiple times while not making any changes to the canvas page will not result in multiple saves.
  • This function is the second main focus of our application. It helps the child associate letters to their corresponding picture, and keep the child entertained.

Revised Interface Design


  • After our low-fi user testing Lo-Fi Prototype, we realized there were some changes we needed to make to the design of our user interface. Below we have a table displaying the many different changes we made to the design based on the user feedback we received.
  • Note changes are circled in red.

Old Implementation New Implementation Description Rationale Behind Changes
1. Children can select their own colors to trace with, instead of being prompted to "Trace the letter A in red."
  • From the low-fi testing we learned that kids like to pick their own colors to trace the letter/number in. They didn't like it when the program told them what color to use and many times although they understood what the program was asking, they would still pick their own color to trace in. As a result, we thought it would be more fun and enjoyable for the child if the program allowed them to choose their own color.
2. Changed "All Letters" and "All Numbers" buttons at the bottom of the tracing page to "ABC", "abc", and "123".
  • From the low-fi testing we realized that some of the children in our user group cannot read yet. Therefore by making these buttons have simpler and the same writing as the main menu buttons, we made it easier for the children to recognize what these buttons do; take the user to a page with all the letters so they can choose the next character to trace.
3. Created new previous and next arrow keys near the bottom of the tracing page.
  • In the low-fi testing, it took the children a long time before they realized that swiping left or right in the tracing screen would allow them to change the character they were tracing. Instead they would either go all the way back to the main menu screen to start all over again, or they would press the "All Letters" button at the bottom of the tracing page to pick the next letter. However, we felt that the swiping function would be very useful in switching characters and decided to place arrow keys near the bottom of the tracing page in order to show the child that they can swipe to switch the character they are tracing.
4. Made pictures for the application more kid friendly.
  • During the low-fi test, we noticed that while playing with the matching game, the children sometimes had a hard time recognizing what the pictures where. For example they didn't realize that the vampire stood for "V". Taking this into consideration, we went back and made sure that the pictures corresponding to each letter was more kid friendly by using more animal pictures. The parent also commented at the end of our low-fi test that maybe including more animal pictures would more better for the children.
5. Simplification of icons.
  • We realized from the low-fi test that we might have to make the application more child friendly. As a result we tried to simplify the icons (for example the home button and trash button). In addition we thought it might be better to use color pencils instead of color splatters to represent the color pallet since it provides a better metaphor (the child is choosing which color pencil to trace their letter/number with). Additionally we also added two extra colors to the color pallet (black and brown) to give the child a larger variety of colors to trace with.

Unimplemented Portions

  • Since we did not have enough time, there were certain parts of our application that we did not implement yet. However we have implemented a majority of the main functionality we displayed in our Low-Fi prototype. We concentrated on implementing the most important features related to the three tasks we choose. For certain views we only have template pages, which we will later implement. The following is a table of the unimplemented portions of our interface and what they are suppose to do/look like according to our Low-Fi prototype.

Picture of Unimplemented Portion What the portion is suppose to look like from Low-fi Unimplemented Portion Description
1. Words view
  • The words view is similar to the "ABC", "abc", and "123" tracing views. However we have not fully implemented the words view yet. We ran into trouble getting the iPhone landscape to load correctly; therefore, we opted to save the implementation of the words view for a later iteration in order to have enough time to implement the three tasks.
2. Settings
  • The setting page is currently a template page. We have the segmented controllers and button leading to show scores set up. However, the segmented buttons do not currently change anything in the appDelegate and the show scores button leads to a template scores view.
3. Scores
  • The scores view is currently a template page. We have the core data set up for storage of the highest scores, but since our matching game has also not been implemented yet we decided it was best to concentrate on the three main tasks first and implement the scores view later.
4. Matching Game
  • The matching game has not been implemented yet. We currently have a template page for the view. We opted to work on the three main tasks first before starting on the matching game.
No picture, function simply not implemented yet. 5. Undo button
  • The undo button for the tracing page and canvas page are currently there, but the function has not been implemented yet. The undo button is circled in red.
6. Linking from all letters/numbers page to corresponding letters and numbers
  • In our application we have template pages for all "ABC", "abc", and "123" but pressing on a letter/number will not link to the corresponding letter and number tracing page. Part of the reason we have not fully implemented this function is because we have not finished making all 26 letters and corresponding connect-the-dot pictures yet.
No image, all 26 pictures for the letters not made yet. 7. Have not finished making all 26 letters and corresponding connect-the-dot picture backgrounds yet.
  • Right now we have letters A, B, C, Z, a, b, c, z, and all the numbers, but the rest of the letters are still a work in progress. All the letters, both upper and lower case have already been created but the corresponding picture and connect-the-dot picture have not been made yet.
8. Character recognition
  • Our application isn't actually capable of providing feedback on whether letters are traced correctly or incorrectly; this feature is currently handled with Wizard of Oz techniques.
N/A N/A 9. Audio
  • No audio recordings have been added to the prototype; as such, spoken instructions and feedback on letter tracing are missing from our prototype.

Storyboards of Tasks

  • Note the tasks are not in order from easier to hardest. Instead they are in the order of Medium, Hard, and Easy since it gives the scenarios a better flow.

Medium - Tracing a Letter

  • Wilson, a preschooler, and his dad are studying and Wilson gets bored with his workbooks. His dad is busy answering emails so he decides to pull out his iPhone and let Wilson play with the new letter tracing application he just downloaded for his son. Wilson starts up the app called iBCs and first tries to trace the capital letter A in a color of his own choice.
1) Wilson: Dad I'm bored of doing my workbooks. Isn't there anything else to do??
2) Dad: Well son I'm kind of busy working right now. But oh I know, here son I've just downloaded this new application on my iPhone called iBCs. It's suppose to be really fun, why don't you give it a try?
3) Wilson: Oh wow iBCs!
4) This is the iBCs home screen. By clicking on the leaf that says "ABC" Wilson goes to the capital letter tracing page.
5) This is the capital letter tracing page for the letter "A". At the top there is a toolbar with a go to home menu, undo, sound, save, and information button.
6) Wilson clicks on the blue color pencil and starts to trace the letter A in blue.
7) After Wilson is done tracing the letter A in blue.
8) He decides he wants to maybe try another letter and swipes near the right arrow key to go to the next letter "B".
9) Wilson is having a lot of fun tracing letters with the app, he's learning and also being entertained at the same time.

Hard - Connect the Dots, Coloring, and Saving

  • A little later, Wilson's dad has to run to the office for errand and while he is driving Wilson becomes bored. So his dad gives Wilson the iPhone again to entertain him. But this time Wilson decides to go to the canvas view and draw a picture of an apple, that corresponds with the capital letter A.
1) Wilson: Hey dad I'm bored, this car ride is lonnngg, can I play with iBCs again? Dad: Sure son here you go.
2) This is the capital letter "A" screen that Wilson was tracing from last time. He clicks the picture of the apple below the letter A.
3) This takes Wilson to the canvas view, where he can trace the picture of an apple.
4) Wilson chooses to trace the apple in green, so he clicks the green color pencil at the bottom of the screen.
5) Wilson then decides to color the apple green.
6) He likes the picture so much he draws a butterfly and sun in the picture.
7) Wilson then decides to save the picture, so he presses the save button in the toolbar at the top.
8) Wilson is having lots of fun playing with iBCs!

Easy - Viewing and Accessing the Album

  • After getting to the office, Wilson shows his dad all the wonderful pictures he just created in the iBCs application. Wilson's dad looks through the album viewing his son's drawings and decides to delete one.
1) Wilson: Hey dad take a look at all the cool drawings I just made! Dad: Wow son let me see.
2) Wilson's dad goes to the main menu page and clicks on the "Album" button.
3) This leads to the album page with all the saved drawings. There are two there currently. Wilson's dad decides to view one of the drawing so he double-taps on the thumbnail.
4) He decides he doesn't really like the drawing and presses the back button.
5) The application goes back to the main album view and then Wilson's dad drags and drops the image he didn't like into the trash bin at the top of the toolbar.
6) There is a prompt asking if the user really wants to delete the picture. Wilson's dad presses yes, permanently deleting the picture.
7) He gives the application back to his son so Wilson can play with it some more.
8) iBCs has provided a solution to this frequency occurring everyday problem. Wilson's dad gets to run his errands while Wilson is both learning and being entertained at the same time, his father couldn't be happier.

Prototype Overview

Implemented UI Overview

  • The following is a table showing the different views we have in our application and the functionality of each view. As you can see the user can complete the three major tasks by:
    • Easy: using the Home Menu and Album View
    • Medium: using the Home Menu and Letter Tracing View
    • Hard: using the Home Menu, Letter Tracing View, and the Connect-the-Dots/Coloring View
View Description of Working Components
Home view with active buttons identified.
The foundation of iBC's architecture is based on a hidden navigation controller that utilizes multiple sub-controllers to provide an interactive and efficient user interface. The home view is comprised of multiple buttons displayed as leaves with each leaf configured to lead to its own view controller. The settings button, displayed as gear sprockets in the upper-right corner, leads to the settings menu view where functions for personalizing user preferences are currently in the implementation phase. From this view you can:
  • Access the upper-case letters tracing activity (ABC).
  • Access the lower-case letters tracing activity (abc).
  • Access the numbers tracing activity (123).
  • Access the saved pictures album (Album).
  • Access the matching game activity (Matching), which is still being implemented.
  • Access the words tracing activity (Words), which is also still being implemented.
  • Access the settings ('Gears').
Addresses All Three Tasks
Lower-case letters tracing view with active buttons highlighted.
The letter tracing view offers the user two different ways to practice tracing the alphabet: tracing upper-case letters or tracing lower-case letters. A functional color palette is included along the edges of the view allowing the user to choose the tracing color. In addition to tracing letters, the user is also able to select the letter's corresponding object (a picture) which leads to a connect-the-dots coloring activity. Another function in this view is the incorporation of the swiping action, indicated by the left and right arrows. The user may utilize the swipe action to cycle through the letters of the alphabet. From this view, the user can:
  • Select a tracing color.
  • Trace the presented letter.
  • Swipe left or right to change the letter.
  • Select the picture to access the connect-the-dots activity.
  • View all the letters of the alphabet (abc).
  • The Toolbar at the top of the view allows the user to:
    • Return to the main menu.
    • Undo the last stroke (not implemented yet).
    • Audio of the letter (currently done with Wizard of Oz).
    • Save the screen (audio currently done with Wizard of Oz, save functionality not yet implemented for letter/number tracing view).
    • Audible information of the view and what all the buttons do (currently done with Wizard of Oz).
Addresses Task 2: Tracing a Letter
Numbers tracing view with active buttons highlighted.
Similar to the letters tracing view, the numbers tracing view allows the user to practice tracing numbers with different tracing colors. The only difference between the two views is lack of a corresponding picture in the numbers view that leads to a connect-the-dots activity. We decided that for numbers, it would be impossible for us to fit a picture of say nine balls on the iPhone screen for the child to trace and color. Because of the physical size limit of the iPhone we decided it would be better if we did not associate a picture with a number in the application. Again, the swipe function is indicated by the left and right facing arrows and allows the user to cycle through the numbers. Lastly, on the bottom of the screen, the user may select the '123' button which leads to a view displaying all the numbers for quick access to a specific number. From this view, the user can:
  • Select a tracing color.
  • Trace the presented number.
  • Swipe left or right to change the number.
  • View all the numbers (123).
  • The Toolbar at the top of the view allows the user to:
    • Return to the main menu.
    • Undo the last stroke (not implemented yet).
    • Audio of the letter (currently done with Wizard of Oz).
    • Save the screen (audio currently done with Wizard of Oz).
    • Audible information of the view and what all the buttons do (currently done with Wizard of Oz).
Addresses Task 2: Tracing a Letter
Connect-the-Dots view showing a colored image and highlighted functionality.
The connect-the-dots/coloring view (also known as canvas view) is the main functionality that allows the user to express their creativity. Spawning from the letter tracing view, this view allows the user to color an associated object with various colors and line widths chosen from the color palette at the bottom of the screen and the line width options placed just above it. Also included in this view is the ability to save the drawing by selecting the disk icon at the top of the screen. Saved images can be accessed from the main menu by selecting the album. From this view, the user can:
  • Select colors for drawing and coloring.
  • Select the line width of the brush.
  • Color the object.
  • The Toolbar at the top of the view allows the user to:
    • Return to the main menu.
    • Undo the last stroke (not implemented yet).
    • Audio of the letter (currently done with Wizard of Oz).
    • Save the screen (audio currently done with Wizard of Oz).
    • Audible information of the view and what all the buttons do (currently done with Wizard of Oz).
Address Task 3: Connect the Dots, Coloring, and Saving
Album view displaying saved drawings and highlighting active buttons.
The album view is where the user can go to view all their saved drawings. A grid of image thumbnails organizes the saved drawings and allows the user to either view the enlarged version of the saved image or delete the saved image. To view the saved drawing, the user double-taps the desired thumbnail and a view with the enlarged version of the saved image will appear. To delete a saved drawing, the user simply drags the desired thumbnail to the trash can icon at the top of the screen. From this view, the user can:
  • Access a saved drawing, by double-tapping.
  • The Toolbar at the top of the view allows the user to:
    • Return to the main menu.
    • Delete a saved drawing.
    • Audible information of the view and what all the buttons do (currently done with Wizard of Oz).
Addresses Task 1: Viewing and Accessing the Album
Saved drawing view displaying a previously saved picture.
The saved drawings view simply allows the user to view the enlarged version of the saved drawing. Spawning from the album view, this view is a display-only interface with a single function allowing the user to return to the album. From this view, the user can:
  • View a saved drawing.
  • Return to the album view.
Addresses Task 1: Viewing and Accessing the Album

Omitted UI

Voice Directed Prompting

  • After extensive low-fidelity prototype testing, we observed that our users did not like to be told what color to use for any of the tracing activities. Instead, the users chose which ever color they desired and traced the letter/number. For the time being, we have omitted this UI functionality but may reintroduce it later into the project if we can prove its educational validity through a higher fidelity prototype. Our reasoning for this is because a goal of the iBCs application is to aid in the recognition of colors. We feel the unfamiliar vocal prompts of our "computer" and the anxiousness of the users during the low-fidelity prototype testing may have provoked unintended results.
  • Besides the unimplemented functionality stated above, all other functionality proposed during the low fidelity prototype was completely implemented. Therefore, no further design decisions were made to discard any user interface seen as too difficult or inappropriate.
  • The reason we decided not to implement certain portions of our UI is because we wanted to complete the three main tasks first. We decided to concentrate on completeness of the three tasks and worry about functionality of the other views in the next iteration.

Wizard of Oz Techniques

  • No audio cues have been implemented yet; any instructions or feedback must be provided by someone supervising the interactive prototype. These include:
    • Information button
    • Sound button from letter tracing and canvas
    • Instructions (For example: "Trace the letter A in any color")
    • Verbal instructions for prompts (For example: "Are you sure you want to delete?")
  • In addition to lacking audio, the feedback on letters (how well the child did tracing the letter) requires logic we have not implemented yet. As a result, we must use a member of our group to simulate identifying the user's inputs into the tracing page and distinguishing correct and incorrect letter traces.

Code Documentation

  • Based code to implement swipe on this tutorial:



[add comment]
Personal tools