Creating Effective Websites for Children

Table of Contents

Introduction....................................... 3 Audience Considerations................... 4 Age Range........................................ 5 Visual Appeal, Layout........................ 6 Visual Appeal, Graphics.................... 7 Interactive Design, Overview............... 8 Interactive Design, Example................ 9 Navigation......................................... 10 Accessibility....................................... 11 Privacy Issues.................................... 12 Usability Testing.................................. 13 Example I.......................................... 14 Example II......................................... 15 References........................................ 16

produced by Yunmeng Du & Maggie DeBaldo 2007

Introduction Welcome! You are about to embark on a very exciting journey - designing a website for children! The following is our attempt to briefly introduce you to some of the most important concepts in web design, and we have done our best to apply those issues to children’s needs. Currently, there is little literature which directly addresses how websites for children should be constructed. Our response to this was to combine strong web building techniques with a knowledge of assessing quality children’s literature. Several sources were invaluable in creating this guide. We heavily referenced Helene Blowers and Robin Bryan’s book Weaving a Library Web: A Guide to Developing Children’s Websites. Additionally, we used two children’s websites as examples for the principles we introduced. The first half of the booklet uses screenshots from The Big6 website (www.big6.com/kids/K-2.htm)1 and the second half of the booklet uses screenshots from The International Children’s Library (www.childrenslibrary.org).2 Our intended audience for this book was primarily elementary teachers and children’s librarians, although anyone building a website for children should find this guide useful. This booklet is only intended to act as a beginning reference tool. We sincerely hope that you will research further and create a wonderfully effective website for children! As you begin construction on your website, please keep this advice in mind: “Young users, like adults, will be more likely to return to your site if you first give them quality rather than quantity. It is better initially to offer fewer features that are high in quality and easy to use than to offer many features that are mediocre in design or poor in functionality”.3 This booklet was produced for educational purposes only and may not be reproduced without permission from the authors.

3

Audience Considerations When designing websites, determining the audience is a crucial step. In the Information Architecture field, audience in this sense is known as defining the end-user. When creating products for children, designers should generally define the end-users first, as there are often multiple audiences involved. Multiple Audiences

Determining the end-user of a children’s website is much more complicated than defining the end-users of most websites. The end-user of a children’s website could be a child, a parent, a teacher, or a care-taker. Remember that your ideal end-user is a child. However, by acknowledging that there could be adult end-users, your website design will be more cohesive and effective.

Helpful Hint: There are many ways to deal with multiple audiences. Consider creating separate entry pages for the adult and the child end-users or add links on the child’s entry page to content geared towards adults (such as privacy issues).

Gender

While gender-defined interests drive much of the toy industry, websites are in a unique position to create gender-neutral products. Even if the designer subconsciously thinks “Girls will like this page,” that does not necessarily mean the page should be designed with pink backgrounds. Children have a variety of interests, and websites should actively encourage those interests. 4

Age Range When creating websites for children, it is important to define the age range of your intended audience. Cognitive development defines how well children of different ages comprehend difficult sentences and complex navigation. Additionally, how well topics are approached should be covered differently for younger and older end-users.

Ages 3-5

Helpful Hint: There are many useful guides for choosing appropriate literature for children, which can easily be used as references when creating effective websites for children. Donna E. Norton’s Through the Eyes of a Child (2007)4 is an outstanding resource.

Websites for children ages 3-5 must contain very clear visual cues, e.g. intuitive icons and appropriate colors. Because their motor skills are still developing, the icons need to be large enough to facilitate browsing. Activities should be short in duration and repetitive to encourage a sense of accomplishment.5 Examples of activities may include concept games6 to emphasize colors, size, and shape. Websites geared towards children ages 6-9 should include interesting graphics but may also include short phrases which accessible to beginning readers. For example, an icon which stands for the homepage may also include a label which states “Home.” This age group uses websites to explore rather than to search for specific information. n33

Ages 6-9

Websites geared towards children ages 10-12 may include more substantial text and syntax. However, it is important to strike a balance between text and visual cues. This age group is becoming more interested in interaction with their peers,7 so activities may include outlets for expression, e.g. blogs and surveys.8 Ages 10-12

