Usabilità del Web

Relatore: Andrea Baioni

abaioni@andreabaioni.it

www.andreabaioni.it

Usabile per chi?

Che cosa è il web

Luogo di lavoro e condivisione• Web: medium on-demand

• TV: mezzo broadcast

La TV è fatta per essere guardata, il web per compiere azioni

L'usabilità è una della armi a nostra disposizione per trattenere l'audience e per consentire ai visitatori di lavorare con il nostro sito.

Cosa è l’Usabilità

Norma ISO 9241 del 1993 (prodotti informatici in genere)

• grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso.

Modello mentale di chi ha progettato e dell’utente• Progettista coincide con utente

un sito web prima viene usato, e solo se l'uso risulta soddisfacente può dar vita ad una transazione ed eventualmente ad un guadagno.

Software vs Web

La natura del web pone un problema nuovo all'usabilità rispetto al software.

• l'interfaccia di un sito ha anche compiti di comunicazione della brand identity, e più in generale di immagine

• l'usabilità oltre che con le funzionalità di un sito deve fare i conti con il design, inteso appunto nel senso di veicolo d'immagine. Si tratta di conciliare due logiche di lavoro opposte.

Chi fa cosa - 1

Analisi di marketing si occupano di:• Analisi delle risorse ,budget, opportunità

• Definizione degli obiettivi e dei target del sito

Gli esperti di content design si occupano di:• Analisi del benchmarking

• Analisi delle risorse informative attuali e potenziali

• Stesura del concept, definizione delle diverse aree del sito e loro relazioni

• Definizione dei flowchart

Chi fa cosa - 2

I graphic designer si occupano di:• Layout, look and feel della HP

• Look and feel dei template del sito

• Storyboard e grafica

Web developer si occupano• Integrazione tra look & feel e HTML

• Integrazione tra look & feel e altri linguaggi

I programmatori si occupano di:• Implementazione di linguaggi dinamici

• Integrazione coi database

9 domande da porsi

Quali sono gli obiettivi che si vogliono raggiungere con Internet?

Qual è il profilo socio-professionale del pubblico?

Quali tipi di contenuti e servizi potrebbero interessare il target?

Di quali tecnologie, finanziamenti, competenze c'è bisogno per fornire questi servizi?

Chi sono i concorrenti, come sono organizzati i loro siti, di quali strategie si avvalgono?

Che tipo di interazioni ci sono e ci potrebbero essere con i il target de l sito, quali bisogni potrebbe o insorge?

Quali sono gli obiettivi a breve, medio e lungo termine del sito che si va a progettare ?

Quale potrebbe essere l'andamento del sito tra un anno?

Con quali criteri misurare il successo e il gradimento?

Usabilità sul web

Il punto di vista dell'utente è la prima cosa di cui tenere conto nella progettazione e produzione di un sito web o di materiale web oriented

User experience

Comportamenti

Risultati

Sensazioni

Cosa l’utente fa

Che cosa ottiene

Come si sente

Cosa c’è che non va?

Un sito pubblicato e pubblicizzato non funziona quando:

• Dopo il lancio iniziale si verificano consistenti perdite di traffico

• Nella parte di e-commerce gli acquisti sono scarsi

• C 'è un forte abbandono dei carrelli di spesa

• I visitatori restano pochi secondi nella home poi lasciano il sito senza visitarlo in profondità

• I visitatori non tornano, le statistiche dicono che nel nostro sito non ci sono visitatori abituali

La caffettiera del masochista

Il principio di Percepibilità e Visibilità (Donald Norman)

• Essere sicuri di quale siano il comando o l’informazione necessariRichiede accurata analisi

• Renderli propriamente percepibiliRichiede competenze grafiche e visuali

Percepibile e visibile

Le tecniche per ottenere questi obiettivi sono:• Analisi dei requisiti

• Interviste con utilizzatori

• Analisi dei compiti

• Scenari

• Uso delle convenzioni

• Test con utenti

E’ necessaria una buona conoscenza degli utenti e da una chiara definizione dei task e degli scenari per ridurre la distanza fra il modello mentale del progettista e quello degli utenti

Quel che c’è si vede?

Inserire informazioni e strumenti in un contesto e renderli “percepibili”

• Non ‘a comparsa’ e sufficientemente visibili (Videogiochi)

• Dimensioni e grado percettivo di sufficiente contrasto

Se abbiamo poco spazio• Progressive disclosure

• Read more . . .

• Continua

Percepibilità

Percepibilità come dimensione sufficiente• Non vi è significativa differenza né del tipo di font né della

dimensione per quanto riguarda l’accuratezza della lettura e il numero di errori

