designa webbplatser för barn: trender och bästa praxis

• 12 min läs
• Inspiration, montrar, webbdesign, barn
• Dela på Twitter, LinkedIn

webbplatser avsedda för barn har till stor del förbises i Webbdesignartiklar och roundups, men det finns många vackra och intressanta designelement och layouter som presenteras på barns webbplatser som är värda diskussion och analys. Det finns också ett antal bästa metoder som är exklusiva för webbdesign för barns webbplatser-metoder som vanligtvis inte bör försökas på en typisk webbplats.

du kanske vill ta en titt på relaterade artiklar:

• bästa praxis för webbdesign för barn
• designa för barn är inte barnlek
• designa webbgränssnitt för barn
• en pappas vädjan till utvecklare av iPad Apps för barn

denna artikel kommer att visa upp ett antal populära kommersiella webbplatser riktade mot barn med en analys av trender, element och tekniker som används för att hålla barnen intresserade och stimuleras.

Design som stimulerar sinnena

människor stimuleras mentalt av ett antal faktorer, och detta gäller särskilt för barn. Framgångsrika barns webbplatser implementerar ett antal element och designprinciper som skapar en miljö som passar ett barns personlighet och intressen.

ljusa, levande färger

ljusa färger kommer enkelt att fånga och hålla ett barns uppmärksamhet under långa perioder. Även om färgval är en viktig faktor vid utformningen av alla typer av webbplatser, gäller detta särskilt när man utformar en webbplats för barn eftersom färger gör ett stort intryck på barns unga sinnen. Färgval och kombinationer som sannolikt skulle avvisas eller skratta åt när man utformar en typisk webbplats kan välkomnas på en webbplats för barn.

hur många av färgkombinationerna som används i skärmdumparna nedan skulle lyckas på en webbplats riktad till en vuxen publik? Inte många. Så, när du utformar en webbplats riktad mot barn, använd ljusa, levande färger som visuellt stimulerar på ett oförglömligt sätt.

PBS KIDS

Hermans hemsida

Funbrain Playground

ett lyckligt humör

barn kommer ihåg och återvänder till en webbplats om deras upplevelse är lycklig. Element kan införlivas i designen för att säkerställa att ett glatt, positivt humör presenteras.

Mickey Mouse Clubhouse skapar ett lyckligt humör genom att göra Mickey själv till en visuell kontaktpunkt på sidan. Hans glada ansikte och kroppsspråk hjälper till att förbättra denna glada känsla och skapa en välkommen atmosfär.

Play-Doh-webbplatsen skapar ett lyckligt humör med ett strålande barn som kontaktpunkt.

Fifi och Flowertots webbplats har en stor leende Flowertot-karaktär i visuellt fokus, vilket skapar ett lyckligt humör.

element från naturen

barn stimuleras av igenkännliga element som de kan relatera till. Eftersom barns upplevelser i livet är begränsade finns några av de saker de är mest bekanta med i naturen. Naturliga element som träd, vatten, snö och djur används på webbplatserna som visas nedan. I många fall överbelastas dessa element genom designens storlek eller enkelhet.

Disney-webbplatsen ändrar sitt tema beroende på vilken produkt som marknadsförs. I den här skärmdumpen använder de ett Grand Canyon-liknande landskap för att skapa en minnesvärd visuell upplevelse.

Discovery Kids använder ett undervattenstema.

Club Penguin presenterar ett arktiskt tema.

CBC Kids använder ett säsongsbetonat tema baserat på förenklad, iögonfallande grafik.

PopCap Games använder ett gräsbevuxet landskap framför stora solstrålar.

större än Livsdesign

stora designelement har visat sig vara effektiva i alla typer av webbdesign, demonstrerat av det faktum att Stor typografi, stora knappar och stora uppmaningsområden har blivit vanliga i modern design. Eftersom barn naturligt dras till enkla, uppenbara och igenkännliga föremål, kommer webbplatser som är utformade för barn att öka deras effektivitet genom att använda stora designelement.

animerade karaktärer

