Sistemi di navigazione
AA 2004/05 Sistemi multimedialiNavigazione
2
Disegnare la navigazione• La parte più consistente dell’interazione.• La navigazione esplicita la struttura
gerarchica dell’informazione• Partire dal flowchart
• Contestualizza l’informazione• Favorisce la conoscenza per associazione
• Fornisce flessibilità nell’interazione• Definire cammini di accesso aggiuntivi
• Il problema è bilanciare la flessibilità di movimento con il pericolo di sovraccaricare l’utente con troppe opzioni
AA 2004/05 Sistemi multimedialiNavigazione
3
Costruire il contesto
• Mancanza degli indizi tipici del mondo fisico
• Costruire appropriati Voi siete qui• Ricordarsi che tramite motori di ricerca
o accessi diretti a pagine la Home page può essere non vista• Tutte le pagine interne devono includere il
nome dell’organizzazione e i rimandi
AA 2004/05 Sistemi multimedialiNavigazione
4
Navigazione tramite browser
• Non dimenticarsi dell’ambiente in cui è inserito il sistema• Aprire un URL direttamente• Funzioni Back e Forward del browser• Funzione Storia• Funzione Bookmark• Codice colore del link visitati e non• URL di destinazione di un link
AA 2004/05 Sistemi multimedialiNavigazione
5
Sovrascrivere le funzionalità
• Riduce l’usabilità a favore dell’estetica• Modificare o eliminare il codice colore dei
link visitati e non• Considerare il colore di default e modificarlo se
necessario richiamandolo
• Eliminare la vista prospettica• Uso di mappe cliccabili (lato server)• Meglio sistemi grafici (lato client)
AA 2004/05 Sistemi multimedialiNavigazione
6
Navigazione e links
AA 2004/05 Sistemi multimedialiNavigazione
7
• Il bottone Back del browser effettua un rimando relativo all’utente
• Per sfogliare le pagine occorrono altri strumenti di navigazione• bottoni
Link statici e relativi
AA 2004/05 Sistemi multimedialiNavigazione
8
AA 2004/05 Sistemi multimedialiNavigazione
9
Aumentare la flessibilità
• La gerarchia del contentuo può essere limitante per la navigazione• Confrontate il sistema di navigazione del
file system o dei sistemi Gopher• Spostamenti solo in profondità nella gerarchia e
all’indietro
• Con gli ipertesti• Da qualunque punto si può raggiungere ogni
altro punto
AA 2004/05 Sistemi multimedialiNavigazione
10
Principi di base
• Nel definire i cammini di accesso, oltre ai link diretti della struttura gerarchica del contenuto:• Minimo cammino tra due punti.• Minima profondità per raggiungere i livelli.• Minima ridondanza: evitare cammini
multipli per raggiungere le stesse pagine, causa confusione.
AA 2004/05 Sistemi multimedialiNavigazione
11
Tipi di sistemi di navigazione• Navigazione gerarchica
• La più importante• Le opzioni principali ad ogni pagina si appoggiano sulla struttura
gerarchica definita nel flowchart
• Navigazione globale• Fornisce accessi laterali
• Spesso fornita da menù grafici a barra
• Navigazione locale• Individuare sotto capitoli consistenti
• Complementa il sistema di navigazione globale
• Navigazione ad hoc• Link embedded nel testo
AA 2004/05 Sistemi multimedialiNavigazione
12
AA 2004/05 Sistemi multimedialiNavigazione
13
AA 2004/05 Sistemi multimedialiNavigazione
14
Navigazione gerarchica
Main
Sez 3Sez 2Sez 1
Arg 1 Arg 3Arg 2
Il flowchart mostra la relazione gerarchica tra livelli ma non gli accessi diretti
AA 2004/05 Sistemi multimedialiNavigazione
15
Simulazione di navigazione
Sezione 1
Sezione 2
Sezione 3
Menù principale: accesso in profondità
Main
AA 2004/05 Sistemi multimedialiNavigazione
16
Simulazione di navigazione
Argomento 1
Argomento 2
Argomento 3
Accesso in profondità e indietro al menù principale
Sezione 1
AA 2004/05 Sistemi multimedialiNavigazione
17
Simulazione di navigazione
Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore
Argomento 1
AA 2004/05 Sistemi multimedialiNavigazione
18
Simulazione di navigazione
Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore
Argomento 2
AA 2004/05 Sistemi multimedialiNavigazione
19
Simulazione di navigazione
Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore
Argomento 3
AA 2004/05 Sistemi multimedialiNavigazione
20
AA 2004/05 Sistemi multimedialiNavigazione
21
AA 2004/05 Sistemi multimedialiNavigazione
22
AA 2004/05 Sistemi multimedialiNavigazione
23
AA 2004/05 Sistemi multimedialiNavigazione
24
AA 2004/05 Sistemi multimedialiNavigazione
25
AA 2004/05 Sistemi multimedialiNavigazione
26
AA 2004/05 Sistemi multimedialiNavigazione
27
Accesso diretto
• Fornire il cammino più semplice tra due punti, minimizzando il numero di passi, ma senza introdurre disorientamento.
• Il contenuto può suggerire un punto di vista.
• Metodi per accesso diretto:• Menù, liste, linee dei tempi, mappe di
immagini, bottone, icone.
AA 2004/05 Sistemi multimedialiNavigazione
28
Accesso diretto - 2
Leonardo
scrittoreingegnerepittore
AA 2004/05 Sistemi multimedialiNavigazione
29
Livelli di accesso
• Accesso ad un nuovo argomento• Può provocare un forte cambiamento di scena
• Accesso nell’argomento• Il cambiamento deve essere subdolo. Il nuovo
materiale deve essere portato nell’immagine e l’utente deve sentirsi in controllo
• Se il cambiamento è grande allora è meglio far risalire e poi ridiscendere i livelli
AA 2004/05 Sistemi multimedialiNavigazione
30
Il costo di un link
• Aumentare i link introduce flessibilità
• Ciascun link ha un costo in termini di design• Se il link manda a una nuova locazione,
occorre ridefinire il controllo in modo da consentire il rientro
• Se il link manda ad altro argomento può essere necessario ridefinirne il design
AA 2004/05 Sistemi multimedialiNavigazione
31
AA 2004/05 Sistemi multimedialiNavigazione
32
AA 2004/05 Sistemi multimedialiNavigazione
33
AA 2004/05 Sistemi multimedialiNavigazione
34
Tipi di accesso
AA 2004/05 Sistemi multimedialiNavigazione
36
Tipi di accesso
• I metodi di accesso suggeriscono un punto di vista, come già l’organizzazione del contenuto
• In funzione del tipo di informazione e di enfasi:• Menù, liste, barre di bottoni e icone• Immagini sensibili• Linee temporali• Scale
Menu e barre
AA 2004/05 Sistemi multimedialiNavigazione
38
Bars & menus
AA 2004/05 Sistemi multimedialiNavigazione
39
Pie’ di pagina
Intestazione di Virgilio
AA 2004/05 Sistemi multimedialiNavigazione
40
AA 2004/05 Sistemi multimedialiNavigazione
41
AA 2004/05 Sistemi multimedialiNavigazione
42
AA 2004/05 Sistemi multimedialiNavigazione
43
AA 2004/05 Sistemi multimedialiNavigazione
44
Linee temporali
AA 2004/05 Sistemi multimedialiNavigazione
46
AA 2004/05 Sistemi multimedialiNavigazione
47
AA 2004/05 Sistemi multimedialiNavigazione
48
AA 2004/05 Sistemi multimedialiNavigazione
49
AA 2004/05 Sistemi multimedialiNavigazione
50
AA 2004/05 Sistemi multimedialiNavigazione
51
AA 2004/05 Sistemi multimedialiNavigazione
52
AA 2004/05 Sistemi multimedialiNavigazione
53
Usabilità
AA 2004/05 Sistemi multimedialiNavigazione
55
Usabilità
• Evitare conflitti nel controllo• Evitare messaggi oscuri (tipo: avete raggiunto
l’applicazione anonimo)
• Redifinizioni di messaggi di interfaccia standard
• Eccessi di strumenti di controllo
Non create il problema di dover imparare ad usare il prodotto
AA 2004/05 Sistemi multimedialiNavigazione
56
Un processo evolutivo• Un’interfaccia è intuitiva solo se consente quello
che l’utente si aspetta• E perciò solo se il designer è stato in grado di
anticipare
• Un’interfaccia intuitiva è frutto di un processo di ridefinizione laborioso• L’interfaccia deve comunicare l’organizzazione del
contenuto• E deve corrispondere alle aspettative dell’utenza
AA 2004/05 Sistemi multimedialiNavigazione
57
Conflitto
Conflitto nel controllo tra operazioni simili
Argomento 2
AA 2004/05 Sistemi multimedialiNavigazione
58
Messaggi ambigui
AA 2004/05 Sistemi multimedialiNavigazione
59
AA 2004/05 Sistemi multimedialiNavigazione
60
Controlli ridondanti
AA 2004/05 Sistemi multimedialiNavigazione
61
Usabilità: il brutto
Secondo Jakob Nielsen in Current Issues in Web Usability
• http://www.useit.com/alertbox/
• 90% dei siti commerciali insufficiente usabilità:• Tempo di scaricamento• Autoreferenziali e non informativi• Povera struttura• Povera navigabilità• Stile di narrazione per carta stampata più che per
video
AA 2004/05 Sistemi multimedialiNavigazione
62
Tempi di accesso
Tempi di download in secondi
Modem 10k 20k 30k 50k
56K 2-3 4-6 6-9 10-15
28.8K 3-5 6-10 9-15 15-25
Usare un approccio minimalista,progettando pagine leggere
fra 10K e 50K
AA 2004/05 Sistemi multimedialiNavigazione
63
Usabilità: il bello
• L’utenza va nel 10% dei siti usabili.
• L’utenza non sa quanto meglio potrebbe essere.
• Quando il web funziona, FUNZIONAAA.
AA 2004/05 Sistemi multimedialiNavigazione
64
Frustrazione nell’e-com
• 75% abbandona senza comperare. Bizrate.com
• 27% abbandona alla vista della pagina di pagamento. Forrester Research
• Informazioni non complete • Es. il tempo di consegna
AA 2004/05 Sistemi multimedialiNavigazione
65
AA 2004/05 Sistemi multimedialiNavigazione
66
Funzionalità
AA 2004/05 Sistemi multimedialiNavigazione
68
Funzionalità
• Il controllo dell’interazione• Obiettivi specifici di ciascuno schermo, ma anche
la funzionalità globale data dall’integrazione.
• La gestione delle eccezioni• Nessun insieme di dati corrisponde ad una
struttura perfettamente.
• Assicurare la consistenza• Contribuisce molto all’apprendimento
dell’interfaccia• Ad esempio: il testo accompagnato dall’audio in
una pagina, crea uguale aspettativa su tutte
AA 2004/05 Sistemi multimedialiNavigazione
69
Funzionalità• Gestire le interdipendenze
• Vedere il prodotto in modo globale oltre che locale in ogni pagina
• Problema se le dipendenze sono influenzate dall’ordine della visita
• Disorientamento sullo stato in cui si è• Ad esempio: evidenziare nelle bottoniere la posizione
attuale e le scelte alternative.
• Confusione sulla funzione • Ad esempio dove portano i bottoni.
• Controllo dei media• Inizio, fine, come si controlla audio, video e testo.
AA 2004/05 Sistemi multimedialiNavigazione
70
Esempio di errore
AA 2004/05 Sistemi multimedialiNavigazione
71
Esempio ripensato
AA 2004/05 Sistemi multimedialiNavigazione
72
ambiguità
Coinvolgimento
AA 2004/05 Sistemi multimedialiNavigazione
74
AA 2004/05 Sistemi multimedialiNavigazione
75
AA 2004/05 Sistemi multimedialiNavigazione
76
AA 2004/05 Sistemi multimedialiNavigazione
77
Critica
AA 2004/05 Sistemi multimedialiNavigazione
79
Navigazione poco chiara
AA 2004/05 Sistemi multimedialiNavigazione
80
AA 2004/05 Sistemi multimedialiNavigazione
81
AA 2004/05 Sistemi multimedialiNavigazione
82
AA 2004/05 Sistemi multimedialiNavigazione
83