• Vi è invece una differenza significativa sia per il tipo di font che per la dimensione per quanto riguarda il tempo di lettura. Times e Arial si leggono in modo significativamente più rapido di

Courier e Georgia.

I testi a 10 pixel si leggono più lentamente dei testi a 12 pixel. Queste differenze relative al tempo di lettura sono però piccole

Oggetti a comparsa

Difficoltà di manipolazione degli oggetti a comparsa• E’ facile per l’utente operare sul comando?

• È facile mantenere l’attivazione della funzionalità a comparsa?

• È facile operare all’interno del comando apparso?

• Sono evitate situazioni in cui l’utente, dopo aver attivato il comando a comparsa, non è in grado di disattivarlo e tornare allo stato precedente (come può accadere nel caso di comandi modali che attivano nuovi strumenti di interfaccia)?

L’interfaccia

La funzione dell'interfaccia è in qualche modo quella di "sparire" dall'attenzione cosciente del visitatore e per far questo, essa deve paradossalmente "comparire", rendersi visibile ed evidente, colmare tutte le lacune e "proporsi" per l'uso.

Regoliamoci!

• Inserire contenuto attraente.

• Rendere i link visibili e riconoscibili.

• Ridurre il numero delle voci della barra di navigazione.

• Usare una terminologia significativa e coerente per gli item di navigazione e per i link ipertestuali

• Correggere attentamente gli errori tipografici

• Includere dello spazio bianco nel layout di pagina.

• Parlare con i clienti per capire quali funzionalità sono davvero necessarie

• Accertarsi che il sito sia visibile da chi ha problemi visivi.

• Condurre un test di usabilità!

Progettare senza stile

GIF animate

Sfondi psichedelici

Bottoni

Musica

Interfacce misteriose

Caricamenti lenti

Uso smodato delle tecnologie

Home page per browser specifici

Pop-up windows

DON’T MAKE ME THINK!

Prima legge dell’usabilità

Qual è la cosa più importante che devo fare perché il mio sito sia facile da usare?

• Due clic

• Linguaggio utente

• Coerenza

Individuare senza pensare

Pagine webAutoevidenti

Ovvie

Esplicative

Se ci penso?Hmm, un po’ affollato. Da dove comincio?

Hmm, perché lo chiamano così?

Posso cliccare qui?

Dov’è la navigazione?

Perché qui c’è questa cosa?

Questi due link sembrano uguali. Ma lo sono davvero?

Cose che ci fanno pensare

Prendere i nomi di cosa ci fa pensare

< OVVIO > < RICHIEDE RIFLESSIONE >

Lavoro!Clic

Hmm!![Millisecondi di riflessione]

Lavoro!Clic

Hmm. Potrebbe essere “Lavoro”, ma ho l’impressione che ci sia dell’altro.

Clicco o continuo la ricerca?

Opportunità di lavoroLavoro Job o-rama

Ricerche

Vediamo. “Ricerca veloce” è lo stesso di “Ricerca” ?

Devo cliccare sul menu a tendina?So soltanto che il libro è di Dan Brown.“Brown” è una parola chiave?

Penso di dover usare il menù(Clicca sulla freccia)

Titolo. Autore. Parola chiave.OK. Scelgo autore(Clicca Autore)

Digita “Dan Brown”Clicca “Ricerca”

Ricerca veloce RicercaKeyword

Ricerca veloce RicercaKeyword

Ricerca veloce Ricerca

Ricerca veloce Ricerca

Ricerca veloce RicercaKeyword

KeywordTitoloAutore

KeywordTitoloAutore

Dan Brown

1 secondo per 5 risposte

Che cos’è?

Che cosa hanno?

Cosa posso fare?

Perché sono qui e non su un altro sito?

Da dove cominciare?

Come è costruito il web

Come davvero usiamo il webUn’occhiata febbrile a qualunque cosa.

Che sia interessante, o che vagamente assomigli a ciò che cerchiamo.

Che si acliccabile.

Non appena troviamo un elemento parzialmente soddisfacente, clicchiamo.

Se non ha successo, usiamo il pulsante “Indietro” del browser.

Non leggiamo… scorriamo

Secondo i designer . . . Secondo gli utenti . . .

Quanto gli utenti vedono del sito

http://browsersize.googlelabs.com/

La scelta migliore

Perché gli utenti web non cercano la scelta migliore?• Di solito andiamo di fretta

• Sbagliare non comporta niente

• Soppesare le opzioni non migliora le nostre possibilità

• Indovinare è più divertente

Non scopriamo come le cose funzionano. Ce la caviamo.

Gerarchie visive

Creare in ogni pagina una chiara gerarchia visiva

Sfruttare le convenzioni

Scomporre le pagine in aree ben definite

