Progettazione di Siti web Per Bambini: le Tendenze E le Migliori Pratiche

• 12 min leggere
• Ispirazione, Vetrine, Web Design, Bambini
• Share on Twitter, LinkedIn,

I siti Web progettati per i bambini sono stati in gran parte trascurati negli articoli e nelle raccolte di web design, ma ci sono molti elementi di design e layout belli e interessanti presentati sui siti Web per bambini che sono degni di discussione e analisi. Ci sono anche una serie di best practice che sono esclusive per il Web design per i siti per bambini — pratiche che di solito non dovrebbero essere tentate su un tipico sito web.

Si potrebbe desiderare di dare un’occhiata a articoli correlati:

• Best Practices Per il Web Design Per Bambini
• Progettazione Per i Bambini Non È un Gioco da bambini
• Progettazione di Interfacce Web Per Bambini
• di Un Padre, di un Motivo Per gli Sviluppatori Di App per iPad Per Bambini

Questo articolo presenterà una serie di popolari siti web commerciali mirate verso i bambini, con un’analisi delle tendenze, gli elementi e le tecniche utilizzate per aiutare a mantenere i bambini interessati e stimolati.

Design che stimola i sensi

Gli esseri umani sono mentalmente stimolati da una serie di fattori, e questo è particolarmente vero con i bambini. I siti Web per bambini di successo implementano una serie di elementi e principi di progettazione che creano un ambiente adatto alla personalità e agli interessi di un bambino.

Luminoso, Vivid Colori

Colori vivaci sarà facilmente catturare e tenere l’attenzione di un bambino per lunghi periodi di tempo. Sebbene la scelta del colore sia un fattore primario nella progettazione di qualsiasi tipo di sito web, questo è particolarmente vero quando si progetta un sito Web per bambini poiché i colori fanno una grande impressione sulle giovani menti dei bambini. Le scelte di colore e le combinazioni che potrebbero essere respinte o derise durante la progettazione di un sito Web tipico possono essere accolte su un sito Web per bambini.

Quante delle combinazioni di colori utilizzate negli screenshot qui sotto avrebbero successo su un sito web rivolto a un pubblico adulto? Non molti. Quindi, quando si progetta un sito rivolto ai bambini, utilizzare colori brillanti e vivaci che stimoleranno visivamente in modo indimenticabile.

PBS KIDS

Homepage di Herman

Funbrain Playground

Un umore felice

I bambini ricorderanno e torneranno su un sito web se la loro esperienza è felice. Gli elementi possono essere incorporati nel design per garantire che venga presentato uno stato d’animo allegro e positivo.

Mickey Mouse Clubhouse crea uno stato d’animo felice facendo Topolino stesso un punto focale visivo sulla pagina. Il suo viso felice e il linguaggio del corpo aiutano a migliorare questa sensazione felice, creando un’atmosfera di benvenuto.

Il sito web Play-Doh crea un’atmosfera felice usando un bambino raggiante come punto focale.

Il Fifi e il sito web Flowertots ha un grande carattere sorridente Flowertot a fuoco visivo, creando uno stato d’animo felice.

Elementi della Natura

I bambini sono stimolati da elementi riconoscibili a cui possono relazionarsi. Poiché le esperienze dei bambini nella vita sono limitate, alcune delle cose con cui hanno più familiarità si trovano in natura. Elementi naturali come alberi, acqua, neve e animali sono utilizzati nei siti web mostrati di seguito. In molti casi, questi elementi sono sottovalutati attraverso le dimensioni o la semplicità del design.

Il sito Disney altera il suo tema a seconda del prodotto che viene promosso. In questo screenshot, usano un paesaggio simile al Grand Canyon per creare un’esperienza visiva memorabile.

Discovery Kids utilizza un tema subacqueo.

Club Penguin presenta un tema artico.

CBC Kids utilizza un tema stagionale basato su una grafica semplicistica e accattivante.

PopCap Games utilizza un paesaggio erboso di fronte a grandi raggi di sole.

Larger-Than-Life Design

Gli elementi di design di grandi dimensioni si sono dimostrati efficaci in tutti i tipi di Web design, come dimostra il fatto che la tipografia di grandi dimensioni, i pulsanti di grandi dimensioni e le grandi aree call-to-action sono diventati comuni nel design moderno. Poiché i bambini sono naturalmente attratti da oggetti semplici, ovvi e riconoscibili, i siti Web progettati per i bambini aumenteranno la loro efficacia attraverso l’uso di grandi elementi di design.

