Websites voor kinderen ontwerpen: Trends en Best Practices

• 12 min read
• inspiratie, vitrines, Webdesign, kinderen
• Share on Twitter, LinkedIn

Websites die voor kinderen zijn ontworpen, zijn grotendeels over het hoofd gezien in webdesignartikelen en razzia ‘ s, maar er zijn veel mooie en interessante ontwerpelementen en lay-outs op kinderwebsites die discussie en analyse waard zijn. Er zijn ook een aantal best practices die exclusief zijn voor Web design for children ‘ s sites-praktijken die meestal niet moeten worden geprobeerd op een typische website.

misschien wilt u een kijkje nemen bij gerelateerde artikelen:

• Best Practices For Web Design For Kids
• Designing For Kids Is Not Child ’s Play
• Designing Web Interfaces For Kids
• Dad’ s Plea To Developers Of iPad Apps For Children

dit artikel zal een aantal populaire commerciële websites presenteren die gericht zijn op kinderen met een analyse van trends, elementen en technieken die worden gebruikt om kinderen geïnteresseerd en gestimuleerd te houden.

ontwerp dat de zintuigen stimuleert

mensen worden mentaal gestimuleerd door een aantal factoren, en dit geldt met name voor kinderen. Succesvolle kinderwebsites implementeren een aantal elementen en ontwerpprincipes die een omgeving creëren die geschikt is voor de persoonlijkheid en interesses van een kind.

heldere, levendige kleuren

heldere kleuren zullen de aandacht van een kind gemakkelijk vastleggen en lange tijd vasthouden. Hoewel kleurkeuze een primaire factor is bij het ontwerpen van elk type website, geldt dit vooral bij het ontwerpen van een website voor kinderen, omdat Kleuren een grote indruk maken op de jonge geesten van kinderen. Kleur keuzes en combinaties die waarschijnlijk zou worden afgewezen of uitgelachen bij het ontwerpen van een typische website kan worden verwelkomd op een website voor kinderen.

hoeveel van de kleurencombinaties die in onderstaande schermafbeeldingen worden gebruikt, zouden slagen op een website die gericht is op een volwassen publiek? Niet veel. Dus, bij het ontwerpen van een site gericht op kinderen, gebruik heldere, levendige kleuren die visueel zullen stimuleren op een onvergetelijke manier.

PBS KIDS

Herman ’s Homepage

Funbrain Playground

een gelukkige stemming

kinderen zullen zich een website herinneren en terugkeren als hun ervaring gelukkig is. Elementen kunnen worden opgenomen in het ontwerp om ervoor te zorgen dat een vrolijke, positieve stemming wordt gepresenteerd.Mickey Mouse Clubhouse creëert een vrolijke stemming door Mickey zelf een visueel focuspunt op de pagina te maken. Zijn vrolijke gezicht en lichaamstaal helpen dit vrolijke gevoel te versterken en creëren zo een welkome sfeer.

de Play-Doh-website creëert een vrolijke stemming met een stralend kind als focal point.

de Fifi en de Flowertots website hebben een groot lachend Flowertot karakter in visuele focus, het creëren van een gelukkige stemming.

elementen uit de natuur

kinderen worden gestimuleerd door herkenbare elementen waarmee ze verband kunnen houden. Omdat de ervaringen van kinderen in het leven beperkt zijn, zijn sommige van de dingen die ze het meest vertrouwd met zijn te vinden in de natuur. Natuurlijke elementen zoals bomen, water, sneeuw en dieren worden gebruikt in de onderstaande websites. In veel gevallen worden deze elementen te veel benadrukt door grootte of eenvoud van ontwerp.

de Disney-website verandert het thema afhankelijk van het product dat wordt gepromoot. In deze screenshot gebruiken ze een Grand Canyon-achtig landschap om een onvergetelijke visuele ervaring te creëren.

Discovery Kids gebruikt een onderwaterthema.

Clubpinguïn presenteert een arctisch thema.

CBC Kids gebruikt een seizoensgebonden thema gebaseerd op simplistische, opvallende afbeeldingen.

PopCap-Spellen gebruiken een graslandschap voor grote zonnestralen.

Larger-Than-Life Design

Grote ontwerpelementen zijn effectief gebleken in alle soorten Webdesign, wat blijkt uit het feit dat grote typografie, grote knoppen en grote call-to-action gebieden gemeengoed zijn geworden in modern design. Omdat kinderen van nature worden aangetrokken door eenvoudige, voor de hand liggende en herkenbare objecten, zullen websites die voor kinderen zijn ontworpen hun effectiviteit verhogen door het gebruik van grote ontwerpelementen.

geanimeerde karakters