stora, animerade, talande karaktärer är ett fascinerande och fängslande sätt att fånga och hålla ett barns uppmärksamhet. Många webbplatser avsedda för barn använder detta element effektivt.

Barbie

Herr Rogers Grannskap

Disney Princess

Thomas Tankmotorn

Barney & vänner

djup i design

barn gillar att låta sina fantasier springa vild i en värld som ser ut och känns verklig. Denna typ av atmosfär kan skapas genom djup i designelement. Detta kan inkludera extruderade former, skuggor, landskap, fasade effekter, glänsande lutningar eller flytande föremål. Ofta är många av dessa element närvarande i tecknade liknande skärmar, som visas nedan.

Webkinz ”Adoption Center” använder skuggor, en verklighetstrogen karaktär och andra 3-dimensionella element för att skapa en design som har djup.

Poisson Rouge skapar en djup, realistisk atmosfär med ett fönster som ser ut mot solen, tillsammans med ett antal andra 3-dimensionella element.

Rainbow Magic skapar djup i sin design genom en Flash-animerad landskapsscen som rör sig när användaren svävar över olika element.

navigering och Uppmaningsområden som sticker ut

i alla webbdesign, navigering och uppmaningsområden bör vara kontaktpunkter. Barns webbdesigners kan förenkla dessa områden så att barn enkelt kan navigera. Textbaserad navigering på barns webbplatser skulle inte vara lika effektiv som stora knappar och grafik, eftersom de skulle sakna visuellt fokus på en sida.

Peppa Pig har ett horisontellt navigeringsfält som innehåller stora ikoner och lättlästa beskrivningar för varje objekt.

Winnie the Pooh-webbplatsen innehåller deras navigeringsfält i deras ”skog” – tema, med stora grafiska träelement som inte förbises av användaren.

Sesame Street har en lätt att hitta horisontell navigeringsfältet, tillsammans med stora call-to-action områden.

My Little Pony använder textbaserad navigering, vilket skapar en mindre grafisk upplevelse, vilket möjliggör fokus på innehållselementen. Detta kan vara perfekt i vissa situationer, men på en barns webbplats är det mer troligt att en grafisk navigeringsfält är effektiv.

användarinteraktion

förmodligen ett av de viktigaste sätten för en barns webbplats att lyckas är att inkludera element som gör att ett barn kan interagera med webbplatsen på något sätt. Barn vill inte göra intensiv läsning eller forskning; de vill leka och bli underhållna.

på en typisk webbplats ses vissa designelement som distraherande, oanvändbara och besvärliga. På ett barns webbplats ses samma element som ett effektivt sätt att locka användare.

interaktion genom animering och ljud

effekter och upplevelser som skapats med Adobe Flash avskräcks i typisk modern webbdesign, men på barns webbplatser finns det nästan inget annat alternativ. Det är sant att JavaScript animation och effekter har kommit långt på grund av de många JavaScript bibliotek tillgängliga, men den lätthet med vilken komplexa animationer kan skapas med Flash gör denna metod förstahandsvalet för många kommersiella webbplatser avsedda för barn.

Paulys Playhouse-webbplats, som de flesta webbplatser som presenteras i den här artikeln, är helt byggd i Flash.

Hot Wheels-webbplatsen innehåller en animerad ”dagens bil” som zoomar in på skärmen när sidan laddas, vilket skapar visuell interaktion.

Roary racerbilen har en kort ”flash intro” med en ”skip” – knapp. Detta är en gammal skola trend i typisk webbdesign, men är ett effektivt sätt att catering till en barnbaserad publik. Introen animerar genom en väg tills karaktärerna visas i horisonten. Detta hjälper användaren att känna sig som om de personligen går in i Roarys animerade Värld.

Yahoo! Kids navigation bar skapas med blixt och gör ljudeffekter och animerar när dess objekt svävar över. Denna trend är mycket vanlig på många av de webbplatser som presenteras i den här artikeln.

interaktion via Video

TV är känt för att fängsla barnpubliken i timmar, varför ”Saturday morning cartoons” i årtionden har varit en lukrativ del av sändningsscheman för många TV-nätverk. På samma sätt lägger video på ett barns webbplats en rolig, interaktiv och pedagogisk aspekt till webbplatsens innehåll.

