Uploaded on

Lezione sulla Web Usability (parte 2), corso di Web design, Scienze della comunicazione Torino.

Lezione sulla Web Usability (parte 2), corso di Web design, Scienze della comunicazione Torino.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,422
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web usability II Andrea Crevola [email_address] http://webdesign.3juice.com
  • 2. Come ottenere l’usabilità?
    • Gli interventi di usabilità si collocano in tutti i momenti della vita di un sito web, dalla progettazione iniziale alla fase di test conclusiva.
    • Il design dell’interazione può avvalersi di nozioni a diversi livelli di astrazione:
      • Principi di usabilità
      • Linee guida
      • Design Patterns
      • Metodologie di test
  • 3. Linee guida
    • I principi di usabilità rischiano di rimanere concetti aridi se non vengono portati sul piano pratico.
    • I principi formano il background teorico di qualsiasi ragionamento sull’interazione uomo-macchina, ma devono necessariamente essere tradotte in forma applicata perché possa esserne apprezzata l’utilità.
    • La ricerca del settore ha utilizzato con relativo successo la formula della linea guida: una raccomandazione per progettare e realizzare nel modo migliore un artefatto o un processo costruita sulla base di generalizzazioni di esperienze di successo e supportata da test di laboratorio.
    • Nel campo delle interfacce-utente possono far riferimento alla componente visuale, all’organizzazione dell’informazione, alla redazione dei contenuti. Ciascuna di esse cerca di sintetizzare, in un'unica formula, una regola di progettazione applicabile a differenti esperienze d’uso.
  • 4. Linee guida: utilità
    • L’utilità delle linee guida si esprime sotto due punti di vista:
      • la loro formulazione sintetica ed efficace le rende di semplice condivisione e acquisizione da parte del gruppo di lavoro;
        • (funzione prescrittiva)
      • sono un valido strumento anche “a valle” del progetto, quando l’obiettivo è comprendere se il sistema realizzato è più o meno rispondente a criteri di usabilità;
        • (funzione valutativa)
    • Alcune imprese hanno redatto documenti di linee guida da adottare in tutti i loro prodotti: forte fattore di rafforzamento della qualità dell’esperienza utente dei propri destinatari finali
      • per esempio, Microsoft, Apple e Sun hanno redatto linee guida per gli sviluppatori interni ed esterni in modo da assicurare la massima consistenza con i loro sistemi operativi;
  • 5. Linee guida per l’usabilità dei siti web
    • Jackob Nielsen fornisce dieci linee guida da utilizzare per migliorare l’usabilità di un sito web;
      • http://www.useit.com/papers/heuristic/heuristic_list.html
    • Con esse un esperto di usabilità è in grado di scovare molti problemi (indagine euristica), ma possono essere considerate degli strumenti di orientamento per chi progetta e sviluppa siti web;
  • 6. 1. Visibilità dello stato del sistema
    • L’utente dovrebbe in ogni momento sapere qual è lo stato del sito web , sia per quanto concerne la posizione della pagina visualizzata rispetto all’architettura del sito sia relativamente alla posizione in una serie di step (ad esempio registrazione ad un servizio).
      • L’utente, in ogni pagina deve poter comprendere - con semplicità - dove si trova, dove può andare, da dove arriva e come fare a tornare sui propri passi;
      • Importante perché molto spesso l’utente entra nel sito da una pagina interna (es. dai risultati di un motore di ricerca, da un link presente in un altro sito);
      • Dovrebbe essere una visibilità percepibile da chiunque (es. non sfruttare solo il colore per trasmettere informazione);
    • Il tema della visibilità si associa strettamente ai meccanismi di feedback : verificare che alle azioni dell’utente corrispondano chiari e appropriati messaggi di ritorno che informino circa il cambiamento di stato del sito web.
  • 7. 2. Associazione tra sistema e mondo reale
    • Il sistema dovrebbe parlare il linguaggio dell’utente , con rappresentazioni, metafore, parole, espressioni e concetti familiari all’utente.
      • I sistemi di labeling (nomi dei link, dei menu, dei box ecc.) dovrebbero utilizzare una terminologia adeguata al modello mentale / linguaggio adottato dall’utente: non dovrebbe essere utilizzato un linguaggio che si scosti da quello utilizzato dall’utente per descrivere un’azione o un’informazione: come descriverebbe quel che si trova di fronte e quel che intende fare?
    • Occorre osservare le convenzioni del mondo reale, facendo in modo che le informazioni appaiano in un ordine logico e naturale.
    • I raggruppamenti dell’informazione (menu, form ecc.) dovrebbero avvenire in modo logico ed omogeneo: raggruppare quel che è simile, separare ciò che è diverso;
  • 8. 3. Controllo e libertà dell’utente
    • All’utente dovrebbe essere garantito il controllo sullo stato del sistema (o l’apparenza di controllo).
      • L’utente deve poter attivare e interrompere volontariamente ogni procedura consentita sul sito web.
      • Dovrebbe essere possibile annullare un’operazione il cui esito pare errato o inappropriato all’utente, così come deve essere presente una funzione di ripristino di uno stato pre-esistente all’azione dell’utente (vedi linea guida 9).
      • È bene prevedere le cause di errore probabili da parte dell’utente ed inserire nel sistema vincoli e funzioni obbliganti che costringano l’utente ad adottare comportamenti corretti dal punto di vista del sistema (es. checkboxes vs input libero).
    • L’utente, in sintesi, deve essere messo in condizione di appoggiare la sua azione su una sorta di “rete di sicurezza” fornita dal sistema.
  • 9. 4. Coerenza e standard
    • Il sistema dovrebbe adottare standard e soluzioni di progettazione condivise : l’utente non dovrebbe faticare per apprendere un nuovo e diverso modo di presentare funzionalità comuni alla maggior parte dei siti web.
    • Il nostro sito forma l’esperienza del web di un utente sempre in minima parte: deve apparire familiare ;
      • Raskin: “intuitivo” = “familiare”
    • Adottare segnali convenzionali o standard semplifica ampiamente il riconoscimento da parte di utenti inesperti.
  • 10. 5. Gestione degli errori
    • Questa linea guida ha due versanti di applicazione:
      • gestione preventiva dell’errore: il sistema dovrebbe essere progettato in maniera tale da evitare situazioni che possano generare ambiguità o malfunzionamenti. L’utente deve essere guidato sia esplicitamente (con documentazione, suggerimenti e una generale comprensibilità dell’interfaccia) sia implicitamente (vincoli e funzioni obbliganti) a utilizzare il sito web senza errori;
      • gestione dell’errore avvenuto: il sistema dovrebbe fornire adeguati feedback all’utente affinché questi possa comprendere le ragioni del fallimento della sua azione, venga rassicurato circa il destino delle informazioni da lui inserite, possa ricominciare la procedura senza dover incorrere nel medesimo inconveniente.
  • 11. 6. Riconoscimento piuttosto che memorizzazione
    • L’utente deve essere aiutato a ricordare le informazioni di cui ha necessità per fruire adeguatamente del sito web.
    • Le informazioni circa il funzionamento di un sito web, come di qualsiasi altro artefatto, possono risiedere o nella memoria dell’utilizzatore o collocata “nel mondo”.
      • Se si fa affidamento alla memoria dell’utente, questi sarà costretto a memorizzare e quindi richiamare ciò di cui ha bisogno. Alternativamente, se l’informazione è in qualche modo presente sull’interfaccia sarà possibile proseguire “ riconoscendo ” anziché ricordando.
    • Affidarsi al principio di riconoscimento rende un interfaccia più facilmente utilizzabile anche da chi visita il sito web per la prima volta.
    • Rendere ogni elemento auto-esplicativo circa la sua identità e il suo comportamento: sfruttare le affordances e il principio del mapping ;
  • 12. Affordance
    • Concetto derivato dalla psicologia di J. J. Gibson, introdotto in HCI da Norman;
    • Indica quelle proprietà reali e percepite degli elementi della realtà che suggeriscono come li si possa utilizzare;
    • Le affordances di un artefatto comunicano all’utilizzatore in che modo esso può essere usato: si tratta di “ inviti all’uso ”;
    • Esempio: una sedia “invita” ad utilizzarla per sedersi, una maniglia “invita” ad essere girata, un pulsante “invita” ad essere premuto…
    • Può essere un concetto molto potente nelle mani di chi progetta un artefatto e la sua interfaccia;
  • 13. Mapping
    • Il Mapping è la relazione tra il sistema di comandi e le effettive conseguenze delle azioni dell’utente su di essi.
    • Per esempio, girare il volante a destra fa cambiare direzione verso destra all’automobile;
    • Mapping naturale: sfrutta analogie fisiche, spaziali, culturali o convenzionali per portare ad una comprensione immediata della relazione tra comandi ed effetti;
    • Per esempio, associare la rotazione di un manopola all’incremento di una proprietà (il volume) sfrutta una convenzione / modello culturale (destra = maggiore);
    • Un mapping naturale è coerente, comprensibile e visibile: è un elemento di forte rafforzamento del modello di funzionamento dell’artefatto che l’utente costruisce nella sua mente;
    ??? !
  • 14. 7. Flessibilità ed efficacia d’impiego
    • Il sistema dovrebbe presentare opportunità di utilizzo differenziate per utenti differenziati, in modo tale da permettere – ad esempio – ai più esperti di interagire con maggior rapidità (con vie di accesso diretto ai contenuti, con tasti di accesso rapido ecc.).
    • Il sistema dovrebbe permettere funzionalità di personalizzazione affinché l’utente lo possa configurare nel modo maggiormente appropriato per le proprie esigenze (ad esempio consentendogli di selezionare la categoria di contenuto da presentare in home page: es. Google News ).
    • Controindicazioni :
      • La flessibilità non deve significare inconsistenza e incoerenza;
      • Una buona interfaccia non fa differenze: si lascia usare efficientemente e efficacemente da tutti;
      • La flessibilità spesso coincide con la moltiplicazione delle funzioni e con l’introduzione di modalità ;
      • La personalizzazione può causare disorientamento e difficoltà di riconoscimento;
      • Accanto a una modalità personalizzata è bene mantenere sempre una modalità “impersonale”
  • 15. 8. Minimalismo
    • “ Less is better ”: evitare le ridondanze, gli appesantimenti e le complicazioni inutili.
    • Il linguaggio deve essere semplice, diretto e deve evitare periodi eccessivamente complessi dal punto di vista sintattico.
    • Evitare di strutturare le procedure in un numero eccessivo di passi: se è possibile, meglio accorpare tra di loro pur mantenendo una coerenza e un omogeneità interna alla nuova suddivisione.
  • 16. 9. Aiuto nel riconoscimento, diagnosi e soluzione degli errori
    • L’esecuzione di operazioni erronee dovrebbe essere immediatamente segnalata con la dovuta precisione.
    • Le azioni pericolose (es. cancellazione di dati) dovrebbero essere rese difficili o richiedere esplicitamente l’attenzione dell’utente;
    • L’utente dovrebbe poter sempre tornare sui propri passi ( undo ) e annullare gli effetti di un’azione erronea (possibilità di esplorare l’interfaccia senza rischi); Il sistema dovrebbe essere in grado di ripristinare lo stato precedente all’azione erronea;
    • Il messaggio di errore dovrebbe essere chiaro, diretto e non ambiguo.
    • Il messaggio di errore dovrebbe comunicare perché è incorso un problema e suggerire come evitare di incorrere nuovamente in esso;
  • 17. 10. Aiuto e documentazione
    • Il sito web dovrebbe prevedere, se necessario, aree e funzionalità dedicate alla spiegazione delle azioni possibili al suo interno, alla risposta di domande frequenti, alla definizione dell’eventuale terminologia specialistica utilizzata.
    • Dovrebbe essere possibile richiamare questo genere di informazioni senza uscire dal flusso di operazioni intrapreso (help contestuale: “what is it?” in del.icio.us);
    • La documentazione dovrebbe presentare una indice o sommario di accesso rapido.
    • L’organizzazione dei contenuti della guida dovrebbe rispecchiare il modello mentale degli utenti in cerca di informazione.
    • Ciascun contenuto della documentazione dovrebbe essere etichettato in modo chiaro e semplice, adottando formule interrogative (“come posso fare a…?”), più vicine al modo di pensare dell’utente in cerca di informazioni.
    • Meglio adottare uno stile omogeneo nella redazione dei contenuti: differenziare i contenuti che forniscono i motivi di un comportamento errato (“perché non riesco a…?) da quelli che spiegano come superare il problema (“come faccio a…?).
  • 18. Design patterns
    • Una caratteristica condivisa sia dai principi di usabilità che dalle linee guida è di avere un’impronta relativamente astratta. Il progettista / sviluppatore si trova costretto a dedurre quale sia il modo migliore per raggiungere i propri obiettivi ;
    • Gli user-interface patterns sono infatti astrazioni di situazioni di interazione specifiche.
      • A partire da una serie di casi di successo è possibile derivare per induzione un modello che li riunisca in un solo concetto pratiche e stili di interazione comuni.
    • I pattern cercano di indicare non cosa sia necessario ottenere, ma come determinati obiettivi di usabilità siano perseguibili.
    • Grazie ad un simile approccio, anche chi non possiede un background teorico può individuare una linea di azione appropriata.
  • 19. Caratteristiche dei design pattern
    • Un pattern si limita ad indicare un modello di soluzione e non la soluzione: non viene indicato un modo preciso e definito per risolvere una determinata problematica ma si preferisce fornire i tratti salienti di una possibile soluzione;
    • Spetta a chi adotta il pattern il compito di integrarlo con il contesto specifico di applicazione e si lascia aperta l’opportunità di derivare nuove modalità di attuazione;
    • I pattern hanno un potenziale generativo : non sono un insieme chiuso definitivo bensì un sistema aperto ed in evoluzione
  • 20. Esempi di pattern
    • Navigazione
      • Piramide
      • Mappa di una sequenza
      • Briciole di pane
    • Information design
      • Griglia costante
      • Spazio principale
      • Allineamento destra/sinistra
      • Connotazione cromatica
    • Moduli e controlli
      • Valori predefiniti ottimali
    • Gestione dell’errore
      • Errori nella stessa pagina
      • Scudo di protezione
  • 21. Piramide
    • Cosa: collegare una sequenza di pagine con link “precedente-successivo”; ciascuna pagina è collegata ad un indice;
    • Quando: presentazioni, help in linea, capitoli di un testo, corsi di formazione;
    • Perché :
      • si riduce il numero di passaggi per raggiungere ogni unità informativa;
      • il modello di funzionamento è familiare;
      • è semplice annullare una scelta errata;
    • Come:
      • Mettere in ogni pagina un link alla pagina successiva e uno alla pagina precedente della sequenza;
      • In ogni pagina, inserire un link “Torna all’indice”
    index (1) (2) (3)
  • 22. Mappa di una sequenza
    • Cosa: in ogni pagina di una sequenza, includere una mappa di tutte le pagine in ordine e fornire una chiara indicazione della posizione attuale nella sequenza stessa;
    • Quando: nelle strutture sequenziali e lineari come processi di registrazione su più pagine, questionari, procedure di acquisto ecc.;
    • Perché :
      • Rende l’utente consapevole della propria posizione;
      • Aiuta a capire in che punto ci si trova della sequenza;
      • Se attiva, è a sua volta un potente strumento di navigazione che l’utente può usare per spostarsi rapidamente da un punto all’altro della sequenza;
    • Come:
      • Inserire in un angolo della pagina, preferibilmente in alto, una sequenza di elementi;
      • Unire questi elementi con frecce, linee o altri indicatori della sequenzialità;
      • È preferibile accompagnare ogni elemento con un titolo che riprenda i titoli delle pagine coinvolte;
      • Per indicare la posizione, demarcare l’elemento corrente con un buon contrasto cromatico e stilistico;
      • Nel caso, l’elemento corrente non dovrebbe mai essere un link;
    Pagina 1 Pagina 2 Pagina 3 Pagina 4 Pagina 3 Indirizzo: Città:
  • 23. Briciole di pane
    • Cosa: in ogni pagina di una gerarchia, mostrare una mappa delle pagine-genitore;
    • Quando: il sito ha una struttura gerarchica molto profonda (3 o più livelli)
    • Perché:
      • Rende l’utente consapevole della propria posizione;
      • Aiuta a capire in che punto ci si trova della sequenza;
      • Se formata da link, è a sua volta un potente strumento di navigazione che l’utente può usare per spostarsi rapidamente da un punto all’altro della sequenza;
      • Se l’utente entra nel sito in una pagina “profonda” è facile comprendere il contesto e risalire ai livelli superiori
    • Come:
      • Nella parte superiore della pagina, inserire una linea di testo che, partendo dalla pagina iniziale, ripercorra la sequenza di passaggi necessaria a raggiungere la pagina visualizzata;
      • Tra un elemento e l’altro inserire una piccola immagine, una freccia, un carattere di maggiore (“>”);
      • La label di ogni elemento dovrebbe essere identica al titolo della corrispondente pagina;
      • Ogni label dovrebbe essere un link;
      • L’ultimo elemento della sequenza (corrispondente alla pagina visualizzata) non deve essere un link;
    Birmano Home > Mammiferi > Felini > Gatti > Birmano Indique apellae tertium canestrae illustrum indicatio und frementisque Allorquandunquem gurdam horati est Tenacis multique cum julius.
  • 24. Griglia costante
    • Cosa: costruire ogni pagine utilizzando la medesima struttura e i medesimi elementi stilistici;
    • Quando: è una regola base del web design, quindi sempre da applicare tranne in casi eccezionali;
    • Perché:
      • La presenza di una costanza strutturale e stilistica favorisce l’apprendimento dell’interfaccia da parte dell’utente;
      • Incrementa l’identità e la riconoscibilità del sito;
      • È molto più semplice accorgersi di quello che è differente;
    • Come:
      • Disegnare uno schema di pagina capace di accogliere tutti i contenuti del sito;
      • Devono essere presenti indicatori che indichino in modo chiara la posizione della pagina all’interno del sito;
      • Se necessario, devono essere presenti i differenti livelli di navigazione (globale, locale e contestuale);
      • Si preveda una posizione anche per altri strumenti di navigazione (es. le briciole di pane);
      • Verificare che la griglia sia in grado di garantire buoni risultati di accogliere sia testi molto lunghi che brevi
  • 25. Spazio principale
    • Cosa: mettere la parte più importante del interfaccia nella sezione più ampia; raggruppare gli elementi secondari in blocchi di informazione più periferici e di dimensioni minori;
    • Quando: è una regola base del web design, quindi sempre da applicare tranne in casi eccezionali;
    • Perché:
      • Dare un maggior rilievo spaziale all’elemento più importante consente all’utente di dirigere la propria attenzione a colpo sicuro;
      • Si stabilisce in modo chiaro una gerarchia di importanza tra gli elementi della pagina;
    • Come:
      • La parte principale dovrebbe occupare una larghezza almeno doppia rispetto alla larghezza degli elementi periferici, così come in altezza;
      • Il colore di sfondo della parte principale dovrebbe essere sufficientemente contrastata rispetto allo sfondo delle sezioni periferiche;
      • Inserire titoli in un carattere di dimensioni maggiori per attrarre lo sguardo dell’utilizzatore;
      • Non è importante che lo spazio principale sia anche centrale;
  • 26. Allineamento destra/sinistra
    • Cosa: allineare le label a destra della prima colonna e gli elementi (campi o dati) a sinistra della seconda colonna;
    • Quando: in presenza di tabelle o di form con una struttura a due colonne;
    • Perché:
      • Avvicinando la label all’elemento di riferimento si stabilisce una chiara relazione visiva tra gli oggetti;
      • Indipendentemente dalla larghezza delle label o degli elementi, si crea un effetto visivamente gradevole che accompagna lo sguardo dell’utente verso il basso;
    Nome Cognome Indirizzo Telefono Nome Cognome Indirizzo Telefono
  • 27. Connotazione cromatica
    • Cosa: uso del colore per connotare in modo univoco le sezioni in cui è suddiviso un sito;
    • Quando: il sito è composto da un buon numero di sezioni ed è necessario/si vuole associare a ciascuna un’identità chiara;
    • Perché:
      • Il colore offre all’utente un demarcatore intuitivo della propria posizione nel sito;
      • È molto evidente il passaggio da una sezione all’altra: sono molto chiari i confini tra di esse;
      • Il cambiamento di colore rende l’interfaccia più varia, gradevole e meno noiosa;
    • Come:
      • In ciascuna sezione del sito web modificare il colore di elementi ben visibili;
      • La variazione deve essere evidente ma non intrusiva: evitare di cambiare il colore di sfondo della pagina ma limitarsi a titoli, margini, bordi e decorazioni;
      • Mantenere un medesimo livello di saturazione e di luminosità pur tra colori diversi;
      • Aiutare l’utente ad apprendere il significato dei colori, ponendo in relazione l’associazione cromatica fin dallo stile del menu di navigazione globale
        • Esempio: www.apple.com
  • 28. Valori predefiniti ottimali
    • Cosa: inserire nei campi di un form dei valori predefiniti che probabilmente corrispondo a quanto l’utente stesso inserirebbe;
    • Quando: si vuole ridurre l’impegno richiesto all’utente per compilare un form;
    • Perché:
      • Si riduce lo sforzo richiesto all’utente per interagire con la pagina;
      • La presenza di valori predefiniti istruisce l’utente su come eventualmente inserire altre informazioni;
    • Come:
      • Nei campi di testo libero, inserire un valore che presumibilmente corrisponde alla risposta che l’utente darebbe autonomamente;
      • Lasciare sempre la possibilità di modificare il valore predefinito;
      • Esempio: www.trenitalia.com
      • Non utilizzare questo pattern quando si vuole che i dati inseriti nel modulo siano frutto di una decisione consapevole razionale: i valori predefiniti possono essere mantenuti in quanto accettabili;
  • 29. Errori nella stessa pagina
    • Cosa: inserire i feedback relativi ad errori nella stessa pagina in cui gli errori sono stati commessi;
    • Quando: il sistema effettua controlli automatici sulla validità dei dati immessi o sulla compilazione di tutte le richieste obbligatorie di un form;
    • Perché:
      • Il feedback non viene fornito in un’altra pagina, nella quale l’utente non può ricordare a memoria le richieste che gli sono state avanzate;
      • Si fa risparmiare all’utente il ritorno alla maschera di immissione dati;
      • Riportando l’utente nel punto in cui è stato commesso un errore si diminuisce la frustrazione dell’utente e, di conseguenza, le possibilità di abbandono;
    • Come:
      • Disegnare la form in modo tale che gli errori più frequenti siano evitati (usando buoni valori di default, offrendo alternative chiuse in luogo di campi a risposta aperta, favorendo il riconoscimento anziché il richiamo);
      • A seguito dell’errore, tornare automaticamente alla pagina di inserimento dati;
      • I campi che hanno generato l’errore, al ritorno, dovrebbero essere evidenziati (colorati di rosso, in grassetto, accompagnati da un’icona ecc.)
      • I feedback di errore dovrebbero essere altrettanto visibili: un riepilogo ad inizio pagina e accanto ai campi in cui l’errore è stato commesso;
      • Oltre alla segnalazione di errore, il feedback dovrebbe anche aiutare a comprendere come l’errore possa essere superato;
  • 30. Scudo di protezione
    • Cosa: prima dell’esecuzione di un comando potenzialmente pericoloso, il sistema chiede all’utente una conferma esplicita;
    • Quando: in presenza di funzioni dall’esito irreversibile;
    • Perché:
      • Si evitano errori di disattenzione o di imprecisione;
      • Al prezzo di aumentare il tempo necessario per eseguire l’azione, si incrementa il senso di sicurezza e la soddisfazione dell’utente;
    • Come:
      • Individuare i punti del sito web in cui non è possibile annullare un’operazione: per esempio la conferma di un acquisto o l’invio di dati personali che non sarà più possibile modificare;
      • Inserire un passaggio intermedio tra l’invio del comando e la sua esecuzione;
      • In questo, riepilogare l’azione richiesta ed evidenziare gli eventuali rischi cui si va incontro confermando il comando stesso;
      • Il testo dello “scudo” deve essere chiaro, indubbio e comprensibile a tutti;
      • Dovrebbe essere difficile dare conferma inavvertitamente o involontariamente (per esempio posizionando il bottone di conferma in un luogo diverso da dove è solitamente collocato quando le operazioni non sono pericolose;
  • 31. Esercizio: progettare i wireframes delle pagine
    • Provate a disegnare la home page, la pagina interna e la pagina di registrazione a un servizio del vostro sito (per esempio a una newsletter);
    • Utilizzate un software di grafica, Powerpoint o al limite gli strumenti di disegno di un Word Processor (si ricorda la possibilità di ricorrere ad OpenOffice.org, suite di prodotti opensource gratuita);
    • Le pagine vanno progettate prevedendo tutti gli elementi di navigazione e un anteprima della struttura che avranno i contenuti;
    • L’information design, per quanto prototipale, dovrebbe cercare il più possibile di avvicinarsi al risultato finale (proporzioni degli elementi, uso del colore, font dei testi ecc.);
    • Trattandosi di uno strumento di lavoro interno al team di progetto e sviluppo, i wireframes dovrebbero essere arricchiti dalle annotazioni necessarie a togliere ogni dubbio in vista della realizzazione grafica definitiva;
    • Si cerchi di testare il design delle pagine alla luce delle linee guida di usabilità di Nielsen;
    • Importante: documentare i punti di forza e le problematiche di usabilità del wireframe;
    • Si cerchi di applicare alcuni dei pattern presentati a lezione adattandoli al contesto del proprio sito;
    • Come ispirazione, si veda l’esempio della diapositiva successiva;
  • 32. ENG | ESP | ITA Email – credits - copyright ricerca Home page | Contatti | Mappa del sito Titolo pagina Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ornare augue nec odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras enim. Sed aliquet rhoncus urna. Nunc varius lacinia odio. Pellentesque consequat luctus nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ornare augue nec odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. (Link a contenuti correlati)
    • Il Progetto
    • Il coordinatore
    • I Partners
    • il Comitato di progetto
    • Il progetto in movimento
    • Newsletter
    • I documenti
    • Links
    Banner Questionario Utilizzare immagini di sfondo collegate all’idea di… Il logo è un collegamento all’home page Titolo del sito Utilizzare immagini di bandiere? Il menu si deve aprire fino al terzo livello
    • alfa (12.02.2006) bla bla bla bla…
    • beta (13.03.2006) bla bla bla bla..
    • alfa (12.02.2006) bla bla bla bla…
    • beta (13.03.2006) bla bla bla bla..
    Icona per accedere alla versione stampabile [ archivio ] Eventi [ archivio ] News
  • 33. Siti web di riferimento
    • Jackob Nielsen, Useit.com ( http://www.useit.com/ )
    • Donald Norman ( http://www.jnd.org/ )
    • Welie.com – Interaction design patterns ( http://www.welie.com/ );
    • Usability Special Interest Group ( http://www.stcsig.org/ usability / )
  • 34. Bibliografia di base
    • A. Cooper e R. Reimann, “About Face 2.0”, John Wiley & Sons;
    • S. Krug, “Don’t make me think”, HopsLibri 2001;
    • J. Nielsen, “Web usability”, Apogeo 2000;
    • D. Norman, “La caffettiera del masochista”, Giunti 1997;
    • B. Tognazzini, “Tog on interface”, Addison Wesley, 1992
    • J. Tidwell, “Designing Interfaces”, O’Reilly, 2006