[<a href=#>]

Web design for kids

Principi di web design applicati
alluniverso bambino
[1]
Per cominciare
progettare web per bambini
Disegnare e progettare web per i bambini rappresenta una sfida complessa e delicata, perch
necessario confrontarsi con unutenza che cambia in modo radicale nellarco dei primi anni di vita,
attraverso una crescita fisica e una maturazione cognitiva e sociale

Lo sviluppo infatti, determinato da queste tre

dimensioni che maturando contemporaneamente
portano alla crescita completa del
soggetto e a loro volta mutano anche il rapporto che
essi hanno con il web

*Cosa accade quando i bambini usano il web?

*Perch alcune scelte risultano pi efficaci di
altre in fatto di progettazione di ambienti
ipermediali usabili ed ergonomici a misura di
bambino?
 la creazione di ambienti in cui possibile
apprendere facendo la visualizzare e
progettare web per bambini lapprendimento di concetti complessi.

I bambini hanno grande capacit di cogliere i significati attraverso

codici sonori e iconici pur non padroneggiando ancora il
linguaggio e avendo un minimo bagaglio di esperienze.

La preferenza che i bambini hanno verso la

dimensione multimediale, rispetto al
monomediale, pu dipendere dal maggiore
coinvolgimento sensoriale possibile. Questi
ambienti infatti, operano per immersione
determinando un rapporto di complicit

Ascoltare e interagire in un ambiente caratterizzato da una molteplicit di sistemi di simboli e codici

comunicativi, rappresenta la modalit per eccellenza dellimmersione: il bambino si muove in una
logica di contaminazioni, rimandi, incroci.
Fattori umani quali la percezione, lattenzione, la memoria e lo sviluppo
mentale, intervengono nellinterpretazione degli ambienti e pi
specificatamente delle interfacce con cui i bambini interagiscono

Fattori tecnologici (disegno dellinterfaccia, uso di immagini chiare e

comprensibili, colori e modalit di interazione) possono, invece, influenzare
positivamente o negativamente, questa comprensione.

Molte delle scelte compiute nella

realizzazione di ambienti rivolti a minori
non ancora in grado di leggere,
rappresentano un utile suggerimento
per la progettazione di ambienti
basati su stimoli alternativi a quelli
offerti dal testo.
 [2]
Bambini si, ma quanti anni hanno?
 Le conoscenze sullo sviluppo mentale del bambino e le
ricerche in merito al rapporto tra minori e uso delle tecnologie
possono aiutare a comprendere le potenzialit degli strumenti
multimediali.

Per compiere questa distinzione

possibile prendere spunto dal lavoro gi
compiuto da Piaget individuando quattro
momenti importanti ai quali si rifanno
diverse fasce det e dunque competenze
differenti :
0 2 anni
3 5 anni
6 10 anni
11 14 anni
 unintelligenza pratica,
0-2 manipolazione degli oggetti e sulla prima
anni conoscenza del mondo esterno.
Raccolta stimoli esterni

Consapevolezza del il linguaggio,

3-5 memorizzazione delle esperienze.
anni Il gioco diventa la modalit principale di
divertimento prima capacit di astrazione
Lutente web comincia a prendere forma.
Possibile cliccare su obiettivi specifici,
Luso della tastiera resta ancora limitato
Si compie completamente la distinzione
6-10 tra realt e fantasia.
anni Le attivit devono presentare un certo grado di
complessit, lasciando spazio allo sviluppo e
allespansione dellattivit e del pensiero.

La preferenza che i bambini hanno verso la dimensione

legata maggiore coinvolgimento sensoriale possibile. Questi
ambienti infatti, operano per immersione determinando un
rapporto di complicit
 unintelligenza pratica
0-2 manipolazione degli oggetti e sulla prima
anni conoscenza del mondo esterno.
Raccolta stimoli esterni

Lapprendimento dipende dalla

capacit percettiva dei sensi.

Avviene la conquista di tutto

luniverso pratico
I bambini sviluppano fino ai due
anni unintelligenza pratica, basata
sulla manipolazione degli oggetti e
sulla prima conoscenza del mondo
esterno.

evidente come sia difficile pensare ad un soggetto in grado di manipolare gli strumenti che
appartengono al web non solo da un punto di vista cognitivo ma anche fisico;
Eppure
Esistono dei sistemi off-line sviluppati per bambini di et compresa tra i 9 e i 36 mesi concepiti
affinch il bambino possa semplicemente cliccare su degli oggetti a caso attivando animazioni e
meccanismi prefissati.
Non si interagisce ancora secondo obiettivi specifici

www.knowledgeadventure.com
 unintelligenza pratica,
0-2
da dove cominciare
manipolazione degli oggetti e sulla prima
anni conoscenza del mondo esterno.
Raccolta stimoli esterni

Si tratta perlopi di ambienti in cui vengono riprodotti mondi

animati che funzionano in modo semi-autonomo, dove il
movimento del mouse accentuato da un cursore animato che
diventa ancora pi evidente sulle parti attive della scena.
Le animazioni sono semi-autonome, i bambini aggiungono suoni
supplementari e lievi variazioni,
Tutto correlato da audio che fornisce istruzioni

Molti di questi dispositivi sono sviluppati secondo intuizioni e stereotipi

adulti in assenza di una verbalizzazione efficace
e il pensiero in senso stretto, impossibile intraprendere una
discussione e uninterrogazione dei bambini in merito.

Di fronte ad una limitata possibilit di interazione del bambino, risultano funzionali sistemi
allinterno dei quali vengano garantiti meccanismi semi-autonomi, capaci di generare il giusto
feed-back.

www.knowledgeadventure.com
 Consapevolezza del il linguaggio, memorizzazione delle esperienze.
3-5 Il gioco diventa la modalit principale di divertimento prima capacit di astrazione
anni Lutente web comincia a prendere forma. Possibile cliccare su obiettivi
specifici, Luso della tastiera resta ancora limitato

Per questa fascia i mutamenti risultano forti e rapidi.

Fa la sua comparsa il linguaggio, rendendo possibile la verbalizzazione di tutte le azioni, il ricordo e la
memorizzazione delle esperienze.
Si sviluppa il pensiero in senso stretto, un pensiero di tipo egocentrico, in cui il gioco diventa la
modalit principale di divertimento: ai bambini piace immergersi in giochi in cui vengano simulate
realt che vadano a soddisfare i loro desideri metafore

Lutente web comincia a prendere forma.

Diventa possibile cliccare su obiettivi specifici, mentre al contrario luso della tastiera resta ancora
limitato;
 Consapevolezza del il linguaggio, memorizzazione delle esperienze.
3-5
anni da dove cominciare
Il gioco diventa la modalit principale di divertimento prima capacit di astrazione
Lutente web comincia a prendere forma. Possibile cliccare su obiettivi
specifici, luso della tastiera resta ancora limitato

I bambini sono incuriositi da interfacce che invitavano

ad entrare in dimensioni nuove.
La metafora di navigazione molto importante!
 Si compie completamente la distinzione tra realt e fantasia.
6-10 Le attivit devono presentare un certo grado di complessit; lasciare spazio allo sviluppo e
anni allespansione dellattivit e del pensiero.

Sono abbastanza grandi per usare sistemi pi sofisticati,

ma apprezzando ancora un approccio divertente.

Integrano abilit motorie e percettive e si compie completamente la distinzione tra realt e fantasia. Le
attivit devono essere interessanti, grado di complessit, curiosit

Le istruzioni devono essere presenti in una configurazione adatta, facili da comprendere e da

ricordare, gli elementi on-screen dappoggio piuttosto che di distrazione.

Importantissimo diventa il fattore lettura: interviene una nuova fonte di

contenuto che allarga le possibilit di navigazione. I bambini cominciano a gradire molto, specie se la
grafica ricca, la presenza di una mappa e la possibilit di avere sempre a portata, delle istruzioni da
consultare ogni qualvolta si ritenga necessario.

Circa il 50% dei bambini legge le istruzioni per comprendere con esattezza le operazioni da poter
compiere, cosa che comunemente gli adulti non facevano.

Gilutz, S. & Nielsen, J. "Usability of Web-sites for Children: 70 Design Guidelines", Fremont, CA:Nielsen Norman Group. (2002).
 differenze di genere
Differenze di genere
Le necessit e gli interessi sono simili e allo stesso modo, gli ambienti vengono
disegnati cercando strade in cui la distinzione e la connotazione di genere non venga
chiamata in causa. Inoltre la realizzazione di ambienti rappresentanti mondi
fantastici, si addice sia alle bambine che ai bambini.

Con lo sviluppo gli interessi cambiano, perci gi

verso i 7 - 8 anni le connotazioni e le scelte sono maggiormente indirizzate verso temi peculiari.
Le bambine usano internet per scopi educativi mentre i bambini ne sfruttano principalmente
gli aspetti ricreativi.
Le bambine usano la tecnologia per creare ed esprimersi, al contrario i maschi usano
internet primariamente per il divertimento.

I giochi ne rappresentano lattivit primaria che da la possibilit di sfidarsi, di competere e

dunque di offrire stimolazione e ricompensa. Un aspetto da rilevare che i maschi
manifestano una maggiore autonomia e sicurezza davanti ad un PC, rispetto alle
proprie coetanee che invece sembrano essere meno interessate e chiedono espressamente
la presenza e laiuto da parte di un adulto durante la navigazione.
 [3]
Esistono importanti facolt intellettive
umane non verbali, grazie alle quali colori,
suoni e altre sensazioni, sperimentate fin
dai primi anni di vita rappresentano la base
di quotidiane esperienze di conoscenza e di
apprendimento. La capacit di pensare
per immagini, definita Intelligenza
Visiva, una di queste abilit cognitive...

Ian Robertson
 [visual thinking]
I bambini imparano e conoscono il mondo attraverso immagini colori, ritratti, disegni.
sotto certi aspetti, il pensiero ci che possono percepire .
Il concetto di pensiero visivo nega la separazione tra il vedere e il pensare
considerando la percezione come il superamento del semplice guardare:
interpretazione attiva di quello che viene osservato.

La visione selettiva
Le forme sono concetti

Ian Robertson, autore del testo Intelligenza visiva, ritiene che i bambini
possiedono la capacit di elaborare immagini eidetiche fino allet di
nove - dieci anni.
Fino a quel momento infatti, esiste ancora un libero accesso al pensare
visivo di competenza dellemisfero destro che, con il tempo verr sommersa
dellattivit dellemisfero sinistro, responsabile del linguaggio parlato.
 [percezione/attenzione/interfacce]
Quando un bambino interagisce per la prima volta con ambienti non conosciuti, mantiene un livello
di attenzione estremamente alto su tutti gli impulsi prodotti dall'interfaccia. Non appena individuati
quelli rilevanti, si concentrer soltanto su ci che considera nuova informazione.
Pi alto il livello di apprendibilit dell'interfaccia (learnability), pi rapidamente si verificher la
comprensione, impiegando soglie di attenzione pi basse per semplici comandi procedurali e pi
alte per elementi dedicati alla trasmissione di contenuti.

Il cervello umano reagisce rapidamente a determinati stimoli in base all'attivazione di

pattern, di configurazioni che ne agevolano il riconoscimento e linteriorizzazione.
Ci permette:

la familiarizzazione con linterfaccia

Lo sviluppo di processi automatici che non richiedono alti livelli di attenzione

I bambini vogliono essere guidati dallinterfaccia attraverso feed-back che diano conferma
del buon esito dellinterazione. Se il contesto non sufficiente a concedere queste
risposte, il bambino si vedr costretto a uno sforzo di maggiore attenzione per
riprendere il controllo cosciente del processo.
[percezione/attenzione/interfacce]
La percezione unoperazione mentale estremamente complessa, che si basa
sullinterpretazione delle informazioni sensoriali, prodotte attraverso la conoscenza, le
esperienze passate e i processi innati.
un processo fondamentale per cogliere le informazioni che vengono presentate attraverso
linterfaccia e dunque poter interagire con un pc.
ergonomia cognitiva
L'ergonomia cognitiva studia le
interazioni uomo-macchina
in cui entrano in gioco fattori cognitivi ed emotivi, legati alla
percezione, al gradimento, alla memorizzazione
dellinterfaccia e che influiscono sull'esperienza che lutente
ha durante linterazione.
[ergonomia cognitiva]

Lanalisi di principi di ergonomia cognitiva proposti da Donald Norman e da

altri autori mirata a rivelare come il successo o linsuccesso di attivit
basate su tecnologie di uso quotidiano (elettrodomestici, siti web, telefoni
cellulari, etc) sia spesso il
frutto di un buono o di un cattivo design,
pi che lespressione di abilit od incapacit da parte dellutilizzatore.
Questa riflessione mette in luce come un elemento essenziale per il buon
design sia lattenzione verso i processi di elaborazione delle informazioni da
parte della mente, ma anche verso il modo in cui le attivit umane nascono
e si sviluppano in interazione con gli strumenti.
 [ergonomia cognitiva]
Capacit di cogliere le propriet reali percepite delle cose. Tali propriet sono
quelle che suggeriscono allindividuo il possibile utilizzo di un oggetto o di un
materiale in questione.

Laffordance d forti suggerimenti per il funzionamento delle cose. Una piastra

liscia fatta per spingere. Manopole e maniglie sono da girare. Le fessure sono
fatte apposta per infilarci dentro qualcosa. Una palla da lanciare o da far
rimbalzare. Quando questi inviti alluso sono opportunamente sfruttati , basta
guardare per sapere che cosa si deve fare, senza bisogno di figure, etichette o
istruzioni. Le cose complesse possono richiedere spiegazioni, ma quelle semplici
non dovrebbero averne bisogno. Quando una cosa semplice esige figure, scritte o
istruzioni, vuol dire che il design sbagliato () *

* Norman D., La caffettiera del masochista, The Psychology of Everyday Things. Giunti, Firenze, 1997
[ergonomia cognitiva]
Tutte le parti funzionali devono essere visibili e
devono fornire il messaggio corretto su quello
che si pu fare
Le relazioni tra ci che vogliamo fare e le parti delloggetto
su cui agire devono essere evidenti.
Il numero delle funzioni disponibili
non deve superare eccessivamente il numero
dei comandi utilizzabili

Per utilizzare un artefatto abbiamo bisogno di capire quali sono le sue parti funzionali e quali sono
le azioni disponibili. Distinzione importante:
artefatti superficiali (quello che si vede tutto ci che esiste)
artefatti interni (una parte dellinformazione celata nellartefatto).

Esempio di artefatto superficiale: le maniglie. Dalla forma esterna si vede come vanno usate (una
va tirata, laltra va fatta scorrere).
 [4]
Son Braccio di ferro.
 [destrezza]
Le prestazioni dei bambini, con mouse ed altri dispositivi input,
non sempre risultano brillanti, soprattutto in relazione al tipo di
interazione che linterfaccia richiede. I bambini sembrano avere le
principali difficolt nel tenere premuto il mouse per un periodo
superiore al semplice click o nei casi in cui necessario luso del
double click.

In modo particolare Berkovitz e Strommen mettono in

evidenza, come i bambini manifestino difficolt nella
selezione degli oggetti sullo schermo attraverso un sistema
marquee type
 [destrezza]
I sistemi point and click sono pi veloci e di maggiore gradimento.
I sistemi drag and drop sono meno graditi. Il grado di errore maggiore e genera
frustrazione in chi interagisce. Questa modalit risulta di pi facile utilizzo per quei
bambini che hanno una certa familiarit con luso del mouse.

Con il point and click si compiono due operazioni distinte.

Gli studi di Nel drag and drop si compie una sola operazione Lutente ha la
Kori Inkpen possibilit di trascinare gli oggetti sul monitor, rinforzando la
connessione concettuale con loperazione da compiere.

Laspetto negativo sta nel fatto che questa

modalit, pi difficile da gestire e fonte di
un maggior numero di errori. Nonostante
ci, molti ambienti costruiti per bambini,
vengono tuttora realizzati con un
sistema drag and drop.
 [destrezza]
Gli studi di Kori Inkpen

Nellambito degli studi sulla destrezza, Kori Inkpen*,

ha analizzato lefficacia di due diverse modalit di
interazione: point and click e il drag and drop.

La Inkpen scelse di somministrare due diverse

versioni di uno stesso ambiente variando il tipo di
interazione permessa. I bambini dovevano spostare
un elemento (box verde), dalla posizione in cui si
trovava ad unaltra (box evidenziato da un
contorno rosso).
La prova prevedeva sedici operazioni complessive di
questo tipo completate mediamente in venti minuti.
Per questa ricerca la Inkpen scelse un campione di
minori di et compresa tra i 9 e i 13 anni.

Su un campione di 67 bambini,
il 53% trova il sistema point and click pi semplice
il 37% si lamenta della stanchezza che il drag and drop provoca alla mano.
Le preferenze verso il drag and drop, arrivavano da coloro che hanno maggiore familiarit
con il mouse.
 [destrezza]
Errori frequenti con differenti sistemi input
 [5]
L'arte ricerca continua, assimilazione
delle esperienze passate, aggiunta di
esperienze nuove, nelle forma, nel
contenuto, nella materia, nella tecnica, nei
mezzi.
 Le funzioni del colore Segmentare
[I colori] Orientare a un compito
Raggruppare
Evidenziare
Colori Primari
Massima tensione percettiva
Giallo: il colore dellallegria, esprime gioia e allontanamento dai problemi. Trasmette una sensazione di benessere,
liberazione dai problemi.

Blu: il colore della quiete, di fronte a questo i bambini tendono a sospendere le difese a livello nervoso.

Rosso: il colore dello slancio e della forza, capace di stimolare le abilit creative e di trasmette calore e sicurezza a
chi lo guarda.

Arancione: unesaltazione del giallo, ne

accentua i pregi ed esprime espansivit e
comunicabilit.

Verde: il colore dellimpegno, della

sopportabilit, della tenacia.

Temi visuali
Rappresentative: forchetta coltello
sono rappresentativi del concetto che si
intende esprimere: un luogo in cui
possibile mangiare
[Ie icone]
Astratte: il bicchiere con una frattura
intende rappresentare lidea di fragilit: impiegare piccoli spazi
si tratta dunque di unicona in cui si essere riconosciute rapidamente
intende esprimere un concetto con un essere facilmente ricordate
alto livello di astrazione rispetto rendere linterfaccia universale
alloggetto rappresentato.
Arbitrarie: non esiste relazione tra il
concetto espresso e limmagine
rappresentata.
Anche le forme trasmettono
significati e valori siano esse
semplici o complesse.
[Ie forme]
Agli occhi dei bambini le forme quadrate e rettangolari sono simbolo di ordine e razionalit.

Quelle circolari sono sinonimo di distensione. Ecco perch spesso anche se vengono scelte forme
quadrate o rettangolari, i loro spigoli sono sostituiti da contorni morbidi, meno accentuati, capaci di
generare una sensazione di tranquillit e di apertura.

Ogni sezione o argomento viene contraddistinto e

identificato da colori e icone rappresentative, che
permettono al bambino di compiere unassociazione tema/
colore/ immagine e quindi, ricordare pi facilmente
lallocazione delle informazioni.
Fare uso di una metafora, permette di fornire una
cornice unificata che induca a percepire un progetto
come un tutto unico. Un contenitore allinterno del /metafora
quale la navigazione risulti naturale e segua le
dinamiche della metafora scelta.

[Ie metafore]
i bambini che non possiedono ancora
conoscenza della simbologia
convenzionale o dei comandi procedurali
(che per gli adulti sono invece intuitivi)

riescono a fare affidamento sulle sole

conoscenze che possiedono, quelle
relative alla realt che li circonda.

ci ancora pi centrale per i bambini che

non sanno leggere, dove la metafora il
principale significato che sono in grado di
cogliere.
 [6]
Ma cosa troverete
dentro? Molte cose
interessanti, su questo
non c dubbio. Un bel
disegno con una nave,
questa lhomepage del
sito che mette subito in
evidenza le cose da
svolgere.
Dai semplici giochi,
come colorare,
disegnare, giocare a
memory, scrivere un
diario di bordo o delle
storie
 www.navediclo.it

l sito, pensato per un target di

riferimento di et compresa tra i 5 e
gli 10/11 anni, stato progettato
con una struttura piramidale,
prevedendo al vertice la homepage
e a cascata sei differenti sezioni.
[il sito]
 Logo / nome del sito

Menu di navigazione classico

Navigazione grafica/ uso di rollover

Articoli in primo piano

Articoli in secondo piano

Le fiabe della nave di Clo

Articoli meno recenti

Messaggi lasciati sul diario di bordo

[la homepage] Archivio mese per mese

Gli elementi fondamentali di cui si tenuto conto
durante la progettazione sono stati scelta
grafica, i colori e luso dei personaggi.
[la progettazione]
La metafora utilizzata per La nave di CLO, la
navigazione. Salendo a bordo della nave, i
bambini hanno la possibilit di viaggiare
allinterno della rete aiutati dai membri
dellequipaggio

La homepage stata creata

eliminando testi e men di difficile gestione
spazio ad una realizzazione completamente
grafica, a vantaggio di uninterpretazione pi
immediata.

Durante la progettazione stato pensato di bilanciare la

carenza di testo, non solo attraverso piccole etichette
testuali relative alle diverse sezioni del sito, ma anche
identificando ogni area attiva con unanimazione di rollover.
Inizialmente
Predisposta una finestra di
[la progettazione]
popup
di benvenuto, in cui Clo, il
personaggio principale, salutava
i navigatori, rendendo pi chiaro
e reale il momento in cui il
bambino sale a bordo e conosce
lequipaggio.
Inoltre stata privilegiata la
scelta di forme morbide e
arrotondate sia nella struttura
delle pagine che nel disegno dei
personaggi, al fine produrre un
clima di generale tranquillit e
distensione.
 [la progettazione]
/metafora

I colori scelti per la realizzazione fanno leva

prima di tutto sul carattere brillante e acceso di
quelli primari:
il blu, volto a dare una generale sensazione di
tranquillit
il rosso presente sul cabinato della nave e in
alcuni oggetti del disegno utile a slanciare e a
rendere viva lambientazione
il giallo sparso qua e l nel disegno a
concedere vivacit a tutta linterfaccia.

Accanto a questi, a ridurre la tensione

percettiva sono stati abbinati una serie di colori
derivati e complementari, utili a creare una
condizione di luminosit pi discreta
 [I personaggi]
parso opportuno creare un ambiente che non avesse un
carattere troppo vicino ai maschietti o alle femminucce.
Da questa riflessione nato il personaggio principale della
nave, il topolino CLO. Si cercato di avere un
atteggiamento equilibrato, in modo che CLO potesse
avvicinarsi e relazionarsi indistintamente e con la stessa
intensit, sia ai bambini che alle bambine.

Accanto a CLO, allinterno della nave,

sono stati pensati altri personaggi,
ognuno riferito ad una sezione diversa e
rappresentato per questo con oggetti e
abbigliamento legati alle attivit di
riferimento.
 [sviluppo del disegno]
I.
II.

III.
voglia di creare
[attivit]
Attivit mediata da computer, ma anche
attivit da svolgere in casa
Fiabe e fiabe di Clo
[attivit]
Podcast e videogallery

http://www.liberliber.it/
disegnini
[attivit]
DISEGNINI!
Pubblicare on-line un disegno fatto dai bambini!
 [supporto alla navigazione]
Link homepage
Link mappa nave

timer
 [condivisione]
Diario di bordo

wiki
 [genitori e insegnanti]
Approfondimenti in materia di
tecnologie ed educazione

Percorsi di lettura
 [chi ha navigato con Clo??]

3 visite Oceania
5 visite Asia
6 visite Africa
44 visite America
3656 visite Europa

Da tenere presente che il Sito

esclusivamente in italiano
 [chi ha navigato con Clo??]
Ottimizzazione motori di ricerca
SEO lacronimo di Search Engine Optimization, (in italiano:
Ottimizzazione per i motori di ricerca), costituito da quella serie di
attivit, da effettuare su un sito, per essere letto con maggiore
facilit da Google e dagli altri motori di ricerca.

Un Permalink viene adoperato per indicare il link ad un

determinato articolo. Contrazione dellespressione 'permanent
'link'), il permalink ha la caratteristica di rimanere nel tempo
sempre invariato e riferirsi sempre allo stesso articolo.
[</end>]