Rendere ovvio ciò che è cliccabile

Minimizzare il “rumore”

Più una cosa è importante, più è messa in rilievo

Alla correlazione logica corrisponde

anche una correlazione visiva

Le cose sono visivamente “nidificate”

per mostrare cosa è parte di cosa.

Seconda legge dell’usabilità

Non importa quanti click devo fare, se ogni click è frutto di una scelta che non richiede impegno e non è amibigua.

Terza legge dell’usabilità

Sbarazzati di metà delle parole di ogni pagina e poi sbarazzati della metà di quello che resta.

• Omettete la parole inutiliRiduce il livello di rumore nella pagina

Dona evidenza al contenuto importante

Rende la pagina più breve

• Le istruzioni NON servonoNessuno le leggerà

NAVIGAZIONE

I menù - Dove mi trovo

In relazione al web

Multilivello!XYZ Home

Prodotti Notizie Support L’azienda Help

HW SW Database Live support FAQ Contattaci

Le briciole di pane

Le "briciole di pane" sono considerate, all’interno dei siti, un utile strumento di navigazione ma gli utenti si accorgono della loro esistenza? Le usano? E soprattutto ne comprendono il significato?

Le briciole di paneLA PRIMA VOLTA

LE VISITE SUCCESSIVE

Cosa fate quando entrate in negozio?

Sulla porta d’ingresso dedicate di solito pochi secondi a una decisione cruciale:

• Cerco il prodotto da solo o chiedo a qualcuno?

E’ una decisione basata su un numero di variabili:• quanto bene conoscete il negozio

• quanto vi fidate della loro abilità a organizzare le merci in modo razionale

• quanta fretta avete e anche quanto socievole siete.

Aprite una pagine e . . .

Cercate:• ID del sito

• Nome della pagina

• Sezioni e sottosezioni

• Navigazione locale

• Indicatori: Voi siete qui

• Ricerca

Esempio – latimes.com

ID del sito

Sezioni e sottosezioni

Ricerca

Navigazione

Voi siete qui

Esempio – amazon.com

navigazione

Ricerca

ID del sito

TAG LINE E BLURB

Tag line

Quando vediamo una frase visivamente legata all’ID, ci aspettiamo che sia la Tag line e così la leggiamo come la descrizione dell’intero

Tag line vaghe sono inutili

Tag line buone hanno bell’aspetto, vivacità, ingegnosità

Welcome Blurb

1 “Blurb” di benvenuto: concisa descrizione del sito.

Non usate più spazio del necessario

Non usate gergo aziendale

2 caratteristicheEssere visibile senza lo scroll

Dare il benvenuto all’utente

4 compitiChiarire chi è il target del sito

Presentare ciò che il sito offre

Mostrare i benefici offerti al navigatore

Rispondere a quelle che sono le potenziali domande del navigatore

Esempiohttp://www.sxc.hu/

Dà il benvenuto al navigatore

Chiarisce chi è il target del sito

Presenta ciò che il sito offre

Mostra i benefici offerti al navigatore

Risponde a quelle che sono le potenziali domande del navigatore

LINK

I link

L'intero sistema-web si basa sull'ipertesto, e quindi sul link,

• Riconoscibilità

• Capacità di fare anticipare dove porteranno

• è necessario che non vi siano link interrotti o errati

Tipologie di link

Topici• testo sottolineato (di solito… ma non sempre!) che conduce

a ulteriori informazioni riguardo all’argomento

Strutturali• link usati per connettere tra di loro livelli diversi della

struttura del sito. Usati anche per connettere una data pagina con altre allo stesso livello gerarchico

Associativi• link usati per indicare altre pagine dal contenuto simile o

correlato a quella attuale che l’utente potrebbe perciò trovare interessanti

Usare i link

I link migliori sono quelli testuali

E' bene usare sempre la sottolineatura per i link testuali

• Non usate la sottolineatura in nessun altro caso

Colore dei link• Colori differenti per differenti stati

Non disponete i link su due righe

Linkate poche parole, ma significative• Si suggerisce ottimale max 4 parole

Esempio

Errato:• Per leggere il quarto canto della Divina Commedia clicca

qui.

• Leggi il quarto canto della Divina Commedia di Dante.

Corretto:• Leggi il quarto canto della Divina Commedia di Dante.

Esempiolink strutturali

link topici

link associativi

TESTARE

Test di usabilità

Se volete un buon sito, dovete testarlo• Testare anche un solo utente è 100 volte meglio che non

testarne nessuno

• Testare un solo utente all’inizio del progetto è meglio che testarne 50 verso la fine

• L’importanza di reclutare utenti rappresentativi è sovrastimata

• Lo scopo del test non è provare o confutare una teoria, ma dare forma al vostro giudizio

