Proiectare Site-uri web pentru copii: tendințe și cele mai bune practici

• 12 min read
• Inspirație, Vitrine, Web Design, copii
• Share on Twitter, LinkedIn

Site-urile web concepute pentru copii au fost în mare parte trecute cu vederea în articolele de design Web și în rezumate, dar există multe elemente de design și machete frumoase și interesante prezentate pe site-urile web pentru copii care merită discutate și analizate. Există, de asemenea, o serie de cele mai bune practici care sunt exclusive pentru web design pentru site — uri pentru copii-practici care, de obicei, nu ar trebui să fie încercat pe un site tipic.

poate doriți să aruncați o privire la articolele conexe:

• cele mai bune practici pentru Web Design pentru copii
• proiectarea pentru copii nu este jocul copilului
• proiectarea interfețelor Web pentru copii
• o pledoarie a Tatălui către dezvoltatorii de aplicații iPad pentru copii

acest articol va prezenta o serie de site-uri comerciale populare orientate către copii, cu o analiză a tendințelor, elementelor și tehnicilor utilizate pentru a ajuta copiii să fie interesați și stimulați.

design care stimulează simțurile

oamenii sunt stimulați mental de o serie de factori, iar acest lucru este valabil mai ales în cazul copiilor. Site-urile de succes pentru copii implementează o serie de elemente și principii de proiectare care creează un mediu potrivit pentru personalitatea și interesele copilului.

culori luminoase, vii

culori luminoase va capta cu ușurință și țineți atenția unui copil pentru perioade lungi de timp. Deși alegerea culorii este un factor primar în proiectarea oricărui tip de site web, acest lucru este valabil mai ales atunci când proiectați un site web pentru copii, deoarece culorile fac o impresie mare asupra minților tinere ale copiilor. Opțiunile de culoare și combinațiile care ar putea fi respinse sau de râs atunci când proiectați un site web tipic pot fi binevenite pe un site web pentru copii.

câte dintre combinațiile de culori utilizate în capturile de ecran de mai jos ar reuși pe un site web destinat unui public adult? Nu mulți. Deci, atunci când proiectați un site destinat copiilor, utilizați culori luminoase, vii, care vor stimula vizual într-un mod de neuitat.

PBS KIDS

pagina de pornire a lui Herman

loc de joacă pentru creier

o dispoziție fericită

copiii își vor aminti și se vor întoarce pe un site web dacă experiența lor este una fericită. Elementele pot fi încorporate în design pentru a se asigura că este prezentată o dispoziție veselă și pozitivă.

Mickey Mouse Clubhouse creează o stare de spirit fericit de a face Mickey însuși un punct focal vizual pe pagina. Fața lui fericită și limbajul corpului ajută la îmbunătățirea acestui sentiment fericit, creând o atmosferă binevenită.

site-ul Play-Doh creează o stare de spirit fericit folosind un copil radiind ca punct focal.

site-ul Fifi și Flowertots are un mare caracter flowertot zâmbitor în focalizare vizuală, creând o stare de spirit fericit.

elemente din natură

copiii sunt stimulați de elemente recunoscute cu care se pot raporta. Deoarece experiențele copiilor în viață sunt limitate, unele dintre lucrurile cu care sunt cei mai familiarizați se găsesc în natură. Elementele naturale precum copacii, apa, zăpada și animalele sunt utilizate pe site-urile web prezentate mai jos. În multe cazuri, aceste elemente sunt subliniate prin dimensiunea sau simplitatea designului.

site-ul Disney își modifică tema în funcție de ce produs este promovat. În această captură de ecran, folosesc un peisaj asemănător Marelui Canion pentru a crea o experiență vizuală memorabilă.

Discovery Kids folosește o temă subacvatică.

Club Penguin prezintă o temă arctică.

CBC Kids folosește o temă sezonieră bazată pe o grafică simplistă, atrăgătoare.

PopCap Games folosește un peisaj ierbos în fața razelor mari de soare.

design mai mare decât viața

elementele de design mari s-au dovedit a fi eficiente în toate tipurile de web design, demonstrat de faptul că tipografia mare, butoanele mari și zonele mari de îndemn au devenit obișnuite în designul modern. Deoarece copiii sunt atrași în mod natural de obiecte simple, evidente și recunoscute, site-urile web concepute pentru copii își vor crește eficiența prin utilizarea unor elemente de design mari.

personaje animate

