Usability of a website, how to make a website usable, the checklist, the users, the tools and testing of a business or personal website. Three user dogmas and a practical approach on how to improve usability and accessibility of websites. Google Checklists, loading time, number of clicks, objectives and user retention.

1. INTERNET NEL CONCRETO
COME OTTENERE RISULTATI VERI DAL WEB
Lezione 5
ANDREA VACCARELLA
Distretti sul Web

2. CHI SONO
Ingegnere Informatico
Laurea Specialistica 110L
Politecnico di Milano
NEL MIO PASSATO
Distretti sul Web
Esperto di interfacce
Accessibilità e usabilità
Applicazioni mobile cross-platform
Layout adattivi
339 6748515
andreavaccarella.it
Sveglio e preparato
Borsa di Studio Google-Unioncamere
Progetto Vodafone-Capgemini NFC SIM
Un po’ genio un po’ folle
Ve ne accorgerete a breve
google.it/distrettisulweb
distrettisulweb.it
myTVserials
andreavaccarella.it/websites/myTVserials/

3. OBIETTIVI DI OGGI
Un utente che arriva sul sito non conta nulla
A meno che rimanga sul sito e interagisca con esso
1
CheckList per il sito
2
Tradurre l’usabilità nel concreto
3
Pensare Utente (e analizzarlo)
LA VIA DEL SUCCESSO

4. IL MIO SITO E’
USABILE?

5. USABILITA’ (ISO):
L'efficacia, l'efficienza e la soddisfazione con le quali determinati
utenti raggiungono determinati obiettivi in determinati contesti.

6. USABILITA’ (ISO):
L'efficacia, l'efficienza e la soddisfazione con le quali determinati
utenti raggiungono determinati obiettivi in determinati contesti.
“Grado di facilità e soddisfazione” durante interazione utente-sito

7. CHI SONO I MIEI
UTENTI?

8. UTENTE

9. USABILITA’
Come strutturare il sito in maniera “ottimale”.
TROVO QUELLO CHE CERCO?
I 3 DOGMI DELL’UTENTE
Posso dirli perché sono utente anche io!
La domanda da avere sempre in testa:
Se fossi il mio utente, troverei quello che sto cercando?

10. USABILITA’ – DOGMA 1
L’UTENTE E’
PIGRO
Non far pensare (troppo) il tuo utente.
Mai. “non trovo…  chiudo”

11. USABILITA’ – DOGMA 2
L’utente non ha progettato il sito. L’ovvio per
te non è per lui. “non capisco  chiudo”
L’UTENTE E’
SCEMO

12. USABILITA’ – DOGMA 3
L’utente e’ abituato (male). Fai le cose come
si aspetta l’utente, non come vuoi tu.
“ma nell’altro sito si faceva così..  chiudo”
L’UTENTE E’
ABITUATO
(MALE)

15. Krug’s Laws of Usability:
1. “Don’t make me think.”
2. “It doesn’t matter how many times I have to click, as long as each click is a
mindless, unambiguous choice.”
3. “Get rid of half the words on each page, then get rid of half of what is left.”
1. “Non farmi pensare”
2. “Non importa quanti click mi fai fare, basta che siano
immediati, senza sforzo e senza possibilità di fraintendimento”
3. “Taglia metà delle parole su ogni pagina, poi taglia metà delle
rimanenti”
FACILITA’ – IMMEDIATEZZA - FRUSTRAZIONE

