» Bad Graphic Design and Preschool Websites

Recently I have been reviewing a number of projects that are focused on an audience ranging from preschool until 6th grade. One thing very apparent amongst these projects is their homogenized aesthetic. This aesthetic is semi-appropriate for the age group being targeted however there are a number of reasons why I consider the design to be bad. The term “bad” is being used in the context that it directly impacts the works effectiveness. For a better understanding of this context for the critique of these works please see the article “Pizza Flyers: The Height of Good Graphic Design?” from Speak Up.

When talking about children, the range of ages present between preschool and 6th grade are so wide that such a homogenized aesthetic is just plainly ineffective. What appeals to a preschooler is obviously not going to appeal to the tastes of a pre-teen. This however is not present within a large majority of the work. When talking about websites it is painfully obvious that little thought has been given to usability in most cases. Some sites are so complicated that even I am unable to successfully navigate them, a feat that would be impossible to a preschooler. Regardless of whether a parent is present to help a young user, usability should be as simple as possible so the child is able to understand and learn from the experience.

Preschoolers are obviously the hardest group to design for, due to their underdeveloped skill set such as a lack of reading skills. Because of this I have chosen to feature some site that I feel are successful in targeting these young users and explain why. Beforehand I would like to explain the bad graphic design conventions that I have found within design for children.

The Aesthetic Conventions

There are a number of overused and abused graphic treatments that are common amongst the projects. Traditionally these treatments would be avoided within more “sophisticated” design, however it appears that designing for children means that there is no such thing as bad graphic design.

Excessive Use of Primary Colors – The use of primary colors within work aimed at children may be an acceptable and contextually appropriate, however rainbow backgrounds that do not otherwise compliment the content are not,

Extremely Profound Drop Shadows – These drop shadows would be definitely be within the range of 90 to 100% opacity, and of excessive size. In most cases this has been done to differentiate the element in the presence of either extremely bright multicolored backgrounds or in the presence of a weekly defined hierarchy.

Comic Sans – Need I say more? Unless this is a speech bubble for a character Comic Sans should not be used. There are much better “child friendly” and energetic typefaces, no I’m not talking about marker felt.

Sparkling Stars – Whether in animated form or not, the use of blinking stars is everywhere to be found. In most cases they are used to convey “magic” however the execution is usually very under developed and adds little to the concept.

Heavily Outlined Type – A large majority of display type is heavily outlined to the point where legibility becomes a concern. This is usually being done in a similar situation to the drop shadows as a way to differentiate from a poorly executed use of a busy background.

PBS Kids

Websites for Preschoolers
The PBS Kids website is my favorite of all the children’s websites I reviewed. The site features a bright and color palette and has an overall fun and friendly appearance. The use of animation is appropriate and not filled with excessive “glitter.” The typography is childlike, expressive, and friendly while avoiding the overuse of graphic treatments. Unfortunately this level of design is not present throughout the entire site, and individual shows’ sites seldom meet the standard set by the opening page. Visit the Site

Peter Rabbit

Bad Graphic Design
The site for the Children’s classic books about Peter Rabbit is the most visually different of all the sites I reviewed. The unique illustration style may be tied to the age of the series, however it is what ultimately differentiates it from the malaise of its competitors. Its interesting use of flash to create a “pop-up” book is also executed much more successfully than the majority of sites. Visit the Site

Sesame Street

Preschool Website
Sesame Street’s site may use a number of the conventions listed above, however its execution is more polished and refined than most. Video is also used in a very creative way that not only adds interest but compliments the design of the site. The site also finds a way to use numerous bright and visually complicated backgrounds in a way that is effective while maintaining a strong visual hierarchy. Visit the Site

Freedom that Falls Short

The main disappointments I find with these sites are their lack of creativity. In theory having an audience comprised of such young individuals should allow for a level of creative freedom not normally found with most clients. The few sites I have listed above find a way to utilize this creativity in both a visually appropriate and effective way, something that every designer can learn from.

08/17

ADD A COMMENT

13 Comments

Share This Page: Stumble It! // Del.icio.us // Float It! // Digg It! // Reddit

13 Responses to “Bad Graphic Design and Preschool Websites”

Geoff
August 18th, 2008 at 1:48 am

The best (only?) easy to navigate and genuinely useful website I’ve found for my older kid (5 now) is Starfall.com. It’s not overly modern, but has lots of good content to help kids with letters and reading. Wish I could find more at the same quality level.
bloggiedoggie
August 18th, 2008 at 6:31 am

Another good site designed for Preschoolers is Ziggity Zoom. This is a relatively new site but they seem to combine both Fun & Educational activities quite well. http://ziggityzoom.com
jeremy
August 18th, 2008 at 8:22 am