Personaggi animati

I grandi personaggi animati e parlanti sono un modo affascinante e accattivante per catturare e trattenere l’attenzione di un bambino. Molti siti progettati per i bambini usano questo elemento in modo efficace.

Barbie

Quartiere di Mr. Rogers

Disney Princess

Thomas the Tank Engine

Barney & Amici

Profondità nel Design

I bambini amano lasciare la loro immaginazione correre in un mondo che guarda e si sente reale. Questo tipo di atmosfera può essere creato attraverso la profondità degli elementi di design. Ciò potrebbe includere forme estruse, ombre, paesaggi, effetti smussati, sfumature lucide o oggetti fluttuanti. Spesso, molti di questi elementi sono presenti in schermi simili a cartoni animati, come mostrato di seguito.

Il “Centro adozione” di Webkinz utilizza ombre, un personaggio realistico e altri elementi tridimensionali per creare un design che abbia profondità.

Poisson Rouge crea un’atmosfera profonda e realistica utilizzando una finestra che guarda all’esterno il sole, insieme a una serie di altri elementi tridimensionali.

Rainbow Magic crea profondità nel loro design attraverso una scena di paesaggio animata da Flash che si muove mentre l’utente si libra su diversi elementi.

Aree di navigazione e Call-to-Action che si distinguono

In qualsiasi progettazione di siti web, le aree di navigazione e call-to-action dovrebbero essere punti focali. I progettisti di siti web per bambini possono semplificare eccessivamente queste aree in modo che i bambini possano navigare facilmente. La navigazione testuale sui siti Web per bambini non sarebbe efficace quanto i pulsanti e la grafica di grandi dimensioni, perché mancherebbero di messa a fuoco visiva su una pagina.

Peppa Pig ha una barra di navigazione orizzontale che include icone grandi e descrizioni di facile lettura per ogni elemento.

Il sito web di Winnie The Pooh incorpora la barra di navigazione nel tema “foresta”, utilizzando grandi elementi grafici in legno che non verranno trascurati dall’utente.

Sesame Street ha una barra di navigazione orizzontale facile da individuare, insieme a grandi aree call-to-action.

My Little Pony utilizza la navigazione basata su testo, creando un’esperienza meno grafica, che consente di concentrarsi sugli elementi di contenuto. Questo potrebbe essere l’ideale in alcune situazioni, ma su un sito Web per bambini una barra di navigazione basata su grafica è più probabile che sia efficace.

Interazione con l’utente

Probabilmente uno dei modi più importanti per il successo di un sito web per bambini è quello di includere elementi che consentano a un bambino di interagire con il sito in qualche modo. I bambini non vogliono fare lettura intensa o ricerca; vogliono giocare ed essere intrattenuti.

In un tipico sito web, alcuni elementi di design sono visti come fonte di distrazione, inutilizzabili e ingombranti. Sul sito web di un bambino, quegli stessi elementi sono visti come un mezzo efficace per attirare gli utenti.

Interazione attraverso l’animazione e il suono

Gli effetti e le esperienze create con Adobe Flash sono scoraggiati nel tipico design Web moderno, ma sui siti per bambini non c’è quasi altra opzione. È vero che l’animazione e gli effetti JavaScript hanno fatto molta strada a causa delle molte librerie JavaScript disponibili, ma la facilità con cui è possibile creare animazioni complesse con Flash rende questo metodo la prima scelta per molti siti Web commerciali progettati per i bambini.

Il sito Playhouse di Pauly, come la maggior parte dei siti web presenti in questo articolo, è costruito interamente in Flash.

Il sito web di Hot Wheels include una “macchina del giorno” animata che zooma sullo schermo quando la pagina viene caricata, creando un’interazione visiva.

Roary l’auto da corsa ha una breve “flash intro” con un pulsante “salta”. Questa è una tendenza vecchia scuola nel tipico Web design, ma è un mezzo efficace per soddisfare un pubblico basato su bambini. L’intro si anima attraverso una strada fino a quando i personaggi appaiono all’orizzonte. Questo aiuta l’utente a sentirsi come se stesse entrando personalmente nel mondo animato di Roary.

Yahoo! Barra di navigazione bambini viene creato con il Flash e rende gli effetti sonori e anima quando i suoi elementi sono aleggiava sopra. Questa tendenza è molto comune su molti dei siti presenti in questo articolo.

Interazione attraverso video

