Creating Effective Websites

for Children

Table of Contents

produced by Yunmeng Du &

Maggie DeBaldo2007

Introduction.......................................Audience Considerations...................Age Range........................................Visual Appeal, Layout........................Visual Appeal, Graphics....................Interactive Design, Overview...............Interactive Design, Example................Navigation.........................................Accessibility.......................................Privacy Issues....................................Usability Testing..................................Example I..........................................Example II.........................................References........................................

345678910111213141516

Introduction

Welcome! You are about to embark on a very exciting journey - designing a website for children! The following is our attempt to briefl y 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 fi rst 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 fi nd 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 fi rst 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 fi eld, audience in this sense is known as defi ning the end-user. When creating products for children, designers should generally defi ne the end-users fi rst, as there are often multiple audiences involved.

Determining the end-user of a children’s website is much more complicated than defi ning 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.

While gender-defi ned 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.

Multiple Audiences

Gender

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).

4

Age Range

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

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.

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 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 specifi c information. n33

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 3-5

Ages 6-9

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 defi ne elements that would be helpful for a young 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.

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

6

Visual Appeal, GraphicsIcons have traditionally been thought of as visual representations of something. When it comes to the computer industry, icons also represent a program, fi le, 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 fi eld. 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 fi nd engaging. Friendly characters make websites approachable, engaging, and memorable.

•

•

7

Interactive Design, Overview

The following page takes a close look at the search page for the International Chi ldren’s Dig i ta l L ibrary (www.childrenslibrary.org). This homepage includes a vivid and eye-catching b u t t o n , which leads to the online catalog.

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 fi rst 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 fl exible and easy-to use online catalog.

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.

Helpful hint:When incorporat ing F lash in to your website, make sure that all end-users can easily download the plug-in programs and applications required by the Flash animation.

8

Interactive Design, Example

The top left-hand c o r n e r b u t t o n s use icons for the homepage, FAQ and contact information.

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

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

The buttons beneath t h e r e s u l t s b o x facilitate searching by volume or award.

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

T h e b u t t o n s t o t h e r i g h t o f t h e results box facilitate searching based on specifi c topics.

9

Navigation

Helpful Hint:Bo th g loba l and i n te rna l 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!

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:

Global Navigation BarUsually, 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."

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."

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.

Check informational images for alternative text.

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 your webs i te wi th d i f ferent browsers and different operation systems.

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.

‘Listen’ to video or audio content with the volume turned off.

Check you can access all areas of your website without the use of a mouse.

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

Ensure linked text makes sense out of context.

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.

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.

11

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 nature of the internet." 12 For further information, please v i s i t t he Federa l Trade Commission's websites about COPPA, located at http://www.ftc.gov/bcp/conl ine/pubs/onl ine/k idspr ivacy.pdf and http://www.ftc.gov/privacy/privacyinitiatives/childrens.html.

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.

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 identifi able information."Data Integrity & Security: Essentially, this aspect declares that only pertinent data should be kept on fi le 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.

•

•

•

•

•

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

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 specifi c 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 fi nish 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

14

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

The screenshot shown above is a more complicated children’s library website (ICDL) compared to the fi rst 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.

Example II

15

References1. 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-web-accessibility.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