Sistemi multimediali AA 2004/05

Transcript

1 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 2 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 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 3 4 Sovrascrivere le funzionalità e links 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) 5 6 La navigazione 1

2 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 7 8 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 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 Tipi di sistemi di navigazione gerarchica La più importante Le opzioni principali ad ogni pagina si appoggiano sulla struttura gerarchica definita nel flowchart globale Fornisce accessi laterali Spesso fornita da menù grafici a barra locale Individuare sotto capitoli consistenti Complementa il sistema di navigazione globale ad hoc Link embedded nel testo La navigazione 2

3 gerarchica Main Sez 1 Sez 2 Sez 3 Arg 1 Arg 2 Arg 3 Il flowchart mostra la relazione gerarchica tra livelli ma non gli accessi diretti Simulazione di navigazione Simulazione di navigazione Main Sezione 1 Sezione 2 Sezione 3 Sezione 1 Argomento 1 Argomento 2 Argomento 3 Menù principale: accesso in profondità Accesso in profondità e indietro al menù principale Simulazione di navigazione Simulazione di navigazione Argomento 1 Argomento 2 Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore La navigazione 3

4 Simulazione di navigazione Argomento 3 Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore La navigazione 4

5 25 26 Accesso diretto Accesso diretto - 2 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. pittore Leonardo ingegnere scrittore Livelli di accesso Il costo di un link 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 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 La navigazione 5

6 Tipi di accesso 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 36 La navigazione 6

7 Bars & menus Menu e barre 38 Intestazione di Virgilio Pie di pagina La navigazione 7

8 43 44 Linee temporali La navigazione 8

9 Usabilità 53 La navigazione 9

10 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 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 Conflitto Messaggi ambigui Argomento 2 Conflitto nel controllo tra operazioni simili Controlli ridondanti La navigazione 10

11 Usabilità: il brutto Secondo Jakob Nielsen in Current Issues in Web Usability 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 Tempi di accesso Tempi di download in secondi Modem 10k 20k 30k 50k 56K K Usare un approccio minimalista, progettando pagine leggere fra 10K e 50K Usabilità: il bello L utenza va nel 10% dei siti usabili. L utenza non sa quanto meglio potrebbe essere. Quando il web funziona, FUNZIONAAA. 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 La navigazione 11

12 Funzionalità 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 68 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 Esempio di errore Inizio, fine, come si controlla 69 audio, video Sistemi e testo. multimediali 70 Esempio ripensato ambiguità La navigazione 12

13 Coinvolgimento Critica 77 La navigazione 13

14 poco chiara La navigazione 14