際際滷

際際滷Share a Scribd company logo
Web usability II Andrea Crevola [email_address] http://webdesign.3juice.com
Come ottenere lusabilit? 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 dellinterazione pu嘆 avvalersi di nozioni a diversi livelli di astrazione: Principi di usabilit Linee guida Design Patterns Metodologie di test
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 sullinterazione uomo-macchina, ma devono necessariamente essere tradotte in forma applicata perch辿 possa esserne apprezzata lutilit. 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, allorganizzazione dellinformazione, alla redazione dei contenuti. Ciascuna di esse cerca di sintetizzare, in un'unica formula, una regola di progettazione applicabile a differenti esperienze duso.
Linee guida: utilit Lutilit 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 lobiettivo 竪 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 dellesperienza 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;
Linee guida per lusabilit dei siti web Jackob Nielsen fornisce dieci linee guida da utilizzare per migliorare lusabilit 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;
1. Visibilit dello stato del sistema Lutente dovrebbe in ogni momento  sapere qual 竪 lo stato del sito web , sia per quanto concerne la posizione della pagina visualizzata rispetto allarchitettura del sito sia relativamente alla posizione in una serie di step (ad esempio registrazione ad un servizio). Lutente, 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 lutente 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 dellutente corrispondano chiari e appropriati messaggi di ritorno che informino circa il cambiamento di stato del sito web.
2. Associazione tra sistema e mondo reale   Il sistema dovrebbe  parlare il linguaggio dellutente , con rappresentazioni, metafore, parole, espressioni e concetti familiari allutente.  I sistemi di labeling (nomi dei link, dei menu, dei box ecc.) dovrebbero utilizzare una terminologia adeguata al modello mentale / linguaggio adottato dallutente: non dovrebbe essere utilizzato un linguaggio che si scosti da quello utilizzato dallutente per descrivere unazione o uninformazione: 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 dellinformazione (menu, form ecc.) dovrebbero avvenire in modo logico ed omogeneo: raggruppare quel che 竪 simile, separare ci嘆 che 竪 diverso;
3. Controllo e libert dellutente Allutente dovrebbe essere garantito il controllo sullo stato del sistema (o lapparenza di controllo). Lutente deve poter attivare e interrompere volontariamente ogni procedura consentita sul sito web.  Dovrebbe essere  possibile annullare  unoperazione il cui esito pare errato o inappropriato allutente, cos狸 come deve essere presente una funzione di ripristino di uno stato pre-esistente allazione dellutente (vedi linea guida 9).  bene prevedere le cause di errore probabili da parte dellutente ed inserire nel sistema  vincoli e funzioni obbliganti  che costringano lutente ad adottare comportamenti corretti dal punto di vista del sistema (es. checkboxes vs input libero). Lutente, in sintesi, deve essere messo in condizione di appoggiare la sua azione su una sorta di rete di sicurezza fornita dal sistema.
4. Coerenza e standard Il sistema dovrebbe  adottare standard e soluzioni di progettazione condivise : lutente non dovrebbe faticare per apprendere un nuovo e diverso modo di presentare funzionalit comuni alla maggior parte dei siti web. Il nostro sito forma lesperienza 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.
5. Gestione degli errori Questa linea guida ha due versanti di applicazione: gestione preventiva dellerrore:  il sistema dovrebbe essere progettato in maniera tale da evitare situazioni che possano generare ambiguit o malfunzionamenti. Lutente deve essere guidato sia esplicitamente (con documentazione, suggerimenti e una generale comprensibilit dellinterfaccia) sia implicitamente (vincoli e funzioni obbliganti) a utilizzare il sito web senza errori; gestione dellerrore avvenuto:  il sistema dovrebbe fornire adeguati feedback allutente 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.
6. Riconoscimento piuttosto che memorizzazione Lutente 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 dellutilizzatore o collocata nel mondo.  Se si fa affidamento alla memoria dellutente, questi sar costretto a memorizzare e quindi richiamare ci嘆 di cui ha bisogno. Alternativamente, se linformazione 竪 in qualche modo presente sullinterfaccia 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 ;
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 allutilizzatore in che modo esso pu嘆 essere usato: si tratta di  inviti alluso ; 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;
Mapping Il Mapping 竪 la relazione tra il sistema di comandi e le effettive conseguenze delle azioni dellutente su di essi. Per esempio, girare il volante a destra fa cambiare direzione verso destra allautomobile; 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 allincremento 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 dellartefatto che lutente costruisce nella sua mente; ??? !
7. Flessibilit ed efficacia dimpiego 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辿 lutente 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 lintroduzione di  modalit ; La personalizzazione pu嘆 causare disorientamento e difficolt di riconoscimento; Accanto a una modalit personalizzata 竪 bene mantenere sempre una modalit impersonale
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.
9. Aiuto nel riconoscimento, diagnosi e soluzione degli errori   Lesecuzione 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 lattenzione dellutente; Lutente dovrebbe poter sempre tornare sui propri passi ( undo ) e annullare gli effetti di unazione erronea (possibilit di esplorare linterfaccia senza rischi); Il sistema dovrebbe essere in grado di ripristinare lo stato precedente allazione 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;
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 delleventuale 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. Lorganizzazione 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 dellutente 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?).
Design patterns Una caratteristica condivisa sia dai principi di usabilit che dalle linee guida 竪 di avere unimpronta 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.
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 lopportunit 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
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 dellerrore Errori nella stessa pagina Scudo di protezione
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 allindice index (1) (2) (3)
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 lutente 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 lutente pu嘆 usare per spostarsi rapidamente da un punto allaltro 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 lelemento corrente con un buon contrasto cromatico e stilistico; Nel caso, lelemento corrente non dovrebbe mai essere un link; Pagina 1 Pagina 2 Pagina 3 Pagina 4 Pagina 3 Indirizzo: Citt:
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 lutente 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 lutente pu嘆 usare per spostarsi rapidamente da un punto allaltro della sequenza; Se lutente 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 laltro 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; Lultimo 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.
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 lapprendimento dellinterfaccia da parte dellutente; Incrementa lidentit 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 allinterno 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
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 allelemento pi湛 importante consente allutente 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 dellutilizzatore; Non 竪 importante che lo spazio principale sia anche centrale;
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 allelemento 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 dellutente verso il basso; Nome Cognome Indirizzo Telefono Nome Cognome Indirizzo Telefono
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 unidentit chiara; Perch辿: Il colore offre allutente un demarcatore intuitivo della propria posizione nel sito;  molto evidente il passaggio da una sezione allaltra: sono molto chiari i confini tra di esse; Il cambiamento di colore rende linterfaccia 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 lutente ad apprendere il significato dei colori, ponendo in relazione lassociazione cromatica fin dallo stile del menu di navigazione globale  Esempio:  www.apple.com
Valori predefiniti ottimali Cosa:  inserire nei campi di un form dei valori predefiniti che probabilmente corrispondo a quanto lutente stesso inserirebbe; Quando:  si vuole ridurre limpegno richiesto allutente per compilare un form; Perch辿:   Si riduce lo sforzo richiesto allutente per interagire con la pagina; La presenza di valori predefiniti istruisce lutente su come eventualmente inserire altre informazioni; Come: Nei campi di testo libero, inserire un valore che presumibilmente corrisponde alla risposta che lutente 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;
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 unaltra pagina, nella quale lutente non pu嘆 ricordare a memoria le richieste che gli sono state avanzate; Si fa risparmiare allutente il ritorno alla maschera di immissione dati; Riportando lutente nel punto in cui 竪 stato commesso un errore si diminuisce la frustrazione dellutente 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 dellerrore, tornare automaticamente alla pagina di inserimento dati; I campi che hanno generato lerrore, al ritorno, dovrebbero essere evidenziati (colorati di rosso, in grassetto, accompagnati da unicona ecc.) I feedback di errore dovrebbero essere altrettanto visibili: un riepilogo ad inizio pagina e accanto ai campi in cui lerrore 竪 stato commesso; Oltre alla segnalazione di errore, il feedback dovrebbe anche aiutare a comprendere come lerrore possa essere superato;
Scudo di protezione Cosa:  prima dellesecuzione di un comando potenzialmente pericoloso, il sistema chiede allutente una conferma esplicita; Quando:  in presenza di funzioni dallesito irreversibile; Perch辿: Si evitano errori di disattenzione o di imprecisione; Al prezzo di aumentare il tempo necessario per eseguire lazione, si incrementa il senso di sicurezza e la soddisfazione dellutente; Come: Individuare i punti del sito web in cui non 竪 possibile annullare unoperazione: per esempio la conferma di un acquisto o linvio di dati personali che non sar pi湛 possibile modificare; Inserire un passaggio intermedio tra linvio del comando e la sua esecuzione; In questo, riepilogare lazione 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;
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; Linformation 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 lesempio della diapositiva successiva;
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 allidea di Il logo 竪 un collegamento allhome 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
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 / )
Bibliografia di base A. Cooper e R. Reimann, About Face 2.0, John Wiley & Sons; S. Krug, Dont 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, OReilly, 2006