La televisione è nota per affascinare il pubblico infantile per ore, motivo per cui i “cartoni del sabato mattina” sono stati per decenni una parte lucrativa dei programmi di trasmissione per molte reti televisive. Allo stesso modo, il video sul sito web di un bambino aggiunge un aspetto divertente, interattivo ed educativo al contenuto di un sito.

CBC per bambini – Video

Yahoo! Guida film per bambini

National Geographic Kids – Video

Interazione attraverso i giochi

Quale bambino non si diverte a giocare? Uno dei modi più efficaci per intrattenere, educare o altrimenti occupare un bambino su un sito web è quello di includere una sezione “giochi”. Quasi tutti i siti web studiati per questo articolo includono giochi che educano, stimolano e consentono un’interazione diretta, incorporando anche molti degli elementi di design già discussi. Di seguito sono riportati alcuni esempi.

CBeebies – Gordon lo Gnomo da giardino

Toy Story – La grande fuga di Woody

Disney Pixar World of Cars permette agli utenti di creare, condividere e correre le proprie auto personalizzate.

Elementi stampabili

Ai bambini piace avere qualcosa di tangibile da portare con sé, per aiutarli a ricordare la loro esperienza. Le immagini stampabili e le pagine da colorare consentono ai bambini di avere un ricordo della loro esperienza, dando ai proprietari di siti Web l’opportunità di migliorare e promuovere il loro marchio al di fuori dello schermo del computer. Di seguito sono riportati alcuni esempi di pagine da colorare stampabili sui siti web per bambini.

Pingu Pagine da Colorare

Crayola n. di articolo Digi-Colore

Peppa Pig per Colorare

Thomas e gli Amici Online Colorare

Teletubbies – Stampa A Colori

Metodi non convenzionali

Abbiamo già discusso una serie di elementi che, nel moderno tipico di Web design, sono ora considerati non convenzionali. Il suono, l’animazione e la grande grafica invadente sono spesso disapprovati nel tipico Web design. Sui siti web per bambini, questi elementi aiutano l’esperienza dell’utente. Altri elementi non convenzionali e scelte di design sono discussi di seguito.

Modifica del cursore

Questo è assolutamente visto come una cattiva pratica nel Web design standard, ma può essere un modo divertente ed efficace per aggiungere un elemento giocoso al tema di un sito web per bambini. Questo può essere fatto usando HTML dinamico, ma è più spesso fatto tramite Flash.

Il cursore sul sito web Discovery Kids si trasforma in una grafica trappola per orsi.

Il cursore sul sito web di Sesame Street è seguito da una stella gialla quando si libra su elementi HTML standard e si trasforma in una stella gialla circondata da stelle animate più piccole quando il cursore viene spostato su elementi Flash cliccabili.

Talking Navigation

A volte una barra di navigazione produce effetti sonori, ma in altri casi i collegamenti di navigazione emettono ciò che rappresentano con voce allegra.

La barra di navigazione PBS KIDS parla usando le voci dei bambini, quando l’utente passa sopra di esso.

La barra di navigazione CBeebies utilizza una voce per indicare la destinazione di ogni elemento di navigazione.

La barra di navigazione Bob the Builder parla all’utente al passaggio del mouse.

Il Fifi e il Flowertots dispone di una barra di navigazione parlante.

Breaking the Grid

Mentre le tradizionali tecniche di Web design moderno hanno abbracciato i vantaggi e l’estetica del design basato sulla griglia, i siti web per bambini possono liberarsi da un layout eccessivamente strutturato per creare un mondo unico che un bambino si divertirà a sperimentare.

Questo non significa suggerire che l’uso di una griglia come base del progetto sia sbagliato. Può essere utile iniziare con una griglia, quindi progettare elementi al di fuori della griglia in modo controllato. Questa flessibilità nella progettazione e nel layout è dimostrata su un certo numero di siti già discussi, ma è evidente anche nelle barre di navigazione degli esempi seguenti.

La barra di navigazione sul sito Web di Spongebob Squarepants è inclinata, andando contro la convenzione nel tipico Web design basato su griglia.

Il sito web Hannah Montana dispone di grafica barra di navigazione che rompono la griglia.

Il sito web In the Night Garden presenta un design della barra di navigazione molto insolito che assomiglia poco a quello trovato in un design strutturato in modo convenzionale.

