INTERNET NEL CONCRETO
COME OTTENERE RISULTATI VERI DAL WEB
Lezione 5

ANDREA VACCARELLA
Distretti sul Web
CHI SONO

Ingegnere Informatico
Laurea Specialistica 110L
Politecnico di Milano

NEL MIO PASSATO

Distretti sul Web

Esper...
OBIETTIVI DI OGGI

Un utente che arriva sul sito non conta nulla
A meno che rimanga sul sito e interagisca con esso

1

Ch...
IL MIO SITO E’
USABILE?
USABILITA’ (ISO):
L'efficacia, l'efficienza e la soddisfazione con le quali determinati
utenti raggiungono determinati obi...
USABILITA’ (ISO):
L'efficacia, l'efficienza e la soddisfazione con le quali determinati
utenti raggiungono determinati obi...
CHI SONO I MIEI
UTENTI?
UTENTE
USABILITA’

Come strutturare il sito in maniera “ottimale”.

TROVO QUELLO CHE CERCO?

I 3 DOGMI DELL’UTENTE
Posso dirli pe...
USABILITA’ – DOGMA 1

L’UTENTE E’
PIGRO

Non far pensare (troppo) il tuo utente.
Mai. “non trovo…  chiudo”
USABILITA’ – DOGMA 2

L’utente non ha progettato il sito. L’ovvio per
te non è per lui. “non capisco  chiudo”

L’UTENTE E...
USABILITA’ – DOGMA 3

L’utente e’ abituato (male). Fai le cose come
si aspetta l’utente, non come vuoi tu.
“ma nell’altro ...
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 ...
Utilità:
Facilità di apprendimento:
e Facilità di ricordo:
Efficienza

Robustezza agli errori
Soddisfazione

a cosa serve ...
USABILITA’ E SEO
Tasso di rimbalzo
Durata delle visite
Testo esplicativo
1

CHECKLIST
CHECKLIST Accessibilità

1

Accessibilità Tecnica

2

Identità Aziendale

3

Navigazione

4

Contenuto
CHECKLIST Accessibilità Tecnica

Loading Time
(100Kb – 60Kb)

Contrasto Fronte-Sfondo

Testo e FONT
Flash & Plugins
(contr...
CHECKLIST Identità Aziendale

Posizionamento Logo
Tagline chiara
(Intento e Mission della compagnia)

Home Page in 5’
Info...
CHECKLIST Navigazione

Main Menu chiaro e identificabile
Nomi dei Link chiari
(Semiotica delle interfacce – Link destinati...
CHECKLIST Contenuto

Intestazioni e Titoli In chiaro
e usando I tag giusti (<H1>, <H2>, <section>)

Contenuto chiave SOPRA...
CHECKLIST Contenuto

Usare parole chiare, semplici e compresibii
e usando I tag giusti (<H1>, <H2>, <section>)

Non esager...
..One last thing..

Layout Adattivo.
Utente Adattabile.
Cosa vuol dire?
COSA VUOL DIRE (VERAMENTE) LAYOUT ADATTIVO

Ripensare al sito web
Riprogettare tutti i contenuti

Analizzare il doppio con...
UN PO’ DI FRECCE AL NOSTRO ARCO
STRUMENTI GRATIS

A PAGAMENTO

Comparazione tra strumenti
http://it.masternewmedia.org/2010/04/12/website_usability_testin...
CLICK TRACKING & MOUSE TRACKING
EYE TRACKING
SIGNIFICA ANCHE AVERE IN CHIARO OBIETTIVI
UN SITO USABILE RAGGIUNGE GLI OBIETTIVI

VISIT DURATION

PAGES / VISIT

SPECIFIC...
DOMANDE?
1..2..3..USABILITA’
INTERFACCE FLAT
Scelta delle parole
Divisione dei contenuti
(numero di pagine, categorizzazione, numer...
NELLE PROSSIME PUNTATE
INTERNET & BUSINESS

2

L’Analisi dei Visitatori

3

I Social Network

4

La Promozione Online

5

...
GRAZIE
GRAZIE
GRAZIE

GRAZIE
GRAZIE

GRAZIE

GRAZIE

GRAZIE
GRAZIE
GRAZIE

GRAZIE
GRAZIE

GRAZIE

Andrea Vaccarella
GRAZIE
Yellow
Yellow
Yellow
Red
Yellow
Yellow
Lezione5 Usability-confartigianato
Lezione5 Usability-confartigianato
Lezione5 Usability-confartigianato
Lezione5 Usability-confartigianato
Upcoming SlideShare
Loading in...5
×

Lezione5 Usability-confartigianato

220

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
220
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lezione5 Usability-confartigianato

  1. 1. INTERNET NEL CONCRETO COME OTTENERE RISULTATI VERI DAL WEB Lezione 5 ANDREA VACCARELLA Distretti sul Web
  2. 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. 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. 4. IL MIO SITO E’ USABILE?
  5. 5. USABILITA’ (ISO): L'efficacia, l'efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti.
  6. 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. 7. CHI SONO I MIEI UTENTI?
  8. 8. UTENTE
  9. 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. 10. USABILITA’ – DOGMA 1 L’UTENTE E’ PIGRO Non far pensare (troppo) il tuo utente. Mai. “non trovo…  chiudo”
  11. 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. 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)
  13. 13. 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
  14. 14. 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..
  15. 15. USABILITA’ E SEO Tasso di rimbalzo Durata delle visite Testo esplicativo
  16. 16. 1 CHECKLIST
  17. 17. CHECKLIST Accessibilità 1 Accessibilità Tecnica 2 Identità Aziendale 3 Navigazione 4 Contenuto
  18. 18. 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
  19. 19. 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
  20. 20. 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)
  21. 21. 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)
  22. 22. 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
  23. 23. ..One last thing.. Layout Adattivo. Utente Adattabile.
  24. 24. Cosa vuol dire?
  25. 25. 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)
  26. 26. UN PO’ DI FRECCE AL NOSTRO ARCO
  27. 27. STRUMENTI GRATIS A PAGAMENTO Comparazione tra strumenti http://it.masternewmedia.org/2010/04/12/website_usability_testing_guida_ai_migliori_servizi.htm
  28. 28. CLICK TRACKING & MOUSE TRACKING
  29. 29. EYE TRACKING
  30. 30. 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
  31. 31. DOMANDE?
  32. 32. 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.
  33. 33. 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
  34. 34. GRAZIE GRAZIE GRAZIE GRAZIE GRAZIE GRAZIE GRAZIE GRAZIE GRAZIE GRAZIE GRAZIE GRAZIE GRAZIE Andrea Vaccarella GRAZIE
  35. 35. Yellow Yellow Yellow Red Yellow Yellow
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×