Web usability Milano,  8  aprile 2009 Leonardo Bellini
 
La 1° legge sull’usabilità <ul><li>NON FARMI PENSARE ! </li></ul><ul><li>UNA  PAGINA WEB  DOVREBBE ESSERE QUANTO PIU’ POSS...
SENZA PENSARCI Ecco 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à? Per...
Cose che ci fanno cliccare <ul><li>Su una pagina web qualsiasi cosa può costringerci inutilmente a pensare.. </li></ul><ul...
Quale box è più chiaro? Jobs Employment opportunities Job- o-Rama Ovvio  Richiede riflessione
Quale bottone è ovviamente cliccabile? <ul><li>Quando usiamo il Web, ogni punto interrogativo aumenta il  nostro carico di...
Le domande tipiche in ogni pagina <ul><li>Dove sono? </li></ul><ul><li>Da dove comincio? </li></ul><ul><li>Dove hanno mess...
Cosa dobbiamo fare? <ul><li>Rendere il più possibile le nostre pagine web  autoevidenti  o almeno  autoesplicative </li></...
Elementi che favoriscono l’autoevidenza <ul><li>Come appaiono le cose </li></ul><ul><li>L’organizzazione  degli oggetti </...
Ad 1 click di distanza <ul><li>In Internet, la competizione è sempre e soltanto ad un clic di distanza </li></ul><ul><li>S...
Come davvero usiamo il Web <ul><li>Quando creiamo siti ci comportiamo come se la gente  esaminasse attentamente ogni pagin...
Il comportamento reale… <ul><li>Quello che fanno realmente le persone è  dare una rapida occhiata ad ogni nuova pagina , s...
Come davvero usiamo il web <ul><li>Verità #1: non leggiamo le pagine.  </li></ul><ul><li>Le scorriamo  (scanning) </li></u...
Esempio – Expedia.. Ci focalizziamo su parole ed aree di ns interesse in quel momento e sulle parole  che innescano  un co...
Le verità sull’usabilità <ul><li>Verità #2: non le scelte ottimali, solo soddisfacenti </li></ul><ul><li>L’utente non pond...
Perché gli utenti web non cercano la scelta migliore? <ul><li>Di solito andiamo di  fretta </li></ul><ul><li>Sbagliare non...
Verità n°3: non scopriamo come le cose funzionano <ul><li>Ce la caviamo… </li></ul><ul><li>La gente usa le cose  senza pre...
Perché accade? <ul><li>Per noi  non è importante capire il funzionamento  di un oggetto,  finché riusciamo ad usarlo </li>...
…  ma allora vale la pena impegnarsi nell’usabilità? <ul><li>Certamente! Se gli ci arrivano: </li></ul><ul><li>Ci sono + p...
Progettare pagine da scorrere non da leggere <ul><li>5 punti importanti: </li></ul><ul><li>Creare in ogni pagina una  chia...
1. Creare una chiara gerarchia visiva <ul><li>Più una cosa è importante, più è messa in rilievo </li></ul><ul><li>Alla cor...
2. Le convenzioni sono vostre amiche <ul><li>Da piccoli abbiamo imparato a leggere il giornale. Non solo le parole ma anch...
Seguite le convenzioni… <ul><li>Ogni mezzo di comunicazione sviluppa le  sue convenzioni e continua a perfezionarle nel co...
Le convenzioni sono utili <ul><li>Le convenzioni  diventano tali solo se funzionano . </li></ul><ul><li>Rendono + facile a...
Il vizio dei progettisti.. <ul><li>.. E quello di voler  reinventare la ruota </li></ul><ul><li>Di fronte alla prospettiva...
Scomporre le pagine in aree ben definite <ul><li>E’ importante perché consente agli utenti di decidere in fretta su quale ...
Rendere ovvio ciò che è cliccabile <ul><li>Dal momento che gran parte della ns attività online consiste nel cercare la  pr...
La casella di ricerca <ul><li>Dove devo cliccare per effettuare la ricerca? </li></ul><ul><li>Basterà fare  enter  o devo ...
Minimizzare il rumore <ul><li>Uno dei + grandi nemici per comprendere al volo una pagina è il  rumore visivo </li></ul><ul...
3° legge: Omettete le parole inutili <ul><li>La  scrittura vigorosa è fatta di concisione </li></ul><ul><li>Invece: </li><...
Valore e numero dei clic 3 clic  spensierati e non ambigui  equivalgono ad  1 clic  che richiede una riflessione
Benefici nel ridurre i testi <ul><li>Riduce il livello di rumore  della pagina </li></ul><ul><li>Dona evidenza al  contenu...
Una volta  che entrate in un sito web… <ul><li>… Il processo è circa sempre lo stesso: </li></ul><ul><li>Di solito provate...
Se scegliete di farvi un giro.. <ul><li>Percorrendo  l’albero del sito  usando i segnali come guida </li></ul><ul><li>Di s...
Dopo alcuni clic… <ul><li>Troveremo un elenco degli articoli che mi interessano </li></ul><ul><li>Alla fine: Se non trovat...
Ricerca online e ricerca nel mondo reale <ul><li>Ci sono alcune analogie: esplorare il web è in un certo senso come muover...
Web surfing is more difficult.. <ul><li>L’esperienza web è priva di molti agganci su cui facciamo affidamento nella nostra...
Nessun senso della direzione <ul><li>In un sito web  non c’è destra né sinistra, né alto né basso.  </li></ul><ul><li>Si p...
Nessun senso della posizione <ul><li>Negli  spazi fisici  muovendoci accumuliamo  una conoscenza dello spazio </li></ul><u...
Gli scopi della navigazione <ul><li>Ci dice cosa c’è:  non è divertente sentirsi persi </li></ul><ul><li>Ci dice come usar...
Il menu di servizio nel footer utilities corporate
Il nome della pagina <ul><li>Nome della pagina </li></ul><ul><li>La navigazione locale </li></ul><ul><li>Menu nel footer <...
Leonardo Bellini  DML - Digital Marketing Lab Mobile: 33573876933 Email : leonardobellini@gmail.com Blog : http://www.digi...
Upcoming SlideShare
Loading in …5
×

