Web-usability-Krug

1Leonardo Bellini - Web usability

Web usability

Milano, 8 aprile 2009Leonardo Bellini



La 1° legge sull’usabilità

NON FARMI PENSARE!

UNA PAGINA WEB DOVREBBE ESSERE QUANTO PIU’ POSSIBILE AUTOESPLICATIVA E AUTOEVIDENTE


SENZA PENSARCIEcco le novità

Ecco le categorie

di prodotto

Ecco l’area riservata

Promozioni

Categorie in primo

piano


Pensandoci… capita navigando in

qualche sito…

Uhm, un po’ affollato..da dove

comincio?

Dov’è la navigazione? Qui o là?

Perché la chiamano così?

Perché hanno chiamato così quest’etichetta?

Questi 2 link sembrano uguali..?


Cose che ci fanno cliccare

Su una pagina web qualsiasi cosa può costringerci inutilmente a pensare..Il labeling (l’etichettatura), ingegnoso,ideato dal marketing, o dal reparto tecnico: troppo vago o troppo specifico


Quale box è più chiaro?

Jobs Employment opportunities

Job- o-Rama

Ovvio Richiede riflessione


Quale bottone è ovviamente cliccabile?

• Quando usiamo il Web, ogni punto interrogativo aumenta il nostro carico di lavoro cognitivo, distraendo la ns attenzione da quello che stiamo facendo

risultati risultatirisultati > Risultati

Ovviamente cliccabile Hmm,Penso sia un pulsante

Hmm,E’ un pulsante?


Le domande tipiche in ogni pagina

Dove sono?Da dove comincio?Dove hanno messo_______?Quali sono le cose + importanti nella pagina?Perché l’avranno chiamato così?

Dovete eliminare tutto ciò che procura una riflessione, la necessità di comprendereDovete eliminare tutti i punti di domanda


Cosa dobbiamo fare?

Rendere il più possibile le nostre pagine web autoevidenti o almeno autoesplicativePagine che richiedono un minimo sforzo per essere comprese


Elementi che favoriscono

l’autoevidenza

Come appaiono le coseL’organizzazione degli oggettiI nomi ben sceltiIl layout della paginaBrevi righe di testo confezionato con cura


Ad 1 click di distanza

In Internet, la competizione è sempre e soltanto ad un clic di distanzaSe frustrate l’utente questi se ne andrà da un’altra parte

In realtà molte persone non si danno per vinte e continuano a usare determinati siti anche se questi le frustrano


Come davvero usiamo il Web

Quando creiamo siti ci comportiamo come se la gente esaminasse attentamente ogni pagina, leggendo testi elegantemente redatti, scoprendo come abbiamo organizzato le cose e soppesando le opzioni prima di decidere quale link cliccare…


Il comportamento reale…

Quello che fanno realmente le persone è dare una rapida occhiata ad ogni nuova pagina, scorrere parte del testo e cliccare sul 1° link che cattura il loro interesse e che assomiglia vagamente a ciò che stanno cercandoDi solito una gran parte della pagina non viene nemmeno vista


Come davvero usiamo il web

Verità #1: non leggiamo le pagine. Le scorriamo (scanning)

Perché?

Di solito andiamo di frettaSappiamo di non aver bisogno di leggere tuttoSiamo bravi nel farlo


Esempio – Expedia..

Ci focalizziamo su parole ed aree di ns interesse in quel momento e sulle parole che innescano un corto circuito sul nostro sistema nervoso (Gratis, Sconti, Sesso)


Le verità sull’usabilità

Verità #2: non le scelte ottimali, solo soddisfacentiL’utente non pondera le scelte, non valuta le opzioni ma sceglie la 1° opzione ragionevole (satisficing=satisfying + sufficing)


Perché gli utenti web non cercano la

scelta migliore?Di solito andiamo di frettaSbagliare non comporta multeSoppesare le opzioni non migliora le nostra probabilitàIndovinare è più divertente (elemento piacevole della sorpresa)


Verità n°3: non scopriamo come le cose

funzionanoCe la caviamo…La gente usa le cose senza preoccuparsi di capirne fino in fondo il funzionamento (Tv, lavatrice, sw, sito web)Esempio: inserire il dominio di un sito nel box del motore di ricerca è usuale


