Designing Websites for Kids: Trends And Best Practices

• 12 min read
• Inspiration, Showcases, Web Design, Kids
• Share on Twitter, LinkedIn

lapsille suunnatut verkkosivustot ovat jääneet paljolti vähälle huomiolle www-design-artikkeleissa ja-koonteissa, mutta lasten verkkosivustoilla on monia kauniita ja mielenkiintoisia sisustuselementtejä ja ulkoasuja, jotka ovat keskustelun ja analysoinnin arvoisia. On myös useita parhaita käytäntöjä, jotka ovat yksinomaan Web design lasten sivustoja-käytäntöjä, joita ei yleensä ole yritetty tyypillinen verkkosivuilla.

saatat haluta vilkaista aiheeseen liittyviä artikkeleita:

• Best Practices For Web Design For Kids
• Designing for Kids Is not Child ’s Play
• Designing Web Interfaces for Kids
• a Dad’ s please to Developers of iPad Apps for Children

tässä artikkelissa esitellään useita suosittuja kaupallisia sivustoja, jotka on suunnattu lapsille ja joissa analysoidaan trendejä, elementtejä ja tekniikoita, joita käytetään pitämään lapset kiinnostuneina ja innostuneina.

aisteja stimuloiva rakenne

ihmiset ovat henkisesti stimuloituneita useista tekijöistä, ja tämä pätee erityisesti lapsiin. Onnistunut lasten sivustot toteuttaa useita elementtejä ja suunnittelun periaatteita, jotka luovat ympäristön sopii lapsen persoonallisuus ja etuja.

kirkkaat, eloisat värit

kirkkaat värit vangitsevat ja pidättävät helposti lapsen huomion pitkiksi ajoiksi. Vaikka värivalinta on ensisijainen tekijä minkä tahansa verkkosivuston suunnittelussa, tämä pätee erityisesti suunniteltaessa lapsille tarkoitettua verkkosivustoa, koska värit tekevät suuren vaikutuksen lasten nuoriin mieliin. Värivalinnat ja yhdistelmät, jotka todennäköisesti torjuttaisiin tai joille naurettaisiin suunniteltaessa tyypillistä verkkosivustoa, saatetaan toivottaa tervetulleiksi lapsille suunnatulla verkkosivustolla.

kuinka moni alla olevissa kuvakaappauksissa käytetyistä väriyhdistelmistä onnistuisi aikuisyleisölle suunnatulla sivustolla? Ei montaa. Joten, kun suunnittelet lapsille suunnattua sivustoa, käytä kirkkaita, eloisia värejä, jotka visuaalisesti stimuloivat unohtumattomalla tavalla.

PBS KIDS

Hermanin Kotisivu

Funbrain Playground

iloinen fiilis

lapset muistavat ja palaavat verkkosivuille, jos heidän kokemuksensa on onnellinen. Suunnitteluun voidaan sisällyttää elementtejä, joilla varmistetaan iloinen, positiivinen tunnelma.

Mikki Hiiren kerhotalo luo iloisen tunnelman tekemällä Mikki itse-lehdestä visuaalisen keskipisteen. Hänen iloiset kasvonsa ja kehonkielensä auttavat parantamaan tätä onnellista tunnetta ja luomaan tervetulleen ilmapiirin.

Play-Doh-sivusto luo iloisen tunnelman käyttäen keskipisteenä säteilevää lasta.

Fifin ja Flowertotsin verkkosivuilla on visuaalisessa fokuksessa leveästi hymyilevä Flowertot-hahmo, joka luo iloisen tunnelman.

luonnon elementit

lapset saavat virikkeitä tunnistettavista elementeistä, joihin he voivat samaistua. Koska lasten elämänkokemukset ovat rajallisia, osa heille tutuimmista asioista löytyy luonnosta. Alla olevissa sivustoissa käytetään luonnonelementtejä, kuten puita, vettä, lunta ja eläimiä. Monissa tapauksissa nämä elementit on ylikorostettu koon tai suunnittelun yksinkertaisuuden kautta.

Disneyn verkkosivusto muuttaa teemaansa sen mukaan, mitä tuotetta markkinoidaan. Tässä kuvakaappauksessa he käyttävät Grand Canyonin kaltaista maisemaa luodakseen mieleenpainuvan visuaalisen kokemuksen.