grote, geanimeerde, sprekende karakters zijn een fascinerende en boeiende manier om de aandacht van een kind te grijpen en vast te houden. Veel sites ontworpen voor kinderen gebruiken dit element effectief.

Barbie

Mr. Rogers’ Buurt

Disney Princess

Thomas the Tank Engine

Barney & Vrienden

Diepte in het Ontwerp

Kinderen willen laten hun fantasie de vrije loop in een wereld die eruit ziet en voelt echt aan. Dit soort sfeer kan worden gecreëerd door diepte in ontwerpelementen. Dit kan geëxtrudeerde vormen, schaduwen, Landschappen, afgeschuinde effecten, glanzende gradiënten of zwevende objecten omvatten. Vaak zijn veel van deze elementen aanwezig in cartoon-achtige displays, zoals hieronder weergegeven.

het Webkinz “Adoption Center” gebruikt schaduwen, een levensecht karakter en andere driedimensionale elementen om een ontwerp met diepte te creëren.

Poisson Rouge creëert een diepe, realistische atmosfeer met behulp van een venster dat naar de zon kijkt, samen met een aantal andere driedimensionale elementen.

Rainbow Magic creëert diepte in hun ontwerp door middel van een flash-geanimeerde landschap scène die beweegt als de gebruiker zweeft over verschillende elementen.

navigatie-en Call-to-Action-gebieden die opvallen

In een website ontwerp, navigatie-en call-to-action-gebieden moeten focal points zijn. Children ‘ s website ontwerpers kunnen oversimplify deze gebieden, zodat kinderen gemakkelijk kunnen navigeren. Tekstgebaseerde navigatie op kinderwebsites zou niet zo effectief zijn als grote knoppen en afbeeldingen, omdat ze geen visuele focus op een pagina zouden hebben.

Peppa Pig heeft een horizontale navigatiebalk met grote pictogrammen en gemakkelijk af te lezen beschrijvingen voor elk item.

de website van Winnie the Pooh integreert hun navigatiebalk in hun” forest ” – thema, met behulp van grote houten grafische elementen die de gebruiker niet over het hoofd zal zien.

Sesamstraat heeft een gemakkelijk te lokaliseren horizontale navigatiebalk, samen met grote call-to-action gebieden.

My Little Pony maakt gebruik van tekstgebaseerde navigatie, waardoor een minder grafische ervaring wordt gecreëerd, waardoor de aandacht op de inhoudselementen kan worden gericht. Dit kan in sommige situaties ideaal zijn, maar op een kinderwebsite is een grafische navigatiebalk waarschijnlijker effectief.

gebruikersinteractie

waarschijnlijk is een van de belangrijkste manieren waarop een kinderwebsite succesvol kan zijn, het opnemen van elementen die een kind in staat stellen op een of andere manier met de site te communiceren. Kinderen willen niet intens lezen of onderzoek doen; ze willen spelen en vermaakt worden.

op een typische website worden bepaalde ontwerpelementen als storend, onbruikbaar en omslachtig beschouwd. Op de website van een kind worden dezelfde elementen gezien als een effectief middel om gebruikers aan te trekken.

interactie Door Animatie en geluid

Effecten en ervaringen die met Adobe Flash zijn gecreëerd worden afgeraden in typisch modern webdesign, maar op kindersites is er bijna geen andere optie. Het is waar dat JavaScript animatie en effecten een lange weg zijn gekomen vanwege de vele JavaScript bibliotheken beschikbaar, maar het gemak waarmee complexe animaties kunnen worden gemaakt met Flash maakt deze methode de eerste keuze voor veel commerciële websites ontworpen voor kinderen.

de Playhouse-site van Pauly is, net als de meeste websites in dit artikel, volledig in Flash gebouwd.

de Hot Wheels-website bevat een geanimeerde “auto van de dag” die op het scherm zoomt wanneer de pagina wordt geladen, waardoor visuele interactie wordt gecreëerd.

Roary de racewagen heeft een korte ” flash intro “met een” skip ” knop. Dit is een old-school trend in typisch webdesign, maar is een effectief middel van catering aan een kind-based publiek. De intro animeert door een weg totdat de personages aan de horizon verschijnen. Dit helpt de gebruiker het gevoel alsof ze persoonlijk het invoeren van Roary ‘ s geanimeerde wereld.

de Yahoo! Kids navigatiebalk is gemaakt met Flash en maakt geluidseffecten en animeert wanneer de items worden zweefde over. Deze trend is zeer gebruikelijk op veel van de sites in dit artikel.

interactie via Video

