Sistemi di navigazione Disegnare la navigazione La parte

Sistemi di navigazione

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 2 Sistemi multimediali Navigazione

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 3 Sistemi multimediali Navigazione

Navigazione tramite browser • Non dimenticarsi dell’ambiente in cui è inserito il sistema • • • AA 2004/05 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 4 Sistemi multimediali Navigazione

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 5 Sistemi multimediali Navigazione

Navigazione e links AA 2004/05 6 Sistemi multimediali Navigazione

Link statici e relativi • Il bottone Back del browser effettua un rimando relativo all’utente • Per sfogliare le pagine occorrono altri strumenti di navigazione • bottoni AA 2004/05 7 Sistemi multimediali Navigazione

AA 2004/05 8 Sistemi multimediali Navigazione

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 9 Sistemi multimediali Navigazione

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 10 Sistemi multimediali Navigazione

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 11 Sistemi multimediali Navigazione

AA 2004/05 12 Sistemi multimediali Navigazione

AA 2004/05 13 Sistemi multimediali Navigazione

Navigazione gerarchica Main Sez 2 Sez 1 Arg 2 Sez 3 Arg 3 Il flowchart mostra la relazione gerarchica tra livelli ma non gli accessi diretti AA 2004/05 14 Sistemi multimediali Navigazione

Simulazione di navigazione Main Sezione 1 Sezione 2 Sezione 3 Menù principale: accesso in profondità AA 2004/05 15 Sistemi multimediali Navigazione

Simulazione di navigazione Sezione 1 Argomento 2 Argomento 3 Accesso in profondità e indietro al menù principale AA 2004/05 16 Sistemi multimediali Navigazione

Simulazione di navigazione Argomento 1 Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore AA 2004/05 17 Sistemi multimediali Navigazione

Simulazione di navigazione Argomento 2 Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore AA 2004/05 18 Sistemi multimediali Navigazione

Simulazione di navigazione Argomento 3 Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore AA 2004/05 19 Sistemi multimediali Navigazione

AA 2004/05 20 Sistemi multimediali Navigazione

AA 2004/05 21 Sistemi multimediali Navigazione

AA 2004/05 22 Sistemi multimediali Navigazione

AA 2004/05 23 Sistemi multimediali Navigazione

AA 2004/05 24 Sistemi multimediali Navigazione

AA 2004/05 25 Sistemi multimediali Navigazione

AA 2004/05 26 Sistemi multimediali Navigazione

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 27 Sistemi multimediali Navigazione

Accesso diretto - 2 Leonardo pittore AA 2004/05 ingegnere 28 scrittore Sistemi multimediali Navigazione

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 29 Sistemi multimediali Navigazione

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 30 Sistemi multimediali Navigazione

AA 2004/05 31 Sistemi multimediali Navigazione

AA 2004/05 32 Sistemi multimediali Navigazione

AA 2004/05 33 Sistemi multimediali Navigazione

AA 2004/05 34 Sistemi multimediali Navigazione

Tipi di accesso AA 2004/05 Sistemi multimediali Navigazione

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: • • AA 2004/05 Menù, liste, barre di bottoni e icone Immagini sensibili Linee temporali Scale 36 Sistemi multimediali Navigazione

Menu e barre AA 2004/05 Sistemi multimediali Navigazione

Bars & menus AA 2004/05 38 Sistemi multimediali Navigazione

Intestazione di Virgilio Pie’ di pagina AA 2004/05 39 Sistemi multimediali Navigazione

AA 2004/05 40 Sistemi multimediali Navigazione

AA 2004/05 41 Sistemi multimediali Navigazione

AA 2004/05 42 Sistemi multimediali Navigazione

AA 2004/05 43 Sistemi multimediali Navigazione

AA 2004/05 44 Sistemi multimediali Navigazione

Linee temporali AA 2004/05 Sistemi multimediali Navigazione

AA 2004/05 46 Sistemi multimediali Navigazione

AA 2004/05 47 Sistemi multimediali Navigazione

AA 2004/05 48 Sistemi multimediali Navigazione

AA 2004/05 49 Sistemi multimediali Navigazione

AA 2004/05 50 Sistemi multimediali Navigazione

AA 2004/05 51 Sistemi multimediali Navigazione

AA 2004/05 52 Sistemi multimediali Navigazione

AA 2004/05 53 Sistemi multimediali Navigazione

Usabilità AA 2004/05 Sistemi multimediali Navigazione

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 55 Sistemi multimediali Navigazione

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 56 Sistemi multimediali Navigazione

Conflitto Argomento 2 Conflitto nel controllo tra operazioni simili AA 2004/05 57 Sistemi multimediali Navigazione

Messaggi ambigui AA 2004/05 58 Sistemi multimediali Navigazione

AA 2004/05 59 Sistemi multimediali Navigazione

Controlli ridondanti AA 2004/05 60 Sistemi multimediali Navigazione

Usabilità: il brutto Secondo Jakob Nielsen in Current Issues in Web Usability • http: //www. useit. com/alertbox/ • 90% dei siti commerciali insufficiente usabilità: • • • AA 2004/05 Tempo di scaricamento Autoreferenziali e non informativi Povera struttura Povera navigabilità Stile di narrazione per carta stampata più che per video 61 Sistemi multimediali Navigazione

Tempi di accesso Modem 56 K 28. 8 K Tempi di download in secondi 10 k 20 k 30 k 50 k 2 -3 3 -5 4 -6 6 -10 6 -9 9 -15 10 -15 15 -25 Usare un approccio minimalista, progettando pagine leggere fra 10 K e 50 K AA 2004/05 62 Sistemi multimediali Navigazione

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 63 Sistemi multimediali Navigazione

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 64 Sistemi multimediali Navigazione

AA 2004/05 65 Sistemi multimediali Navigazione

AA 2004/05 66 Sistemi multimediali Navigazione

Funzionalità AA 2004/05 Sistemi multimediali Navigazione

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 68 Sistemi multimediali Navigazione

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 Sistemi e testo. 69 multimediali AA 2004/05 Navigazione

Esempio di errore AA 2004/05 70 Sistemi multimediali Navigazione

Esempio ripensato AA 2004/05 71 Sistemi multimediali Navigazione

ambiguità AA 2004/05 72 Sistemi multimediali Navigazione

Coinvolgimento AA 2004/05 Sistemi multimediali Navigazione

AA 2004/05 74 Sistemi multimediali Navigazione

AA 2004/05 75 Sistemi multimediali Navigazione

AA 2004/05 76 Sistemi multimediali Navigazione

AA 2004/05 77 Sistemi multimediali Navigazione

Critica AA 2004/05 Sistemi multimediali Navigazione

Navigazione poco chiara AA 2004/05 79 Sistemi multimediali Navigazione

AA 2004/05 80 Sistemi multimediali Navigazione

AA 2004/05 81 Sistemi multimediali Navigazione

AA 2004/05 82 Sistemi multimediali Navigazione

AA 2004/05 83 Sistemi multimediali Navigazione