Discovery Kids käyttää vedenalaista teemaa.

Club Penguin esittää arktisen teeman.

CBC Kids käyttää sesonkiteemaa, joka perustuu pelkistettyyn, silmiä hivelevään grafiikkaan.

PopCap Games käyttää ruohoista maisemaa suurten auringonsäteiden edessä.

elämää suuremmat Design-elementit

suuret design-elementit ovat osoittautuneet tehokkaiksi kaikenlaisessa Verkkosuunnittelussa, mistä on osoituksena se, että suuri typografia, suuret painikkeet ja suuret call-to-action-alueet ovat yleistyneet nykyaikaisessa suunnittelussa. Koska yksinkertaiset, ilmeiset ja tunnistettavat esineet vetävät lapsia puoleensa, lapsille suunnitellut verkkosivustot lisäävät niiden tehokkuutta käyttämällä suuria sisustuselementtejä.

animaatiohahmot

suuret, animoidut, puhuvat hahmot ovat kiehtova ja vangitseva tapa napata ja pitää lapsen huomio. Monet lapsille suunnitellut sivustot käyttävät tätä elementtiä tehokkaasti.

Barbie

Mr. Rogers ’ Neighborhood

Disney Princess

Thomas the Tank Engine

Barney & Friends

syvyys suunnittelussa

lapset haluavat antaa mielikuvituksensa villiintyä maailmassa, joka näyttää ja tuntuu todelliselta. Tällaista tunnelmaa voi luoda sisustuselementtien syvyyden kautta. Tällaisia voivat olla esimerkiksi puristetut muodot, varjot, Maisemat, viistetyt efektit, kiiltävät kaltevuudet tai kelluvat esineet. Usein monet näistä elementeistä ovat läsnä sarjakuvamaisissa näytöissä, kuten alla on esitetty.

Webkinzin ”Adoptiokeskus” käyttää varjoja, elämänmakuista hahmoa ja muita 3-ulotteisia elementtejä luodakseen suunnitelman, jossa on syvyyttä.

Poisson Rouge luo syvän, realistisen tunnelman käyttämällä ikkunaa, joka katsoo ulos aurinkoon, yhdessä useiden muiden 3-ulotteisten elementtien kanssa.

Rainbow Magic luo syvyyttä suunnitteluunsa Salamanimoidun maisemakohtauksen avulla, joka liikkuu käyttäjän leijuessa eri elementtien yllä.

navigointi ja Call-to-Action-alueet, jotka erottuvat

millä tahansa Verkkosivujen suunnittelu -, navigointi-ja call-to-action-alueilla, tulisi olla yhteyspisteitä. Lasten verkkosivujen suunnittelijat voivat yliyksinkertaistaa nämä alueet, jotta lapset voivat navigoida helposti. Tekstipohjainen navigointi lasten nettisivuilla ei olisi yhtä tehokasta kuin suuret painikkeet ja grafiikka, koska niistä puuttuisi visuaalinen keskittyminen sivulle.

Peppa-possussa on vaakasuora navigointipalkki, joka sisältää Suuret ikonit ja helppolukuiset kuvaukset jokaiselle kohteelle.

Nalle Puh-sivusto yhdistää navigointipalkkinsa ”metsä” – teemaansa käyttäen suuria puisia graafisia elementtejä, jotka eivät jää käyttäjältä huomaamatta.

Seesamtiellä on helposti paikantava vaakasuora navigointipalkki sekä suuret kutsualueet.

My Little Pony käyttää tekstipohjaista navigointia, luoden vähemmän graafisen kokemuksen, joka mahdollistaa keskittymisen sisältöelementteihin. Tämä voisi olla ihanteellinen joissakin tilanteissa, mutta lasten verkkosivuilla graafinen perustuva navigointipalkki on todennäköisemmin tehokas.

käyttäjän vuorovaikutus

luultavasti yksi tärkeimmistä tavoista, joilla lasten verkkosivusto voi menestyä, on sisällyttää siihen elementtejä, joiden avulla lapsi voi olla jollain tavalla vuorovaikutuksessa sivuston kanssa. Lapset eivät halua harrastaa intensiivistä lukemista tai tutkimusta; he haluavat leikkiä ja viihdyttää.

