SISR-GRAFICASISR-GRAFICA - - 11 - -
GRAFICA DEL WEBGRAFICA DEL WEB
fonte prof. Polillofonte prof. Polillo
- - 22 - -
Creatività vs usabilitàCreatività vs usabilità
“Fancy media on websites typically fails user testing. Simple text and clear photos not only communicate better with users, they also enhance users' feeling of control and thus support the Web's mission as an instant gratification environment.”
Jakob Nielsen
SISR-GRAFICASISR-GRAFICA
•Chiarezza (clarity): il contenuto informativo è veicolato velocemente e accuratamente;•Discriminabilità (discriminability): l’informazione visualizzata può essere distinta con accuratezza;•Concisione (conciseness): agli utenti viene fornita solo l’informazione necessaria per eseguire il compito;•Consistenza (consistency): la medesima informazione è presentata nello stesso modo all’interno del sistema, conformemente alle aspettative dell’utente;•Scopribilità (detectability): l’attenzione dell’utente è diretta verso l’informazione necessaria;•Comprensibilità (comprehensibility): il significato è chiaramente comprensibile, non ambiguo, interpretabile e riconoscibile.•Leggibilità (legibility): l’informazione è facile da leggere;
Obiettivi
SISR-GRAFICASISR-GRAFICA
- - 44 - -
Tipografia: espressività o Tipografia: espressività o leggibilità?leggibilità?
Il primo obiettivo nell'uso dei font è
massimizzare la leggibilità e la comprensibilità
SISR-GRAFICASISR-GRAFICA
- - 55 - -
Leggibilità?Leggibilità?
SISR-GRAFICASISR-GRAFICA
L’oggetto, certamente apprezzabile dal punto di vista estetico, per quanto riguarda l’usabilità è tutto sbagliato. I caratteri sono poco distinguibili uno dall’altro, le righe di testo sono troppo brevi in rapporto alla dimensione dei caratteri, gli elementi decorativi (le lettere iniziali di ogni frase e i decori di fine frase) creano un “rumore” eccessivo ….
- - 66 - -
Lettura su carta e su videoLettura su carta e su video
Il testo a video (72 dotsperinch) è di qualità molto inferiore al testo a stampa (1200-2400 dpi)
Alcuni caratteri vengono resi male sul video, a causa dell’effetto sega causato dalla rappresentazione a pixel
Leggiamo più lentamente e più faticosamente sul video che sulla carta
Uno studio del 1987 (ma la tecnologia migliora velocemente…): la lettura sullo schermo è del 25% circa più lenta della lettura sulla carta (poiché le fissazioni (riconoscimento visivo) sono il 15% in più per riga)
SISR-GRAFICASISR-GRAFICA
Esempio
Ingrandimento della lettera “g” del font Bembo in corpo 10 pt, riprodotta a diverse risoluzioni: 72 dpi, 150 dpi, 300 dpi, 1200 dpi
SISR-GRAFICASISR-GRAFICA
- - 88 - -
TIPOGRAFIATIPOGRAFIA
SISR-GRAFICASISR-GRAFICA
•I font si suddividono in due categorie principali: graziati o senza grazie.
•I caratteri graziati (o serif) hanno particolari terminazioni dei tratti delle lettere, chiamati appunto grazie.L'uso delle grazie deriva dai caratteri lapidari romani, dove era molto difficile scalpellare nel marmo angoli di novanta gradi necessari a terminare le aste. Le grazie servivano allora a evitare (o nascondere) le sbrecciature.
•I font senza grazie sono chiamati anche bastoni, o sans-serif.
Tipi di font
SISR-GRAFICASISR-GRAFICA
- - 1010 - -
Tipi di fontTipi di font
Times New Roman, corpo 28
Normale, neretto, corsivo, sottolineato
Arial, corpo 28
Normale, neretto, corsivo, sottolineato
Courier, corpo 28
Normale, neretto, corsivo, sottolineato
con grazie (serif)
senza grazie (sans serif)spaziatura proporzionale
spaziatura fissa
SISR-GRAFICASISR-GRAFICA
- - 1111 - -
Con o senza grazie?Con o senza grazie?
Alcuni studi hanno mostrato che, sulla carta, i caratteri con le grazie hanno una leggibilità leggermente superiore rispetto a quelli senza grazie. Pertanto, sulla carta, sarebbe meglio usare fonti con le grazie per testi lunghi, che altrimenti potrebbero risultare di lettura faticosa. Fonti senza grazie sono più leggibili in testi brevi o titoli. Ma sul video?
Alcuni studi hanno mostrato che, sulla carta, i caratteri con le grazie hanno una leggibilità leggermente superiore rispetto a quelli senza grazie. Pertanto, sulla carta, sarebbe meglio usare fonti con le grazie per testi lunghi, che altrimenti potrebbero risultare di lettura faticosa. Fonti senza grazie sono più leggibili in testi brevi o titoli. Ma sul video?
SISR-GRAFICASISR-GRAFICA
Font più diffusi
SISR-GRAFICASISR-GRAFICA
SISR-Grafica
•Il Times New Roman è probabilmente il font graziato più usato sulla carta stampata. Esso fu progettato da Stanley Morrison per conto del giornale londinese The Times, che lo adottò nel 1932 in sostituzione del font che il giornale usava in precedenza, chiamato Times Old Roman (da cui il nome). Aveva lo scopo di essere ben leggibile anche con caratteri di piccole dimensioni stampati sulla carta di cattiva qualità usata durante la Grande Depressione degli anni ‘30. Il disegno dei caratteri, alti e stretti, era specificamente concepito per ridurre i fastidiosi spazi bianchi derivanti dall’allineamento “a pacchetto” dei testi nelle colonne del giornale (Figura 3b). Il Times New Roman fu usato dal Times per quaranta anni. Dal 1972 fu sostituito più volte, sempre però con font di aspetto simile.
•Il Georgia è uno screen-font graziato, disegnato da Matthew Carter per conto della Microsoft nel 1993. Fu progettato per essere leggibile sui monitor anche in corpo piccolo, ed è molto simile al Times New Roman, rispetto al quale ha tuttavia diversi miglioramenti: le linee che compongono le lettere sono un po’ più spesse, e il loro spessore varia meno all’interno di uno stesso carattere. A parità di dimensione del font, le lettere sono un po’ più larghe e alte; l’altezza della x è lievemente più grande; le grazie sono più larghe e con tratti meno obliqui. Non ci sono legature e le lettere sono più “verticalizzate”, per permettere una migliore resa sul monitor (Figura 7).
•L’Arial è un font senza grazie adatto sia ai monitor sia alla carta stampata. Fu progettato nel 1982 ispirata a Helvetica, un font disegnato nel 1957 che ebbe grande successo nel mondo della grafica e del design negli anni ‘70. Arial fu usato da Microsoft in Windows 3.1, ed è oggi molto diffuso sul Web.
•Il Verdana è uno screen-font senza grazie, quasi uno standard per i testi su monitor. Progettato da Matthew Carter per la Microsoft per massimizzare la leggibilità anche in corpo piccolo (fino a 4 pt) e su monitor a bassa risoluzione, fu rilasciato nel 1996 per Windows 95. Esso possiede caratteri larghi e ben spaziati, minuscole alte e ben leggibili, ed ha il vantaggio di differenziare bene i caratteri simili, come per esempio la i maiuscola (che per questo ha le grazie), la elle minuscola e la cifra 1, che in altri font utilizzano lo stesso glifo (unità grafica).
Font più diffusi
- - 1414 - -
Prove di leggibilità su videoProve di leggibilità su video
Arial 10 Arial 12 (senza grazie)
Times New Roman 10 Times New Roman 12 (con grazie)
Tempo di lettura in sec
*
*
SISR-GRAFICASISR-GRAFICA
Anti-aliasing elimina effetto gradinatura
Matrice di punti
SISR-GRAFICASISR-GRAFICA
- - 1616 - -
Font preferiti - esperimentiFont preferiti - esperimenti
Times
(Bernard et al, 2001)
Verdana
Arial
Times
Courier
SISR-GRAFICASISR-GRAFICA
- - 1717 - -
CorsivoCorsivo
Il corsivo comunque si legge male sul video, perchè enfatizza l’effetto sega
SISR-GRAFICASISR-GRAFICA
- - 1818 - -
Corsivo - esempioCorsivo - esempio
SISR-GRAFICASISR-GRAFICA
• Il neretto e il sottolineato possono essere utilizzati per richiamare l’attenzione su parole particolari.
• Come per i testi a stampa, tuttavia, è consigliabile limitarne l’uso ai casi di reale necessità, per evitare effetti visivi di eccessivo disordine.
• In accordo a una convenzione molto diffusa, molti consigliano di riservare le sottolineature ai link testuali nelle pagine web, per evitare ambiguità.
SISR-GRAFICASISR-GRAFICA
Neretto e sottolineaturea
- - 2020 - -
Maiuscole e minuscoleMaiuscole e minuscole
La leggibilità di un testo scritto in caratteri maiuscoli è minore di quella di un testo in caratteri minuscoli. Infatti, l’uso delle minuscole associa a ogni parola un pattern dato dalle ascendenti e dalle discendenti, che probabilmente ne facilita il riconoscimento.
SISR-GRAFICASISR-GRAFICA
- - 2121 - -
In sintesiIn sintesi
La leggibilità sul video dipende fortemente dal tipo di font, e dalla sua dimensione
Normalmente si raccomanda sul video di utilizzare fonti senza grazie, evitando comunque per quanto è possibile il corsivo
Poichè la lettura sul video è faticosa, occorre comunque evitare per quanto è possibile testi lunghi
Testi lunghi in caratteri maiuscoli vanno comunque sempre evitati
Usare poche fonti contemporaneamente, e usarle in modo consistente per veicolare informazione
SISR-GRAFICASISR-GRAFICA
- - 2222 - -
Sopra e sottoSopra e sotto
La leggibilità dipende dalla parte superiore delle parole
SISR-GRAFICASISR-GRAFICA
- - 2323 - -
Maiuscole o minuscoleMaiuscole o minuscole
È POSSIBILE VERIFICARE CON ESPERIMENTI CHE LA LEGGIBILITÁ DI UN TESTO SCRITTO ESCLUSIVAMEN-TE IN CARATTERI MAIUSCOLI È MINORE DI QUELLA DI UN TESTO SCRITTO IN CARATTERI MAIUSCOLI E MINUSCOLI
È possibile verificare con esperimenti che la leggibilità di un testo scritto esclusivamente in caratteri maiuscoli è minore di quella di un testo scritto in caratteri maiuscoli e minuscoli
SISR-GRAFICASISR-GRAFICA
- - 2424 - -
COLORECOLORE
SISR-GRAFICASISR-GRAFICA
- - 2525 - -
Uso del coloreUso del colore
Aspetti percettivi
Aspetti cognitivi
Aspetti culturali
SISR-GRAFICASISR-GRAFICA
- - 2626 - -
Aspetti percettiviAspetti percettivi
Sensibilità dell’occhio ai diversi coloriMessa a fuocoColori caldi e colori freddiAccostamenti di coloriDisturbi nella percezione dei colori
SISR-GRAFICASISR-GRAFICA
- - 2727 - -
Sensibilità ai coloriSensibilità ai colori
SISR-GRAFICASISR-GRAFICA
Sensibilità al blu bassa (e calante con l’età)
- - 2828 - -
Colori caldi e freddiColori caldi e freddi
SISR-GRAFICASISR-GRAFICA
I colori caldi tendono ad avanzare, i colori freddi a recedere
colori freddi colori caldi
- - 2929 - -
Colori caldi e freddiColori caldi e freddi
SISR-GRAFICASISR-GRAFICA
- - 3030 - -
Colori caldi e freddiColori caldi e freddi
SISR-GRAFICASISR-GRAFICA
- - 3131 - -
Messa a fuocoMessa a fuoco
SISR-GRAFICASISR-GRAFICA
Da questo esempio si vede la difficoltà di messa a fuoco contemporanea del rosso e del blu: da molti le righe di questidue colori vengono viste, per i motivi descritti, come se fosserocollocate a distanze diverse dagli occhi.Questo fenomeno non si verifica se si usano due colori che si trovino fra loro più vicini sullo spettro visibile, come si puòfacilmente verificare da questo secondo esempio, che nondovrebbe presentare l’effetto tridimensionale di cui sopra.
Difficoltà di messa a fuoco contemporanea di colori “lontani” sullo spettro (per angolo di rifrazione sul cristallino)
- - 3232 - -
Messa a fuocoMessa a fuoco
SISR-GRAFICASISR-GRAFICA
- - 3333 - -
Il colore del testoIl colore del testo
Scegliere con cura il colore del testo inrelazione al colore dello sfondo
caratteri chiari su sfondo scuro tendono ad apparire più grandi
caratteri scuri su sfondo chiaro tendono ad apparire più sottili e netti
SISR-GRAFICASISR-GRAFICA
- - 3434 - -
Il colore del testoIl colore del testo
SISR-GRAFICASISR-GRAFICA
Caratteri scuri su fondo chiaro
Caratteri scuri su fondo chiaro
Caratteri chiari su fondo scuro
Caratteri chiari su fondo scuro
Caratteri scuri su fondo chiaro
Caratteri scuri su fondo chiaro
Caratteri scuri su fondo chiaro
Caratteri scuri su fondo chiaro
Caratteri scuri su fondo chiaro
Caratteri scuri su fondo chiaro
Caratteri scuri su fondo chiaro
Caratteri chiari su fondo scuro
Caratteri chiari su fondo scuro
Caratteri chiari su fondo scuro
Caratteri chiari su fondo scuro
Caratteri chiari su fondo scuro
Caratteri chiari su fondo scuro
Caratteri chiari su fondo scuro
- - 3535 - -
Colore: linee guidaColore: linee guida
SISR-GRAFICASISR-GRAFICA
Testo chiaro su sfondo scuroSfondo: colori scuri agli estremi dello spettro;Testo:colori chiari non saturi, al centro dello spettro
Testo scuro su sfondo chiaro Sfondo: colori chiari non saturi, al centro dello spettro Testo: colori scuri, evitando il blu
- - 3636 - -
DaltonismoDaltonismo
SISR-GRAFICASISR-GRAFICA
Disturbi nella percezione del colore sono presenti:– nel 9% dei maschi (1 ogni 12)– nel 0,5% delle femmine (1 ogni 165)
Sono dovuti a difetti di pigmentazione dei coni della retina
I disturbi più frequenti riguardano la capacità di distinguere il rosso dal verde (circa nel 5% delle persone), ma ci sono diversi tipi di disturbi
Non assumere che tutti gli utenti possano distinguere correttamente i vari colori!
- - 3737 - -
Alcune indicazioniAlcune indicazioni
SISR-GRAFICASISR-GRAFICA
Non usare mai rosso e verde viciniNormalmente il giallo e il blu vengono riconosciuti
beneUsare colori brillantiAccostare i colori a uno sfondo appropriato:
– rosso e bianco– verde e nero– turchese e nero– magenta e nero
Le linee guida sono complesse, ma oggi esistono strumenti automatici per verificare come una immagine verrebbe vista da un daltonico: usarli per verificare le scelte cromatiche (es. www.vischeck.com)
- - 3838 - -
Aspetti cognitivi: punti importantiAspetti cognitivi: punti importanti
SISR-GRAFICASISR-GRAFICA
Usare i diversi colori in modo consistente, associando a colori diversi significati diversi
Usare comunque pochi colori contempora-neamente
- - 3939 - -
Aspetti culturali: punti importantiAspetti culturali: punti importanti
SISR-GRAFICASISR-GRAFICA
Usare i colori in modo coerente con le associazioni “normali” in una determinata cultura
Esempio (nella nostra cultura):ROSSO: stop, pericolo, caldo, fuoco
GIALLO: attenzione, rallentamento
VERDE: avanti, ok, sicurezza
GRIGIO, BIANCO: neutralità
- - 4040 - -
Culture diverse, associazioni diverseCulture diverse, associazioni diverse
SISR-GRAFICASISR-GRAFICA
(Russo & Boor, 1993)
- - 4141 - -
GESTALTGESTALT
SISR-GRAFICASISR-GRAFICA
La psicologia della Gestalt (la parola tedesca Gestalt significa forma, schema, rappresentazione), detta anche psicologia della forma, è una corrente psicologica che si sviluppò tra gli anni '10 e gli anni '30 del secolo scorso.I suoi esponenti si focalizzarono soprattutto sugli studi della percezione.L'idea portante della psicologia della Gestalt è che non è corretto dividere l’esperienza umana nelle sue componenti elementari, da analizzare separatamente, perché un insieme è più della somma delle sue parti. In particolare, questo avviene nella percezione visiva: gli elementi che ci si presentano nel campo visivo interagiscono fra loro in modo complesso, e noi percepiamo qualcosa che è sostanzialmente diverso dalla loro semplice somma.
Gestalt
SISR-GRAFICASISR-GRAFICA
- - 4343 - -
Gestalt Gestalt
Percepiamo prima la forma globale e non gli elementi costitutivi. La pagina web deve avere una struttura visiva di forme e colori ben marcata
SISR-GRAFICASISR-GRAFICA
- - 4444 - -
ORIENTAMENTOORIENTAMENTO
SISR-GRAFICASISR-GRAFICA
- - 4545 - -
OrientamentoOrientamento
SISR-GRAFICASISR-GRAFICA
Nei paesi occidentali leggiamo da sinistra a destra, e dall’alto in basso
Meglio evitare testi lunghi
Di solito si raccomanda di utilizzare (a video) font senza grazie
Evitare il corsivo
Evitare testi lunghi in caratteri tutti maiuscoli
Usare preferibilmente caratteri di corpo non inferiore a 12; altrimenti usare interlinea doppia
Attenzione al contrasto fra colore del testo e colore dello sfondo
Preferire caratteri scuri su fondo chiaro
Non usare sfondi con texture che ostacolino la lettura
Non affiancare caratteri di tinte spettralmente lontane (problemi di messa a fuoco contemporanea)
Non veicolare le informazioni esclusivamente attraverso il colore (daltonismo, poca sensibilità al blu)
Linee guida
SISR-GRAFICASISR-GRAFICA