Perché accade?

• Per noi non è importante capire il funzionamento di un oggetto, finché riusciamo ad usarlo

• Se funziona, perché cambiare? Una volta che abbiamo scoperto come far funzionare qualcosa – non importa quanto male – siamo portati a non cercare un sistema migliore. Raramente cerchiamo di migliorare il modo in cui lo usiamo


… ma allora vale la pena impegnarsi

nell’usabilità?Certamente! Se gli ci arrivano:• Ci sono + probabilità che trovino ciò che stanno

cercando• Ci sono buone probabilità che capiscano tutto ciò

che il sito può offrire loro, non solo parti di esso• È + probabile indirizzarli alle parti del sito che

desiderate vedano• Farli sentire “in gamba”, e a loro agio durante la

visita li farà tornare


Progettare pagine da scorrere

non da leggere5 punti importanti:

1. Creare in ogni pagina una chiara gerarchia visiva

2. Sfruttare le convenzioni3. Scomporre le pagine in aree ben

definite4. Rendere ovvio ciò che è cliccabile5. Minimizzare il “rumore”


1. Creare una chiara gerarchia visiva

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

• Alla correlazione logica corrisponde una correlazione visiva

• Le cose sono visualmente nidificate (cosa è parte di cosa)

MOLTO IMPORTANTE

MOLTO MENO IMPORTANTE

ASSOLUTAMENTE NON IMPORTANTE

QUANDO UNA PAGINA E’ PRIVA DI GERARCHIA SIAMO COSTRETTI AD UN PROCESSO DI SCANSIONE


2. Le convenzioni sono vostre

amicheDa piccoli abbiamo imparato a leggere il giornale. Non solo le parole ma anche le sue convenzioniUna frase scritta con caratteri grossi di solito è un TITOLOIl testo sottostante un’immagine è una didascaliaSe il carattere è piccolo

riporta i credits o la fonte..


Seguite le convenzioni…

Ogni mezzo di comunicazione sviluppa le sue convenzioni e continua a perfezionarle nel corso del tempo.

Quelle del web sono già numerose, per lo più derivate dalle convenzioni di giornali e riviste, e nuove convenzioni continuano a fare la comparsa.

Ogni convenzione prende vita dall’idea brillante di qualcuno.

Se l’idea funziona discretamente bene altri siti la imitano ed alla fine la sua diffusione si estende fino ad un punto in cui non ha + bisogno di spiegazioni.

Questo processo di adozione richiede tempo, ma in Internet avviene molto velocemente. (Es. metafora del carrello della spesa per siti di e-commerce)


Le convenzioni sono utili• Le convenzioni diventano tali

solo se funzionano.• Rendono + facile all’utente

passare da un sito ad un altro senza sforzi per capirne il funzionamento

• Rassicurano e danno un senso di familiarità vedere una lista di link alle sezioni di un sito con un sfondo colorato lungo un lato della pagina

• I progettisti sono di solito riluttanti a trarne vantaggio


Il vizio dei progettisti..

.. E quello di voler reinventare la ruotaDi fronte alla prospettiva di usare una convenzione, i designer hanno la tentazione di reinventare la ruota perché desiderano creare qualcosa di nuovo e diverso, e non la solita minestra..


Scomporre le pagine in aree ben

definiteE’ importante perché consente agli utenti di decidere in fretta su quale area della pagina focalizzarsi e quali aree ignorareDividere la pagina in aree ben definite è importante perché consente agli utenti di decidere in fretta su quali aree della pagina focalizzarsi e quali ignorare

Studi di eyetracking confermano questa tendenza


Rendere ovvio ciò che è cliccabile

Dal momento che gran parte della ns attività online consiste nel cercare la prossima cosa da cliccare, è importante rendere ovvio cosa è cliccabile e cosa noBisogna evitare di inserire testo sottolineato e che non sia un linkPerché costringere gli utenti a soffermarsi a pensare sulle cose?

Devo o non devo cliccare?


La casella di ricerca

Dove devo cliccare per effettuare la ricerca?Basterà fare enter o devo cliccare sul testo sotto?Quale dei 2 funziona meglio?

> Search

Search >


Minimizzare il rumore