tyypillisellä sivustolla tiettyjä sisustuselementtejä pidetään häiritsevinä, käyttökelvottomina ja kömpelöinä. Lapsen verkkosivuilla näitä samoja elementtejä pidetään tehokkaana keinona houkutella käyttäjiä.

animaation ja äänen kautta tapahtuva vuorovaikutus

Adobe Flashin avulla luodut efektit ja elämykset eivät miellytä tyypillisessä modernissa Verkkosuunnittelussa, mutta lastensivustoilla muuta vaihtoehtoa ei juuri ole. On totta, että JavaScript-animaatio ja tehosteet ovat tulleet pitkän matkan, koska monet JavaScript-kirjastot käytettävissä, mutta helppous, jolla monimutkaisia animaatioita voidaan luoda Flash tekee tästä menetelmästä ensimmäinen valinta monille kaupallisille verkkosivustoille suunniteltu lapsille.

Pauly ’ s Playhouse-sivusto, kuten useimmat tässä artikkelissa esitetyt sivustot, on rakennettu kokonaan Flashin avulla.

Hot Wheels-sivusto sisältää animoidun ”päivän Auton”, joka zoomaa ruudulle sivun latautuessa luoden visuaalista vuorovaikutusta.

Roaryn kilpa-autossa on lyhyt ”flash-intro”, jossa on ”skip” – painike. Tämä on vanhan koulukunnan trendi tyypillisessä Web-suunnittelussa, mutta on tehokas keino tarjoilla lapsiyleisölle. Intro animoi läpi tien, kunnes hahmot ilmestyvät horisonttiin. Tämä auttaa käyttäjää tuntemaan kuin he olisivat henkilökohtaisesti astumassa roaryn animaatiomaailmaan.

The Yahoo! Kids navigation bar on luotu Flash ja tekee ääniefektejä ja animoi, kun sen kohteita leijuu yli. Tämä suuntaus on hyvin yleinen monissa sivustoissa esillä tässä artikkelissa.

Interaction Through Video

Television tiedetään kiehtovan lapsiyleisöä tuntien ajan, minkä vuoksi ”lauantaiaamun piirretyt” ovat jo vuosikymmeniä olleet tuottoisa osa monien TV-kanavien lähetysaikatauluja. Samoin lapsen verkkosivuilla oleva video lisää hauskan, interaktiivisen ja opettavaisen näkökulman sivuston sisältöön.

Kids ’CBC-Video

Yahoo! Kids Movie Guides

National Geographic Kids – Videos

vuorovaikutus pelien kautta

kuka lapsi ei nauti pelien pelaamisesta? Yksi tehokkaimmista tavoista viihdyttää, kouluttaa tai muutoin miehittää lasta verkkosivustolla on sisällyttää ”pelit” – osio. Lähes kaikki sivustot tutkittu Tämän artikkelin sisältävät pelejä, jotka kouluttaa, edistää, ja mahdollistaa suoran vuorovaikutuksen, mutta myös sisältää monia suunnitteluelementtejä jo keskusteltu. Alla muutamia esimerkkejä.

CBeebies – Gordon The Garden Gnome

Toy Story – Woodyn Big Escape

Disney Pixarin autojen maailma sallii käyttäjät luoda, jakaa, ja rodun omia mukautettuja autoja.

tulostettavat elementit

lapset haluavat, että heillä on jotain kouriintuntuvaa mukanaan, joka auttaa heitä muistamaan kokemuksensa. Tulostettavat kuvat ja värityssivut antavat lapsille mahdollisuuden säilyttää kokemuksensa ja antaa samalla sivuston omistajille mahdollisuuden parantaa ja mainostaa brändiään tietokoneen näytön ulkopuolella. Alla muutamia esimerkkejä tulostettavista värityssivuista lasten nettisivuilla.

Pingu-värisivut

Crayola Digi – väri

Pippuripossun värisivut

Thomas and friends online-väritys

Teletapit-print to Color

epätavanomaiset menetelmät

