UsabilitABC Raffaella Roviglioni per Architecta
Report
Share
•5 likes•3,619 views
UsabilitABC Raffaella Roviglioni per Architecta
•5 likes•3,619 views
Report
Share
Download to read offline
More Related Content
Featured
Featured(20)
UsabilitABC Raffaella Roviglioni per Architecta
- 1. UsabilitABC Capire e progettare artefatti usabili Raffaella Roviglioni, User Experience Designer Roma, 10 aprile 2013
- 2. Usabilità, questa sconosciuta «L’usabilità ha a che fare con la capacità di un individuo di compiere attività specifiche o di raggiungere obiettivi più ampi mentre “utilizza” un qualsivoglia artefatto sia oggetto di studio, miglioramento o progettazione – inclusi i servizi, che non comportano nemmeno l’interazione con oggetti quali una maniglia o una pagina web.» Eric Reiss Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 3. Usabilità, questa sconosciuta/2 E’ quella cosa che se c’è, non si nota. Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 4. Proviamo a semplificare Fa ciò che voglio? Fa ciò che mi aspetto? Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 5. Proviamo a semplificare/2 Fa ciò che voglio? Facilità d’uso Fa ciò che mi aspetto? Chiarezza d’uso Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 6. Proviamo a semplificare/3 Fa ciò che voglio? Facilità d’uso Fa ciò che mi aspetto? Chiarezza d’uso Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 7. Facilità d’uso Funzionale Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 8. Facilità d’uso/2 Funzionale Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 9. Facilità d’uso/3 Funzionale Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 10. Facilità d’uso/4 Funzionale Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 11. Facilità d’uso/5 Reattivo Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 12. Facilità d’uso/6 Reattivo Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 13. Facilità d’uso/7 Reattivo Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 14. Facilità d’uso/8 Reattivo Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 15. Facilità d’uso/9 Ergonomico Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 16. Facilità d’uso/10 Vantaggioso Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 17. Facilità d’uso/11 Vantaggioso Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 18. Facilità d’uso/12 Vantaggioso Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 19. Facilità d’uso/13 Vantaggioso Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 20. Facilità d’uso/14 A prova di errore Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 21. Facilità d’uso/15 A prova di errore Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 22. Facilità d’uso/16 A prova di errore Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 23. Facilità d’uso/17 A prova di errore Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 24. Vi ricordate? Fa ciò che voglio? Facilità d’uso Fa ciò che mi aspetto? Chiarezza d’uso Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 25. Chiarezza d’uso Visibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 26. Chiarezza d’uso/2 Visibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 27. Chiarezza d’uso/3 Visibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 28. Chiarezza d’uso/4 Visibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 29. Chiarezza d’uso/5 Visibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 30. Chiarezza d’uso/6 Comprensibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 31. Chiarezza d’uso/7 Comprensibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 32. Chiarezza d’uso/8 Comprensibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 33. Chiarezza d’uso/9 Comprensibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 34. Chiarezza d’uso/10 Coerente Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 35. Chiarezza d’uso/11 Prevedibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 36. Chiarezza d’uso/12 Prevedibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 37. E ora, si progetta? Checklist Funzionale Reattivo Ergonomico Vantaggioso A prova di errore Visibile Comprensibile Coerente Prevedibile Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 38. E ora: si testa! Test di usabilità Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
- 39. Bibliografia minima Grazie!! @raffiro http://roviglioni.it raffaella@roviglioni.it Roma, 10 aprile 2013 – UsabilitABC Raffaella Roviglioni
Editor's Notes
- Mi chiamo Raffaella Roviglioni, sono una User Experience designer, ovvero progetto esperienze utente digitali per le persone. Lavoro come consulente freelance a Roma, e oggi vi parlerò di Usabilità. Mi piacerebbe riuscire a farvi comprendere di cosa si tratta e soprattutto, come si può arrivare a progettare artefatti usabili.
- Partiamo da una prima definizione: l’usabilità ha a che fare con la capacità di una persona di compiere attività specifiche mentre utilizza un qualsiasi oggetto o servizio. Ho scelto di tradurre questa definizione di Eric Reiss dal suo ultimo libro non solo perché la trovo calzante ma anche perché durante questo webinar utilizzerò la struttura da lui suggerita per esaminare l’usabilità.Da questa prima definizione possiamo subito comprendere che l’usabilità è un qualcosa di complesso: parliamo di capacità delle persone, di azioni e interazioni, di obiettivi e di oggetti e servizi.
- Io invece aggiungo un mio modo di vedere l’usabilità: è qualcosa che se c’è, non ce ne accorgiamo. Come nel caso di questi pennarelli che vedremo in seguito durante il webinar. Se invece l’usabilità manca, si fa notare e in genere anche in modo piuttosto evidente, causando stress e frustrazione nelle persone.
- Proviamo, per comodità, a scomporre la complessità dell’argomento, e lo facciamo rispondendo a queste due domande. L’artefatto in questione fa ciò che voglio? E poi, fa ciò che mi aspetto?
- Dalla prima risposta otteniamo informazioni sulla facilità d’uso dell’oggetto. Dalla seconda ne ricaviamo invece la chiarezza d’uso.
- Partiamo dal primo concetto, la facilità d’uso, e proviamo a esaminare i diversi aspetti che lo compongono.
- L’artefatto con cui interagiamo deve in primis essere funzionale: rispetto al mio obiettivo, mi consente di raggiungerlo? Vediamo tre esempi pratici per comprenderlo meglio.
- In una confezione di formaggio greco, la linguetta di apertura dovrebbe servire a strappare la parte superiore e ad aprirlo senza problemi. In questo caso è andata proprio così e quindi il sistema di apertura è funzionale. Ma se vedete bene, io avevo già iniziato a tagliarlo perché non mi ero accorta che ci fosse l’apertura facilitata.
- Funzionale può anche significare aggiungere qualcosa in più. In questo caso il coperchio della confezione non assolve solamente allo scopo principale di proteggere il prodotto, ma diventa un coltello con cui usare il prodotto in seguito. Qui raggiungiamo anche degli obiettivi secondari che denotano un’attenzione ai bisogni dell’utente e alla modalità d’uso. Direi che è doppiamente funzionale e quindi maggiormente usabile.
- In qualche caso, invece, un semplice intoppo può far venire meno l’intera funzionalità di un prodotto. Questa schermata proviene dal mio smartphone, mentre stavo tentando di finalizzare un acquisto sul sito Moleskine. Il campo evidenziato in giallo, l’indirizzo mi dava questi due messaggi di errore, nessuno dei quali era risolvibile in quanto era correttamente compilato. Il sistema non mi ha consentito di proseguire in alcun modo, e alla fine ho dovuto abbandonare l’acquisto. Certamente poco funzionale e poco usabile.
- Un altro aspetto relativo alla facilità d’uso è la reattività del nostro artefatto. Cosa intendo con reattivo? Vediamolo negli esempi che ho ricavato da un sito, Photojojo.com, che vi consiglio caldamente sia perché molto interessante come design, sia per la loro scelta di tono della comunicazione.
- Durante il processo di acquisto, ogni volta che schiaccio il pulsante “Aggiungi al carrello” (Add to cart) un’animazione parte dal pulsante e arriva fino al carrello (qui la vedete simulata da una freccia verde). Anche i l carrello si modifica, diventando verde e sorridente, rispetto a quando è vuoto (rosso e triste). Inoltre un numero compare a indicarmi che ho messo un oggetto nel carrello. Questo può sembrarvi banale ma è un sistema che consente all’utente di capire cosa sta facendo e quali sono le conseguenze delle sue azioni. Per esempio, evita che la persona continui a cliccare sul pulsante e aggiunga ripetutamente lo stesso oggetto più volte nel carrello.
- Durante il processo di checkout, dopo aver inserito il mio nome il sistema reagisce e mi saluta utilizzandolo. Un modo simpatico di farmi sapere che il mio nome è stato registrato e di incoraggiarmi a proseguire.
- Infine, quando devo inserire l’indirizzo di spedizione, se deseleziono il check box per indicare che voglio la fattura a un indirizzo diverso, il sistema reagisce duplicando il campo indirizzo e facendomi comprendere chiaramente cosa compilare.
- Vediamo ora un componente molto importante che riguarda la facilità d’uso: l’ergonomia. Se l’oggetto che stiamo osservando è progettato pensando alle nostre caratteristiche fisiche e psicologiche, allora è ergonomico. Se un rubinetto ha bisogno di un cartello per farci capire come impugnarlo per aprirlo, probabilmente non lo è! E poi, ritornano i pennarelli dell’inizio: perché non mi ero accorta di quanto fossero usabili? Perché, senza guardarli, li aprivo tranquillamente con una mano sola, e ci riuscivo agilmente, a differenza dei pennarelli normali. Perché sono stati progettati per essere ergonomici.
- Quando parliamo di facilità d’uso parliamo anche del fatto che l’uso sia vantaggioso. Cosa significa? Che ogni cosa deve essere precisamente dove mi serve. Per valutarlo diventa fondamentale studiare il contesto d’uso ed essere consapevoli che in alcuni casi è un discorso soggettivo e va studiato con gli utenti. Lo introduco qui ma ritornerà molte volte nelle nostre valutazioni sull’usabilità: per aiutare le persone a usare facilmente il nostro artefatto dobbiamo pensare al contesto in cui lo usa. Vediamo degli esempi pratici.
- Questa schermata è un’app chiamata Moovit, che serve a pianificare uno spostamento tramite dati social inseriti da altri utenti. Stavo usando quest’applicazione dal mio smartphone, in giro, mentre lo reggevo con una mano, e nel compilare i campi richiesti sono rimasta per qualche minuto perplessa perché non riuscivo a trovare come andare avanti nel processo. Questo perché cercavo qualcosa sotto i campi, e invece la funzione search era stata posizionata in alto. Poco usabile, a mio avviso.
- Questa qui invece è una gelateria dove il display dell’eliminacode è stato posizionato alle spalle degli avventori. Piuttosto scomodo se voglio sapere quando sarà il mio turno, e magari allontanarmi e aspettare fuori se ci sono molte persone prima di me. Il risultato era infatti che i gelatai dovevano gridare più volte il numero per farlo sentire dai clienti. Questo aspetto ha molto a che fare con la prossimità fisica e la disposizione delle cose nel contesto.
- Guardate l’immagine a sinistra: un applicativo per l’acquisto di biglietti del cinema alla fine del processo mi chiede di digitare il numero di una carta fedeltà, e sembra tutto normale. Peccato che l’applicativo non sia sul mio pc, bensì su un totem, presso il cinema. Totem in cui ho appena strisciato la mia carta di credito per l’acquisto. E se vi dicessi che la carta fedeltà ha anch’essa una banda magnetica? Ecco, vantaggioso per me significa non dover chiedere a una persona, in quel contesto, di digitare a mano un numero quando è possibile leggerlo da una carta magnetica senza il rischio di errori.
- E visto che parliamo di errore, affrontiamo questo spinoso argomento, molto importante per la facilità d’uso. Il nostro artefatto dovrebbe essere facile da usare per chiunque, nelle circostanze d’uso. Dobbiamo quindi mettere in piedi una serie di accorgimenti per assicurarci che nessuno compia errori nell’interazione con esso. L’utente va aiutato a non sbagliare, e se sbaglia, la responsabilità è nostra che abbiamo fallito come progettisti. Vediamo tre esempi per illustrare le misure da prendere.
- Il primo: potrà sembrare sciocco scrivere una spiegazione accanto alla funzione di un bottone in ascensore, ma la ridondanza è invece un ottimo metodo per evitare gli errori. Scrivere aiuti contestuali, dove servono e quando servono, aiuta a non sbagliare. Ovviamente, senza esagerare e diventare invasivi!
- Avvisare di quanto stia succedendo in ogni momento è un altro metodo da adottare. In questo esempio riporto un sistema di home banking che mi segnala in modo molto evidente che l’operazione appena fatta è andata a buon fine. Il colore e la presenza dell’icona di conferma molto grande mi rassicura: siamo in un ambito molto delicato, perché la persona sta operando sui suoi soldi, quindi a maggior ragione dobbiamo fare attenzione e avvisare su ciò che accade correttamente e cosa no, per evitare errori. Anche i messaggi di conferma del tipo “sei sicuro di voler effettuare questa operazione?” sono indicati per lo stesso motivo.
- Altro accorgimento utile sarebbe quello di forzare determinate azioni o prevenirne altre. Quello a sinistra è lo screenshot del mio smartphone durante una telefonata a mia madre. Voi direte: ma perché hai fatto uno screenshot mentre parlavi? Perché, anche se non volevo farlo, il mio orecchio lo ha fatto! Questo perché il mio telefono ha come gesture lo strusciare il taglio della mano da sx a destra o viceversa. Il problema è che il telefono non si è “accorto” che il mio orecchio non è il taglio della mano, e sopratttutto per evitare questo errore nessuno ha pensato di bloccare gli screenshot durante le telefonate.
- Abbiamo passato in rassegna numerosi concetti che riguardavano la facilità d’uso. Passiamo ora a esaminare quelli che impattano sulla chiarezza d’uso, invece, che rispondono alla nostra domanda: l’artefatto fa ciò che mi aspetto?
- Il principe di tutti gli aspetti relativi alla chiarezza d’uso è senza dubbio la visibilità: rispetto alla mia interazione con l’oggetto o il servizio, riesco a vedere cosa è, come si usa e cosa devo farci? Visibile non coincide con presente: qualcosa può esserci ma non viene notata, o viene ignorata, o ancora viene interpretata in modo diverso. Vediamo alcuni esempi.
- Questo shampoo è il protagonista di una true story: la madre di una mia amica glielo ha portato dicendole: “senti, sarà anche buono però usalo tu che a me lascia i capelli troppo unti!”. Dov’è l’inghippo qui? Che non si tratta di uno shampoo, ma di un balsamo. La tipologia di prodotto c’è sulla confezione: eppure per motivi di scelte grafiche, di uso dei colori e di dimensioni, è come se fosse invisibile. Capiamo da questo esempio che la visibilità ha a che fare con la gerarchia dell’informazione: a seconda di come viene presentata, nel contesto, può essere preponderante mentra il resto rimane in secondo piano. Quindi quando progettiamo dobbiamo porre attenzione al fatto che le informazioni principali siano anche quelle visivamente preponderanti, e non distraiamo troppo l’attenzione con altro.
- Visibile però dipende anche da quello che ho intorno. Un po’ come quei test per i daltonici, dove riusciamo a leggere un contenuto solo se questo è contrastato rispetto al contorno. In questa mappa turistica di una cittadina laziale, io ho avuto grosse difficoltà a trovare quello che credo cerchino tutti i turisti: io sono qui. Voi lo vedete? Considerate che questo è già una zoom sulla mappa completa, quindi siete anche facilitati! Vi aiuto.
- E’ bastato cambiare un punto di un colore diverso e di colpo l’informazione sulla vostra posizione nella mappa diventa visibile, di conseguenza la mappa è più usabile.
- Voglio ritornare sul discorso del contesto d’uso, anche per la visibilità. In questo pacco di pasta ci sono molte informazioni diverse: quando lo acquisto, al supermercato, probabilmente mi interessa sapere il nome, la marca, gli ingredienti. Ma quando ho il pacco in casa, ci sono altre due cose che voglio sapere e trovare facilmente: la data di scadenza e i minuti di cottura. Entrambe le informazioni sono state messe sul retro della scatola: se per caso l’ho già aperta e sono davanti alla pentola che bolle pronta a buttarla, è probabile che per cercare i minuti io rovesci tutto il contenuto! Non solo, guardate quanto spazio bianco c’è sulla colonna sinistra: perché usare un font così sottile, che somiglia a un sottotitolo del formato, per indicare un’informazione così importante? Spazio ce n’era a sufficienza per entrambi.
- Passiamo invece a vedere un altro parametro che impatta sulla visibilità, ovvero la comprensibilità. Affinché il nostro artefatto sia comprensibile deve essere in grado di comunicare in modo chiaro, efficace e semplice a chi lo usa. Vediamo qualche esempio in dettaglio.
- Questo è un cartello presente alla fermata di autobus a Roma. La mia perplessità riguarda la comprensibilità del titolo scelto: “Passaggi alla fermata”. Visto che si tratta semplicemente di orari dell’autobus, non poteva chiamarsi, appunto, “Orari”? Teniamo anche presente che la comprensibilità è funzione di tante cose: la lingua (se ci rivolgiamo a degli stranieri dobbiamo rendere il nostro linguaggio più semplice), la cultura di riferimento (quello che ci sembra chiaro a noi potrebbe non esserlo per altri gruppi di persone), e così via.
- A volte per veicolare il nostro messaggio scegliamo di usare delle immagini, giustamente molto comunicative e magari meno equivocabili delle parole. Secondo voi questa porta, che è di un hotel, a cosa serve? Io ho pensato potesse essere un’entrata secondaria per gli animali dei clienti! Il problema sorge quando le immagini sono decorative e finiscono col fuorviare il messaggio principale dell’artefatto.
- Un’icona vale più di mille parole, giusto? Sbagliato. Le icone piacciono molto, soprattutto agli informatici o ai creativi, peccato però che da sole siano in genere poco riconoscibili e quindi poco comunicative. Eric Reiss afferma che secondo uno studio recente queste sarebbero le uniche 4 icone riconoscibili dalla maggioranza degli utenti. La bustina per l’e-mail, la lente d’ingrandimento per la ricerca, la casa per la Home page, e la stampante per stampare. Io su quest’ultima ho dei dubbi. Comunque sarebbe bene utilizzarle se possibile per rinforzare un messaggio, non per sostituirlo completamente. Ricordatevi che la ridondanza è una buona cosa in termini di usabilità.
- Un altro aspetto importante per la chiarezza d’uso è la coerenza: coerenza con cosa? Con situazioni simili e analoghe, con alcuni standard riconosciuti e con quanto abbiamo detto nel corso dello stesso processo o interazione. In questo esempio vi riporto il display e i comandi di un sistema multimediale per automobile. Le funzioni attivabili sono riportate con diverse notazioni fra i due elementi, e non coincidono completamente: questo genera confusione, soprattutto se consideriamo che l’uso principale di questo dispositivo è in auto, mentre siamo impegnati a guidare magari.
- La prevedibilità, ultimo aspetto della chiarezza d’uso che tratterò, significa fornire alle persone una chiara idea del percorso che sta compiendo, in ogni momento. Devono sapere cosa accadrà di lì a poco e quanto manca al raggiungimento del loro obiettivo. Possiamo dare indicazioni visive o testuali ma l’importante è trasmettere cosa c’è dopo, o cosa c’è sotto (se stiamo scrollando una pagina) o cosa succede se clicco lì. Ricordatevi che i link sono delle promesse, e vanno sempre mantenute. Nel primo esempio il mio smartphone mi sta dicendo che, dopo aver premuto il tasto Continua, devo pazientare un attimo perché sta caricando il passo successivo.
- In questo esempio invece vediamo un checkout di un processo di acquisto online. Siamo in grado di capire che è un processo di due step perché in alto è evidenziato dove siamo e cosa c’è prima. Inoltre, nello step in cui ci troviamo, ci viene illustrato chiaramente che dobbiamo compilare 5 campi, sia grazie alla numerazione che tramite la suddivisione delle informazioni in blocchi specifici. Non solo, questo sistema è dinamico, per cui se per esempio seleziono come modalità di pagamento Paypal vedrò sparire il punto 5 perché non più necessario.
- Abbiamo finito la carrellata di concetti che compongono l’usabilità. Ora mi piacerebbe lasciarvi con qualche elemento pratico per migliorare la vostra progettazione. Se siete stati attenti, vi sarete accorti che l’indice dei parametri spiegati potrebbe diventare una checklist contro cui confrontare i vostri progetti e prototipi. Punto per punto, verificate se per caso avete valutato tutti questi aspetti, e vedrete che complessivamente l’usabilità del vostro artefatto ne uscirà rinforzata.
- Ma il modo migliore per garantire che i vostri prodotti siano effettivamente usabili è quello di testarli: i test di usabilità sono delle sessioni in cui presentiamo i nostri prototipi, a volte cartacei a volte interattivi davanti a degli utenti reali. Li osserviamo mentre li usano e prendiamo nota di tutto ciò che accade, dalle loro reazioni emotive a eventuali ostacoli e difficoltà che incontrano. Queste informazioni, preziosissime, le recepiamo andando a modificare i nostri prototipi. Idealmente è un processo ciclico che si ripete in diverse fasi progettuali, fino ad arrivare al rilascio delle specifiche per la produzione vera e propria.
- Vi lascio con una bibliografia minima che vi consiglio se siete interessati all’argomento. Il primo libro è Usable usability di Eric Reiss, libro a cui mi sono pesantamente ispirata per questo webinar. E’ solo in inglese ma è davvero semplice da leggere e ricchissimo di approfondimenti. Il secondo è invece un caposaldo dell’usabilità, La caffettiera del masochista di Donald Norman, uno dei guru mondiali sull’usabilità. Infine, per chi fosse interessato in particolare all’usabilità dei siti web vi consiglio Don’t make me think di Steve Krug: facile da leggere, c’è anche in italiano, e ricco di cose da mettere subito in pratica.