5

Visual Appeal, Layout An appropriate layout is crucial for young end-users, especially as they are still learning how to navigate websites. Designers have the ability to guide the end-users in their exploration of a website by incorporating elements which guide the eye. Below is a mock-up of a website for a children’s library. Take a look at it and define elements that would be helpful for a young enduser.

Helpful Hint: Before you begin creating your website digitally, create a mock-up drawing of it first. Imagine that you are your enduser. Does your layout aid navigation according to the needs and abilities of the end-user?

The website above is an excellent example of a layout which guides the user’s eye. In general, the thickest part of a line acts as a sort of arrow, directing the eye to the next area. Curves can be used in several different scales to provide continuity. For example, the black curves in the example to the right are scaled at 30%, 100% and 66%, respectively. Using basic shapes repeatedly is an easy way to facilitate simple and effective layouts. 6

Visual Appeal, Graphics Icons have traditionally been thought of as visual representations of something. When it comes to the computer industry, icons also represent a program, file, directory, user, or other computational functions.9 Think of the house icon which corresponds to the homepage. Below are three icons which indicate that the user wants to stop loading a page. Which do you think is the most intuitive? Helpful Hint: The term “intuitive” is often used in the information architecture field. However, an icon, for example, cannot be deemed “intuitive” without usability testing. Children could potentially understand each icon: the stop sign because they are used to crossing the road, the stop light because they play the game Red Light-Green Light, and the x because it creates a symbolic barrier between the user and the object.

Characters are the mascots of websites. They create clear associations between the end-user and the website. For instance, instead of saying, “I want to go to that worm website,” the child could say, “I want to go to the Big6 website.” Some things to remember: • Use a character sparingly. Characters on websites geared towards the youngest children should exist in only 1-3 different poses in order to provide visual consistency. • Create colorful, personable characters which children find engaging. Friendly characters make websites approachable, engaging, and memorable.

7

Interactive Design, Overview Interactive design, as a general definition, is a field and approach to designing interactive experiences. This goes beyond digital media (like websites) and could include mediums such as live events or performances, products, and services, etc. Interactive Design is concerned with the end-user, customer, audience, or participant’s experience flow through time. 10 Essentially, Interactive Design controls and facilitates how the end-user interacts with the website. Note that creating and incorporating interactive experiences requires a large amount of time for planning, organization, and implementation. Also remember that websites should first create quality content and then (slowly) incorporate interactive features. Applications are defined as tools for creating interactive parts for a website. Applications like Flash, instant messaging, and form submission can all be seen as interactive parts of a website. An interactive aspect of a children's library website may include a flexible and easy-to use online catalog. Helpful hint: Flash is an effective animation tool to grab and keep children's attention. Effective Flash components can make a site more memorable. However, Flash components should have a purpose or provide a service beyond being eye-catching. For example, a Flash interface can look like a book, and buttons clicked on can simulate "turning a digital page." By encouraging mouse-eye coordination, Flash facilitates a more interactive experience. In another example, a children's library website could incorporate Flash animation into a homework help page. A smiling character who offers help is much easier to learn from than a set of text-only help boxes. 8

When incorporating Flash into your website, make sure that all end-users can easily download the plug-in programs and applications required by the Flash animation.

The following page takes a close look at the search page for the International C h i l d r e n ’s D i g i t a l L i b r a r y ( w w w. childrenslibrary.org). This homepage includes a vivid and eye-catching b u t t o n , which leads to the online catalog.

Interactive Design, Example The top left-hand corner buttons use icons for the homepage, FAQ and contact information.

The buttons on top of the results box facilitate searching based on the base colors of the cover.

The buttons to the right of the results box facilitate searching based on specific topics.

The buttons to the left of the results box facilitate searching by three age ranges.

The buttons beneath the results box facilitate searching by volume or award.

A search box below the awards buttons facilitate searches by keywords and language.

9

