Checking the “Feel” of Your UI with an Interaction Audit – Web 2.0 Expo Berlin

The author presented the process that in Ebay leads to interaction audit. But, first of all, what is “feel” and why should i matter?

It’s the feel in look and feel, while many times we just consider the look of the interface. The feel can be considered how you operate the user interface with your own hands.

Feel affects:

  • learning curve
  • mental bandwiith needed to operate the user interface
  • user success (or errors)
  • site personality
  • brand promise
  • adoption (or abandonment)

While developing the Ebay interaction audit the team created a flash demo of the different pages and sections of the Ebay sites. What is interesting to note is that by playing this series of screenshots a little fast it’s possible to highlight several inconsistencies, especially in the structure (eg. headers, logos of different size and in different positions). Creating this sort of animations is very valuable but it’s not expensible or complex to do. They use such animation as a sort of benchmark.

Developing an interaction audit was not like following a strict blueprint. It happened that, based on new findings, they noticed how to improve the process.

Project phases

  • strategy
  • data collection
  • analisisy
  • recommentdations

Strategy

Improvement of user experience on ebay: they made a compelling artifact. They wanted to collect data around the flows. So they imagined flows based on their user behaviour, such as “new users finds an item, bids for it, register as a member”, “new seller lists item for sale, create sellers account”.

They eventually put all on a spreadsheet to see with tasks were common to several flows

Data collection

They used a simple db (filemaker pro). They also captured graphical data.

Database fields used:

  • task and subtask
  • step description
  • page and url
  • action (syntacrtic)
  • screen shot close up
  • instructional text
  • click/keystroke record

Analysis

They printed each record (flows as storyboards) so they could made comparisons. It was like storyboarding in the comics industry.

Ideas for presenting the findings

  • Radial charts to track feel metrics
  • Emotional flow to track feel effects

Recommendations

Here is a list of some of the analysis results

Affordance: a visual cue that some interaction is offered
Affordance inconsistencies
: inconsistencies: hyperlink, tab

Task: a path to accomplish an immediate goal
Task Inconsistencies: a simple goal is accomplished via multiple path: filtering data, enable/disable section of a form

Data objects: a representation of a data record or other piece of data
Data objects inconsistencies
: a single data tye object representede multiple ways: ebay member

Interaction audit goals:

  • low learning curves
  • consistent clues for actions
  • predictable behavior of affordances
  • instant recognition of interface elements
  • allow ebay member content to shine

After being presented the results, the design team was divided in several group (clean-up teams) based on the inconsistencies found:

  • The clickers: links and buttons
  • The swappers : tabbs and toggles
  • the submitters: forms
  • shufflers: sorting
  • disclosers

They work of “cleaning-up” ended creating reusable components thanks to patterns

Clean-up process

  • find problem area
  • recommend simpler set of interactions
  • document design patterns

Feel metrics

objective: page dimension, number of elements, density….
semi-objective: number of syntactic actions, reloadiness, number of tools switches (keyboard, mouse), popup,
subjective: number of different interaction styles, simplicity, flatness, cognitive load

What we’ve learned:

  • it’s important to check feel
  • an interaction audit can be compelling, actionable and part of a real environment
  • audit should focus on flows and be representative of real experience
  • simple tools work
  • audit for inconsistencies in afforfance, task, and data object
  • clena up objects
  • harder problems require site specific values

Il web 0.2 tra noi

Parliamo così tanto di web 2.0 che a volte sembra che tutto internet funzioni così. Per risvegliarci e tornare alla realtà è però sufficiente collegarsi, con le proprie credenziali, al sito dell’INPGI, l’Istituto Nazionale di Previdenza dei Giornalisti Italiani.

E’ quello che ho fatto l’altra sera, intorno alle 21.30. Le mie intenzioni erano quelle di dichiarare il reddito per il 2006, operazione che da quest’anno è possibile svolgere anche online. Per posta ordinaria mi sono infatti arrivate due lettere, la prima contenente il codice, la seconda la password.

E infatti mi sono collegato senza problemi, ricevendo però questa risposta:

inpgi

Insomma, anche il server web ha il diritto di fare orario da ufficio.

Progettare e sviluppare per dispositivi mobile

Per lavoro mi sono trovato a dover studiare i principi base dello sviluppo di applicazioni per dispositivi mobili. Ma più che la tecnica, il linguaggio di programmazione, l’aspetto più complesso per chi proviene dal mondo “desktop” è sicuramente la definizione e progettazione dell’interfaccia grafica.

