SISR-GRAFICA - 1 - GRAFICA DEL WEB fonte prof. Polillo.

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


- - 44 - -

Tipografia: espressività o Tipografia: espressività o leggibilità?leggibilità?

Il primo obiettivo nell'uso dei font è

massimizzare la leggibilità e la comprensibilità


- - 55 - -

Leggibilità?Leggibilità?


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)


Esempio

Ingrandimento della lettera “g” del font Bembo in corpo 10 pt, riprodotta a diverse risoluzioni: 72 dpi, 150 dpi, 300 dpi, 1200 dpi


- - 88 - -

TIPOGRAFIATIPOGRAFIA


•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


- - 1010 - -

Tipi di fontTipi di font

Times New Roman, corpo 28

Normale, neretto, corsivo, sottolineato

Arial, corpo 28


Courier, corpo 28


con grazie (serif)

senza grazie (sans serif)spaziatura proporzionale

spaziatura fissa


- - 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?


Font più diffusi


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

*

*


Anti-aliasing elimina effetto gradinatura

Matrice di punti


- - 1616 - -

Font preferiti - esperimentiFont preferiti - esperimenti

Times

(Bernard et al, 2001)

Verdana

Arial

Times

Courier


- - 1717 - -

CorsivoCorsivo

Il corsivo comunque si legge male sul video, perchè enfatizza l’effetto sega


- - 1818 - -

Corsivo - esempioCorsivo - esempio


• 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à.


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.


- - 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


- - 2222 - -

Sopra e sottoSopra e sotto

La leggibilità dipende dalla parte superiore delle parole


- - 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


- - 2424 - -

COLORECOLORE


- - 2525 - -

Uso del coloreUso del colore

Aspetti percettivi

Aspetti cognitivi

Aspetti culturali


- - 2626 - -

Aspetti percettiviAspetti percettivi

Sensibilità dell’occhio ai diversi coloriMessa a fuocoColori caldi e colori freddiAccostamenti di coloriDisturbi nella percezione dei colori


- - 2727 - -

Sensibilità ai coloriSensibilità ai colori


Sensibilità al blu bassa (e calante con l’età)

- - 2828 - -

Colori caldi e freddiColori caldi e freddi


I colori caldi tendono ad avanzare, i colori freddi a recedere

colori freddi colori caldi

- - 2929 - -



- - 3030 - -



- - 3131 - -

Messa a fuocoMessa a fuoco


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


- - 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


- - 3434 - -

Il colore del testoIl colore del testo


Caratteri scuri su fondo chiaro


Caratteri chiari su fondo scuro
















- - 3535 - -

Colore: linee guidaColore: linee guida


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


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


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


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


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


(Russo & Boor, 1993)

- - 4141 - -

GESTALTGESTALT


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


- - 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


- - 4444 - -

ORIENTAMENTOORIENTAMENTO


- - 4545 - -

OrientamentoOrientamento


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-GRAFICA - 1 - GRAFICA DEL WEB fonte prof. Polillo.

Documents

Transcript of SISR-GRAFICA - 1 - GRAFICA DEL WEB fonte prof. Polillo.