televisie is bekend dat het kinderpubliek urenlang in de ban is, daarom zijn” Saturday morning cartoons “al tientallen jaren een lucratief onderdeel van de uitzendschema’ s voor veel TV-netwerken. Op dezelfde manier voegt video op de website van een kind een leuk, interactief en educatief aspect toe aan de inhoud van een site.

CBC – Video voor kinderen

Yahoo! Filmgidsen Voor Kinderen

National Geographic Kids-Videos

interactie door middel van spelletjes

welk kind houdt er niet van om spelletjes te spelen? Een van de meest effectieve manieren om een kind op een website te vermaken, op te voeden of anderszins bezig te houden is om een “games” – sectie op te nemen. Bijna alle websites onderzocht voor dit artikel omvatten games die onderwijzen, stimuleren, en toestaan directe interactie, terwijl ook het opnemen van veel van de ontwerpelementen al besproken. Hieronder enkele voorbeelden.

CBeebies-Gordon The Garden Gnome

Toy Story-Woody ’s Big Escape

Disney Pixar ’s World of Cars stelt gebruikers in staat om hun eigen aangepaste auto’ s te maken, te delen en te racen.

afdrukbare elementen

kinderen willen graag iets tastbaars meenemen om hun ervaring te herinneren. Afdrukbare foto ’s en kleurpagina’ s kunnen kinderen een herinnering aan hun ervaring te hebben, terwijl het geven van website-eigenaren een kans om te verbeteren en te promoten van hun merk buiten het computerscherm. Hieronder zijn enkele voorbeelden van te printen pagina’ s op kids websites.

Pingu Kleuren Pagina ‘s

Crayola Digi-Kleur

Peppa Pig kleurplaten

Thomas en Vrienden Online Inkleuren

Teletubbies – Afdrukken in Kleur

Onconventionele Methodes

We hebben al gesproken over een aantal elementen dat in de moderne typische Web design, worden nu beschouwd als onconventioneel. Geluid, animatie en grote opdringerige graphics worden vaak afgekeurd in typische Webdesign. Op kinderwebsites helpen deze elementen de gebruikerservaring. Andere onconventionele elementen en ontwerpkeuzes worden hieronder besproken.

het veranderen van de Cursor

dit wordt absoluut gezien als een slechte praktijk in standaard webdesign, maar kan een leuke, effectieve manier zijn om een speels element toe te voegen aan een kinderwebsite-thema. Dit kan worden gedaan met behulp van dynamische HTML, maar wordt vaker gedaan via Flash.

de cursor op de Discovery Kids-website verandert in een snapping bear trap-afbeelding.

de cursor op de website van Sesamstraat wordt gevolgd door een gele ster wanneer hij boven standaard HTML-elementen zweeft, en verandert in een gele ster omringd door kleinere geanimeerde sterren wanneer de cursor over klikbare Flash-elementen wordt verplaatst.

pratende navigatie

soms zal een navigatiebalk geluidseffecten produceren, maar in andere gevallen zullen de navigatiekoppelingen Vrolijk klinken wat ze vertegenwoordigen.

de navigatiebalk PBS KIDS spreekt met behulp van kinderstemmen, wanneer de gebruiker eroverheen beweegt.

de navigatiebalk van CBeebies gebruikt een stem om de bestemming van elk navigatieitem te bepalen.

de Bob The Builder navigatiebalk spreekt tot de gebruiker bij een muis over.

de Fifi en de Flowertots hebben een sprekende navigatiebalk.

Breaking the Grid

terwijl traditionele moderne Webontwerptechnieken de voordelen en esthetiek van grid-based design hebben omarmd, kunnen kinderwebsites zich bevrijden van een te gestructureerde lay-out om een unieke wereld te creëren die een kind graag zal ervaren.

dit betekent niet dat het gebruik van een raster als basis van het ontwerp verkeerd is. Het kan nuttig zijn om te beginnen met een raster, dan ontwerpelementen buiten het raster op een gecontroleerde manier. Deze flexibiliteit in ontwerp en lay-out wordt aangetoond op een aantal van de reeds besproken sites, maar is ook duidelijk in de navigatiebalken van de onderstaande voorbeelden.

de navigatiebalk op de website van Spongebob Squarepants is schuin, wat indruist tegen de conventie in het typische webdesign op basis van rasters.

de Hannah Montana website bevat navigatiebalken die het raster breken.

de website van In The Night Garden heeft een zeer ongebruikelijk navigatiebalkontwerp dat weinig gelijkenis vertoont met een conventioneel gestructureerd ontwerp.

hieronder zijn enkele voorbeelden van websites die een meer rigide, op raster gebaseerd formaat gebruiken en daardoor niet zo uniek, memorabel of boeiend zijn als sommige van de websites die al in dit artikel worden genoemd.

