lezione5 usability-confartigianato
DESCRIPTION
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.TRANSCRIPT
![Page 1: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/1.jpg)
ANDREA VACCARELLA
INTERNET NEL CONCRETOCOME OTTENERE RISULTATI VERI DAL WEB
Lezione 5
Distretti sul Web
![Page 2: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/2.jpg)
Ingegnere InformaticoLaurea Specialistica 110LPolitecnico di Milano
Esperto di interfacceAccessibilità e usabilitàApplicazioni mobile cross-platformLayout adattivi
Sveglio e preparatoBorsa di Studio Google-UnioncamereProgetto Vodafone-Capgemini NFC SIM
andreavaccarella.it
339 6748515
Un po’ genio un po’ folleVe ne accorgerete a breve
CHI SONO
google.it/distrettisulwebdistrettisulweb.it
NEL MIO PASSATO
Distretti sul Web
myTVserialsandreavaccarella.it/websites/myTVserials/
![Page 3: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/3.jpg)
Un utente che arriva sul sito non conta nulla
OBIETTIVI DI OGGI
1 CheckList per il sito
3 Pensare Utente (e analizzarlo)
2 Tradurre l’usabilità nel concreto LA VIA DEL SUCCESSO
A meno che rimanga sul sito e interagisca con esso
![Page 4: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/4.jpg)
IL MIO SITO E’ USABILE?
![Page 5: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/5.jpg)
USABILITA’ (ISO):
L'efficacia, l'efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti.
![Page 6: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/6.jpg)
“Grado di facilità e soddisfazione” durante interazione utente-sito
USABILITA’ (ISO):
L'efficacia, l'efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti.
![Page 7: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/7.jpg)
CHI SONO I MIEIUTENTI?
![Page 8: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/8.jpg)
UTENTE
![Page 9: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/9.jpg)
USABILITA’ Come strutturare il sito in maniera “ottimale”.
TROVO QUELLO CHE CERCO?
Se fossi il mio utente, troverei quello che sto cercando?
La domanda da avere sempre in testa:
I 3 DOGMI DELL’UTENTEPosso dirli perché sono utente anche io!
![Page 10: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/10.jpg)
USABILITA’ – DOGMA 1 Non far pensare (troppo) il tuo utente. Mai. “non trovo… chiudo”
L’UTENTE E’ PIGRO
![Page 11: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/11.jpg)
USABILITA’ – DOGMA 2 L’utente non ha progettato il sito. L’ovvio per te non è per lui. “non capisco chiudo”
L’UTENTE E’ SCEMO
![Page 12: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/12.jpg)
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)
![Page 13: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/13.jpg)
![Page 14: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/14.jpg)
![Page 15: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/15.jpg)
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.”
Krug’s Laws of Usability:
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
![Page 16: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/16.jpg)
Utilità:
Facilità di apprendimento: e Facilità di ricordo:
Efficienza
Soddisfazione
Robustezza agli errori
Comportamento utenti nuovi, cosa fanno, dove indugiano, su cosa cliccano/su cosa vorrei cheCliccassero. E’ intuitivo?
Metodi per interrogare il sistema (Search- Filtri-Tag)Risposte sensate e veloci?
a cosa serve il sito e per chi serve (4 Obiettivi)
Alternative al tasto “back”? Navigazione lineare?Numero di Pagine “missing”? Bounce Rate bassa?
Sistema divertente/soddisfacente da usare o creaAnsia, frustrazione, insoddisfazione? (Form lunghi,Niente login per accessi successivi, social login malfunzionante, tag vuoti, task ripetitivi..
![Page 17: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/17.jpg)
USABILITA’ E SEO
Tasso di rimbalzoDurata delle visite
Testo esplicativo
![Page 18: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/18.jpg)
CHECKLIST1
![Page 19: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/19.jpg)
CHECKLIST Accessibilità
4 Contenuto
1 Accessibilità Tecnica
3 Navigazione
2 Identità Aziendale
![Page 20: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/20.jpg)
Loading Time(100Kb – 60Kb)
Contrasto Fronte-Sfondo
Testo e FONT
Img ALT tag(Appropriato & # immagini,CSS)
SizeLetter SpacingLine HeightContrasto coloreFONT StandardLunghezza testi
Flash & Plugins(controllare alternative possibili)
Error 404 (Brandizzata e con LINK)
CHECKLIST Accessibilità Tecnica
![Page 21: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/21.jpg)
Posizionamento Logo
Tagline chiara(Intento e Mission della compagnia)
Home Page in 5’
Informazioni di Contatto(Dove siamo, contatti, RUOLI!)
ChiaraPulitaImmagini chiaveMission-VisionPunti Forti(competitor)
Informazioni Azienda(P.IVA, Storia, Specializzazioni, Certificazioni)
CHECKLIST Identità Aziendale
Testo, non immagini.Vostre, non del WebMaster
![Page 22: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/22.jpg)
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
Link Coerenti e facilmente Identificabili(Sottolineato? Colore? Coerenza!)
Logo cliccabile (Home)(Alternativa Home)
Ricerca sul sito(Facile da trovare, funzionante, funzionale)
CHECKLIST Navigazione
![Page 23: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/23.jpg)
Intestazioni e Titoli In chiaroe 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
Ads e pop-up non invasivi(All’utente servono? Pensa Utente! Frustrazione = quit)
Grassetto usato propriamente(Parsimonia qui! I motori di ricerca non sempre…)
Ricerca sul sito(Facile da trovare, funzionante, funzionale)
CHECKLIST Contenuto
![Page 24: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/24.jpg)
Usare parole chiare, semplici e compresibiie usando I tag giusti (<H1>, <H2>, <section>)
Non esagerare con i testi(troppo testo e’ un mattone)
Non esagerare con le immagini(piuttosto impagina)
URL semplici e identificativi(SEO!)
I titoli dell’HTML sono semplificativi(SEO! Prima ancora di essere sul sito)
CHECKLIST Contenuto
http://www.usereffect.com/topic/25-point-website-usability-checklist
![Page 25: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/25.jpg)
..One last thing..
Layout Adattivo. Utente Adattabile.
![Page 26: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/26.jpg)
Cosa vuol dire?
![Page 27: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/27.jpg)
COSA VUOL DIRE (VERAMENTE) LAYOUT ADATTIVO
Ripensare al sito web
Riprogettare tutti i contenuti
Analizzare il doppio con Analytics
Avere vincoli(Tecnologie, spazi, dimensioni, tempi caricamento)
Avere piu’ tipologie di utente
![Page 28: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/28.jpg)
UN PO’ DI FRECCE AL NOSTRO ARCO
![Page 29: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/29.jpg)
STRUMENTI GRATIS
http://it.masternewmedia.org/2010/04/12/website_usability_testing_guida_ai_migliori_servizi.htm
A PAGAMENTO
Comparazione tra strumenti
![Page 30: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/30.jpg)
CLICK TRACKING & MOUSE TRACKING
![Page 31: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/31.jpg)
EYE TRACKING
![Page 32: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/32.jpg)
SIGNIFICA ANCHE AVERE IN CHIARO OBIETTIVI
UN SITO USABILE RAGGIUNGE GLI OBIETTIVI
VISIT DURATION
Adatto per:Affiliate-Marketinge/o Knowhow tecnico
Vantaggi:Facile da capire
Svantaggi:Spesso inaccurato
PAGES / VISIT
Adatto per:
Siti con informazioni
semplici e/o pagine
di conversione
Vantaggi:
Facile da capire
Svantaggi:
Nessun valore obiettivo
SPECIFIC URL
Adatto per:
La maggior parte
dei siti di shopping
Online
Vantaggi:
Molto preciso
Svantaggi:
Spesso non possibile
EVENT TRACKING
Adatto per:
Pubblicitari accorti
Vantaggi:
Quasi tutto è tracciabile
Svantaggi:
Difficile da implementare
![Page 33: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/33.jpg)
DOMANDE?
![Page 34: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/34.jpg)
1..2..3..USABILITA’
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)
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.
INTERFACCE FLAT
LAYOUT ADATTIVO
Se il tuo Labrador non riesce a navigarlo, devi cambiare qualcosa.
![Page 35: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/35.jpg)
1
2
3
5
4 La Promozione Online
Usabilità e AccessibilitàIl Sito Internet
I Social Network
L’Analisi dei Visitatori 6
8
7 Video e File Multimediali
SEO
App for Business
INTERNET & BUSINESS
NELLE PROSSIME PUNTATE
Mod
ulo
1
Mod
ulo
2
![Page 36: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/36.jpg)
GRAZIE
GRAZIE
Andrea Vaccarella
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIEGRAZIE
GRAZIE
GRAZIE
GRAZIE
GRAZIE
![Page 37: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/37.jpg)
Red
Yellow
Yellow
Yellow
Yellow
Yellow
![Page 38: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/38.jpg)
![Page 39: Lezione5 Usability-confartigianato](https://reader036.vdocumenti.com/reader036/viewer/2022062513/55646516d8b42acd408b4d60/html5/thumbnails/39.jpg)