Sistemi di navigazione AA 2004/05Sistemi multimediali Navigazione 2 Disegnare la navigazione La...

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


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


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


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)


6

Navigazione e links


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


8


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


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.


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


12


13


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


15

Simulazione di navigazione

Sezione 1

Sezione 2

Sezione 3

Menù principale: accesso in profondità

Main


16


Argomento 1

Argomento 2

Argomento 3

Accesso in profondità e indietro al menù principale

Sezione 1


17


Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore

Argomento 1


18



Argomento 2


19



Argomento 3


20


21


22


23


24


25


26


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.


28

Accesso diretto - 2

Leonardo

scrittoreingegnerepittore


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


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


31


32


33


34

Tipi di accesso


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


38

Bars & menus


39

Pie’ di pagina

Intestazione di Virgilio


40


41


42


43


44

Linee temporali


46


47


48


49


50


51


52


53

Usabilità


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


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


57

Conflitto

Conflitto nel controllo tra operazioni simili

Argomento 2


58

Messaggi ambigui


59


60

Controlli ridondanti


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

http://www.useit.com/alertbox/

http://www.useit.com/alertbox/


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


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.


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


65


66

Funzionalità


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


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.


70

Esempio di errore


71

Esempio ripensato


72

ambiguità

Coinvolgimento


74


75


76


77

Critica


79

Navigazione poco chiara


80


81


82


83

Sistemi di navigazione AA 2004/05Sistemi multimediali Navigazione 2 Disegnare la navigazione La...

Documents

Transcript of Sistemi di navigazione AA 2004/05Sistemi multimediali Navigazione 2 Disegnare la navigazione La...