More Related Content

Lezione 05/2006

  • 1. Web usability II Andrea Crevola [email_address] http://webdesign.3juice.com
  • 2. Come ottenere lusabilit? 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 dellinterazione 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 sullinterazione uomo-macchina, ma devono necessariamente essere tradotte in forma applicata perch辿 possa esserne apprezzata lutilit. 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, allorganizzazione dellinformazione, alla redazione dei contenuti. Ciascuna di esse cerca di sintetizzare, in un'unica formula, una regola di progettazione applicabile a differenti esperienze duso.
  • 4. Linee guida: utilit Lutilit 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 lobiettivo 竪 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 dellesperienza 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 lusabilit dei siti web Jackob Nielsen fornisce dieci linee guida da utilizzare per migliorare lusabilit 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 Lutente dovrebbe in ogni momento sapere qual 竪 lo stato del sito web , sia per quanto concerne la posizione della pagina visualizzata rispetto allarchitettura del sito sia relativamente alla posizione in una serie di step (ad esempio registrazione ad un servizio). Lutente, 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 lutente 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 dellutente 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 dellutente , con rappresentazioni, metafore, parole, espressioni e concetti familiari allutente. I sistemi di labeling (nomi dei link, dei menu, dei box ecc.) dovrebbero utilizzare una terminologia adeguata al modello mentale / linguaggio adottato dallutente: non dovrebbe essere utilizzato un linguaggio che si scosti da quello utilizzato dallutente per descrivere unazione o uninformazione: 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 dellinformazione (menu, form ecc.) dovrebbero avvenire in modo logico ed omogeneo: raggruppare quel che 竪 simile, separare ci嘆 che 竪 diverso;
  • 8. 3. Controllo e libert dellutente Allutente dovrebbe essere garantito il controllo sullo stato del sistema (o lapparenza di controllo). Lutente deve poter attivare e interrompere volontariamente ogni procedura consentita sul sito web. Dovrebbe essere possibile annullare unoperazione il cui esito pare errato o inappropriato allutente, cos狸 come deve essere presente una funzione di ripristino di uno stato pre-esistente allazione dellutente (vedi linea guida 9). bene prevedere le cause di errore probabili da parte dellutente ed inserire nel sistema vincoli e funzioni obbliganti che costringano lutente ad adottare comportamenti corretti dal punto di vista del sistema (es. checkboxes vs input libero). Lutente, 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 : lutente non dovrebbe faticare per apprendere un nuovo e diverso modo di presentare funzionalit comuni alla maggior parte dei siti web. Il nostro sito forma lesperienza 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 dellerrore: il sistema dovrebbe essere progettato in maniera tale da evitare situazioni che possano generare ambiguit o malfunzionamenti. Lutente deve essere guidato sia esplicitamente (con documentazione, suggerimenti e una generale comprensibilit dellinterfaccia) sia implicitamente (vincoli e funzioni obbliganti) a utilizzare il sito web senza errori; gestione dellerrore avvenuto: il sistema dovrebbe fornire adeguati feedback allutente 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 Lutente 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 dellutilizzatore o collocata nel mondo. Se si fa affidamento alla memoria dellutente, questi sar costretto a memorizzare e quindi richiamare ci嘆 di cui ha bisogno. Alternativamente, se linformazione 竪 in qualche modo presente sullinterfaccia 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 allutilizzatore in che modo esso pu嘆 essere usato: si tratta di inviti alluso ; 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 dellutente su di essi. Per esempio, girare il volante a destra fa cambiare direzione verso destra allautomobile; 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 allincremento 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 dellartefatto che lutente costruisce nella sua mente; ??? !
  • 14. 7. Flessibilit ed efficacia dimpiego 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辿 lutente 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 lintroduzione 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 Lesecuzione 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 lattenzione dellutente; Lutente dovrebbe poter sempre tornare sui propri passi ( undo ) e annullare gli effetti di unazione erronea (possibilit di esplorare linterfaccia senza rischi); Il sistema dovrebbe essere in grado di ripristinare lo stato precedente allazione 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 delleventuale 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. Lorganizzazione 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 dellutente 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 unimpronta 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 lopportunit 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 dellerrore 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 allindice 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 lutente 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 lutente pu嘆 usare per spostarsi rapidamente da un punto allaltro 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 lelemento corrente con un buon contrasto cromatico e stilistico; Nel caso, lelemento 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 lutente 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 lutente pu嘆 usare per spostarsi rapidamente da un punto allaltro della sequenza; Se lutente 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 laltro 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; Lultimo 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 lapprendimento dellinterfaccia da parte dellutente; Incrementa lidentit 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 allinterno 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 allelemento pi湛 importante consente allutente 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 dellutilizzatore; 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 allelemento 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 dellutente 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 unidentit chiara; Perch辿: Il colore offre allutente un demarcatore intuitivo della propria posizione nel sito; molto evidente il passaggio da una sezione allaltra: sono molto chiari i confini tra di esse; Il cambiamento di colore rende linterfaccia 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 lutente ad apprendere il significato dei colori, ponendo in relazione lassociazione 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 lutente stesso inserirebbe; Quando: si vuole ridurre limpegno richiesto allutente per compilare un form; Perch辿: Si riduce lo sforzo richiesto allutente per interagire con la pagina; La presenza di valori predefiniti istruisce lutente su come eventualmente inserire altre informazioni; Come: Nei campi di testo libero, inserire un valore che presumibilmente corrisponde alla risposta che lutente 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 unaltra pagina, nella quale lutente non pu嘆 ricordare a memoria le richieste che gli sono state avanzate; Si fa risparmiare allutente il ritorno alla maschera di immissione dati; Riportando lutente nel punto in cui 竪 stato commesso un errore si diminuisce la frustrazione dellutente 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 dellerrore, tornare automaticamente alla pagina di inserimento dati; I campi che hanno generato lerrore, al ritorno, dovrebbero essere evidenziati (colorati di rosso, in grassetto, accompagnati da unicona ecc.) I feedback di errore dovrebbero essere altrettanto visibili: un riepilogo ad inizio pagina e accanto ai campi in cui lerrore 竪 stato commesso; Oltre alla segnalazione di errore, il feedback dovrebbe anche aiutare a comprendere come lerrore possa essere superato;
  • 30. Scudo di protezione Cosa: prima dellesecuzione di un comando potenzialmente pericoloso, il sistema chiede allutente una conferma esplicita; Quando: in presenza di funzioni dallesito irreversibile; Perch辿: Si evitano errori di disattenzione o di imprecisione; Al prezzo di aumentare il tempo necessario per eseguire lazione, si incrementa il senso di sicurezza e la soddisfazione dellutente; Come: Individuare i punti del sito web in cui non 竪 possibile annullare unoperazione: per esempio la conferma di un acquisto o linvio di dati personali che non sar pi湛 possibile modificare; Inserire un passaggio intermedio tra linvio del comando e la sua esecuzione; In questo, riepilogare lazione 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; Linformation 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 lesempio 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 allidea di Il logo 竪 un collegamento allhome 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, Dont 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, OReilly, 2006