16. Utilità:
Facilità di apprendimento:
e Facilità di ricordo:
Efficienza
Robustezza agli errori
Soddisfazione
a cosa serve il sito e per chi serve (4 Obiettivi)
Comportamento utenti nuovi, cosa fanno, dove
indugiano, su cosa cliccano/su cosa vorrei che
Cliccassero. E’ intuitivo?
Metodi per interrogare il sistema (Search- Filtri-Tag)
Risposte sensate e veloci?
Alternative al tasto “back”? Navigazione lineare?
Numero di Pagine “missing”? Bounce Rate bassa?
Sistema divertente/soddisfacente da usare o crea
Ansia, frustrazione, insoddisfazione? (Form lunghi,
Niente login per accessi successivi, social login mal
funzionante, tag vuoti, task ripetitivi..

17. USABILITA’ E SEO
Tasso di rimbalzo
Durata delle visite
Testo esplicativo

18. 1
CHECKLIST

19. CHECKLIST Accessibilità
1
Accessibilità Tecnica
2
Identità Aziendale
3
Navigazione
4
Contenuto

20. CHECKLIST Accessibilità Tecnica
Loading Time
(100Kb – 60Kb)
Contrasto Fronte-Sfondo
Testo e FONT
Flash & Plugins
(controllare alternative possibili)
Img ALT tag
(Appropriato & # immagini,CSS)
Error 404
(Brandizzata e con LINK)
Size
Letter Spacing
Line Height
Contrasto colore
FONT Standard
Lunghezza testi

21. CHECKLIST Identità Aziendale
Posizionamento Logo
Tagline chiara
(Intento e Mission della compagnia)
Home Page in 5’
Informazioni Azienda
(P.IVA, Storia, Specializzazioni, Certificazioni)
Chiara
Pulita
Immagini chiave
Mission-Vision
Punti Forti
(competitor)
Informazioni di Contatto
(Dove siamo, contatti, RUOLI!)
Testo, non immagini.
Vostre, non del WebMaster

22. CHECKLIST Navigazione
Main Menu chiaro e identificabile
Nomi dei Link chiari
(Semiotica delle interfacce – Link destination)
Rule of 5-9-3 (menu-livelli)
Per Menu e Link
Logo cliccabile (Home)
(Alternativa Home)
Link Coerenti e facilmente Identificabili
(Sottolineato? Colore? Coerenza!)
Ricerca sul sito
(Facile da trovare, funzionante, funzionale)

23. CHECKLIST Contenuto
Intestazioni e Titoli In chiaro
e usando I tag giusti (<H1>, <H2>, <section>)
Contenuto chiave SOPRA metà
(Fold - NoScroll - Estensioni-Webbar search browsers)
Coerenza (layout-colori-posizionamenti)
Niente cambi di layout azzardati
Grassetto usato propriamente
(Parsimonia qui! I motori di ricerca non sempre…)
Ads e pop-up non invasivi
(All’utente servono? Pensa Utente! Frustrazione = quit)
Ricerca sul sito
(Facile da trovare, funzionante, funzionale)

24. CHECKLIST Contenuto
Usare parole chiare, semplici e compresibii
e usando I tag giusti (<H1>, <H2>, <section>)
Non esagerare con i testi
(troppo testo e’ un mattone)
Non esagerare con le immagini
(piuttosto impagina)
I titoli dell’HTML sono semplificativi
(SEO! Prima ancora di essere sul sito)
URL semplici e identificativi
(SEO!)
http://www.usereffect.com/topic/25-point-website-usability-checklist

25. ..One last thing..
Layout Adattivo.
Utente Adattabile.

26. Cosa vuol dire?

27. COSA VUOL DIRE (VERAMENTE) LAYOUT ADATTIVO
Ripensare al sito web
Riprogettare tutti i contenuti
Analizzare il doppio con Analytics
Avere piu’ tipologie di utente
Avere vincoli
(Tecnologie, spazi, dimensioni, tempi caricamento)

28. UN PO’ DI FRECCE AL NOSTRO ARCO

29. STRUMENTI GRATIS
A PAGAMENTO
Comparazione tra strumenti
http://it.masternewmedia.org/2010/04/12/website_usability_testing_guida_ai_migliori_servizi.htm

30. CLICK TRACKING & MOUSE TRACKING

31. EYE TRACKING

32. SIGNIFICA ANCHE AVERE IN CHIARO OBIETTIVI
UN SITO USABILE RAGGIUNGE GLI OBIETTIVI
VISIT DURATION
PAGES / VISIT
SPECIFIC URL
EVENT TRACKING
Adatto per:
Affiliate-Marketing
e/o Knowhow tecnico
Adatto per:
Siti con informazioni
semplici e/o pagine
di conversione
Adatto per:
La maggior parte
dei siti di shopping
Online
Adatto per:
Pubblicitari accorti
Vantaggi:
Facile da capire
Vantaggi:
Facile da capire
Vantaggi:
Molto preciso
Vantaggi:
Quasi tutto è tracciabile
Svantaggi:
Spesso inaccurato
Svantaggi:
Nessun valore obiettivo
Svantaggi:
Spesso non possibile
Svantaggi:
Difficile da implementare

33. DOMANDE?

34. 1..2..3..USABILITA’
INTERFACCE FLAT
Scelta delle parole
Divisione dei contenuti
(numero di pagine, categorizzazione, numero di sezioni)
Chiarezza della navigazione
(percorsi per orientarsi chiari e univoci. Briciole di pane)
Quantità dei contenuti
(testo alternativo, descrizione, nome file e tag)
LAYOUT ADATTIVO
Preparati al mobile
(non farmi zoomare, non voglio fare click troppe volte, e
ai miei non pensi occhi?)
Tempi di caricamento delle pagine
(qui e ora, non far aspettare l’utente, SpeedTest)
Controlla.
Chiedi ad amici, parenti, nipoti e la zia.
Chiunque può aiutarti. E’ veloce e funziona. One shot- one kill.
Se il tuo Labrador non riesce a navigarlo, devi cambiare qualcosa.

35. NELLE PROSSIME PUNTATE
INTERNET & BUSINESS
2
L’Analisi dei Visitatori
3
I Social Network
4
La Promozione Online
5
Il Sito Internet
Modulo 2
Modulo 1
1
Usabilità e Accessibilità
6
App for Business
7
Video e File Multimediali
8
SEO

36. GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
Andrea Vaccarella
GRAZIE

37. Yellow
Yellow
Yellow
Red
Yellow
Yellow