Kids WB is Star en niet zo memorabel.

de Crayola-website is enigszins ouderwets met zijn rasterformaat en verticale navigatie.

Neopets is ook ontworpen op een meer gestructureerd raster.

toegegeven, in sommige gevallen zou een sterker op raster gebaseerd ontwerp nodig zijn als het publiek een ouder publiek van kinderen was, zoals het geval is met SI Kids, hieronder weergegeven.

verantwoordelijkheid nemen

als u probeert de geest en het hart van jonge, beïnvloedbare mensen te bereiken door middel van een online ervaring, wordt u een zware verantwoordelijkheid toevertrouwd. Kinderen zijn mentaal kwetsbaar, en gemakkelijk beïnvloed door wat ze zien, horen en aanraken. Er zijn bepaalde factoren die moeten worden aangepakt op de website van elke kinderen, om ervoor te zorgen dat er geen schade wordt gebracht aan de kinderen.

bevordering van Onderwijs

spellen en andere interactieve elementen moeten niet alleen worden gecreëerd om het merk en de identiteit van uw bedrijf te promoten, maar ook om jonge geesten op een nuttige en positieve manier te helpen opleiden en opleiden. Het promoten van onderwijs door middel van games en activiteiten zal laten zien dat uw bedrijf geeft om de gebruiker en hoe hun online ervaring hen in de toekomst kan beïnvloeden.

Online Leerspellen van Fisher Price omvatten spellen die variëren per leeftijdsgroep.

Funbrain promoot zichzelf als “The Internet’ s #1 Education Site for K-8 Kids and Teachers.”

informatie voor ouders

ouders zullen de internetgewoonten van hun kinderen nauwlettend in de gaten houden. Veel sites van kinderen zijn zich hiervan bewust, dus ze bevatten informatie die is gericht op ouders. Soms is dit in de vorm van een tip, zoals het geval is met de Sesamstraat games website, of gewoon een navigatie-item dat verwijst naar een ouder sectie.

Sesamstraat spellen bevatten een” Parent Tip ” box.

BEN 10 heeft een” ouder spul ” link in hun primaire navigatiebalk.

Thomas de Tank Motor bevat een “ouders” link.

Usability Testing

tot slot is een van de beste manieren om een succesvolle online ervaring voor kinderen op te bouwen door kinderen te zien navigeren en interactie aan te gaan met de games van uw site en andere unieke functies. Niet alle bedrijven zullen het budget hebben voor uitgebreide tests, maar bijna alle bedrijven zullen de mogelijkheid hebben om ten minste een minimale hoeveelheid testen te doen-zelfs als het met slechts één kind is. Dit zal u toelaten om de site te zien door de ogen van een kind en maak de nodige wijzigingen, hetzelfde als zou worden gedaan in alle usability tests.

bedrijven als Disney, Sesamstraat en PBS bestuderen natuurlijk al jaren het gedrag van kinderen, zodat veel van de voorbeelden hierboven kunnen worden gebruikt om de basis te vormen voor een succesvolle kinderwebsite, zelfs als er geen usability testing wordt gedaan.

conclusie

hier is een samenvatting van zowel conventionele als onconventionele best practices voor het ontwerpen van een website voor kinderen:

Conventionele Beste Praktijken

• elementen Maken dat zijn grote en visueel onvergetelijke
• Gebruik lichte, levendige kleuren die de zintuigen prikkelen
• Bevatten elementen uit de natuur
• er diepte ontstaat in de ontwerpen
• Toevoegen van navigatie-elementen die zijn groot en makkelijk te vinden
• video
• Zijn printbare elementen
• Break the grid
• wijzigingen op basis van usability testing

Onconventionele Beste Praktijken

• Maak een vrolijke, speelse bui
• u bewegende de tekens
• Gebruik van grafisch zware navigatiebalken
• Gebruiken Flash-animatie overvloedig
• Insluiten van de bewegingen en geluiden die trigger op het laden van de pagina
• voorzien van een “spellen” gedeelte
• de cursor om bij te dragen aan het thema
• Toevoegen stemmen voor navigatie rollovers
• verantwoording verschuldigd aan zowel ouders en kinderen

Een Web designer die heeft gewerkt aan een children ‘ s website zou waarschijnlijk zeggen dat het een van de meest leuke en interessante projecten hebben zij het voorrecht hadden om te werken. Als u ooit de mogelijkheid om een gebruikerservaring die is gericht op kinderen te creëren, moet u een aantal van de bewezen methoden te volgen die op veel van de sites hier besproken, en uw website zal een goede kans om een grote hit met kinderen hebben.