We have designed a site for preschoolers and had a ton of discussion and research around the design and usability of the site. One thing we found in our research was that children (that could read) often successfully navigated sites like Amazon.com because the information is just laid out with simplicity.

I’d like to hear what the people think of our site for preschoolers. agkidzone.com
Zinni
August 18th, 2008 at 12:01 pm

Jeremy,

I would definitely say your site is quite amazing, I would be extremely proud to have such a high quality piece in my portfolio especially when compared to competitors. Great work, and I am glad that your research reinforces my personal beliefs / experience about designing for children.
J. Jeffryes
August 18th, 2008 at 12:11 pm

Can you share some examples of the bad design you mentioned?

J. Jeffryes’s latest post: This is Why You Hire a Designer
M Reuvecamp
August 18th, 2008 at 4:35 pm

Jeremy,

I have been researching Pre School sites, and educational sites for a fair while now, and would have to agree with Zinni that your site is very clean, well laid out and simply wonderful.

I guess that the one thing that I have been struggling with is that we have been designing the site as a educational resource (as in a teaching resource) as opposed to a site simply that supports a TV show. The structure has to be quite different in that regard them to be able to get all the information to the audience in a logical and clean manner while still adhering to educational standards.

Another one I looked at was the national georgraphic’s educational website. Which is quite busy but still manages to portray videos quite well. The problem arises when you are trying to convey multiple layers of navigation to children.

Another issue that many of these sites do not consider is that not everyone has the lastest version of flash, and that consideration still needs to be given to audiences that are not up to the everyday web designer or graphic designer of today. Believe it or not, Dial Up is still being used as the norm in certain countries, which greatly affects how a site is built. This is probably not the case in North American or Europe but it still needs to be a consideration.

Any comments people have in regards to this?
Zinni
August 18th, 2008 at 7:03 pm

M Reuvencamp,

I agree with your assessment that not everyone has the latest version of flash, especially when thinking about learning institutions and lower income school districts. There are a large number of technical restraints including monitor resolutions that need to be carefully considered prior to starting a design.

I also understand how portraying multiple layers of navigation can be a problem for children. I think the best solution to that is to just make everything as simple as possible. Maybe some form of visual breadcrumb could also be effective?

Thanks for your great comment!
jeremy
August 18th, 2008 at 9:20 pm

Thank you all for the great feedback, since I live in a bubble it’s good to hear what outsiders think. Another thing that we found when studying this demographic, which by the way, a lot of our research came from the Kids Usability Report from the NN Group, was that yes kids are using older hand-me-down computers but also that their computer experience thus far has probably been with interactive cd’s and games that will usually take over the entire screen. It was a conscientious decision for us not to go that route but worth considering, especially for a more educational site.

Lastly, sites that made cooky and ‘fun’ navigation often lost the users (either kids or parents). Making the navigation simple and getting the content to the user is always key. I have the benefit of having 3 kids ages 11, 3 and 11 mos to help test things out. I’m really surprised at my 3 yr old’s ability to navigate through YouTube.com (thumbnail + click + watch + repeat) :)
Zinni
August 18th, 2008 at 9:50 pm

Jeremy,

I know exactly what you mean about working in a bubble. Thanks for all the great information you have shared, and for telling me about the Kids Usability Report, I have been looking for something like it.
MReuvecamp
August 18th, 2008 at 11:03 pm

Thanks for the reply guys.

Jeremy your feedback was really great, as was telling us about the research! Will have to have a look at that and possibly purchase it!

Ultimately I think we will end up stripping the navigation back to bare necessities and using a basic ‘step by step’ progress so that the child is simply guided to the next stage instead of providing them the options. I love how in AGkidzone there is a simple next and previous smaller video on either side of the main video, so effortless (and the idea I guess) and simple to just go to the next or previous film without searching.

Potentially thinking of doing a similar idea, but including a progress bar so that the student can ‘jump’ to 10 / 20 videos to a certain stage if necessary. While making sure not to complicate it!

Thanks for all the help and feedback guys, this post was golden!
Pinkpetrol.com
August 19th, 2008 at 3:53 am

Great tips, something of these were touched upon when a 60year old consultant wanted to the do the design for a 13-18s website!!!!! i think he was thinking of changing his name to comic sans at on point. :)
Mabel
August 19th, 2008 at 12:36 pm

you only show sample of pre-k to 3 sites. What about older kids?
Madjick
August 22nd, 2008 at 2:41 am

When I saw the title and started to read the article, first thing I thought of was “Sesame street” and then I saw it as one of the good examples at the bottom of the article. My son is 3 yrs old and he doesn’t speak english (we’re from Poland) but thanks to the easy and intuitive navigation he always finds whatever he wants. That gave me a thought that the best test for a kids site is to put a couple of children (in different age) in front of the computer and see how they react. In my opinion the feedback from children, not us old farts would be the best way to describe if the site is good or not.