elementi di architettura dell'informazione, usabilità e scrittura per il web

elementi di

architettura dell’informazione,usabilità e scrittura per il web

Alberto RotaLa Comunicazione tra enti pubblici tramite strumenti di informatica individuale e di reteCentro di Formazione Professionale Pavia - gennaio 2006

elementi di architettura dell'informazione - alberto rota 2006

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


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


aspetti comunicativi

» il web è anche un mezzo di comunicazione specifico con caratteristiche diverse dai media tradizionali (stampa, radio, tv…):

• ipertestualità• interattività• multimedialità


testi e ipertesti

• nel testo tradizionale l’ordine di lettura è sequenziale

• nell’ipertesto non c’è sequenza o ordine: i percorsi possono essere infiniti….


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


testi e ipertesti (3)

Immagine tratta daRosenfield, Morville,Information Architecturefor the World Wide Web,O’Really, 2002 (1988)


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


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


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…)


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...

elementi diusabilitàper il web

» interfacce e principi di usabilità» la user experience» misurare l’usabilità


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...


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


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


hci: human-computer interaction (2)

» ha carattere multidisciplinare perché in essa convergono:• informatica e intelligenza artificiale• ergonomia• psicologia e scienza cognitive


hci: i paradigmi

» anni 50-60nessun paradigma: l’interazione avveniva tramite schede perforate

» anni 70paradigma della macchina da scrivere: interazione a riga di comando

» anni 80paradigma della scrivania e delle finestre: nascono le GUI

» anni 90 e successiviparadigma della naturalezza


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


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


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 apprendimentoun sito è usabile se le funzionalità che propone sono fruibili con un tempo di apprendimento ragionevole

• efficienzaun sito è usabile se i suoi contenuti sono consultabili in maniera veloce e proficua


attributi dell’usabilità (2)

• facilità di ricordoil funzionamento di un sito deve poter essere ricordato facilmente

• prevenzione degli errorise gli utenti continuano a commettere errori cercando di compiere delle azioni il sito non è usabile

• soddisfazioneun sito deve poter essere usato senza frustrazione


cosa coinvolge l’usabilità

» all’ usabilità concorrono:

• la struttura dell’informazione nel sito • l’impianto grafico della pagina• la chiarezza dei contenuti


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...)


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


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


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...


struttura-tipo

» la struttura cui siamo abituati navigando è di questo tipo:

header

contenuti

navigazione


struttura-tipo (2)

header

contenuti

navigazione


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


home page


pagina interna


home page


pagina di transazione


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


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

http://www.corriere.it/


» 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

http://www.corriere.it/


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...


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


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...


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


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 aloudun esempio:user testing del sito del tg2

http://www.dimi.uniud.it/~giorgio/dida/psw/galleria/05/tonon/relazione_user_testing_Tg2/Introduzione.html

elementi diarchitetturadell’informazioneper il web

» cos’è l’architettura dell’informazione» schemi di organizzazione dell’informazione» cms, dati e metadati» sistemi di navigazione» labeling


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


l’architettura dell’informazione (2)

» comprende• schemi e strutture di organizzazione dell’informazione• navigazione• etichettatura• metadati e sistemi di reperimento dei contenuti


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)


la catalogazione dell’informazione

» tre metodi:• il sistema decimale Dewey• il sistema della biblioteca del Congresso• Ranganathan e la classificazione a faccette


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


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


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 organizzazionees. l’ipertesto

» sistema di organizzazione = schema + struttura


schemi di organizzazione dell’informazione

» si dividono in:• schemi percettivi• schemi esatti• schemi ambigui• schemi ibridi


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


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 geograficile categorie in questi schemi sono mutuamente esclusive


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


schemi ibridi

» mischiano gli schemi precedentemente visti» assolutamente da evitare perché disorientano


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


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...)


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”


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


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


cms e metadati


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)


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)


tipi di link

» Nielsen divide i link in:• strutturali

es. barre e menù di navigazione: connettono parti della struttura del sito

• topiciinseriti nel testo, riguardano l’argomento (topic) trattato nella foglia del contenuto

• associativiin posizione diversa, sono gli “argomenti correlati”


global, local, contextual navigation

» Rosenfield e Morville dividono• global navigation

sempre presente in tutte le sezioni

• local navigationla navigazione interna ad una sezione

• contextual navigationi link interni al testo

• supplemental navigationmappe del sito, indici, help e tour guidati


global navigation


local navigation


supplemental navigation systems: index

nell’indice i contenuti del sito sono disposti in ordine alfabetico


supplemental navigation systems: sitemap

nella mappa del sito i contenuti sono disposti per sezione tematica


supplemental navigation systems: guides

nella visita guidata il sito è presentato nelle sue componenti e funzionalità


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


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


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


strumenti di navigazione

logo

navigazione locale

navigazione globale

utilità e ricerca

link associativi


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


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

elementi discritturaper il web

» la scrittura per il web» consigli di formattazione


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


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”


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


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


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)

elementi discritturaper il web

» la scrittura per il web» consigli di formattazione


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)


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


allineamento

» gli allineamenti disponibili sono:• a sinistra• al centro• a destra• giustificato

» la leggibilità maggiore viene dall’allineamento a sinistra


tipografia: bastoni o grazie?

» Arial, Tahoma, Verdana, Century Gothic» Times, Garamond, Palatino Linotype

carattere a bastoni (sans)

carattere graziato (serif)


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)

elementi di architettura dell'informazione, usabilità e scrittura per il web

Technology