Web-usability-Krug

2,103 views

Published on

Alcuni spunti sulla web usability, secondo alcuni principi e regole di Steve Krug, autore di "don0t make me think" ed uno dei guru della web usability, insieme con Jaob Nielsen. Visitate anche www.sensable.com, il sito web di S.Krug

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

No Downloads
Views
Total views
2,103
On SlideShare
0
From Embeds
0
Number of Embeds
126
Actions
Shares
0
Downloads
72
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • Web-usability-Krug

    1. 1. Web usability Milano, 8 aprile 2009 Leonardo Bellini
    2. 3. La 1° legge sull’usabilità <ul><li>NON FARMI PENSARE ! </li></ul><ul><li>UNA PAGINA WEB DOVREBBE ESSERE QUANTO PIU’ POSSIBILE AUTOESPLICATIVA E AUTOEVIDENTE </li></ul>
    3. 4. SENZA PENSARCI Ecco le novità Ecco le categorie di prodotto Ecco l’area riservata Promozioni Categorie in primo piano
    4. 5. 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.. ?
    5. 6. Cose che ci fanno cliccare <ul><li>Su una pagina web qualsiasi cosa può costringerci inutilmente a pensare.. </li></ul><ul><li>Il labeling (l’etichettatura), ingegnoso,ideato dal marketing, o dal reparto tecnico: troppo vago o troppo specifico </li></ul>
    6. 7. Quale box è più chiaro? Jobs Employment opportunities Job- o-Rama Ovvio Richiede riflessione
    7. 8. Quale bottone è ovviamente cliccabile? <ul><li>Quando usiamo il Web, ogni punto interrogativo aumenta il nostro carico di lavoro cognitivo , distraendo la ns attenzione da quello che stiamo facendo </li></ul>risultati > Risultati Ovviamente cliccabile Hmm, Penso sia un pulsante Hmm, E’ un pulsante? risultati
    8. 9. Le domande tipiche in ogni pagina <ul><li>Dove sono? </li></ul><ul><li>Da dove comincio? </li></ul><ul><li>Dove hanno messo_______? </li></ul><ul><li>Quali sono le cose + importanti nella pagina? </li></ul><ul><li>Perché l’avranno chiamato così? </li></ul>Dovete eliminare tutto ciò che procura una riflessione, la necessità di comprendere Dovete eliminare tutti i punti di domanda
    9. 10. Cosa dobbiamo fare? <ul><li>Rendere il più possibile le nostre pagine web autoevidenti o almeno autoesplicative </li></ul><ul><li>Pagine che richiedono un minimo sforzo per essere comprese </li></ul>
    10. 11. Elementi che favoriscono l’autoevidenza <ul><li>Come appaiono le cose </li></ul><ul><li>L’organizzazione degli oggetti </li></ul><ul><li>I nomi ben scelti </li></ul><ul><li>Il layout della pagina </li></ul><ul><li>Brevi righe di testo confezionato con cura </li></ul>
    11. 12. Ad 1 click di distanza <ul><li>In Internet, la competizione è sempre e soltanto ad un clic di distanza </li></ul><ul><li>Se frustrate l’utente questi se ne andrà da un’altra parte </li></ul>In realtà molte persone non si danno per vinte e continuano a usare determinati siti anche se questi le frustrano
    12. 13. Come davvero usiamo il Web <ul><li>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… </li></ul>
    13. 14. Il comportamento reale… <ul><li>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 cercando </li></ul><ul><li>Di solito una gran parte della pagina non viene nemmeno vista </li></ul>
    14. 15. Come davvero usiamo il web <ul><li>Verità #1: non leggiamo le pagine. </li></ul><ul><li>Le scorriamo (scanning) </li></ul><ul><li>Perché? </li></ul><ul><ul><li>Di solito andiamo di fretta </li></ul></ul><ul><ul><li>Sappiamo di non aver bisogno di leggere tutto </li></ul></ul><ul><ul><li>Siamo bravi nel farlo </li></ul></ul>
    15. 16. 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)
    16. 17. Le verità sull’usabilità <ul><li>Verità #2: non le scelte ottimali, solo soddisfacenti </li></ul><ul><li>L’utente non pondera le scelte, non valuta le opzioni ma sceglie la 1° opzione ragionevole ( satisficing=satisfying + sufficing ) </li></ul>
    17. 18. Perché gli utenti web non cercano la scelta migliore? <ul><li>Di solito andiamo di fretta </li></ul><ul><li>Sbagliare non comporta multe </li></ul><ul><li>Soppesare le opzioni non migliora le nostra probabilità </li></ul><ul><li>Indovinare è più divertente (elemento piacevole della sorpresa) </li></ul>
    18. 19. Verità n°3: non scopriamo come le cose funzionano <ul><li>Ce la caviamo… </li></ul><ul><li>La gente usa le cose senza preoccuparsi di capirne fino in fondo il funzionamento (Tv, lavatrice, sw, sito web) </li></ul><ul><li>Esempio: inserire il dominio di un sito nel box del motore di ricerca è usuale </li></ul>
    19. 20. Perché accade? <ul><li>Per noi non è importante capire il funzionamento di un oggetto, finché riusciamo ad usarlo </li></ul><ul><li>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 </li></ul>
    20. 21. … ma allora vale la pena impegnarsi nell’usabilità? <ul><li>Certamente! Se gli ci arrivano: </li></ul><ul><li>Ci sono + probabilità che trovino ciò che stanno cercando </li></ul><ul><li>Ci sono buone probabilità che capiscano tutto ciò che il sito può offrire loro , non solo parti di esso </li></ul><ul><li>È + probabile indirizzarli alle parti del sito che desiderate vedano </li></ul><ul><li>Farli sentire “ in gamba”, e a loro agio durante la visita li farà tornare </li></ul>
    21. 22. Progettare pagine da scorrere non da leggere <ul><li>5 punti importanti: </li></ul><ul><li>Creare in ogni pagina una chiara gerarchia visiva </li></ul><ul><li>Sfruttare le convenzioni </li></ul><ul><li>Scomporre le pagine in aree ben definite </li></ul><ul><li>Rendere ovvio ciò che è cliccabile </li></ul><ul><li>Minimizzare il “rumore” </li></ul>
    22. 23. 1. Creare una chiara gerarchia visiva <ul><li>Più una cosa è importante, più è messa in rilievo </li></ul><ul><li>Alla correlazione logica corrisponde una correlazione visiva </li></ul><ul><li>Le cose sono visualmente nidificate (cosa è parte di cosa) </li></ul>MOLTO IMPORTANTE MOLTO MENO IMPORTANTE ASSOLUTAMENTE NON IMPORTANTE QUANDO UNA PAGINA E’ PRIVA DI GERARCHIA SIAMO COSTRETTI AD UN PROCESSO DI SCANSIONE
    23. 24. 2. Le convenzioni sono vostre amiche <ul><li>Da piccoli abbiamo imparato a leggere il giornale. Non solo le parole ma anche le sue convenzioni </li></ul><ul><li>Una frase scritta con caratteri grossi di solito è un TITOLO </li></ul><ul><li>Il testo sottostante un’immagine è una didascalia </li></ul><ul><li>Se il carattere è piccolo riporta i credits o la fonte.. </li></ul>
    24. 25. Seguite le convenzioni… <ul><li>Ogni mezzo di comunicazione sviluppa le sue convenzioni e continua a perfezionarle nel corso del tempo. </li></ul><ul><li>Quelle del web sono già numerose, per lo più derivate dalle convenzioni di giornali e riviste , e nuove convenzioni continuano a fare la comparsa. </li></ul><ul><li>Ogni convenzione prende vita dall’idea brillante di qualcuno. </li></ul><ul><li>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. </li></ul><ul><li>Questo processo di adozione richiede tempo, ma in Internet avviene molto velocemente. (Es. metafora del carrello della spesa per siti di e-commerce ) </li></ul>
    25. 26. Le convenzioni sono utili <ul><li>Le convenzioni diventano tali solo se funzionano . </li></ul><ul><li>Rendono + facile all’utente passare da un sito ad un altro senza sforzi per capirne il funzionamento </li></ul><ul><li>Rassicurano e danno un senso di familiarità vedere u na lista di link alle sezioni di un sito con un sfondo colorato lungo un lato della pagina </li></ul><ul><li>I progettisti sono di solito riluttanti a trarne vantaggio </li></ul>
    26. 27. Il vizio dei progettisti.. <ul><li>.. E quello di voler reinventare la ruota </li></ul><ul><li>Di 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.. </li></ul>
    27. 28. Scomporre le pagine in aree ben definite <ul><li>E’ importante perché consente agli utenti di decidere in fretta su quale area della pagina focalizzarsi e quali aree ignorare </li></ul><ul><li>Dividere la pagina in aree ben definite è importante perché consente agli utenti di decidere in fretta su quali aree della pagina focalizzarsi e quali ignorare </li></ul>Studi di eyetracking confermano questa tendenza
    28. 29. Rendere ovvio ciò che è cliccabile <ul><li>Dal momento che gran parte della ns attività online consiste nel cercare la prossima cosa da cliccare , è importante rendere ovvio cosa è cliccabile e cosa no </li></ul><ul><li>Bisogna evitare di inserire testo sottolineato e che non sia un link </li></ul><ul><li>Perché costringere gli utenti a soffermarsi a pensare sulle cose? </li></ul>Devo o non devo cliccare?
    29. 30. La casella di ricerca <ul><li>Dove devo cliccare per effettuare la ricerca? </li></ul><ul><li>Basterà fare enter o devo cliccare sul testo sotto? </li></ul><ul><li>Quale dei 2 funziona meglio? </li></ul>> Search Search >
    30. 31. Minimizzare il rumore <ul><li>Uno dei + grandi nemici per comprendere al volo una pagina è il rumore visivo </li></ul><ul><li>Sovraffollamento : quando ogni area sulla pagina reclama la mia attenzione </li></ul><ul><li>Rumore 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.. </li></ul>Le linee tra le voci del menu a tendina creano un inutile rumore di fondo
    31. 32. 3° legge: Omettete le parole inutili <ul><li>La scrittura vigorosa è fatta di concisione </li></ul><ul><li>Invece: </li></ul><ul><ul><li>La maggior parte delle parole online è lì per occupare lo spazio , visto che nessuno le leggerà </li></ul></ul><ul><ul><li>Rimuovere metà del testo è un obiettivo realistico </li></ul></ul><ul><ul><li>Non è solo il n°di clic ma la difficoltà che ogni scelta (clic) può generare all’utente </li></ul></ul>
    32. 33. Valore e numero dei clic 3 clic spensierati e non ambigui equivalgono ad 1 clic che richiede una riflessione
    33. 34. Benefici nel ridurre i testi <ul><li>Riduce il livello di rumore della pagina </li></ul><ul><li>Dona evidenza al contenuto importante </li></ul><ul><li>Rende la pagina + breve , permettendo agli utenti di vederne di più a colpo d’occhio, senza dover scorrere l’intero contenuto </li></ul>Le istruzioni devono morire!!
    34. 35. Una volta che entrate in un sito web… <ul><li>… Il processo è circa sempre lo stesso: </li></ul><ul><li>Di solito provate a cercare qualcosa </li></ul><ul><li>Decidete se prima chiedere (o vi fate un giro per conto vostro </li></ul>Search vs Surf? <ul><li>Secondo J.Nielsen ci sono persone search-dominant, che prediligono la ricerca non appena entrano in un sito </li></ul><ul><li>Altri, 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 </li></ul>
    35. 36. Se scegliete di farvi un giro.. <ul><li>Percorrendo l’albero del sito usando i segnali come guida </li></ul><ul><li>Di 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 </li></ul>www.gap.com
    36. 37. Dopo alcuni clic… <ul><li>Troveremo un elenco degli articoli che mi interessano </li></ul><ul><li>Alla fine: Se non trovate ciò che cercate , ve ne andate </li></ul><ul><li>Questo è vero in un supermercato; ve ne andate quando siete convinti che non ce l’hanno o quando siete troppo frustrati per cercare altrove </li></ul>
    37. 38. Ricerca online e ricerca nel mondo reale <ul><li>Ci sono alcune analogie: esplorare il web è in un certo senso come muoversi in uno spazio fisico </li></ul><ul><li>Cruising, Surfing, Navigare, browsing </li></ul><ul><li>E fare “clic” su un link, NON “ Mostra ” o “ CARICA ” una pagina ma “ CI PORTA ” verso quella pagina </li></ul>MA….
    38. 39. Web surfing is more difficult.. <ul><li>L’esperienza web è priva di molti agganci su cui facciamo affidamento nella nostra vita quotidiana per negoziare gli spazi </li></ul><ul><li>Alcune difficoltà: </li></ul><ul><li>Nessun senso delle proporzioni : quante pagine ha questo sito? </li></ul><ul><li>100, 1000 o 100.000? </li></ul><ul><li>Ci potrebbero essere molti angoli inesplorati… </li></ul><ul><li>Nel caso di una rivista, di un museo o di un grande magazzino abbiamo una vaga idea del rapporto tra “visto” e “non visto” </li></ul>
    39. 40. Nessun senso della direzione <ul><li>In un sito web non c’è destra né sinistra, né alto né basso. </li></ul><ul><li>Si può parlare di muoversi su e giù ma si intende nella gerarchia da un livello + generale ad uno più specifico </li></ul>
    40. 41. Nessun senso della posizione <ul><li>Negli spazi fisici muovendoci accumuliamo una conoscenza dello spazio </li></ul><ul><li>Sviluppiamo il senso di dove stanno le cose e possiamo prendere scorciatoie per raggiungerle </li></ul>
    41. 42. Gli scopi della navigazione <ul><li>Ci dice cosa c’è: non è divertente sentirsi persi </li></ul><ul><li>Ci dice come usare il sito : rendendone visibile la gerarchia. La navigazione svela il contenuto! </li></ul><ul><li>Se la navigazione funziona ci comunica implicitamente da dove cominciare e quali sono le opzioni . </li></ul><ul><li>Se realizzata correttamente dovrebbe avere tutte le istruzioni necessarie </li></ul><ul><li>Ci dà fiducia nelle persone che hanno costruito il sito </li></ul>Voi siete qui ID del sito
    42. 43. Il menu di servizio nel footer utilities corporate
    43. 44. Il nome della pagina <ul><li>Nome della pagina </li></ul><ul><li>La navigazione locale </li></ul><ul><li>Menu nel footer </li></ul>
    44. 45. Leonardo Bellini DML - Digital Marketing Lab Mobile: 33573876933 Email : leonardobellini@gmail.com Blog : http://www.digitalmarketinglab.it Brand site : www.dml.it Twitter : twitter.com/dmlab LinkedIn : www.linkedin.com/in/leonardobellini

    ×