personaje mari, animate, vorbitoare sunt o modalitate fascinantă și captivantă de a atrage atenția copilului. Multe site-uri concepute pentru copii folosesc acest element în mod eficient.

Barbie

Cartierul Domnului Rogers

Disney Princess

Thomas motorul tancului

Barney &prieteni

adâncime în design

copiilor le place să-și lase imaginația să se dezlănțuie într-o lume care arată și se simte reală. Acest tip de atmosferă poate fi creată prin adâncimea elementelor de design. Aceasta ar putea include forme extrudate, umbre, peisaje, efecte teșite, degradeuri strălucitoare sau obiecte plutitoare. Adesea, multe dintre aceste elemente sunt prezente în afișaje asemănătoare desenelor animate, așa cum se arată mai jos.

„Centrul de adopție” Webkinz folosește umbre, un personaj asemănător vieții și alte elemente 3-dimensionale pentru a crea un design care are adâncime.

Poisson Rouge creează o atmosferă profundă și realistă folosind o fereastră care privește în exterior soarele, împreună cu o serie de alte elemente 3-dimensionale.

Rainbow Magic creează profunzime în designul lor printr-o scenă de peisaj animată Flash care se mișcă pe măsură ce utilizatorul planează peste diferite elemente.

zonele de navigare și Call-To-Action care se remarcă

în orice zone de design, navigare și call-To-action ar trebui să fie puncte focale. Designerii de site-uri pentru copii pot simplifica aceste zone, astfel încât copiii să poată naviga cu ușurință. Navigarea bazată pe Text pe site-urile web pentru copii nu ar fi la fel de eficientă ca butoanele mari și grafica, deoarece le-ar lipsi focalizarea vizuală pe o pagină.

Peppa Pig are o bară de navigare orizontală care include pictograme mari și descrieri ușor de citit pentru fiecare articol.

site-ul Winnie the Pooh încorporează bara de navigare în tema lor „pădure”, folosind elemente grafice mari din lemn care nu vor fi trecute cu vederea de către utilizator.

Sesame Street are o bară de navigare orizontală Ușor de localizat, împreună cu zone mari de îndemn.

My Little Pony folosește navigarea bazată pe text, creând o experiență mai puțin grafică, care permite concentrarea asupra elementelor de conținut. Acest lucru ar putea fi ideal în unele situații, dar pe un site web pentru copii, o bară de navigare bazată pe grafică este mai probabil să fie eficientă.

interacțiunea cu utilizatorul

probabil una dintre cele mai importante modalități prin care un site web pentru copii poate reuși este să includă elemente care să permită unui copil să interacționeze cu site-ul într-un fel. Copiii nu vor să citească sau să cerceteze intens; vor să se joace și să se distreze.

pe un site tipic, anumite elemente de design sunt privite ca distrag atenția, inutilizabile și greoaie. Pe site-ul unui copil, aceleași elemente sunt privite ca un mijloc eficient de atragere a utilizatorilor.

interacțiunea prin animație și sunet

efectele și experiențele create cu Adobe Flash sunt descurajate în designul web tipic modern, dar pe site-urile pentru copii nu există aproape nicio altă opțiune. Este adevărat că Animația și efectele JavaScript au parcurs un drum lung din cauza numeroaselor biblioteci JavaScript disponibile, dar ușurința cu care animațiile complexe pot fi create cu Flash face ca această metodă să fie prima alegere pentru multe site-uri comerciale concepute pentru copii.

site-ul Pauly ‘ s Playhouse, la fel ca majoritatea site-urilor prezentate în acest articol, este construit în întregime în Flash.

site-ul Hot Wheels include o „mașină a zilei” animată care mărește ecranul atunci când pagina Se încarcă, creând Interacțiune vizuală.

Roary Masina de curse are o scurtă „flash intro” cu un buton „skip”. Aceasta este o tendință de școală veche în designul web tipic, dar este un mijloc eficient de catering pentru un public bazat pe copii. Intro animă printr-un drum până când personajele apar la orizont. Acest lucru ajută utilizatorul să se simtă ca și cum ar intra personal în lumea animată a lui Roary.

Yahoo! Copii bara de navigare este creat cu Flash și face efecte de sunet și animă atunci când elementele sale sunt plutit peste. Această tendință este foarte frecventă pe multe dintre site-urile prezentate în acest articol.

interacțiunea prin intermediul videoclipurilor

