Your SlideShare is downloading. ×
0
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Web-usability-Krug
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web-usability-Krug

1,603

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 …

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
1,603
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
66
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 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>
    • 4. SENZA PENSARCI Ecco le novità Ecco le categorie di prodotto Ecco l’area riservata Promozioni Categorie in primo piano
    • 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.. ?
    • 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>
    • 7. Quale box è più chiaro? Jobs Employment opportunities Job- o-Rama Ovvio Richiede riflessione
    • 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
    • 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
    • 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>
    • 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>
    • 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
    • 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>
    • 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>
    • 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>
    • 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)
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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
    • 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>
    • 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>
    • 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>
    • 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>
    • 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
    • 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?
    • 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 >
    • 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
    • 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>
    • 33. Valore e numero dei clic 3 clic spensierati e non ambigui equivalgono ad 1 clic che richiede una riflessione
    • 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!!
    • 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>
    • 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
    • 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>
    • 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….
    • 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>
    • 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>
    • 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>
    • 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
    • 43. Il menu di servizio nel footer utilities corporate
    • 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>
    • 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

    ×