Navigation Global Navigation Bar Usually, there are two integrated navigation tools in a website. There is a top navigation bar and a bottom one. Labels that appear on these bars often link to separate pages for "about us," "contact," "home," "services," "FAQ," "feedback," "sitemap," and "privacy statement." The top and bottom bars often contain the same links but may have different names or labels. For a children's website, consistent, simple-to-remember and vivid labels are crucial. Using icons instead of or in addition to text-only labels is more effective for young end-users. The icons in the global navigation bars are good examples. Top navigation bar:

Bottom navigation bar:

Helpful Hint: Both global and internal navigation bars should take colors into account. A good color coded system is effective and friendly for children. Consistent labeling is important for all websites, especially those designed for chilren. Let the kids know where they are, always!

Internal navigation bar: Known as a secondary navigation bar, this contains a set of items which change as the user navigates through the site. While the bar is always visible, the links it shows are specific to the page the user is currently browsing. For example, the internal navigation bar on a homework help page will have different links than the links for a storytelling page. An example is shown on the right.

10

Accessibility Thinking about accessibility forces you as a website creator to think how diverse end-users will interact with your product. Below are 6 basic tests to check your website for accessibility.11 For more information on accessibility, Google the term "accesibility for websites." Ensure linked text makes sense out of context.

Check informational images for alternative text.

Visually impaired Internet users can browse web pages by tabbing from one link to the next. Do all the linked text on your website make sense out of context? ‘Click here’ and ‘more’ are two common examples of non-descriptive link text that can mark accessibility issues. C h e c k y o u r w e b s i t e w i t h d i ff e r e n t browsers and different operation systems.

In your browser, place the cursor over an informational image like an organization logo. Does a yellow box appear with a brief, accurate description of the image? For users whose browsers don’t support images, this alternative text is what they’ll see (or hear) in place of the image. ‘Listen’ to video or audio content with the volume turned off.

Be sure to check your website using different popular browsers and operating systems, e.g. Internet Explorer, Firefox, and Mozilla; Mac and PC . Browsers "read" websites differently, so don't be surprised if your website looks different in each browser and on each operating system. Check you can access all areas of your website without the use of a mouse.

If you turn your speakers off, you’re clearly unable to listen to any audio content. Include subtitles or written transcripts with audio content, so that your website is accessible to hearing-impaired users. Check your webpages with an automated program. Some accessibility programs available for free on the Internet. They’re unable to provide you with all the information that you need, as most accessibility checks must be done by humans, but they can tell you some of the areas that need to be looked at again.

Can you navigate through your website using just tab, shift-tab and return in Internet Explorer? If not, then neither can keyboardand voice-only users. 11

Privacy Issues If you plan on collecting any information from the child end-users, you need to be aware of privacy issues. This is a very complex concept, and the materials presented here are merely a starting point for your needs. Depending on the size of your website, you may want to consider creating a privacy policy. At all times, however, be conscious of the fact that you have a responsibility towards the safety and well-being of the child end-users. Helpful Hint: In 1998, Congress enacted the Children's Online Privacy Protection Act (COPPA) to "place parents in control over what information is collected from their young children online. The Rule was designed to protect children under age 13 while accounting for the dynamic 12 nature of the internet." For further information, please v i s i t t h e F e d e r a l Tr a d e Commission's websites about COPPA, located at http:// www.ftc.gov/bcp/conline/ p u b s / o n l i n e / k i d s p r i v a c y. pdf and http://www.ftc.gov/ privacy/privacyinitiatives/ childrens.html.

Helpful Hint: Privacy policies should be prominently displayed on both the entry sites and the pages if/where personal information is collected.

According to the American Library Association,13 there are 5 aspects of privacy: • Notice and Openness: User's "rights to privacy and confidentiality and of the policies of the library that govern these issues" • Choice and Consent: "Giving users options as to how any personal information collected from them may be used." • Access by Users: "Users have the right of access to their own personally identifiable information." • Data Integrity & Security: Essentially, this aspect declares that only pertinent data should be kept on file and for only as long as it is needed. Appropriate security measures should also be taken. • Enforcement and Redress: If you create a privacy policy, you need to follow it. For further information on ALA’s 5 aspects of privacy, go to their website at http://www.ala.org/ala/oif/iftoolkits/ toolkitsprivacy/guidelinesfordevelopingalibraryprivacypolicy/ guidelinesprivacypolicy.htm#notice.