Televiziunea este cunoscută pentru a captiva publicul copiilor ore întregi, motiv pentru care „desenele animate de sâmbătă dimineața” au fost de zeci de ani o parte profitabilă a programelor de difuzare pentru multe rețele TV. În mod similar, videoclipul de pe site-ul unui copil adaugă un aspect distractiv, interactiv și educativ conținutului unui site.

copii CBC-Video

Yahoo! Ghiduri De Filme Pentru Copii

National Geographic Kids – Video

interacțiunea prin jocuri

ce copil nu se bucură de jocuri? Una dintre cele mai eficiente modalități de a distra, educa sau ocupa în alt mod un copil pe un site web este includerea unei secțiuni „jocuri”. Aproape toate site-urile cercetate pentru acest articol includ jocuri care educă, stimulează și permit interacțiunea directă, încorporând în același timp multe dintre elementele de design deja discutate. Mai jos sunt câteva exemple.

CBeebies – Gordon The Garden Gnome

Toy Story – Woody ‘s Big Escape

Disney Pixar ‘ s World of Cars creați, partajați și concurați propriile mașini personalizate.

elemente imprimabile

copiilor le place să aibă ceva tangibil de luat cu ei, pentru a-i ajuta să-și amintească experiența. Imaginile imprimabile și paginile de colorat permit copiilor să aibă o amintire a experienței lor, oferind în același timp proprietarilor de site-uri web posibilitatea de a-și îmbunătăți și promova marca în afara ecranului computerului. Mai jos sunt câteva exemple de pagini de colorat imprimabile pe site-urile web pentru copii.

pagini de colorat Pingu

Crayola Digi-Color

pagini de colorat Peppa Pig

Thomas și prietenii online de colorat

Teletubbies – Print To Color

metode neconvenționale

am discutat deja o serie de elemente care, în designul web tipic modern, sunt acum considerate neconvenționale. Sunetul, animația și graficele mari deranjante sunt adesea încruntate în designul web tipic. Pe site-urile pentru copii, aceste elemente ajută experiența utilizatorului. Alte elemente neconvenționale și opțiuni de design sunt discutate mai jos.

schimbarea cursorului

aceasta este absolut privită ca o practică proastă în designul Web standard, dar poate fi o modalitate distractivă și eficientă de a adăuga un element jucăuș la tema site-ului pentru copii. Acest lucru se poate face folosind HTML dinamic, dar se face mai des prin Flash.

cursorul de pe site-ul Discovery Kids se transformă într-o grafică capcană de urs.

cursorul de pe site-ul Sesame Street este urmat de o stea galbenă atunci când se deplasează peste elementele HTML standard și se transformă într-o stea galbenă înconjurată de stele animate mai mici atunci când cursorul este mutat peste elementele Flash care pot fi făcute clic.

vorbind de navigare

uneori, o bară de navigare va produce efecte sonore, dar în alte cazuri, link-uri de navigare va suna ceea ce reprezintă într-o voce veselă.

bara de navigare PBS KIDS vorbește folosind vocile copiilor, atunci când utilizatorul planează peste ea.

bara de navigare CBeebies utilizează o voce pentru a suna destinația fiecărui element de navigare.

bara de navigare Bob Builder vorbește utilizatorului pe mouseover.

Fifi și Flowertots dispune de o bară de navigare vorbind.

Breaking the Grid

în timp ce tehnicile tradiționale moderne de Web design au îmbrățișat beneficiile și estetica designului bazat pe grilă, site-urile pentru copii se pot elibera de un aspect prea structurat pentru a crea o lume unică pe care un copil o va bucura să o experimenteze.

acest lucru nu înseamnă că utilizarea unei rețele ca bază a designului este greșită. Poate fi benefic să începeți cu o rețea, apoi să proiectați elemente în afara rețelei într-o manieră controlată. Această flexibilitate în design și aspect este demonstrată pe o serie de site-uri deja discutate, dar este evidentă și în barele de navigare din exemplele de mai jos.

bara de navigare de pe site-ul Spongebob Squarepants este înclinată, mergând împotriva Convenției în designul web tipic bazat pe rețea.

site-ul Hannah Montana are o grafică bara de navigare care rupe grila.

site-ul In the Night Garden prezintă un design neobișnuit al barei de navigare, care seamănă puțin cu cel găsit într-un design structurat convențional.

mai jos sunt câteva exemple de site-uri web care utilizează un format mai rigid, bazat pe rețea și, ca urmare, nu sunt la fel de unice, memorabile sau captivante ca unele dintre cele deja luate în considerare în acest articol.