Di seguito sono riportati alcuni esempi di siti Web che utilizzano un formato più rigido e basato sulla griglia e, di conseguenza, non sono così unici, memorabili o accattivanti come alcuni di quelli già considerati in questo articolo.

Kids WB è rigido e non così memorabile.

Il sito web di Crayola è un po ‘ vecchio stile con il suo formato a griglia e la navigazione verticale.

Neopets è anche progettato su una griglia più strutturata.

Certo, in alcuni casi sarebbe necessario un design basato su griglia più forte se il pubblico fosse un pubblico di bambini più grandi, come nel caso di SI Kids, mostrato di seguito.

Assumersi la responsabilità

Se stai tentando di raggiungere le menti e i cuori di persone giovani e impressionabili attraverso un’esperienza online, ti viene affidata una pesante responsabilità. I bambini sono mentalmente fragili e facilmente influenzati da ciò che vedono, sentono e toccano. Ci sono alcuni fattori che devono essere affrontati sul sito web di ogni bambino, per garantire che nessun danno venga portato ai bambini.

Promuovere l’educazione

I giochi e altri elementi interattivi dovrebbero essere creati non solo per promuovere il marchio e l’identità della tua azienda, ma per aiutare a educare e formare giovani menti in modo benefico e positivo. Promuovere l’educazione attraverso giochi e attività mostrerà che la tua azienda si preoccupa dell’utente e di come la sua esperienza online potrebbe influenzarlo in futuro.

I giochi di apprendimento online di Fisher Price includono giochi che variano in base alla fascia di età.

Funbrain si promuove come “Il sito di educazione #1 di Internet per bambini e insegnanti K-8.”

Informazioni per i genitori

I genitori terranno d’occhio le abitudini di Internet dei loro figli. Molti siti per bambini ne sono consapevoli, quindi includono informazioni orientate verso i genitori. A volte questo è sotto forma di un suggerimento, come nel caso del sito web di Sesame Street Games, o semplicemente un elemento di navigazione che punta alla sezione di un genitore.

Sesame Street Games include una casella “Punta genitore”.

BEN 10 ha un link “Roba genitore” nella barra di navigazione principale.

Thomas il motore del serbatoio include un link “genitori”.

Test di usabilità

Infine, uno dei modi migliori per aiutare a costruire un’esperienza online di successo per i bambini è attraverso guardare i bambini navigare e interagire con i giochi del tuo sito e altre caratteristiche uniche. Non tutte le aziende avranno il budget per test approfonditi, ma quasi tutti avranno la capacità di fare almeno una quantità minima di test, anche se si tratta di un solo bambino. Questo ti permetterà di vedere il sito attraverso gli occhi di un bambino e apportare le modifiche necessarie, lo stesso che verrebbe fatto in qualsiasi test di usabilità.

Aziende come Disney, Sesame Street e PBS, ovviamente, hanno studiato il comportamento dei bambini per anni, quindi molti degli esempi presentati sopra potrebbero essere utilizzati per costituire la base per un sito Web per bambini di successo, anche se non viene eseguito alcun test di usabilità.

Conclusione

Ecco un riepilogo delle migliori pratiche convenzionali e non convenzionali per la progettazione di un sito web per bambini:

Convenzionale Best Practice

• Creare elementi che sono di grandi dimensioni e visivamente memorabile
• vivaci, colori vivaci che stimolano i sensi
• Incorporare elementi della natura
• Creare profondità nella progettazione
• Aggiungere elementi di navigazione che sono grandi e facili da trovare
• Utilizzare il video
• Includere elementi stampabili
• Rompere la griglia
• Fare modifiche in base a test di usabilità

non convenzionali Best Practice

• Creare un felice, umore allegro
• Usa animato caratteri
• Uso di grafica pesanti barre di navigazione
• Usare animazioni Flash abbondantemente
• Incorporare i movimenti e suoni che si innescano al caricamento della pagina
• Includere una “giochi” sezione
• Modificare il cursore per contribuire a tema
• Aggiungere voci alla navigazione rollover
• Essere responsabili nei confronti dei bambini e dei genitori

Un Web designer che ha lavorato per bambini sito web sarebbe probabilmente dire che è stato uno dei più divertenti e interessanti progetti che hanno avuto il privilegio di lavorare. Se hai mai l’opportunità di creare un’esperienza utente orientata verso i bambini, assicurati di seguire alcuni dei metodi dimostrati dimostrati su molti dei siti discussi qui, e il tuo sito web avrà buone possibilità di essere un grande successo con i bambini.