12

Usability Testing In professional web design circles, usability testing has become an essential component of any web project. Similar to focus groups in brand development and product launches, usability testing offers a rare opportunity to receive feedback from the very people the website is aimed at – before it’s too late to do anything about it. A usability test should be conducted on users in order to help evaluate the site. During a usability study, users are observed doing assigned tasks such as searching for a book, recognizing and understanding labels, and asking for help. A typical usability test for a library website consists of two aspects: First, set some benchmarks for measuring the success of future site designs, and second, identify specific usability problems as a starting point for improving the site design.

Some guidelines for usability testing: • Choose subjects. As with any research project, the results are only as good as the people you test. Make sure the research process will not provide any other details that will cloud the judgement of the participants. • Provide clear instructions for participants on how to finish the task. • All instructions should be written in plain English. • Get the users familiar with the environment. • Provide participants with scenarios rather than instruction. • Each participant must feel comfortable during the testing. • Only provide participants with one task at a time. More than this may intimidate the users. • Ask questions and suggestions after the testing is complete. Also ask the participants what they remember about the site structure and functions. 13

Example I

Above is the Big6 Kindergarten-2nd Grade website. To visit this website, go to http://www. big6.com/kids/K-2.htm. 14

Example II

The screenshot shown above is a more complicated children’s library website (ICDL) compared to the first example. This site actively provides services for both children and adults. In the center of the picture is the online catalog that kids can simply click on it to browse the digital collection. Around the searching icon are navigation bars. As the bars are text-heavy, they appeal more to adults’ preferences. This is an intricate children’s library website, and yet, it still includes the most basic and nessecary functions. To visit this website, go to www.childrenslibrary.org. 15

References 1. Barbara Jansen, Editor. “The Big6: The Super3, Grades K-2.” [Available Online.] (Big6 Associates, LLC, 2005),http://www.big6.com/kids/K-2.htm (accessed Febrary 26, 2007). --Mike Eisenberg and Bob Berkowitz. “The Big6 Skills.” 1987. 2. “The International Children’s Digital Library.” [Available Online.] (University of Maryland), http:// childrenslibrary.org (accessed February 26, 2007). 3. Helene Blowers and Robin Bryan. Weaving a Library Web: A Guide to Developing Children’s Websites. (Chicago: American Library Association, 2004), 62. 4. Donna E. Norton and Saundra E. Norton. Through the Eyes of a Child: An Introduction to Children’s Literature. 7th Edition. (Upper Saddle River: Pearson Merrill Prentice Hall, 2007). 5. Blowers, 61. 6. Norton, 12. 7. Norton, 33. 8. Blowers, 62. 9. S. C. Huang, personal correspondence. February 26, 2007. 10. “Ten quick tests to check your website for accessibility.” [Available Online.] (Webcredible, created June 2004), http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/testing-webaccessibility.shtml (accessed March 3, 2007). 11. “An Evolving Glossary of Experience Design.” [Available Online.] (Nathan: Experience Design), http://www.nathan.com/ed/glossary/ (accessed March 3, 2007). 12. “Frequently Asked Questions about the Children’s Online Privacy Protection Rule.” [Available Online.] (Federal Trade Commission, revised February 26, 2007), http://www.ftc.gov/privacy/ coppafaqs.htm (accessed February 28, 2007). 13. “Guidelines for Creating a Library Privacy Policy.” [Available Online.] (American Library Association, 2006). http://www.ala.org/ala/oif/iftoolkits/toolkitsprivacy/ guidelinesfordevelopingalibraryprivacypolicy/guidelinesprivacypolicy.htm#notice. (accessed February 28, 2007). This document may be reprinted and distributed for non-commercial and educational purposes only, and not for resale. No resale use may be made of material on this web site at any time. All other rights reserved.

16