A web site for iParent


Drag me

iParent is a listserv for Information School students who have children. It provides a forum for exchanging information, trading babysitting, planning for school breaks, and other issues critical to parents. Members should feel free to post questions or information which are pertinent to the iParent community. Although it was created by students, we welcome iSchool faculty and staff to use the list as well.

Suppose that iParent wants you to build a webpage for their children. Such a webpage would be a child's introduction to the iSchool and explain what "Mommy or Daddy are doing when they're not at home with you".

Let's suppose that most of the children interacting with the site will be beginning readers...they can decode words such as "study" or "student" or "classroom" or "teacher" when these words are accompanied by an appropriate picture.

The following is a list of websites that give pointers about the design of a website for children. The general character of a webpage designed for children is image heavy, text light, bright with colors, and uses lots of animation.

It is very desirable that this webpage be as child friendly as possible. This means that the webpage should "remember" how a child last left a webpage...the position of its images, the colors chosen for font and background, and so on.

Usually, collecting the child's name and then saving it as a persistent cookie is frowned upon. But it is certainly the case children respond positively to being address by their name. This means that you could collect the child's name as a session cookie, and then build in alerts or other dialogs that would be of this nature "Hi Jason, press that button again!", etc., etc.

Kids' Corner: Website Usability for Children

Nielsen warns about unclear location information, non-standard interaction techniques and lack of perceived clickability. Animation and sound effects are positive attractors for children who often "scrub the screen" finding all the areas/images that react to mouse over. In summary, "children want content that is entertaining, funny, colorful and uses multimedia effects."

Kids Find Most Television Commercials "Annoying". Packaged Facts, March 1997




Make It Memorable: Use Bright Colors and Bold Designs. Packaged Facts, March 1997





Slider that changes the font size of the textareas elements.


Color picker

Color picker slider changes the font color of this page. It also changes the background color of the square.

Selected color:





MooTools is a JavaScript library with a number of widgets, including the slider and color picker on this page. I hacked up the MooTools "demo.js" file [see red text below] to target the textareas on this page, target a div with a background color and hitch the color attribute of the <body> element.



[HTML]
<!-- MooTools includes -->
<link rel="stylesheet" href="demo.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="demo.js"></script>

...

<div id="myElement" class="slider">
	<div class="knob"></div>
</div>

<div id="fontSize">
	Slider that changes the font size of the textareas elements.
</div>

[demo.js]

window.addEvent('domready', function(){
	// First Example
	var el = $('myElement'),
		font = $('fontSize');
	
	// Create the new slider instance
	new Slider(el, el.getElement('.knob'), {
		steps: 35,	// There are 35 steps
		range: [8],	// Minimum value is 8
		onChange: function(value){
			// Everytime the value changes, we change the font of an element
			font.setStyle('font-size', value);
		
		var allTextAreas = document.getElementsByTagName("textarea");			
		for (var textAreaElements = 0; textAreaElements < allTextAreas.length; textAreaElements++)
		{
			allTextAreas[textAreaElements].style.fontSize = value + "px";
		}
		
		}
	}).set(font.getStyle('font-size').toInt());
	

	// Second Example
	var el = $('setColor'), color = [0, 0, 0];
	
	var updateColor = function(){
		// Sets the color of the output text and its text to the current color
		el.setStyle('color', color).set('text', color.rgbToHex());

		
		var myBody = document.getElementsByTagName("body");
		myBody[0].style.color = color.rgbToHex();
		var myDiv = document.getElementById("myDiv");
		myDiv.style.backgroundColor = color.rgbToHex();
		
		
	};
	
	// We call that function to initially set the color output
	updateColor();
	
	$$('div.slider.advanced').each(function(el, i){
		var slider = new Slider(el, el.getElement('.knob'), {
			steps: 255,  // Steps from 0 to 255
			wheel: true, // Using the mousewheel is possible too
			onChange: function(){
				// Based on the Slider values set an RGB value in the color array
				color[i] = this.step;
				// and update the output to the new value
				updateColor();
			}
		}).set(0);
	});
});