• Testare è un processo iterativo

• Niente batte una reazione dal vivo

Il test sperimentale

Identificazione di tutte le variabili coinvolte nell'interazione fra utente e sito

Reclutamento dei soggetti su base campionaria

Presenza di precise ipotesi sperimentali.

Misurazione rigorosa dei dati sperimentali, con eventuale registrazione

Analisi statistica dei dati

Il test semplificato

Un'interfaccia almeno semi-funzionante del sito o dei bozzetti di lavoro

Una serie di compiti significativi da somministrare ai partecipanti

Una sede comoda, in cui non venir disturbati, con un computer e una connessione dello stesso livello di quelle che usano gli utenti tipici

Test no test

Usability tools

Approccio al testing

Statistiche Vis. del comportamento degli

utenti

Report di usabilità

Loop 11http://www.loop11.com

Uno o più utenti SÌ SÌ SÌ

Five second testhttp://fivesecondtest.com

Un utente NO NO SÌ

Google website optimizerhttp://www.google.com/websiteoptimizer/b/index.html

Automatico NO SÌ SÌ

Google analyticshttp://www.google.com/analytics/

Automatico SÌ NO NO

Yahoo! Web analyticshttp://web.analytics.yahoo.com/

Automatico SÌ NO NO

StrumentiLoop11 è un servizio gratuito per misurare l'usabilità di un sito che coinvolge i tuoi utenti nell'analisi e nella revisione del tuo stesso sito. Dovrai solamente assegnare un semplice compito all'utente e Loop11 inizierà a registrare e visualizzare i dati relativiall'interazione. Alla fine della sessione potrai accedere a report dettagliati e comprensivi che ti mostreranno i tassi di completamento di attività, il tempo impiegato in queste attività, errori presenti nella pagina e un'analisi dettagliata ti mostrerà il percorso fatto dall'utente.

Fivesecondstest è un servizio gratuito che misura l'usabilità del tuo sito, così da permetterti di individuare ambiguità nel design o errori nell'interfaccia dello stesso. Puoi caricare lo screenshot delle tue pagine web e successivamente chiedere ai tuoi utenti quale parte del design preferiscono, o chiedere loro di cliccare su una specifica parte del design e di inviare successivamente i lorofeedback. Puoi invitare direttamente gli utenti o rendere pubblico il tuo design esponendolo alle critiche di utenti casuali. Una volta terminato il processo di testing riceverai un report dettagliato e potrai analizzarne i risultati. Non ci sono annotazioni in tempo reale.

GoogleAnalytics è un servizio gratuito con cui puoi misurare l'usabilità del tuo sito. Raccogliendo automaticamente dati sul comportamento dei tuoi utenti durante la navigazione ti sarà possibile ottenere dei report dettagliati che ti aiuteranno a capire se il tuo sito è realmente utile ed è agevole navigarci su. Puoi anche aumentare la qualità dei dati e dei diagrammi ricavati utilizzando note scritte; questo ti aiuterà a concentrarti su determinati elementi o insiemi di dati. Per poter utilizzare Google Analytics è necessario avere un account Google.

Google Website Optimizer è un servizio gratuito per il testing e l'ottimizzazione che può aiutarti a migliorare il design e l'usabilità del tuo sito. Ti consente di confrontare e provare diversi tipi di layout mostrando ognuno a gruppi separati di visitatori. In questo modo puoi analizzare quale design e quali elementi specifici all'interno delle pagine del tuo sito generano i tassi di conversione più alti e quali elementi devono essere invece migliorati. Per utilizzare Google Website Optimizer devi avere un account Google. Il servizio non fornisce statistiche.

Yahoo! Web Analytics è un servizio gratuito di analisi online che puoi utilizzare anche per misurare l'usabilità del tuo sito. Puoi ottenere approfondimenti sui dati demografici relativi ai tuoi utenti e riguardo i loro interessi, sfruttandoli per migliorare l'interfaccia e il design del tuo sito web. Potrai misurare il tasso di conversione del tuo sito visualizzando il comportamento dei tuoi utenti in specifiche azioni compiute navigando tra le pagine del tuo sito; grazie a questo servizio otterrai report personalizzati che ti consentiranno di aggregare e analizzare i dati raccolti. Puoi aggiungere note interattive alle tue statistiche e ai grafici ricavati dal test. Per utilizzare tale servizio devi avere un account Yahoo!

Strumenti: feng-gui.com

Sistema di intelligenza artificiale che simula la visione umana durante i primi 5 secondi di visualizzazione

Domande e Risposte

Grazie per l’attenzione

Andrea Baioni

E-mail: abaioni@andreabaioniit

Blog: www.andreabaioni.it