olemme jo käsitelleet useita elementtejä, joita nykyaikaisessa tyypillisessä web-suunnittelussa pidetään nyt epätavanomaisina. Ääni, animaatio ja suuri häiritsevä grafiikka ovat usein paheksutaan tyypillinen Web design. Lasten verkkosivuilla nämä elementit auttavat käyttökokemusta. Muita epätavanomaisia elementtejä ja suunnitteluvalintoja käsitellään alla.

kursorin muuttaminen

tätä pidetään ehdottomasti huonona käytäntönä tavallisessa Web-suunnittelussa, mutta se voi olla hauska, tehokas tapa lisätä leikkisä Elementti lasten verkkosivuston teemaan. Tämä voidaan tehdä dynaamisen HTML: n avulla, mutta useimmiten se tehdään Flashin kautta.

Discovery Kids-sivuston kursori muuttuu räiskyväksi karhunpyydysgrafiikaksi.

Seesamtie-sivuston kursoria seuraa keltainen tähti, kun se leijuu tavallisten HTML-elementtien päällä, ja muuttuu keltaiseksi tähdeksi, jota ympäröivät pienemmät animaatiotähdet, kun kursoria liikutetaan klikattavien Flash-elementtien päällä.

puhuva navigointi

joskus Navigaatiopalkki tuottaa ääniefektejä, mutta muissa tapauksissa navigaatiolinkit soivat sen, mitä ne edustavat iloisella äänellä.

PBS KIDS-navigointipalkki puhuu lasten äänellä, Kun käyttäjä leijuu sen päällä.

CBeebies-Navigaatiopalkki käyttää ääntä, jolla se ilmoittaa kunkin navigointivälineen määränpään.

Bob the Builder-navigointipalkki puhuu käyttäjälle hiirellä.

Fifissä ja Flowertoteissa on puhuva navigointipalkki.

Breaking the Grid

vaikka perinteiset nykyaikaiset Web-suunnittelutekniikat ovat omaksuneet grid-pohjaisen suunnittelun edut ja estetiikan, lasten verkkosivustot voivat vapautua liian strukturoidusta ulkoasusta ja luoda ainutlaatuisen maailman, josta lapsi nauttii.

tämä ei viittaa siihen, että ruudukon käyttäminen suunnittelun pohjana olisi väärin. Voi olla hyödyllistä aloittaa ruudukosta, sitten suunnitteluelementit ruudukon ulkopuolelta hallitusti. Tämä joustavuus suunnittelussa ja asettelussa näkyy jo käsitellyillä sivustoilla, mutta se näkyy myös alla olevien esimerkkien navigointipalkeissa.

Spongebob Squarepants-sivuston navigointipalkki on vinossa, mikä on ristiriidassa tyypillisen ruudukkopohjaisen verkkosuunnittelun kanssa.

Hannah Montanan verkkosivuilla on ruudukon rikkova navigointipalkkigrafiikka.

In The Night Garden-sivustolla on hyvin epätavallinen navigointipalkin muotoilu, joka ei juurikaan muistuta konventionaalisesti jäsenneltyä muotoilua.

alla on muutamia esimerkkejä verkkosivustoista, jotka hyödyntävät jäykempää, ruudukkopohjaista muotoa, eivätkä siksi ole yhtä ainutlaatuisia, mieleenpainuvia tai vangitsevia kuin jotkut tässä artikkelissa jo käsitellyistä.

Kids WB on jäykkä, eikä yhtä mieleenpainuva.

Crayolan verkkosivusto on ruutumuodoltaan ja pystysuunnistukseltaan jokseenkin vanhanaikainen.

Neopets on myös suunniteltu jäsennellymmälle ruudukolle.

Myönnettyinä, joissain tapauksissa tarvittaisiin vahvempaa ruutukaaviota, jos yleisö olisi vanhempi lapsiyleisö, kuten si Kids, joka on esitetty alla.

vastuun ottaminen

jos yrität tavoittaa nuorten, vaikutuksille alttiiden ihmisten mielet ja sydämet verkkokokemuksen kautta, sinulle on uskottu painava vastuu. Lapset ovat henkisesti hauraita, ja se, mitä he näkevät, kuulevat ja koskettavat, vaikuttaa helposti heihin. On tiettyjä tekijöitä, jotka on käsiteltävä jokaisen lasten verkkosivuilla, jotta varmistetaan, että mitään haittaa ei tuoteta lapsille.

