Scelta dei Colori e Usabilità sul Web

Scelta dei colori e usabilità sul web

Gianpaolo Lorusso per gtConference, 20/6/2009

Gianpaolo LorussoMi interesso di web marketing e motori di ricerca

dal 1999Sono stato responsabile marketing di una delle

20 più grandi web agency italianeConsulente per i progetti web di molte tra le più

grandi aziende italiane e per alcune agenzie di comunicazione

Gianpaolo Lorusso per gtConference - 20/06/2009

Impatto emotivo e navigazioneStudi dr.ssa Lindgaard (Carleton University)

50 millisecondi (1/20 di secondo)

Studi neurofisiologici:Livello pre-cognitivoLivello logico-cognitivo


Codice cromatico universaleNon esiste alcun codice valido per tutte le

culture mondialiLinee guida per la scelta e l’accostamento

di colori e elementi graficiLimiti imposti dal media Internet


Cosa sono i coloriIl colore come noi lo percepiamo deriva da segnali nervosi generati dalla retina quando viene colpita da radiazioni elettromagnetiche di determinate lunghezze d'onda e intensità


La classificazione dei coloriMescolanze additive e sottrattiveModello RGB (rosso, verde, blu)Modello HSB (tonalità, saturazione e

luminosità)Modello RGY (rosso, verde, giallo)Modello CMYK (ciano, magenta, giallo,

nero)


La ruota cromatica RGY


I colori “web safe”I colori sicuramente gestiti dalle schede grafiche dei computer di tutto il mondo sono 216. Ma…


Fonte: www.shinynews.it

…e quindi?Le difficoltà nella scelta dei colori per un sito web sono legate più che alla selezione dei singoli colori (spesso subordinati ai colori della comunicazione aziendale) alla individuazione delle loro combinazioni più gradevoli e funzionali.


Quali combinazioni preferireNon più di 3-4 coloriCombinazioni di colori presenti in naturaUniformità di uso in tutto il sito (a meno di casi

particolari, es.: divisioni o società controllate)Colori caldi (rosso) o freddi (blu)Tonalità e luminosità diverseColori contrastanti o contigui


Quando usare il contrastoPer identificare ciò che è cliccabileCall to actionIndirizzare verso l’azione obiettivoUso in zone della pagina a minore visibilitàPer indicare come si usano i serviziPer identificare i servizi in primo piano (a

maggior valore aggiunto)


Quando usare la contiguitàNel corpo centrale della paginaQuando si vuole favorire la lettura “profonda”Quando non si vuole sovraccaricare il navigatore

di stimoli visiviPer rilassare l’utenteNegli sfondi (mantenendo però sufficiente

contrasto con i testi)


Il RossoColore della passione (sangue e fuoco)Potente richiamo dell’attenzioneErrore - stopAggressivitàViolenza – eccitazioneNormalmente non bisogna eccedere nel suo uso


Il MarroneColore della terraMitiga gli aspetti negativi del rossoStabilità e credibilitàVariazione terrecotte gradite agli utenti nord

europeiFecondità, crescita


Il RosaIl colore del fioreDolcezza, profumo, sensibilità e grazia (come il

fiore)Aspetti romanticiFemminilitàNon violenzaMinore richiamo all’azione rispetto al rosso


L’arancioneSorgere e tramonto del soleSpesso associato ad offerte specialiEnergia ed equilibrioEstroversione ed aperturaNelle varianti collegate agli agrumi può stimolare

l’appetito


Il gialloColore della luce solareBrillantezza e intelligenzaCalore e originalità SpiritualitàDifficile da abbinare, va spesso sottolineato con

colori più fortiLe varianti più scure (eccetto il color oro) sono

abbinate a stati di malattia


Il bluIl colore del cielo e del mareE’ considerato il colore universalmente più

gradito (soprattutto agli uomini)Evoca calma, professionalità, affidabilità e

saggezzaIn alcune varianti può calmare la fameNelle varianti più chiare evoca salute, tranquillità

e delicatezza


Il verdeE’ il colore delle foglie, dei prati e dei boschiE’ uno tra i colori più riposanti e gradevoli in

assolutoEvoca natura, armonia e stabilitàIn opposizione al rosso denota un procedimento

o un’area sicuraNegli USA richiama il colore del denaro


Il violaColore binario (conciliazione degli opposti)A seconda della prevalenza del rosso o del blu

evoca sensazioni molto differentiMediazione tra corpo e spiritualitàAssocia alla stabilità del blu l’energia del rossoEvoca nobiltà, lusso, mistero e magiaLe varianti più scure evocano eventi luttuosi


Il biancoIl colore dell’alba, della neve e della lunaEvoca perfezione, purezza, innocenza, pulizia,

igiene e lucentezzaIn opposizione al nero ha spesso un significato

positivoAssociato spesso al freddo e ad ambienti medici

o di curaSomma di tutti i colori o assenza degli stessi


Il NeroIl nero rappresenta l’assenza di coloreAssociato spesso all’origine di tutte le cose e al

male (soprattutto in contrapposizione al bianco)Evoca eleganza, potere, mistero, morte, pauraColore molto formale, denota anche prestigio e

autoritàConferisce profondità, ma diminuisce la

leggibilità se usato come sfondo


Come guardiamo i siti web


Fonte: Marketing Sherpa

Come guardiamo i siti web


Fonte: Marketing Sherpa

Il carattere e i blocchi grafici Caratteri non troppo chiusi e senza grazieSufficiente contrasto testo/sfondoAlto-basso (no tutto maiuscolo)Immagini di visi femminiliElenchi puntatiIconeElementi in movimento


Piccolo testOggi è Nato un Bel Bambino

tutto biondo e ricciolino


La “bellezza” sul webLayout chiaroNavigazione immediata (test di usabilità)Non troppi blocchi grafici e di testoUso degli spazi vuoti (equilibrio vuoti/pieni)Grafica professionale (sfumature ed effetti

rilievo/3D)Immagini non di repertorio e non troppo grandi


Test di usabilità low cost3-5 utenti individuano 80% dei problemi di un

sitoSelezione dei candidatiAssegnare dei compitiMisurare tassi di successo e tempiRegistrare audio e schermoIl facilitatore non deve aiutare/indirizzare


Guida alla valutazione dei siti webNella guida troverete tutti i concetti alla base di questa presentazione.Versione 3.0 (maggio 2009)Scaricabile gratuitamente da:

www.gplorusso.it


http://www.gplorusso.it/

Grazie per l’attenzione


http://www.gplorusso.it/

http://www.sito-perfetto.it/

Self Improvement

Scelta dei Colori e Usabilità sul Web