Nelle mie ricerche ho avuto la fortuna di imbattermi in alcuni risorse che mi sento senza dubbio di consigliare.

La prima è il manuale “Designing the Mobile User Experience“, pubblicato da Wiley, che è un’ottima introduzione a questi temi. Secondo l’autrice, Barbara Ballard, il termine “mobile” si riferisce, più che al dispositivo o al software, all’utente e alle situazioni in cui si trova a interagire con queste periferiche.

Questo testo contiene anche utili indicazioni delle differenze con cui i dispositivi mobili vengono usati in Europa, in America e in Asia. Non si tratta semplicemente di variazioni di standard o di protocollo, ma anche di impiego. In America, ad esempio, gli SMS hanno storicamente riscosso minore fortuna che in Europa, a causa di eccessivi prezzi fissati dagli operatori, ma anche per la capillare diffusione della posta elettronica.

La cosa bella di questo manuale è che il capitolo più interessante, il sesto, è in buona parte disponibile anche online sottoforma di wiki. Il capitolo prende in considerazione alcuni pattern di progettazione per i dispositivi mobile, suddivisi in macrocategorie:

  • progettazione dello schermo
  • navigazione all’interno delle applicazioni
  • gestione delle applicazioni
  • pubblicità

Avendo a che fare con dispositivi dalle funzionalità eterogenee, questi sono statti suddivisi in classi di appartenenza. Ciascun pattern fa quindi riferimento a una o più classi, così che sia immediato capire se un pattern è applicabile o meno a una determinata periferica.

Un’altra interessante risorsa, questa volta liberamente scaricabile in formato Pdf, è il documento “Mobile Web Developer’s Guide” scritto da Brian Fling, e si rivolge a chi si proccupi di realizzare siti web che siano accessibili anche ai telefoni cellulari, e in generale alle ultime generazione di dispositivi mobile. Questo testo integra in qualche modo quanto presentato dal manuale della Ballard, avvicinandosi più alle problematiche di sviluppo.

The Elements of User Experience

Interaction design, information architecture, information design, ecc. Termini e discipline che molto spesso è difficile collocare o descrivere, tanto sembrano sinonimi gli uni degli altri.

Eppure, lavorando nel web, questa distinzione di competenze è spesso fondamentale per capire come realizzare siti che soddisfino realmente gli utenti.

A far chiarezza in questa babele ci ha pensato Jesse James Garrett, che ha realizzato un semplice diagramma [Pdf 17 Kbyte] (disponibile anche in italiano [Pdf 20 Kbyte]) in cui presenta queste discipline, le relazioni che intercorrono tra loro e i punti in cui si collocano rispetto allo sviluppo web.

Sulla scia del successo del diagramma, l’autore ha quindi ricavato un libro in cui ha tutto il tempo di descriverne, completarne ed estenderne i concetti, senza mai esagerare (il testo ha il grosso pregio di non superare le 200 pagine).

Come è facile immaginare, si parte dalla descrizione di User Experience, ovvero come un prodotto (nel nostro caso, un sito), viene realmente usato da un acquirente o da un utente. Capire cos’è la User Experience è il primo passo per realizzare siti che tengano in considerazione le esigenze degli utenti (si parla in questo caso di User Centered Design).

Garrett ha suddiviso il diagramma in 5 fasi (Strategy Plane, Scope Plane, Structure Plane, Skeleton Plane, Surface Plan), presentate orizzontalmente dalla più astratta a quella più vicina all’utente, e a ognuna ha riservato un intero capitolo.

Decisamente ottima l’idea di dividere ulteriormente il diagramma, anche verticalmente, basandosi sulla doppia natura del web, da un lato quello di interfaccia software, dall’altro quello di sistema ipertestuale. Questa ulteriore distinzione permette di raggruppare le discipline direttamente coinvolte nel reperimento, catalogazione e creazione dei contenuti, e quelle più vicine allo sviluppo tradizionale di applicazioni.

Senza la pretesa di voler approfondire ogni disciplina dello User Centered Design, all’autore va sicuramente il merito di descrivere con accuratezza e semplicità ogni fase del diagramma, suggerendo alla fine di ogni capitolo i migliori testi di approfondimento.

La lettura del manuale è caldamente consigliata a chiunque si trovi coinvolto nello sviluppo di un sito web di medie o grandi dimensioni e voglia capire quali sono gli attori coinvolti, ma anche a chi, al termine del proprio percorso di studi, stia valutando la possibilità di un impiego specialistico in questo mondo.

Informazioni

