Terza lezione modulo Web Usability del corso per WebMaster & WebDesigner

1. Web Usability [3]
Matteo Magni

2. Come guardiamo i siti internet?

3. Come guardiamo i siti internet
[2]
http://www.sito-perfetto.it/nc/aggiornamenti-articoli-comunicazione-web/aggiornamenti-disponibili/articolo-selezionato/novita/il-layout-del-sito-web-ideale-45.html
Noi navigatori analizziamo i contenuti di
qualsiasi sito più o meno come faremmo
con quelli di un giornale. Li
scansioniamo cioè molto rapidamente
partendo dall’angolo in alto a sinistra,
oppure dall’ultimo punto in cui stavamo
guardando nella pagina precedente , per
poi cercare di individuare le aree o i testi
di nostro maggior interesse. (@Gianps)

4. Come guardiamo i siti internet
[3]
Se il sito ci è già noto e vogliamo
sfruttarne una funzionalità, la nostra
attenzione andrà senza indugio alla
zona in cui sappiamo esserci la
nostra “porta d’ingresso”, altrimenti
cercheremo testi o elementi grafici
collegati al nostro obiettivo originale
o in grado di farcelo cambiare:
immagini accattivanti, testi con
parole chiave di nostro interesse,
oppure, elementi grafici in forte
contrasto con il resto del layout.
(@gianps)

5. Come guardiamo i siti internet
[4]
A meno che non ci si trovi di fronte a
interfacce estremamente creative o a
siti già ben noti all’utente, lo schema
di analisi seguirà di solito un
percorso ad “F”, che parte
dall’estremità superiore sinistra della
pagina (oppure da quella destra per
chi legge da destra verso sinistra).
La scansione nella generalità dei
casi seguirà i trend evidenziati
nell'immagine seguente.
(@gianps)

6. Elementi
link grafico, collegamento con immagine o
• testo esteso in cui si propone • mappa di immagini o con altri elementi grafici
direttamente tutto il contenuto (magari
(principalmente box animati o statici, banner e
evidenziando le frasi chiave); icone);
• testi di sintesi con link di box interattivo, offre normalmente video o
• contenuti multimediali ed è caratterizzato da
approfondimento, in cui si propone
una breve introduzione con link di segni grafici che identificano il player
(sostanzialmente il triangolo di play e la barra
approfondimento che punta a una di scorrimento in basso), si differenzia dai
pagina interna; precedenti link grafici perché gli utenti sanno
che cliccandoci sopra vedranno o sentiranno
• voce di menù o link testuale; qualcosa rimanendo nella stessa pagina.
@SitoPerfetto
-

7. Chi attira la nostra attenzione
• Le icone
• I visi (soprattutto quelli femminili)
• I menù di navigazione
• Gli elementi grafici che contrastano con il
• contesto che li circonda
• Le parole collegate a quello che stiamo
• cercando
• I link, i grassetti e il testo evidenziato

8. Fonte: Marketing Sherpa

9. Formattazione
• 1 e 2 testo denso con e senza interruzioni
Lettura frammentaria (inizio e fine)
• 3 elenco puntato
Lettura più in profondità (anche primo punto)
• 4 elenco puntato con testi grassettati
Massimo approfondimento e lettura più diffusa
• 5 testo lungo con fotografia
Attenzione su viso e lettura del testo più stretto
@Gianps

10. Cosa ci spinge ad
approfondire?

11. Ci spingono ad approfondire
• I periodi corti, ben separati e i punti elenco (sono una
promessa di testo facilmente scansionabile e interpretabile)
• I titoli azzeccati ( con parole “sensibili” e brevi anche quelli)
• La pulizia dell’interfaccia (equilibrio tra pieni e vuoti)
• Le offerte speciali (se adeguatamente evidenziate)
• I menù snelli, evidenti con aree cliccabili belle grandi e con
parole dal senso inequivocabile
• I testi “progressivi” (prima generici con link di approfondimento)

13. Colori
http://www.shinynews.it/usability/0604-colori3_app.shtml#1
• Aumentare la leggibilità
• Evidenziare
• Ottenere uniformità o difformità
informativa
• Cercare le associazioni emotive

14. Colori
contrasto = colori opposti sulla ruota
contiguità = colori vicini

15. Colori - suggerimenti
• Combinazioni familiari/gradevoli (massimo 3-4 colori)
• Uniformità di uso in tutto il sito
• Contrasto per attirare l’attenzione (call to action,
offerte speciali, servizi importanti, ecc.)
• Contiguità per invitare ad approfondire la
• lettura di testi lunghi
@Gianps

16. Caratteri
• Maiuscolo o minuscolo
(alto/basso)
– I caratteri con solo l’iniziale in
maiuscolo sono molto più
leggibili di quelli tutti maiuscoli

17. Il Presi ente Sarà Sicu amente Prese te

18. IL SE RETARIO SIC RAMENTE NON CI S RA'

19. Con o senza grazie ?
• per i monitor > meglio senza fregi
• per la carta > titoli sans serif e testi serif
• Generalmente per i testi non troppo lunghi (ad es.: i titoli, le
voci di menù, ecc.), a rapido scorrimento (ad es.: le
newsletter, i siti web o i cartelli stradali) o in condizioni di
stress visivo (ad es.: nei monitor dei computer) risultano più
leggibili caratteri senza grazie.
• Invece nei testi piuttosto lunghi (ad es.: E-book o schede
prodotto molto dettagliate), stampati su carta (ad es.: libri),
molto piccoli o ben contrastati (scritte nere su fondo bianco)
risultano più leggibili caratteri con le grazie.

20. Famiglie di caratteri web safe
http://www.w3schools.com/cssref/css_websafe_fonts.asp
Arial
Esempio di testo in Arial
Courier
Esempio di testo in Courier
Georgia
Esempio di testo in Georgia
Times New Roman
Esempio di testo in Times New Roman
Verdana
Esempio di testo in Verdana

21. Animazioni
Animazioni e video
• Limitare gate e intro animate
• Non più di 1-2 elementi in movimento
• Evitare nei menu

22. Sosacroniro
????

23. Domande a cui dobbiamo
rispondere
• domande a cui deve rispondere un sito
• chi c'è dietro il sito?
• cosa viene offerto e come?
• Dove posso trovarlo?
• ci posso contattare e come?
• quello che viene offerto e come?
• chi lo ha provato è soddisfatto?
• Ci sono informazioni di dettaglio?
• interessante! come posso mantenere un contatto?

24. Domande
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me