Uno dei + grandi nemici per comprendere al volo una pagina è il rumore visivoSovraffollamento: quando ogni area sulla pagina reclama la mia attenzioneRumore di fondo: come ad una festa, nessuna fonte di rumore è tanto forte di per sé da distrarci, ma c’è un pulviscolo di rumore visivo che ci logora..

Le linee tra le voci del menu a tendina creano un inutile rumore di fondo


3° legge: Omettete le parole inutili

La scrittura vigorosa è fatta di concisioneInvece:

La maggior parte delle parole online è lì per occupare lo spazio, visto che nessuno le leggeràRimuovere metà del testo è un obiettivo realisticoNon è solo il n°di clic ma la difficoltà che ogni scelta (clic) può generare all’utente


Valore e numero dei clic

3 clic spensierati e non ambigui equivalgono ad 1 clic che richiede una riflessione


Benefici nel ridurre i testi

Riduce il livello di rumore della paginaDona evidenza al contenuto importanteRende la pagina + breve, permettendo agli utenti di vederne di più a colpo d’occhio, senza dover scorrere l’intero contenuto

Le istruzioni devono morire!!


Una volta che entrate in un sito

web……Il processo è circa sempre lo stesso:

Di solito provate a cercare qualcosaDecidete se prima chiedere (o vi fate un giro per conto vostro

Search vs Surf?Secondo J.Nielsen ci sono persone search-dominant, che prediligono la ricerca non appena entrano in un sitoAltri, i link-dominant prediligono la navigazione tra link, quasi sempre prima si guardano in giro, iniziando la ricerca solo dopo aver esaurito i link probabili


Se scegliete di farvi un giro..

Percorrendo l’albero del sito usando i segnali come guidaDi solito si dà un occhio alla HP cercando l’elenco delle sezioni principali (come i cartelli nei reparti di un negozio) e si clicca su quella che ci sembra giusta

www.gap.com


Dopo alcuni clic…

Troveremo un elenco degli articoli che mi interessano

Alla fine: Se non trovate ciò che cercate, ve ne andateQuesto è vero in un supermercato; ve ne andate quando siete convinti che non ce l’hanno o quando siete troppo frustrati per cercare altrove


Ricerca online e ricerca nel mondo

realeCi sono alcune analogie: esplorare il web è in un certo senso come muoversi in uno spazio fisico

Cruising, Surfing, Navigare, browsing

E fare “clic” su un link, NON “Mostra” o “CARICA” una pagina ma “CI PORTA” verso quella pagina

MA….


Web surfing is more difficult..

L’esperienza web è priva di molti agganci su cui facciamo affidamento nella nostra vita quotidiana per negoziare gli spazi

Alcune difficoltà:Nessun senso delle proporzioni: quante pagine ha questo sito?100, 1000 o 100.000?Ci potrebbero essere molti angoli inesplorati…Nel caso di una rivista, di un museo o di un grande magazzino abbiamo una vaga idea del rapporto tra “visto” e “non visto”


Nessun senso della direzione

In un sito web non c’è destra né sinistra, né alto né basso.

Si può parlare di muoversi su e giù ma si intende nella gerarchia da un livello + generale ad uno più specifico


Nessun senso della posizioneNegli spazi fisici muovendoci accumuliamo una conoscenza dello spazio

Sviluppiamo il senso di dove stanno le cose e possiamo prendere scorciatoie per raggiungerle


Gli scopi della navigazioneCi dice cosa c’è: non è divertente sentirsi persiCi dice come usare il sito: rendendone visibile la gerarchia. La navigazione svela il contenuto!

Se la navigazione funziona ci comunica implicitamente da dove cominciare e quali sono le opzioni. Se realizzata correttamente dovrebbe avere tutte le istruzioni necessarieCi dà fiducia nelle persone che hanno costruito il sito

Voi siete qui

ID del sito


Il menu di servizio nel footer

utilities corporate


Il nome della paginaNome della paginaLa navigazione localeMenu nel footer


Leonardo Bellini DML - Digital Marketing LabMobile: 33573876933

Email: [email protected]

Blog: http://www.digitalmarketinglab.it

Brand site: www.dml.it

Twitter: twitter.com/dmlab

LinkedIn: www.linkedin.com/in/leonardobellini

Business

Web-usability-Krug