The Elements of User ExperieceUser Centered Design for the Web ¤ di Jesse James Garrett ¤ pagine 190 ¤ prezzo 29.99 dollari ¤ edito da New Riders

Gli elementi dell’Esperienza Utente

L’Esperienza Utente riferita al web è un approccio che aiuta a migliorare la fruizione di un sito da parte del visitatore.

Molte sono le discipline poste sotto l’ombrello dell’Esperienza Utente: Information Architecture, Information Design, Content Requirements, ecc.

Per chi lavora sul web, e per i suoi clienti, non sempre è facile capire le differenze tra queste discipline e i rapporti che intercorrono.

Un Pdf chiarisce il ruolo dell’Esperienza Utente

A chiarire le idee ci ha pensato Jesse James Garrett, che in un documento Pdf di una pagina chiarisce la terminologia usata dagli esperti di Esperienza Utente e le relazioni che intercorrono tra i suoi diversi elementi.

Il documento è disponibile in inglese [Pdf - 17 Kbyte] e nella sua traduzione italiana [Pdf - 21 Kbyte].

Jesse sta anche scrivendo un libro che parlerà proprio di esperienza utente e abbiamo così colto l’occasione di rivolgergli qualche domanda.

Cos’è l’Esperienza Utente e perchè è importante conoscerla?

L’Esperienza Utente è un approccio, un modo di pensare al processo di sviluppo web. Con l’Esperienza Utente si sostiene che l’esperienza di un utente sul sito determina il successo o il fallimento della visita. Un’analisi metodologica dell’esperienza è il miglior modo per assicurare il successo della visita.

L’esperienza utente è importante perché la tecnologia da sola non è sufficiente per risolvere i problemi di tutti i giorni. Forse l’utente entra in un sito cercando delle informazioni; forse vuole sbrigare degli affari; forse ha solo bisogno di inviare un messaggio a qualcuno. Non importa quello che vuole fare, ma sicuramente lo strumento che lo aiuta non è esclusivamente qualcosa di tecnico – è uno strumento costruito appositamente per andare incontro alle sue esigenze. La tecnologia che promette potenti capacità, ma richiede all’utente di faticare per ottenerle, non è una soluzione. È solo un altro problema.

Cosa troveremo nel tuo libro?

Il libro è un’introduzione ai concetti base nel campo dell’Esperienza Utente applicata al web. Non parla di strumenti o tecnologie usati per migliorare l’esperienza dell’utente. Riguarda invece i procedimenti che costituiscono il nostro lavoro. Il libro è scritto per essere accessibile a persone poco familiari con il mondo dell’esperienza utente.

Qual è lo scopo del Pdf disponibile sul tuo sito?

Originariamente l’ho creato per me – si è rivelato un ottimo aiuto per chiarirmi le idee durante il mio lavoro. In seguito il diagramma è diventato un utile strumento per comunicare queste idee ad altre persone. Sono un consulente da diversi anni e questo lavoro richiede di spiegare il mio lavoro anche a persone poco familiari in questo campo. Dopo che ho pubblicato il documento Pdf sul sito molti altri lo hanno trovato utile, sia per loro stessi sia per le persone con le quali lavorano.

Qual è il pubblico a cui si rivolge il libro?

Prima di tutto i miei clienti. Durante il primo incontro con loro mi piacerebbe dire: “Siamo pronti per cominciare questo progetto. Potrei usare delle parole che non capite. È necessario prendere molte piccole decisioni e vi potrebbe sembrare che non siano importanti. Invece lo sono, e per il successo di questo progetto ho bisogno che capiate perché sono importanti. Questo libro vi aiuterà a capire queste cose, capire il linguaggio che useremo e capire perché facciamo le cose in questo modo. Portatelo a casa e leggetelo stasera, è molto breve. Domani possiamo cominciare a migliorare il sito per i vostri utenti”

Naturalmente questo tipo di approccio funziona bene anche con altre persone che hanno difficoltà a capire il nostro lavoro, non solo i clienti. Spero così che chi sta imparando cosa sia l’esperienza utente riesca anche a trarne beneficio.

Il libro è indicato solo a chi si occupa di progetti di grosse dimensioni?

Alcune delle tecniche descritte si applicano principalmente a progetti su larga scala. Visto che l’enfasi del libro è sul “perché” piuttosto che sul “come”, penso comunque che il libro sia utile anche a chi lavora su piccoli progetti. Il libro includerà una discussione di come comportarsi in diverse situazioni, da progetti di piccola a grande scala.