- 12 min olvasni
- inspiráció, vitrinek, Web Design, gyerekek
- Megosztás a Twitteren, LinkedIn
A szerzőről
Louis egy front-end fejlesztő, író és szerző székhelye Toronto, Kanada. Ő kurátora a hírlevelek Web Tools Weekly és a Tech termelékenység és blogok a … bővebben a Louis ↬
e-mail hírlevél
Heti tippek front-end & UX.
megbízható 190.000 emberek.
a gyermekek számára tervezett weboldalakat nagyrészt figyelmen kívül hagyták a webdesign cikkekben és a kerekítésekben, de sok gyönyörű és érdekes design elem és elrendezés található a gyermekek weboldalain, amelyeket érdemes megvitatni és elemezni. Számos olyan bevált gyakorlat is létezik, amelyek kizárólag a gyermekek webhelyeinek Webdesignjára vonatkoznak — olyan gyakorlatok, amelyeket általában nem szabad megkísérelni egy tipikus webhelyen.
érdemes megnézni a kapcsolódó cikkeket:
- Best Practices For Web Design For Kids
- Design For Kids is Not Child ‘ s Play
- webes felületek tervezése gyerekeknek
- Apa kérése a gyermekeknek szánt iPad-alkalmazások fejlesztőihez
ez a cikk számos népszerű, gyermekeknek szánt kereskedelmi weboldalt mutat be, amelyek elemzik azokat a trendeket, elemeket és technikákat, amelyek segítenek a gyermekek érdeklődésében és ösztönzésében.
design That Stimulates the Senses
az embereket számos tényező stimulálja szellemileg, és ez különösen igaz a gyermekekre. A sikeres gyermekwebhelyek számos olyan elemet és tervezési alapelvet valósítanak meg, amelyek olyan környezetet teremtenek, amely megfelel a gyermek személyiségének és érdekeinek.
világos, élénk színek
az élénk színek könnyen megragadják és hosszú ideig megtartják a gyermek figyelmét. Bár a színválasztás elsődleges tényező bármilyen típusú weboldal tervezésében, ez különösen igaz a gyermekek számára készült weboldal tervezésekor, mivel a színek nagy benyomást tesznek a gyermekek fiatal elméjére. Azok a színválasztások és kombinációk, amelyeket valószínűleg elutasítanak vagy nevetnek egy tipikus weboldal tervezésekor, üdvözölhetők egy gyermekeknek szóló weboldalon.
az alábbi képernyőképeken használt színkombinációk közül hány sikeres lenne egy felnőtt közönséget célzó weboldalon? Nem sok. Tehát a gyerekeknek szóló webhely tervezésekor használjon élénk, élénk színeket, amelyek felejthetetlen módon vizuálisan stimulálják.
PBS KIDS
Herman honlapja
Funbrain Playground
boldog hangulat
a gyerekek emlékezni fognak, és visszatérnek egy weboldalra, ha a tapasztalatuk boldog. Az elemek beépíthetők a tervezésbe annak biztosítása érdekében, hogy vidám, pozitív hangulat jelenjen meg.
Mickey Mouse Clubhouse létrehoz egy boldog hangulat azáltal, hogy Mickey maga egy vizuális fókuszpont az oldalon. Boldog arca és testbeszéde fokozza ezt a boldog érzést, üdvözlő légkört teremtve.
a Play-Doh honlap létrehoz egy boldog hangulat segítségével sugárzó gyermek, mint a fókuszpont.
A Fifi és a Flowertots honlap egy nagy mosolygó Flowertot karakter vizuális fókusz, ami egy boldog hangulat.
a természetből származó elemeket
a gyermekeket olyan felismerhető elemek stimulálják, amelyekhez kapcsolódhatnak. Mivel a gyermekek életélményei korlátozottak, néhány olyan dolog, amelyet a legjobban ismernek, a természetben található. Az alábbi weboldalakon olyan természeti elemeket használunk, mint a fák, a víz, a hó és az állatok. Sok esetben ezeket az elemeket túlhangsúlyozzák a méret vagy a tervezés egyszerűsége miatt.
a Disney weboldal megváltoztatja témáját attól függően, hogy milyen terméket reklámoznak. Ebben a képernyőképen egy Grand Canyon-szerű tájat használnak emlékezetes vizuális élmény létrehozásához.
Discovery Kids használ víz alatti témát.
a Club Penguin sarkvidéki témát mutat be.
CBC Kids használ szezonális téma alapján egyszerű, szemet gyönyörködtető grafika.
PopCap Games használ füves táj előtt nagy napsugarak.
nagyobb, mint az élet Design
nagy design elemek bizonyultak hatékonynak minden típusú Web design, bizonyítja az a tény, hogy a nagy tipográfia, nagy gombok, és nagy call-to-action területek váltak általánossá a modern design. Mivel a gyerekek természetes módon vonzódnak az egyszerű, nyilvánvaló és felismerhető tárgyakhoz, a gyermekeknek tervezett weboldalak nagy design elemek használatával növelik hatékonyságukat.
animált karakterek
a nagy, animált, beszélő karakterek lenyűgöző és magával ragadó módon megragadják és megtartják a gyermek figyelmét. Számos, a gyermekek számára tervezett webhely hatékonyan használja ezt az elemet.
Barbie
Rogers Úr Szomszédsága
Disney Princess
Thomas a tartály motor
Barney & barátok
tervezés mélysége
a gyerekek szeretik hagyni, hogy a képzeletük Elvaduljon egy olyan világban, amely valóságosnak tűnik. Ez a fajta légkör a tervezési elemek mélységén keresztül hozható létre. Ez magában foglalhatja az extrudált alakzatokat, árnyékokat, tájakat, ferde effektusokat, fényes színátmeneteket vagy lebegő tárgyakat. Gyakran sok ilyen elem jelen van a rajzfilmszerű kijelzőkön, az alábbiak szerint.
a Webkinz “örökbefogadási Központ” árnyékokat, életszerű karaktert és más 3 dimenziós elemeket használ a mélységű tervezés létrehozásához.
a Poisson Rouge mély, valósághű légkört teremt egy ablak segítségével, amely kívülről néz a napra, számos más 3 dimenziós elemmel együtt.
a Rainbow Magic mélységet teremt a tervezésben egy Flash-animált tájképen keresztül, amely a felhasználó különböző elemek felett lebeg.
navigációs és cselekvésre ösztönző területek, amelyek kiemelkednek
bármely weboldal tervezésénél a navigációs és cselekvésre ösztönző területeknek kell fókuszpontoknak lenniük. A gyermekek weboldalának tervezői leegyszerűsíthetik ezeket a területeket, hogy a gyerekek könnyen navigálhassanak. A szöveges navigáció a gyermekek weboldalain nem lenne olyan hatékony, mint a nagy gombok és a grafika, mert nem lenne vizuális fókusz az oldalon.
a Peppa Pig vízszintes navigációs sávval rendelkezik, amely nagy ikonokat és könnyen olvasható leírásokat tartalmaz minden elemhez.
a Micimackó weboldal beépíti a navigációs sávot az “erdő” témájukba, nagy fa grafikus elemeket használva, amelyeket a felhasználó nem hagy figyelmen kívül.
a Szezám utca könnyen megtalálható vízszintes navigációs sávval rendelkezik, nagy cselekvésre ösztönző területekkel együtt.
az Én Kicsi Pónim szövegalapú navigációt használ, kevésbé grafikus élményt teremtve, amely lehetővé teszi a tartalomelemekre való összpontosítást. Ez bizonyos helyzetekben ideális lehet, de egy gyermek weboldalán a grafikus alapú navigációs sáv valószínűleg hatékonyabb.
felhasználói interakció
valószínűleg az egyik legfontosabb módja annak, hogy egy gyermek weboldala sikeres legyen, olyan elemeket tartalmaz, amelyek lehetővé teszik a gyermek számára, hogy valamilyen módon kölcsönhatásba lépjen az oldallal. A gyerekek nem akarnak intenzív olvasást vagy kutatást végezni; játszani és szórakoztatni akarnak.
egy tipikus weboldalon bizonyos tervezési elemeket zavarónak, használhatatlannak és nehézkesnek tekintenek. A gyermek weboldalán ugyanezeket az elemeket tekintik a felhasználók vonzásának hatékony eszközének.
interakció animáció és hang segítségével
az Adobe Flash használatával létrehozott effektusok és élmények nem kedvez a tipikus modern Webdesignnak, de a gyermekek webhelyein szinte nincs más lehetőség. Igaz, hogy a JavaScript-animáció és-effektusok hosszú utat tettek meg a rendelkezésre álló sok JavaScript-könyvtár miatt, de a bonyolult animációk Flash-sel történő létrehozásának egyszerűsége miatt ez a módszer az első választás sok gyerekeknek tervezett kereskedelmi webhely számára.
A Pauly ‘ s Playhouse webhely, mint a cikkben szereplő legtöbb webhely, teljes egészében Flash-ben épül fel.
a Hot Wheels weboldal tartalmaz egy animált “a nap autója” – t, amely az oldal betöltésekor nagyítja a képernyőt, vizuális interakciót hozva létre.
Roary a versenyautó egy rövid “flash intro” egy “skip” gombot. Ez egy régi iskolai trend a tipikus Webdesignban, de hatékony eszköz a gyermekalapú közönség kiszolgálására. Az intro egy úton animál, amíg a karakterek meg nem jelennek a láthatáron. Ez segít a Felhasználónak úgy érezni, mintha személyesen lépnének be Roary animációs világába.
a Yahoo! Gyerekek navigációs sáv jön létre a vaku, és teszi a hanghatások és animál, amikor a tételek fölé lebegett. Ez a tendencia nagyon gyakori a cikkben szereplő számos webhelyen.
videón keresztüli interakció
a televíziózásról ismert, hogy órákig elbűvöli a gyermekközönséget, ezért a “szombat reggeli rajzfilmek” évtizedek óta jövedelmező részét képezik számos TV-hálózat sugárzási ütemtervének. Hasonlóképpen, a gyermek webhelyén található videó szórakoztató, interaktív és oktatási szempontot ad a webhely tartalmához.
gyerek CBC-videó
Yahoo! Gyerekek Film Útmutatók
National Geographic Kids – Videos
interakció játékokon keresztül
milyen gyerek nem szeret játszani? A gyermek szórakoztatásának, oktatásának vagy más módon történő elfoglalásának egyik leghatékonyabb módja a “játékok” szakasz felvétele. A cikkhez kutatott webhelyek szinte mindegyike tartalmaz olyan játékokat, amelyek oktatják, ösztönzik és lehetővé teszik a közvetlen interakciót, miközben számos már tárgyalt tervezési elemet is tartalmaznak. Az alábbiakban néhány példa.
CBeebies – Gordon, a kerti törpe
Toy Story – Woody nagy menekülési
Disney Pixar világa autók lehetővé teszi a felhasználók számára, hogy hozzon létre, ossza meg és versenyezzen saját egyedi autóival.
nyomtatható elemek
a gyerekek szeretnek valami kézzelfoghatót magukkal vinni, hogy segítsenek nekik emlékezni tapasztalataikra. A nyomtatható képek és a színező oldalak lehetővé teszik a gyerekek számára, hogy emlékezzenek tapasztalataikra, miközben lehetőséget adnak a webhelytulajdonosoknak arra, hogy a számítógép képernyőjén kívül javítsák és népszerűsítsék márkájukat. Az alábbiakban bemutatunk néhány példát a gyerekek webhelyein nyomtatható színező oldalakra.
Pingu színező oldalak
Crayola Digi-Color
Peppa Pig színező oldalak
Thomas és barátai online színező
Teletubbies – Nyomtatás Színes
nem hagyományos módszerek
már számos olyan elemet tárgyaltunk, amelyeket a modern tipikus Webdesignban ma már nem szokványosnak tekintünk. A hangot, az animációt és a nagy zavaró grafikákat gyakran rosszallják a tipikus Webdesignban. A gyermekek weboldalain ezek az elemek segítik a felhasználói élményt. Más nem szokványos elemeket és tervezési lehetőségeket az alábbiakban tárgyalunk.
a kurzor megváltoztatása
ezt abszolút rossz gyakorlatnak tekintik a szokásos Webdesignban, de szórakoztató, hatékony módja lehet egy játékos elem hozzáadásának a gyerekek weboldalának témájához. Ezt dinamikus HTML használatával lehet megtenni, de gyakrabban Flash-en keresztül történik.
a kurzor a Discovery Kids weboldalon egy harapós medvecsapda grafikává válik.
a Sesame Street weboldalon a kurzort egy sárga csillag követi, amikor a szabványos HTML elemek fölé lebeg, és sárga csillaggá alakul, amelyet kisebb Animált csillagok vesznek körül, amikor a kurzort kattintható Flash elemek fölé mozgatja.
Talking Navigation
néha a navigációs sáv hanghatásokat produkál, de más esetekben a navigációs linkek vidám hangon szólnak ki, amit képviselnek.
a PBS KIDS navigációs sáv gyermekhangokkal beszél, amikor a felhasználó fölé viszi az egérmutatót.
a CBeebies navigációs sáv egy hanggal szólaltatja meg az egyes navigációs elemek rendeltetési helyét.
a Bob The Builder navigációs sáv beszél a felhasználó egéráthúzás.
A Fifi és a Flowertots tartalmaz egy beszélő navigációs sávot.
Breaking the Grid
míg a hagyományos modern webdesign technikák magukévá tették a rács alapú tervezés előnyeit és esztétikáját, a gyerekek weboldalai megszabadulhatnak a túlságosan strukturált elrendezéstől, hogy egyedülálló világot hozzanak létre, amelyet a gyermek élvezni fog.
ez nem azt jelenti, hogy a rács használata a tervezés alapjaként helytelen. Hasznos lehet egy rácskal kezdeni, majd ellenőrzött módon megtervezni a rácson kívüli elemeket. Ez a rugalmasság a tervezésben és az elrendezésben számos, már tárgyalt helyszínen megmutatkozik, de az alábbi példák navigációs sávjaiban is nyilvánvaló.
a Spongyabob Squarepants weboldal navigációs sávja ferde, ellentétben a tipikus rácsalapú webdesign konvencióival.
A Hannah Montana honlapján található navigációs sáv grafika, hogy megtörje a rács.
az In The Night Garden weboldal egy nagyon szokatlan navigációs sáv kialakítással rendelkezik, amely kevéssé hasonlít a hagyományos felépítésű kialakításhoz.
az alábbiakban bemutatunk néhány példát olyan webhelyekre, amelyek merevebb, rácsalapú formátumot használnak, és ennek eredményeként nem olyan egyediek, emlékezetesek vagy elbűvölőek, mint a cikkben már figyelembe vettek.
Kids WB merev, és nem olyan emlékezetes.
a Crayola weboldal kissé régi iskola rácsformátumával és függőleges navigációjával.
Neopets is tervezték egy strukturáltabb rács.
bizonyos esetekben erősebb rácsalapú tervezésre lenne szükség, ha a közönség idősebb gyermek közönség lenne, mint az SI gyerekek esetében, az alábbiakban látható.
felelősségvállalás
ha egy online élményen keresztül próbálod elérni a fiatal, befolyásolható emberek elméjét és szívét, akkor súlyos felelősség hárul rád. A gyermekek mentálisan törékenyek, és könnyen befolyásolják, amit látnak, hallanak és megérintenek. Vannak bizonyos tényezők, amelyekkel minden gyermek weboldalán foglalkozni kell, annak biztosítása érdekében, hogy a gyermekek ne szenvedjenek kárt.
az oktatás előmozdítása
a játékokat és egyéb interaktív elemeket nemcsak a vállalat márkájának és identitásának népszerűsítése érdekében kell létrehozni, hanem a fiatal elmék hasznos és pozitív módon történő oktatásához és képzéséhez. Az oktatás játékokon és tevékenységeken keresztül történő népszerűsítése megmutatja, hogy vállalata törődik a felhasználóval és azzal, hogy az online élmény hogyan befolyásolhatja őket a jövőben.
a Fisher Price Online tanulási játékai olyan játékokat tartalmaznak, amelyek korcsoportonként változnak.
Funbrain népszerűsíti magát, mint “az Internet #1 oktatási oldal K-8 gyerekek és tanárok.”
információ szülőknek
a szülők szorosan figyelemmel kísérik gyermekeik internetes szokásait. Sok gyermekoldal tisztában van ezzel, ezért olyan információkat tartalmaznak, amelyek a szülők felé irányulnak. Néha ez tipp formájában történik, mint a Sesame Street games webhely esetében, vagy egyszerűen egy navigációs elem, amely a szülő szakaszára mutat.
a Sesame Street Games tartalmaz egy “szülő tipp” dobozt.
BEN 10 van egy “szülő cucc” linket az elsődleges navigációs sáv.
Thomas a Tartálymotor tartalmaz egy “szülők” linket.
használhatóság tesztelés
végül, az egyik legjobb módja annak, hogy segítsen felépíteni egy sikeres online élmény a gyermekek számára keresztül figyeli a gyerekek navigálni, és kölcsönhatásba lépnek a webhely játékok és egyéb egyedi funkciók. Nem minden vállalatnak lesz költségvetése a kiterjedt tesztelésre, de szinte mindegyik képes lesz legalább minimális mennyiségű tesztelésre — még akkor is, ha csak egy gyermekkel van. Ez lehetővé teszi, hogy a webhelyet egy gyermek szemével láthassa, és elvégezze a szükséges módosításokat, ugyanúgy, mint bármely használhatósági tesztnél.
az olyan cégek, mint a Disney, a Sesame Street és a PBS, természetesen évek óta tanulmányozzák a gyermekek viselkedését, így a fent bemutatott példák közül sok felhasználható egy sikeres gyermekoldal alapjaként, még akkor is, ha nem végeznek használhatósági tesztet.
következtetés
itt található mind a hagyományos, mind a nem konvencionális bevált gyakorlatok összefoglalása a gyerekeknek szóló weboldal tervezéséhez:
hagyományos legjobb gyakorlatok
- nagy és vizuálisan emlékezetes elemek létrehozása
- használjon élénk, élénk színeket, amelyek stimulálják az érzékeket
- a természetből származó elemek beépítése
- hozzon létre mélységet a tervezésben
- adjon hozzá nagy és könnyen megtalálható navigációs elemeket
- használja a videót
- nyomtatható elemeket tartalmaz
- törje meg a rácsot
- a használhatóság tesztelése alapján végezzen módosításokat
nem szokványos legjobb gyakorlatok
- hozzon létre egy boldog, játékos hangulatot
- használja az animált karakterek
- használata grafikus nehéz navigációs sávok
- használata flash animáció bőségesen
- beágyazása mozgások és hangok kiváltó oldal betöltése
- tartalmaz Egy “játékok” rész
- változás a kurzort, hogy hozzájáruljon a téma
- hangok hozzáadása navigációs rollovers
- elszámoltatható mind a gyermekek, mind a szülők számára
egy webdesigner, aki dolgozott egy gyermek weboldalon, valószínűleg azt mondaná, hogy ez volt az egyik legszórakoztatóbb és legérdekesebb projekt, amelyen dolgozhattak. Ha valaha is lehetősége van arra, hogy olyan felhasználói élményt hozzon létre, amely a gyermekek felé irányul, feltétlenül kövesse az itt tárgyalt webhelyek közül néhány bevált módszert, és webhelyének jó esélye lesz arra, hogy nagy sikert arasson a gyerekekkel.