Kids WB este rigid și nu la fel de memorabil.

site-ul Crayola este oarecum de modă veche, cu formatul grilei și navigarea verticală.

Neopets este, de asemenea, proiectat pe o grilă mai structurată.

acordat, în unele cazuri, un design mai puternic bazat pe grilă ar fi necesar dacă publicul ar fi un public mai mare pentru copii, așa cum este cazul SI Kids, prezentat mai jos.

asumarea responsabilității

dacă încercați să ajungeți la mințile și inimile oamenilor tineri, impresionabili printr-o experiență online, vi se încredințează o responsabilitate importantă. Copiii sunt fragili mental și ușor afectați de ceea ce văd, aud și ating. Există anumiți factori care trebuie să fie abordate pe site-ul fiecare copii, pentru a asigura nici un rău este adus la copii.

Promovarea educației

jocurile și alte elemente interactive ar trebui create nu doar pentru a promova marca și identitatea companiei dvs., ci pentru a ajuta la educarea și instruirea minților tinere într-un mod benefic și pozitiv. Promovarea educației prin jocuri și activități va arăta că companiei dvs. îi pasă de utilizator și de modul în care experiența lor online le-ar putea afecta în viitor.

jocurile de învățare online de la Fisher Price includ jocuri care variază în funcție de grupa de vârstă.

Funbrain se promovează ca „site-ul de Educație #1 al Internetului pentru copiii și profesorii K-8.”

informații pentru părinți

părinții vor urmări cu atenție obiceiurile de internet ale copiilor lor. Multe site-uri pentru copii sunt conștiente de acest lucru, astfel încât acestea includ informații orientate către părinți. Uneori, acest lucru este sub forma unui sfat, cum este cazul site-ului Sesame Street games, sau pur și simplu un element de navigare care indică secțiunea unui părinte.

Sesame Street Games include o casetă „sfat părinte”.

BEN 10 are un link „lucruri părinte” în bara de navigare principală.

Thomas motorul rezervorului include o legătură „părinți”.

testarea utilizabilității

în cele din urmă, una dintre cele mai bune modalități de a ajuta la construirea unei experiențe online de succes pentru copii este prin vizionarea copiilor navigând și interacționând cu jocurile site-ului dvs. și cu alte caracteristici unice. Nu toate companiile vor avea bugetul pentru teste extinse, dar aproape toate vor avea capacitatea de a face cel puțin o cantitate minimă de testare — chiar dacă este cu un singur copil. Acest lucru vă va permite să vedeți site-ul prin ochii unui copil și să faceți orice modificări necesare, la fel cum s-ar face în orice teste de utilizare.

companii precum Disney, Sesame Street și PBS, desigur, studiază comportamentul copiilor de ani de zile, astfel încât multe dintre exemplele prezentate mai sus ar putea fi utilizate pentru a forma baza unui site web de succes pentru copii, chiar dacă nu se fac teste de utilizare.

concluzie

Iată un rezumat al celor mai bune practici convenționale și neconvenționale pentru proiectarea unui site web pentru copii:

cele mai bune practici convenționale

• creați elemente care sunt mari și memorabile din punct de vedere vizual
• utilizați culori luminoase și vii care stimulează simțurile
• încorporați elemente din natură
• creați adâncime în design
• adăugați elemente de navigație care sunt mari și ușor de găsit
• utilizare video
• includeți elemente imprimabile
• rupeți grila
• efectuați modificări pe baza testelor de utilizare

cele mai bune practici neconvenționale

• creați o dispoziție fericită și jucăușă
• utilizați animate caractere
• utilizați bare de navigare grafice grele
• utilizați animația Flash abundent
• încorporați mișcări și sunete care declanșează la încărcarea paginii
• includeți o secțiune „jocuri”
• schimbați cursorul pentru a contribui la temă
• adăugați voci la rollovers de navigare
• fii responsabil atât copiilor, cât și părinților

un web designer care a lucrat pe un site pentru copii ar spune probabil că a fost unul dintre cele mai distractive și interesante proiecte la care au avut privilegiul de a lucra. Dacă aveți vreodată ocazia de a crea o experiență de utilizator orientată către copii, asigurați-vă că urmați câteva dintre metodele dovedite demonstrate pe multe dintre site-urile discutate aici, iar site-ul dvs. web va avea șanse mari să fie un mare succes cu copiii.