Post on 05-Oct-2020
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