Your SlideShare is downloading. ×
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
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

Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web

4,296

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,296
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
205
Comments
0
Likes
3
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. elementi di architettura dell’informazione, usabilità e scrittura per il web Alberto Rota La Comunicazione tra enti pubblici tramite strumenti di informatica individuale e di rete Centro di Formazione Professionale Pavia - gennaio 2006
  • 2. aspetti del world wide web
    • il web è un sistema distribuito (world wide) di documenti e risorse accessibili pubblicamente tramite protocollo http
    • si combinano quindi:
      • aspetti tecnologici
      • aspetti comunicativi e sociali
  • 3. aspetti e vincoli tecnologici
    • sono principalmente:
      • limiti di banda (possibilità di trasmettere contemporaneamenti grandi quantità di dati;
      • limiti in velocità di connessione e capacità di download;
      • scarso (nessun) controllo di come l’utente vedrà la pagina : i dispositivi possono essere:
        • browser di pc (ma che browser? che monitor?)
        • browser di dispositivi portatili
        • screenreader e tecnologie assistive
  • 4. aspetti comunicativi
    • il web è anche un mezzo di comunicazione specifico con caratteristiche diverse dai media tradizionali (stampa, radio, tv…):
      • ipertestualità
      • interattività
      • multimedialità
  • 5. testi e ipertesti
      • nel testo tradizionale l’ordine di lettura è sequenziale
      • nell’ipertesto non c’è sequenza o ordine: i percorsi possono essere infiniti ….
  • 6. testi e ipertesti (2)
    • l’ipertestualità completa è un’astrazione: nella pratica gli schemi sono più gerarchizzati ma non comunque rigidamente vincolanti
    home page secondo livello primo livello Lo schema “ad albero” di un sito web con home page e due livelli di organizzazione dei contenuti
  • 7. testi e ipertesti (3) Immagine tratta da Rosenfield, Morville, Information Architecture for the World Wide Web , O’Really, 2002 (1988)
  • 8. il web non è un libro…
    • l’ordine di lettura in un libro è fondamentalmente sequenziale (se non è un dizionario o un elenco del telefono)…
    • il formato di un libro è noto a priori
    • un libro non è aggiornabile (al massimo si ristampa), un sito web è un’opera “aperta”
    • la lettura su carta è meno faticosa
  • 9. il web non è un giornale...
    • nel giornale c’è una forma debole di intestualità (“continua dalla prima”, “segue a pagina..”)
    • ma l’informazione non è strutturata
    • il formato è noto a priori
    • la lettura su carta è meno faticosa
  • 10. il web non è la tv...
    • a differenza della tv (con cui condivide la multimedialità) il web permette molta più libertà:
      • è un medium “on demand”, non broadcast
      • dall’altra parte non c’è uno spettatore passivo ma un utente attivo
      • è un medium interattivo (non solo col telecomando…)
  • 11. il web è...
    • una fonte di informazioni e di contenuti strutturati ;
    • una fonte di servizi realizzati da applicazioni di vario tipo (funzioni di ricerca, servizi al cittadino, e-commerce…)
      • l’utente del web ha bisogno di qualcosa (un’informazione, un servizio, un prodotto): la pagina web è l’ interfaccia attraverso la quale potrà ottenere quello che cerca...
  • 12. elementi di usabilità per il web
    • interfacce e principi di usabilità
    • la user experience
    • misurare l’usabilità
  • 13. esempi di interfaccia
    • esempi cui non facciamo più caso: l’interruttore della luce, il volante dell’automobile
    • l’interfaccia sta tra noi e certi dispositivi per “aiutarci” ad usarli
    • conoscendo un’interfaccia posso astrarre dalle caratteristiche specifiche di un dispositivo
      • volante e leva del cambio sono gli stessi in una 500 e in una ferrari...
  • 14. interfacce
    • l’interfaccia migliore è quella che non si fa notare ( trasparenza )
      • quando abbiamo familiarizzato con un’interfaccia tendiamo a non vederla più, a considerarla come “naturale”
    • è importante insistere su elementi standardizzati e entrati nell’abitudine
  • 15. hci: human-computer interaction
    • l’hci (interazione uomo-macchina) è una disciplina che studia le modalità di interazione tra l’utente e il computer
      • analizza gli aspetti psicologici connessi all’uso dei computer
      • elabora teorie e paradigmi per sviluppare sistemi che facilitino l’interazione con l’utente
  • 16. hci: human-computer interaction (2)
    • ha carattere multidisciplinare perché in essa convergono:
      • informatica e intelligenza artificiale
      • ergonomia
      • psicologia e scienza cognitive
  • 17. hci: i paradigmi
    • anni 50-60
      • nessun paradigma: l’interazione avveniva tramite schede perforate
    • anni 70
      • paradigma della macchina da scrivere : interazione a riga di comando
    • anni 80
      • paradigma della scrivania e delle finestre: nascono le GUI
    • anni 90 e successivi
      • paradigma della naturalezza
  • 18. interfacce e usabilità
    • l’usabilità è quella disciplina (branca dell’ HCI) che studia i meccanismi per valutare e migliorare gli strumenti informatici nella loro interazione con l’utente
    • l’usabilità nel web riguarda la facilità dell’interazione tra utente e sito e la corrispondenza tra design model e user model
    • possiamo vedere il sito web come un ambiente (più o meno familiare, più o meno ostico) in cui l’utente deve muoversi per perseguire i propri scopi
  • 19. cos’è l’usabilità?
      • il "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."
      • norma iso (international standard organization) 9641
  • 20. attributi dell’usabilità (1)
    • secondo il Sun Usability Lab i principali attributi dell’usabilità sarebbero:
      • utilità
        • un sito è usabile se l’utente riesce a comprenderne gli scopi e l’utilità che il sito ha per lui
      • facilità di apprendimento
        • un sito è usabile se le funzionalità che propone sono fruibili con un tempo di apprendimento ragionevole
      • efficienza
        • un sito è usabile se i suoi contenuti sono consultabili in maniera veloce e proficua
  • 21. attributi dell’usabilità (2)
      • facilità di ricordo
        • il funzionamento di un sito deve poter essere ricordato facilmente
      • prevenzione degli errori
        • se gli utenti continuano a commettere errori cercando di compiere delle azioni il sito non è usabile
      • soddisfazione
        • un sito deve poter essere usato senza frustrazione
  • 22. cosa coinvolge l’usabilità
    • all’ usabilità concorrono:
      • la struttura dell’informazione nel sito
      • l’impianto grafico della pagina
      • la chiarezza dei contenuti
  • 23. organizzazione visuale della pagina
    • strumenti:
      • vicinanza :
        • gli elementi spazialmente vicini in una pagina web sono percepiti dall’utente come un’unità di contenuto omogenea (es. Barra di navigazione, menù)
      • somiglianza :
        • gli elementi simili sono percepiti come funzionalmente identici (i link andrebbero formattati allo stesso modo...)
  • 24. coerenza
    • gli elementi di un sito web dovrebbero ripetersi in modo coerente per tutte le pagine
      • es. posizione del logo nell’intestazione, posizione dei menù
    • la gerarchia tra i vari elementi deve sempre essere chiara
      • gli elementi strutturali vanno distinti a colpo d’occhio da quelli specifici della pagina
  • 25. metafore
    • le metafore ricononducono l’ignoto e l’astratto al noto e al concreto: se ben usate possono aiutare il visitatore
    • forniscono una “cornice” concettuale e aiutano l’apprendimento
    • esempi di metafore:
    • rischi: se non vengono comprese creano diffoltà senza dare alcun valore
  • 26. don’t make me think!
      • è il titolo di un famoso libro di Steve Krug e si riferisce al fatto che l’utente del web non vuole perdere tempo a imparare complesse modalità di interazione ma
        • ha fretta
        • vuole ottenere al più presto quello che cerca
        • meglio aderire alle convenzioni e agli standard...
  • 27. struttura-tipo
    • la struttura cui siamo abituati navigando è di questo tipo:
    header contenuti navigazione
  • 28. struttura-tipo (2) header contenuti navigazione
  • 29. tipi di pagine
    • si distinguono normalmente tre tipi di pagine (per funzione):
      • home page : è (in genere) il punto di ingresso e presentazione del sito, dovrebbe essere graficamente più curata ma chiara
      • pagine interne : presentano i contenuti effettivi
      • pagine di transazione : invitano l’utente ad agire (es. compilazione di form) e devono essere semplici
      • le pagine hanno caratteristiche diverse ma dovrebbero mantenere una certa omogeneità stilistica
  • 30. home page
  • 31. pagina interna
  • 32. home page
  • 33. pagina di transazione
  • 34. usabilità dei link
    • i link sono la caratteristica principale del web e dovrebbero essere sempre chiaramente riconoscibili
      • non solo per via della manina....
    • soprattutto i link interni al testo:
      • andrebbero sottolineati
      • nessuna altra parte di testo dovrebbe avere caratteristiche che possono generare confusione
  • 35. usabilità dei link (2)
    • il loro testo dovrebbe essere
      • breve
      • indicativo
      • non deve ripetere l’url, non deve essere del tipo “clicca qui”: casomai: “leggi il corriere ”
    • andrebbe sempre conservata la distinzione grafica tra link visitati e link non ancora visitati
      • servono a chiarire in quali pagine abbiamo già navigato
  • 36.
    • usare sempre l’attributo title nei link
      • <a href=“ http://www.corriere.it ” title=“ leggi il corriere ”> Corriere della Sera </a>
    • genera: Corriere della sera
    usabilità dei link (3) marcatore dei link indirizzo il title è la casella di testo che compare quando il mouse si sofferma sopra il link testo del link
  • 37. errori da non fare
    • incoerenza nella disposizione/presentazione degli elementi strutturali
    • testi non chiari, etichette non rappresentative
    • link poco evidenti
    • sovraffollamento di formati
    • materiali troppo pesanti da scaricare
    Jacob Nielsen (www.useit.com), guru dell’usabilità, non approverebbe...
  • 38. elementi di usabilità per il web
    • interfacce e principi di usabilità
    • la user experience
    • misurare l’usabilità
  • 39. la user experience
    • occorre adottare il più possibile il punto di vista dell’utente
    • la user experience è l’esperienza di navigazione che l’utente compie sul sito. si compone di
      • comportamenti
      • risultati
      • sensazioni
  • 40. la user experience: emotività / razionalità
    • ogni sito cerca di “pilotare” l’esperienza dell’utente
    • siti diversi propongono ambienti ed esperienze diverse, puntando più sull’emotività o sulla razionalità
      • ciò comporta anche distinzioni di “genere” tra siti di entertainment, siti di e-commerce, siti informativi o didattici...
  • 41. elementi di usabilità per il web
    • interfacce e principi di usabilità
    • la user experience
    • misurare l’usabilità
  • 42. i test di usabilità
    • sono un insieme di metodologie e tecniche basate sullo studio di utenti reali alle prese con prodotti reali
    • scopi:
      • individuare i problemi
      • capire come l’utente ragiona utilizzando l’interfaccia
  • 43. i test di usabilità (2)
    • occorre effettuare un campione di utenti rappresentativo (variabili: competenze informatiche, titolo di studio…)
    • gli utenti vengono invitati a svolgere una serie di compiti individuali in maniera sequenziale
    • tecnica del thinking aloud
        • un esempio:
        • user testing del sito del tg2
  • 44. elementi di architettura dell’informazione per il web
    • cos’è l’architettura dell’informazione
    • schemi di organizzazione dell’informazione
    • cms, dati e metadati
    • sistemi di navigazione
    • labeling
  • 45. l’architettura dell’informazione...
    • studia i metodi di organizzazione (logica e razionale) dell’informazione
      • favorire il reperimento dell’informazione
      • combattere il sovraccarico (overload) informativo, che forma rumore per la comunicazione
  • 46. l’architettura dell’informazione (2)
    • comprende
      • schemi e strutture di organizzazione dell’informazione
      • navigazione
      • etichettatura
      • metadati e sistemi di reperimento dei contenuti
  • 47. catalogazione e reperibilità
    • la catalogazione dell’informazione è indispensabile per garantirne la reperibilità
    • i primi metodi di catalogazione risalgono al III secolo a. C. con Zenodototo di Efeso (divisione in libri dell’opera di Omero) e Callimaco (i Pinakes in 120 libri con catalogazione per generi ed autori)
  • 48. la catalogazione dell’informazione
    • tre metodi:
      • il sistema decimale Dewey
      • il sistema della biblioteca del Congresso
      • Ranganathan e la classificazione a faccette
  • 49. dati e metadati
    • i metadati sono dati che parlano di altri dati
      • es. un articolo può essere contraddistinto dai seguenti metadati:
      • argomento
      • titolo
      • breve descrizione
      • parole chiave
  • 50. dati e metadati (2)
    • i metadati sono utilissimi per ritrovare l’informazione
    • rappresentano delle chiavi di relazione tra contenuti, permettendo:
      • il filtraggio dei risultati di ricerca per rilevanza
      • l’ordinamento
      • la segnalazione di contenuti correlati
  • 51. elementi di architettura dell’informazione per il web
    • cos’è l’architettura dell’informazione
    • schemi di organizzazione dell’informazione
    • cms, dati e metadati
    • sistemi di navigazione
    • labeling
  • 52. sistemi, schemi e struttura di organizzazione
    • schemi di organizzazione: il modo in cui il contenuto è classificato e organizzato
      • es. l’ordine alfabetico dell’elenco telefonico
    • struttura di organizzazione
      • es. l’ipertesto
    • sistema di organizzazione = schema + struttura
  • 53. schemi di organizzazione dell’informazione
    • si dividono in:
      • schemi percettivi
      • schemi esatti
      • schemi ambigui
      • schemi ibridi
  • 54. schemi percettivi
    • il criterio non è logico ma visuale , e si basa sulla vicinanza spaziale di informazioni simili
    • non dà nessun aiuto per la catalogazione effettiva e non favorisce il reperimento dell’informazione
  • 55. schemi esatti
    • detti anche indici, sono univoci e molto precisi ma occorre sapere esattamente che cosa cercare
    • si dividono in:
      • schemi alfabetici
      • schemi cronologici
      • schemi geografici
      • le categorie in questi schemi sono mutuamente esclusive
  • 56. schemi ambigui
    • dividono i contenuti in categorie meno precise degli schemi esatti ma sono più utile se non si sa esattamente che cosa cercare
    • tipici schemi ambigui:
      • per argomento (topical)
      • per utenza (audience-specific)
      • per scopo (task oriented)
      • per metafore
  • 57. schemi ibridi
    • mischiano gli schemi precedentemente visti
    • assolutamente da evitare perché disorientano
  • 58. card sorting
    • il card sorting è un metodo di classificazione e ordinamento dell’informazione per il web ideato da Jackob Nielsen
    • consiste nel dividere le informazioni in unità di contenuto, e chiedere a diversi utenti di ordinarle
    • l’ordinamento complessivo terrà così conto degli schemi reali degli utenti
  • 59. multi-categorizzazione
    • il reperimento delle informazioni sarà tanto più facile quante più categorie e schemi entreranno in gioco
    • la combinazione (non l’ibridazione) di schemi diversi è la situazione ideale
      • permette di ritrovare un certo contenuto in base a parametri diversi (cronologia, alfabeto, scopo...)
  • 60. l’albero del sito
    • la struttura di organizzazione di un sito web si rappresenta con un albero rovesciato:
      • la radice è l’home page
      • le varie modalità di navigazione sono i rami
      • le singole unità di contenuto sono le foglie
    • foglie “notizia” e foglie “prodotto”
  • 61. alberi profondi, alberi piatti Albero profondo: la maggior parte dell’informazione è in profondità Albero piatto: la maggior parte dell’informazione è in superficie home page home page
  • 62. elementi di architettura dell’informazione per il web
    • cos’è l’architettura dell’informazione
    • schemi di organizzazione dell’informazione
    • cms, dati e metadati
    • sistemi di navigazione
    • labeling
  • 63. content management sistems
    • i cms sono software per la gestione di portali dinamici
      • contengono metodi per la categorizzazione dei contenuti tramite metadati
      • permettono la “redazione diffusa” e il lavoro collaborativo gestendo il workflow con utenti e permessi
  • 64. cms e metadati
  • 65. tipi di metadati
    • metadati di categoria (argomento)
    • metadati di tempo (data di scrittura/pubblicazione/scadenza)
    • metadati di lingua (italiano/inglese)
    • metadati redazionali (titolo/sottotitolo/abstract)
    • metadati di authoring (autore/editor/responsabile)
  • 66. thesauri
    • un thesaurus è un insieme chiuso di parole legate assieme da relazioni semantiche .
    • le relazioni possono essere:
      • di equivalenza (sinonimia)
      • gerarchiche:
        • classe - specie (felino/gatto)
        • parte - tutto (volante/automobile)
        • esemplificativa (primi piatti/lasagne al forno)
        • associativa (tarallucci/vin santo)
  • 67. elementi di architettura dell’informazione per il web
    • cos’è l’architettura dell’informazione
    • schemi di organizzazione dell’informazione
    • cms, dati e metadati
    • sistemi di navigazione
    • labeling
  • 68. tipi di link
    • Nielsen divide i link in:
      • strutturali
        • es. barre e menù di navigazione: connettono parti della struttura del sito
      • topici
        • inseriti nel testo, riguardano l’argomento (topic) trattato nella foglia del contenuto
      • associativi
        • in posizione diversa, sono gli “argomenti correlati”
  • 69. global, local, contextual navigation
    • Rosenfield e Morville dividono
      • global navigation
        • sempre presente in tutte le sezioni
      • local navigation
        • la navigazione interna ad una sezione
      • contextual navigation
        • i link interni al testo
      • supplemental navigation
        • mappe del sito, indici, help e tour guidati
  • 70. global navigation
  • 71. local navigation
  • 72. supplemental navigation systems: index nell’indice i contenuti del sito sono disposti in ordine alfabetico
  • 73. supplemental navigation systems: sitemap nella mappa del sito i contenuti sono disposti per sezione tematica
  • 74. supplemental navigation systems: guides nella visita guidata il sito è presentato nelle sue componenti e funzionalità
  • 75. scopi della navigazione
    • presentare una classificazione dei contenuti del sito (le sezioni)
    • permettere ai visitatori di sapere dove sono
    • permettere ai visitatori di muoversi razionalmente e comodamente tra i contenuti del sito
    • dare riferimenti/suggerimenti/consigli su argomenti che si ritengono di interesse
  • 76. bread crumbs
    • le “briciole di pane” (Nielsen) sono il percorso progressivo di navigazione compiuto dall’utente per arrivare al contenuto
    • permettono di capire immediatamente dove ci si trova
    percorso compiuto dall’utente
  • 77. il test del portabagagli
    • un sito usabile dovrebbe passare quello che Krug chiama “il test del portabagagli”
    • a prima vista e senza riferimenti pregressi un utente dovrebbe immediatamente capire:
      • in che tipo di sito è capitato
      • in che punto della struttura si trova
      • quali altri punti potrebbe visitare
  • 78. strumenti di navigazione logo navigazione locale navigazione globale utilità e ricerca link associativi
  • 79. elementi di architettura dell’informazione per il web
    • cos’è l’architettura dell’informazione
    • schemi di organizzazione dell’informazione
    • cms, dati e metadati
    • sistemi di navigazione
    • labeling
  • 80. labels
    • sono le “etichette” testuali che contraddistinguono parti importanti delle pagine, come sistemi di navigazione, voci di menù
    • le voci di menù
      • devono essere particolarmente chiare
      • vanno usate con coerenza (solo nomi, solo verbi..)
      • non devono cambiare da una pagina all’altra
      • dovrebbero essere mutuamente esclusive
  • 81. labels (2)
    • le etichette dei titoli
      • devono essere sintetiche
      • devono essere rappresentative del contenuto
    • le etichette dei link
      • devono essere sintetiche e rappresentative
      • non devono essere autoreferenziali
  • 82. elementi di scrittura per il web
    • la scrittura per il web
    • consigli di formattazione
  • 83. la “lettura” sul web
    • la lettura sullo schermo è più lenta del 25% che sulla carta
    • da ricerche di Nielsen risulta che gli utenti del web non leggano ma scansionino rapidamente la pagina alla ricerca del contenuto di interesse
      • conseguenze sullo stile da adottare
      • conseguenze sulla formattazione
  • 84. regole di base
    • la regola più importante: concisione !
    • sono assolutamente adatte al web le massime di Grice:
      • massima della quantità
        • “ scrivi l’informazione necessaria, né di più, né di meno”
      • massima della qualità
        • “ scrivi solo ciò di cui hai le prove”
      • massima della relazione
        • “ scrivi solo ciò che è pertinente”
      • massima del modo
        • “ sii chiaro”
  • 85. la piramide rovesciata
    • gli utenti del web non vogliono perdere tempo: hanno bisogno di capire immediatamente se il testo che hanno di fronte è di interesse oppure no
    • la “piramide rovesciata” (Nielsen) consiste nello scrivere partendo dalle conclusioni ed esponendole in modo conciso
      • i dettagli e le informazioni utili alla spiegazione vanno aggiunti solo in seguito
  • 86. spezzare l’informazione
    • i testi in rete non dovrebbero mai essere troppo lunghi (meglio spezzarli in più testi)
    • occorre spezzare l’informazione in paragrafi che contengano una sola idea, una sola informazione
  • 87. labeling dei link
    • il testo dei link:
      • deve essere breve e chiaro
      • deve essere rappresentativo della destinazione (niente “clicca qui”)
      • non deve essere autoreferenziale (tipo “vai alla pagina...”: tutti sanno che attraverso un link andranno ad un’altra pagina)
  • 88. elementi di scrittura per il web
    • la scrittura per il web
    • consigli di formattazione
  • 89. gli spazi bianchi e i grassetti
    • data l’abitudine di “scansionare” le pagine è molto utile dividere i paragrafi con uno spazio bianco (sullo schermo è meglio dell’indentazione)
    • usare il più possibile gli elenchi
      • puntati: se la sequenza non è importante
      • numerati: se la sequenza è importante
    • evidenziare le parole chiave
      • preferire il grassetto al corsivo
      • non usare sottolineature (caratteristiche dei link)
  • 90. colori e contrasto
    • usare colori standard (possibilmente il nero) ed evitare di usare più di un colore nel testo
    • nero su bianco è la combinazione che assicura il contrasto maggiore e quindi la miglior leggibilità possibile
  • 91. allineamento
    • gli allineamenti disponibili sono:
      • a sinistra
      • al centro
      • a destra
      • giustificato
    • la leggibilità maggiore viene dall’allineamento a sinistra
  • 92. tipografia: bastoni o grazie?
    • Arial , Tahoma , Verdana , Century Gothic
    • Times , Garamond , Palatino Linotype
    carattere a bastoni (sans) carattere graziato (serif)
  • 93. font per il web
    • se sulla carta sono preferibili i caratteri graziati, la lettura su schermo è più agevole con caratteri a bastone
    • il tipo di font dipende dalla macchina client: occorre usare sempre font standard , come
      • Arial
      • Verdana
      • Tahoma
    • evitare di mischiare i font tra loro (soprattutto se si tratta di grazie con grazie e di bastoni con bastoni)

×