koulutuksen edistäminen

pelejä ja muita interaktiivisia elementtejä tulisi luoda, ei vain oman yrityksen brändin ja identiteetin edistämiseksi, vaan myös nuorten mielten opettamiseksi ja kouluttamiseksi hyödyllisellä ja myönteisellä tavalla. Koulutuksen edistäminen pelien ja aktiviteettien avulla osoittaa, että yrityksesi välittää käyttäjästään ja miten heidän verkkokokemuksensa voi vaikuttaa käyttäjään tulevaisuudessa.

Fisher Pricen Verkko-oppimispelit sisältävät pelejä, jotka vaihtelevat ikäryhmittäin.

Funbrain mainostaa itseään ”Internetin #1-Koulutussivustona K-8 lapsille ja opettajille.”

tietoa vanhemmille

vanhemmat seuraavat tarkasti lastensa nettitottumuksia. Monet lasten sivustot ovat tietoisia tästä, joten ne sisältävät tietoa, joka on suunnattu vanhemmille. Joskus tämä on vihjeen muodossa, kuten Seesamtie – pelien verkkosivuilla, tai yksinkertaisesti suunnistusartikkeli, joka osoittaa vanhemman osioon.

Seesamtie-pelit sisältävät ”vanhemman Vinkkilaatikon”.

BEN 10: ssä on ”Parent Stuff” – linkki heidän ensisijaisessa navigointipalkissaan.

Thomas säiliö Moottori sisältää ”vanhemmat” linkki.

käytettävyystestaus

lopuksi, yksi parhaista tavoista auttaa luomaan onnistunut online-kokemus lapsille on seurata lasten navigointia ja vuorovaikutusta sivustosi pelien ja muiden ainutlaatuisten ominaisuuksien kanssa. Kaikilla yrityksillä ei ole budjettia mittaviin testauksiin, mutta lähes kaikilla on mahdollisuus tehdä vähintään minimimäärä testausta — vaikka kyseessä olisi vain yksi lapsi. Näin voit nähdä sivuston lapsen silmin ja tehdä tarvittavat muutokset, kuten kaikissa käytettävyystesteissä.

yritykset kuten Disney, Seesamtie ja PBS ovat tietenkin tutkineet lasten käyttäytymistä jo vuosia, joten monia yllä esitettyjä esimerkkejä voitaisiin hyödyntää menestyksekkään lasten verkkosivuston pohjana, vaikka käytettävyystestausta ei tehtäisikään.

Conclusion

Here is a summary of both conventional and unconventional best practices for designing a website for kids:

perinteiset parhaat käytännöt

• luovat elementtejä, jotka ovat suuria ja visuaalisesti mieleenpainuvia
• käytä kirkkaita, eloisia värejä, jotka stimuloivat aisteja
• sisältävät luonnon elementtejä
• luovat syvyyttä suunnitteluun
• lisää navigointielementtejä, jotka ovat suuria ja helposti löydettäviä

use video

• include printable Elements
• break the grid
• make modifications based on usability testing

unconventional best practices

• create a happy, playful mood
• use animated merkit
• käytä graafisia-raskaita navigointipalkkeja
• käytä Flash-animaatiota runsaasti
• upota liikkeitä ja ääniä, jotka laukaisevat sivun kuormituksen
• sisältävät ”pelejä” – osion
• muuta kursoria edistämään teemaa
• lisää ääniä navigointiin
• Be vastuussa sekä lapsille että vanhemmille

lasten verkkosivuilla työskennellyt verkkosuunnittelija sanoisi todennäköisesti, että se oli yksi hauskimmista ja kiinnostavimmista projekteista, jonka parissa he ovat saaneet työskennellä. Jos sinulla on joskus mahdollisuus luoda käyttökokemus, joka on suunnattu lapsille, muista noudattaa joitakin todistettuja menetelmiä osoitettu monilla sivustoilla tässä, ja sivustosi on hyvä mahdollisuus olla suuri hitti lasten kanssa.