'Kids' Toon' website - a case study

Childhood is a very important stage. Children always look for new things which are fun instead being just a routine way of learning. Because of rapid advancements in technology, children are drawn to computers and electronic games, so we need to take care of them and develop useful applications where they can play and learn at the same time.

Kid' Toon Website is enjoyable and educational software developed by Aisha Ali Al-Tenaiji, and Maryam Al-Humaidi, students at the College of Information Technology at United Arab Emirates University. The purpose of the software is to provide kids with enjoyable and indirect educational materials.

Kids' Toon Website includes four main parts. The "ABC" section is where kids learn the alphabetic English letters which are represented as images of alphabet blocks with different colors. The "Photo Gallery" allows children to learn a character's name and how it looks when written. "Movies" allows kids to watch movies for their favorite cartoons' characters. This part is provided as a break time for kids and they can play on it after finishing their studying. Also, they can learn from these movies. At the "Story" part, kids read stories which contain pictures. Some of these stories are funny and others are educational but in an enjoyable way.

User Analysis: In order to define primary and secondary user groups, we found that most of the users fall into two categories; children who are navigating the internet to learn and have fun, and teachers or parents who look for useful Websites for their kids.

Children are considered as the primary users since they are the actual people who will use the site. Teachers and parents could be considered as secondary users, but they find what they are looking for through Kids' Toon. The Website is designed for all children, but it will be most widely used by children whose educational level is from grade three to grade six, because they have some experience with computers and the Internet.

Usability Specification: The user needs analysis have shown the flexibility and easy allocation of tasks. We have designed the Website to be flexible enough for children who are novices because the Website will not ask the user to perform many tasks to get its services, but requires just a few clicks on big icons. Also, the Website is flexible for the advanced beginner users.

Prototyping: Prototypes are used to imagine or suggest how the final project will look like. We started with a low fidelity prototype on papers (Figure 1). Then we started implementing a high fidelity prototype using Adobe Photoshop 7.0 ME, Adobe ImageReady 7.0 ME and Microsoft FrontPage. We designed the whole Website using Adobe Photoshop 7.0 ME, Adobe ImageReady 7.0 ME, where we used different color schemes and the typography with animations for buttons, arrows and some texts. We used Microsoft FrontPage to link the different pages.

The high fidelity prototype (evolutionary prototype, (Figure 2)) became the final project after changing the colors and adding more pictures, and a couple of changes to the design. The prototype helped us to save time, effort, and costs because omissions and mistakes were flushed out early in the development process, not after implementation.

Content Organization: In our Website, we used topical organizational schemes. We also used hierarchical and hypertext organizational structures.

Color-Harmony Scheme: For the Kids' Toon Website we used different kinds of color-harmony schemes. In general, we used a complementary color scheme (hues of colors which appear opposite one another on a color wheel), analogous color schemes (two or more colors whose hues lie close together on a color wheel), and monochromatic schemes (colors of same or similar hue, differing in brightness and/or saturation). We used the artist's color wheel model (RYB).

Typography: We used two fonts -- Bertram font, and Times New Roman font. We choose the Bertram font type because it has nice style which kids like, and we use it in all our Website pages. Bertram font is not available on all users' machines, so we use it as text in graphics which will allow the Bertram font to be shown for all our users. Text in graphics means that the text will be shown as an image, not astext. Times New Roman Font was used in the "Story" sub pages because Bertram font will make it hard for the user to read the story.

Multimedia: We used multimedia at the "Movie" page to show movies for the kids. Our multimedia is Windows Media Player and its size is 4.25 MB. It takes less than 5 seconds to run and the user can watch the movie on the Web site but he/she can't download it.




Figure (3) Kids' Toon Website screenshots.

This site was designed and implemented in 2004 as a project for the Graphics and Human Computer Interaction course supervised by Dr. Tamer Rabie, the course instructor.

More functionality will be added to the system in the near future. This includes:
• On-line interaction between users or their parents/teachers and the developers.

• Providing more varity lessons by keeping the enjoyable way.