barn CBC-Video

Yahoo! Barn Film Guider

National Geographic Kids-Videor

interaktion genom spel

vilket barn tycker inte om att spela spel? Ett av de mest effektiva sätten att underhålla, utbilda eller på annat sätt uppta ett barn på en webbplats är att inkludera ett avsnitt ”spel”. Nästan alla webbplatser som undersökts för den här artikeln inkluderar spel som utbildar, stimulerar och tillåter direkt interaktion, samtidigt som de innehåller många av de designelement som redan diskuterats. Nedan följer några exempel.

CBeebies – Gordon Garden Gnome

Toy Story – Woody ’s Big Escape

Disney Pixar ’ s World of Cars tillåter användare att skapa, dela och tävla sina egna bilar.

utskrivbara element

barn gillar att ha något konkret att ta med sig, för att hjälpa dem att komma ihåg sina erfarenheter. Utskrivbara bilder och målarbok tillåter barnen att ha en minnessak av sin erfarenhet, samtidigt som webbplatsägare en möjlighet att förbättra och främja deras varumärke utanför datorskärmen. Nedan följer några exempel på utskrivbara målarbilder på barnens webbplatser.

Pingu Målarbok

Crayola Digi-färg

Peppa gris Målarbok

Thomas och vänner Online färgläggning

Teletubbies – Skriv ut till färg

okonventionella metoder

vi har redan diskuterat ett antal element som i modern typisk webbdesign nu anses vara okonventionella. Ljud, animering och stor påträngande grafik är ofta rynkade på i typisk webbdesign. På barns webbplatser hjälper dessa element användarupplevelsen. Andra okonventionella element och designval diskuteras nedan.

ändra markören

detta ses absolut som en dålig praxis i standard webbdesign, men kan vara ett roligt och effektivt sätt att lägga till ett lekfullt element i ett barns webbplatstema. Detta kan göras med dynamisk HTML, men görs oftare via Flash.

markören på Discovery Kids webbplats förvandlas till en knäppande björnfälla grafik.

markören på Sesame Street-webbplatsen följs av en gul stjärna när den svävar över vanliga HTML-element och förvandlas till en gul stjärna omgiven av mindre animerade stjärnor när markören flyttas över klickbara Blixtelement.

Talking Navigation

ibland kommer en navigeringsfält att producera ljudeffekter, men i andra fall kommer navigeringslänkarna att låta ut vad de representerar med en glad röst.

navigeringsfältet PBS KIDS talar med barns röster när användaren svävar över den.

CBeebies navigation bar använder en röst för att ljuda ut destinationen för varje navigeringsobjekt.

navigeringsfältet Bob the Builder talar till användaren på mouseover.

Fifi och Flowertots har ett talande navigeringsfält.

Breaking the Grid

medan traditionella moderna Webbdesigntekniker har anammat fördelarna och estetiken med nätbaserad design, kan barnens webbplatser bryta sig loss från en alltför strukturerad layout för att skapa en unik värld som ett barn kommer att njuta av att uppleva.

detta tyder inte på att det är fel att använda ett rutnät som grund för designen. Det kan vara fördelaktigt att börja med ett rutnät, sedan designelement utanför nätet på ett kontrollerat sätt. Denna flexibilitet i design och layout visas på ett antal av de webbplatser som redan diskuterats, men framgår också av navigeringsfälten i exemplen nedan.

navigeringsfältet på Spongebob Squarepants webbplats är snett, går mot konventionen i typisk nätbaserad webbdesign.

Hannah Montana-webbplatsen har navigeringsfältgrafik som bryter rutnätet.

webbplatsen In The Night Garden har en mycket ovanlig navigeringsfältdesign som inte liknar den som finns i en konventionellt strukturerad design.

Nedan följer några exempel på webbplatser som använder ett mer styvt, nätbaserat format och som ett resultat inte är lika unika, minnesvärda eller fängslande som några av de som redan övervägs i den här artikeln.

