Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,954 views

Published on

Published in: Technology
  • Be the first to comment

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>

×