ANDREA VACCARELLA

INTERNET NEL CONCRETOCOME OTTENERE RISULTATI VERI DAL WEB

Lezione 5

Distretti sul Web

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/

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

IL MIO SITO E’ USABILE?

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

USABILITA’ (ISO):

L'efficacia, l'efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti.

CHI SONO I MIEIUTENTI?

UTENTE

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!

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

L’UTENTE E’ PIGRO

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

L’UTENTE E’ SCEMO

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)

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

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

USABILITA’ E SEO

Tasso di rimbalzoDurata delle visite

Testo esplicativo

CHECKLIST1

CHECKLIST Accessibilità

4 Contenuto

1 Accessibilità Tecnica

3 Navigazione

2 Identità Aziendale

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

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

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

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

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

..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 Analytics

Avere vincoli(Tecnologie, spazi, dimensioni, tempi caricamento)

Avere piu’ tipologie di utente

UN PO’ DI FRECCE AL NOSTRO ARCO

STRUMENTI GRATIS

http://it.masternewmedia.org/2010/04/12/website_usability_testing_guida_ai_migliori_servizi.htm

A PAGAMENTO

Comparazione tra strumenti

CLICK TRACKING & MOUSE TRACKING

EYE TRACKING

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

DOMANDE?

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.

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

GRAZIE

GRAZIE

Andrea Vaccarella

GRAZIE

GRAZIE

GRAZIE

GRAZIE

GRAZIE

GRAZIE

GRAZIEGRAZIE

GRAZIE

GRAZIE

GRAZIE

GRAZIE

Red

Yellow

Yellow

Yellow

Yellow

Yellow