Kids WB är stel, och inte lika minnesvärd.

Crayola-webbplatsen är något gammalskola med sitt rutnätformat och vertikal navigering.

Neopets är också utformad på ett mer strukturerat rutnät.

beviljas, i vissa fall skulle en starkare nätbaserad design vara nödvändig om publiken var en äldre barnpublik, vilket är fallet med SI Kids, som visas nedan.

ta ansvar

om du försöker nå sinnen och hjärtan hos unga, intryckbara människor genom en onlineupplevelse, har du ett tungt ansvar. Barn är mentalt ömtåliga och påverkas lätt av vad de ser, hör och berör. Det finns vissa faktorer som måste åtgärdas på varje barns webbplats för att säkerställa att ingen skada kommer till barnen.

främja utbildning

spel och andra interaktiva element bör skapas inte bara för att främja ditt företags varumärke och identitet, utan för att hjälpa till att utbilda och utbilda unga sinnen på ett fördelaktigt och positivt sätt. Att främja utbildning genom spel och aktiviteter visar att ditt företag bryr sig om användaren och hur deras onlineupplevelse kan påverka dem i framtiden.

online lärande spel från Fisher Price inkluderar spel som varierar beroende på åldersgrupp.

Funbrain marknadsför sig som ” Internets # 1 utbildningsplats för K-8 barn och lärare.”

Information för föräldrar

föräldrar kommer att hålla ett vakande öga på sina barns internetvanor. Många barns webbplatser är medvetna om detta, så de innehåller information som är inriktad på föräldrar. Ibland är detta i form av ett tips, som är fallet med Sesame Street games-webbplatsen, eller helt enkelt ett navigeringsobjekt som pekar på en förälders avsnitt.

Sesame Street Games innehåller en” förälder tips ” box.

BEN 10 har en ”Parent Stuff” – länk i sin primära navigeringsfält.

Thomas Tankmotorn innehåller en” föräldrar ” länk.

användbarhetstestning

slutligen är ett av de bästa sätten att hjälpa till att bygga en framgångsrik onlineupplevelse för barn genom att titta på barn navigera och interagera med webbplatsens spel och andra unika funktioner. Inte alla företag kommer att ha budgeten för omfattande tester, men nästan alla kommer att ha möjlighet att göra åtminstone en minimal mängd tester — även om det är med bara ett barn. Detta gör att du kan se webbplatsen genom ett barns ögon och göra nödvändiga ändringar, samma som skulle göras i alla användbarhetstester.

företag som Disney, Sesame Street och PBS har naturligtvis studerat barns beteende i flera år, så många av exemplen som visas ovan kan användas för att ligga till grund för en framgångsrik barns webbplats, även om ingen användbarhetstestning görs.

slutsats

här är en sammanfattning av både konventionella och okonventionella bästa praxis för att designa en webbplats för barn:

konventionella bästa praxis

• skapa element som är stora och visuellt minnesvärda
• använd ljusa, levande färger som stimulerar sinnena
• inkorporera element från naturen
• skapa djup i designen
• Lägg till navigeringselement som är stora och lätta att hitta
• använd video
• inkludera utskrivbara element
• bryt rutnätet
• gör ändringar baserade på användbarhetstestning

okonventionella bästa metoder

• skapa en glad, lekfull stämning
• använd animerade tecken
• använd grafiska tunga navigeringsfält
• använd Flash-animering rikligt
• bädda in rörelser och ljud som utlöser vid sidladdning
• inkludera ett avsnitt ”spel”
• ändra markören för att bidra till temat
• Lägg till röster i navigeringsrullningar
• var ansvarig till både barn och föräldrar

en webbdesigner som har arbetat på en Barnwebbplats skulle sannolikt säga att det var ett av de roligaste och mest intressanta projekten de har haft förmånen att arbeta med. Om du någonsin har möjlighet att skapa en användarupplevelse som är inriktad på barn, var noga med att följa några av de beprövade metoderna som visas på många av de webbplatser som diskuteras här, och din webbplats kommer att ha en bra chans att bli en stor hit med barn.