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

4,714 views
4,623 views

Published on

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

No Downloads
Views
Total views
4,714
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
209
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

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

×