La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "SISR-GRAFICA - 1 - GRAFICA DEL WEB fonte prof. Polillo."— Transcript della presentazione:

1 SISR-GRAFICA GRAFICA DEL WEB fonte prof. Polillo

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

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

4 - 4 - Tipografia: espressività o leggibilità? Il primo obiettivo nell'uso dei font è massimizzare la leggibilità e la comprensibilità SISR-GRAFICA

5 - 5 - Leggibilità? SISR-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 ….

6 - 6 - Lettura su carta e su video Il testo a video (72 dotsperinch) è di qualità molto inferiore al testo a stampa ( 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-GRAFICA

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

8 - 8 - TIPOGRAFIA SISR-GRAFICA

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

10 Tipi 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-GRAFICA

11 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? SISR-GRAFICA

12 Font più diffusi SISR-GRAFICA

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

14 Prove 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-GRAFICA

15 Anti-aliasing elimina effetto gradinatura Matrice di punti SISR-GRAFICA

16 Font preferiti - esperimenti Times (Bernard et al, 2001) Verdana Arial Times CourierSISR-GRAFICA

17 Corsivo Il corsivo comunque si legge male sul video, perchè enfatizza l’effetto sega SISR-GRAFICA

18 Corsivo - esempio SISR-GRAFICA

19 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-GRAFICA Neretto e sottolineaturea

20 Maiuscole 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-GRAFICA

21 In 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-GRAFICA

22 Sopra e sotto La leggibilità dipende dalla parte superiore delle parole SISR-GRAFICA

23 Maiuscole 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-GRAFICA

24 COLORE SISR-GRAFICA

25 Uso del colore Aspetti percettivi Aspetti cognitivi Aspetti culturali SISR-GRAFICA

26 Aspetti percettivi Sensibilità dell’occhio ai diversi colori Messa a fuoco Colori caldi e colori freddi Accostamenti di colori Disturbi nella percezione dei colori SISR-GRAFICA

27 Sensibilità ai colori SISR-GRAFICA   Sensibilità al blu bassa (e calante con l’età)

28 Colori caldi e freddi SISR-GRAFICA   I colori caldi tendono ad avanzare, i colori freddi a recedere colori freddi colori caldi

29 Colori caldi e freddi SISR-GRAFICA

30 Colori caldi e freddi SISR-GRAFICA

31 Messa a fuoco SISR-GRAFICA Da questo esempio si vede la difficoltà di messa a fuoco contemporanea del rosso e del blu: da molti le righe di questi due colori vengono viste, per i motivi descritti, come se fossero collocate 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 non dovrebbe presentare l’effetto tridimensionale di cui sopra. Difficoltà di messa a fuoco contemporanea di colori “lontani” sullo spettro (per  angolo di rifrazione sul cristallino)

32 Messa a fuoco SISR-GRAFICA

33 Il colore del testo Scegliere con cura il colore del testo in relazione 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-GRAFICA

34 Il colore del testo SISR-GRAFICA Caratteri scuri su fondo chiaro Caratteri chiari su fondo scuro Caratteri scuri su fondo chiaro Caratteri chiari su fondo scuro

35 Colore: linee guida SISR-GRAFICA Testo chiaro su sfondo scuro Sfondo: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

36 Daltonismo SISR-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!

37 Alcune indicazioni SISR-GRAFICA Non usare mai rosso e verde vicini Normalmente il giallo e il blu vengono riconosciuti bene Usare colori brillanti Accostare 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.

38 Aspetti cognitivi: punti importanti SISR-GRAFICA Usare i diversi colori in modo consistente, associando a colori diversi significati diversi Usare comunque pochi colori contempora- neamente

39 Aspetti culturali: punti importanti SISR-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à

40 Culture diverse, associazioni diverse SISR-GRAFICA (Russo & Boor, 1993)

41 GESTALT SISR-GRAFICA

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

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

44 ORIENTAMENTO SISR-GRAFICA

45 Orientamento SISR-GRAFICA Nei paesi occidentali leggiamo da sinistra a destra, e dall’alto in basso

46 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


Scaricare ppt "SISR-GRAFICA - 1 - GRAFICA DEL WEB fonte prof. Polillo."

Presentazioni simili


Annunci Google