Questa è la traduzione dell'articolo Improving User Workflows with Single-Page User Interfaces di Joost Willemsen, pubblicato originariamente su UXmatters. La traduzione viene qui presentata con il consenso dell'editore (UXmatters) e dell'autore.
Negli ultimi anni le RIA (Rich Internet Applications) sono state un tema di discussione molto caldo. Sebbene la parola un tempo in voga, Ajax, abbia già un po’ perso il suo splendore tra i progettisti di applicazioni web, le RIA iniziano più che mai ad avere grande importanza anche tra i nostri clienti ed utenti. Tutti sembrano adorare il filtraggio di dati basato su dispositivi a scorrimento (slider), il trascinamento degli elementi (drag & drop), i fisheye menu e il completamento automatico per i campi di input. I progetti di applicazioni web che non hanno nessuna di queste caratteristiche tipiche di Ajax non sono ben accetti. Qualche volta, si ha la sensazione che gli sviluppatori web riempiano i siti che l’azienda ha loro commissionato di contenuti inutili solo per scopo estetico. Ma, ovviamente, il design dell'esperienza utente dovrebbe andare ben oltre la semplice creazione dei controlli.
Avendo detto ciò, credo che le RIA siano qui per rimanere, ma non tanto a causa della creazione dei loro accattivanti controlli quanto poiché l’abbondanza non è il modo migliore per supportare le applicazioni web complesse e i flussi di lavoro utente non lineari.
Interfacce utente multi-pagina vs. interfacce utente a pagina singola
Uno degli aspetti più eccitanti di Ajax è l’interfaccia utente a pagina singola, quella nella quale tutte le interazioni avvengono nello spazio di una singole schermata o pagina. Sulle pagine vengono visualizzati solo i controlli e le informazioni importanti; quelli che un utente non usa al momento sono nascosti. Ove necessario, un’applicazione può facilmente visualizzare nuove informazioni o funzionalità aggiornando parzialmente la pagina. Le caratteristiche altamente interattive come il feedback in tempo reale degli errori, la modifica in linea, calcoli all’interno della pagina, filtraggio e separazione delle tabelle sono simili a quelle che trovereste sulle applicazioni desktop. Le interfacce utente a pagina singola consento agli utenti di lavorare in modo intuitivo e non lineare.
Le applicazioni web non sono state sempre così. Sotto molti punti di vista, le prime applicazioni web sembrano essere un passo indietro, richiedendoci una sorta di scambio: usabilità in cambio di connettività. I siti web erano ambienti a più pagine nei quali gli utenti passavano da una pagina all’altra. Questo modello era sufficiente per molte attività svolte dall’utente come leggere gli articoli di un giornale. Di solito un utente inizia a leggere le notizie facendo clic sul titolo o su un testo in anteprima, il quale viene visualizzato in un’altra pagina contenente l’articolo completo. Quando un articolo è lungo può essere spezzato e visualizzato su più pagine. Un utente naviga tra queste pagine cliccando i bottoni avanti e indietro. In ogni caso, poiché il processo di lettura è piuttosto lineare, la linearità di questo modello di navigazione crea agli utenti pochi problemi. Sembra del tutto opportuno fare clic sul bottone avanti per visualizzare la pagina successive.
Un'applicazione web tradizionale, multi-pagina, funziona bene per queste semplici funzioni, flussi di lavoro lineari per gli utenti, ma le interfacce utente a pagina singola supportano molto più efficacemente i complessi flussi di lavoro non lineari. Per dimostrarlo, userò l’esempio di un’applicazione di un sito prenotazioni viaggi.
Prenotare dei viaggi online
Gli utenti che prenotano un viaggio on line sono alla ricerca dell’utilità, che generalmente significa migliore combinazione di prezzi ed un'esperienza che vada incontro alle loro aspettative. Quando si prenota un viaggio, si sta comprando qualcosa che non si può vedere o provare. L’unica cosa che si può fare è provare a valutare i vari componenti che compongono la propria vacanza – per esempio cercare informazione sui voli, sulle sistemazioni e cosa fare e vedere a destinazione. Il contenuto on line dei siti di prenotazioni viaggi on line va sempre più migliorando nel tempo, con nuovi tipi di contenuto come video, recensioni, valutazioni, categorizzazione degli attributi e così via, oltre a descrizioni testuali ed immagini. Con tutti questi contenuti, la trovabilità e l’usabilità delle informazioni sono diventate fondamentali. E, poiché la prenotazione del viaggio può essere un flusso di lavoro utente molto complesso, è li che entrano in gioco le RIA.
Che cosa rende complessa la prenotazione di un viaggio?
Un complesso flusso di lavoro
Sebbene prenotare un viaggio abbia le sue peculiarità, esso è essenzialmente un processo d’acquisto che include sei punti di base:
- Definire le proprie esigenze.
- Ricerca di prodotti che soddisfino le proprie esigenze.
- Valutare e confrontare le alternative.
- Decidere quali sono le alternative migliori che corrispondono alle vostre necessità.
- Completare l’acquisto.
- Ricontrollare l’acquisto.
Adesso, ciò sembra semplice e lineare. Allora perché questo flusso di lavoro è complesso?
La risposta è: non è sempre complesso. Può essere davvero semplice: dipende dal tipo di vacanza, dalle offerte disponibili, e dalla personalità e dalle esigenze dell’utente.
È chiaro che il tipo di vacanza fa un sacco di differenza. Si tratta di una vacanza breve o lunga? La vostra destinazione è vicino casa o lontano? Se decidete di trascorre un week-end nelle vicinanze facendo delle escursioni in montagna, tutto quello che dovete fare è prenotare un rifugio per un paio di notti. Non è così complicato. Tuttavia, se decidete di fare un lungo viaggio di andata e ritorno di due mesi per l’Australia, probabilmente avrete bisogno di voli, prenotare una serie di alberghi, e forse alcune escursioni. È necessario prendere in considerazione il fatto che la complessità aumenta con i vari componenti.
Per alcuni tipi di vacanze, il numero di offerte disponibili è enorme, ma per altre, le opzioni sono limitate. Se si desidera una tipica vacanza balneare vi sono centinaia di offerte di pacchetti vacanza. Dall’altro lato, se state progettando un viaggio di andata e ritorno attraverso l’Uzbekistan, probabilmente avrete pochissime possibilità di scelta, così le scelte da fare potrebbero essere più semplici.
Molto dipende dalla personalità e dall’esigenze dell’utente. Alcune persone ogni anno vanno nello stesso posto, soggiornano nello stesso hotel, forse prenotando direttamente dall’albergo. Altre persone potrebbero non sapere dove andare, ma decidono in merito alla prima offerta speciale che cattura il loro occhio, senza preoccuparsene troppo. Spesso chi viaggia per affari ha delle richieste molto specifiche che riguardano il luogo, la qualità del servizio, le date e gli orari che prevalgono su tutte le altre considerazioni, rendendo più facile le loro decisioni. Tutti queste persone per le quali il processo di acquisto non è complicato, possono essere degli esperti fruitori.
Comunque, mentre alcune persone sanno esattamente quello che vogliono, altre non lo sanno. Supponiamo che vogliate trascorrere una vacanza estiva con la vostra famiglia per un paio di settimane. Si potrebbe definire la vostra vacanza in questo modo: Andare in un posto soleggiato dove spiaggia e tempo siano sicuri. Alloggiare in comode sistemazioni, con piscina. Preferire un luogo tranquillo, senza essere del tutto lontani da negozi e ristoranti. La zona dovrebbe offrire alcuni luoghi di interesse culturale da vedere. Questo quadro sembra abbastanza chiaro, ma solo in Europa, decine di migliaia di pacchetti vacanza per le destinazioni del Mediterraneo, si adattano a questa descrizione. Anche se restringete il campo della vostra destinazione ad un solo paese come la Spagna, la Grecia o la Turchia avrete migliaia di possibilità.
Quindi come si fa una scelta? Dovete controllare i risultati di ricerca, come mostrato in figura 1, la quale comporta un insieme di informazioni dettagliate su ciascuno dei componenti principali che compongono una vacanza: la propria destinazione, gli alloggi, i trasporti, i prezzi, le date e gli orari del viaggio, così come le opzioni extra come eventi, escursioni e pasti. Solamente la prenotazione dei vostri alloggi richiede l'analisi dei tipi differenti di sistemazioni che sono disponibili – per esempio: l'hotel, il bungalow, o il campeggio – la loro categoria, il paesaggio circostante, le amenità e così via. Si può anche essere vicini ad una soluzione, quando i dubbi si insinuano: le immagini dell’hotel hanno un aspetto abbastanza piacevole, ma su un sito di recensioni avete letto i commenti negativi che riguardano il cibo. La località sembra eccellente, ma non è molto vicina a rumorosi bar e club? Potrebbe essere necessario ridefinire le proprie esigenze facendo ulteriori ricerche, cercando di nuovo nelle liste selezionate dei risultati di ricerca e confrontando le informazioni dettagliate sulle opzioni selezionate. Se siete un cosiddetto massimizzatore, uno che in un pacchetto vacanze cerca la perfezione in tutti i suoi aspetti, trascorrerete molte serate davanti al computer senza prendere una decisione.
Questo tipo di utente quando visita per la prima volta un sito per prenotare un viaggio, raramente fa un acquisto immediatamente. Gli esperti di marketing possono facilmente sopravvalutare tale fatto, pensando di poter convertire immediatamente ogni visitatore in un cliente. Però i fatti parlano da soli. Nel Regno Unito un recente studio sulle transazioni di viaggi on line ha dimostrato che solo il 10% dei visitatori fanno la loro prenotazione all’inizio della loro ricerca. Dopo quattro settimane, il 45% ha completato la propria prenotazione, con il restante 45% che prende ancora del tempo – 90 giorni dopo la loro ricerca iniziale. A questo proposito, uno shopping on line non è differente da uno shopping in un negozio di mattoni e malta. Le persone vogliono guardarsi intorno, confrontare, avere dei consigli e così via. Spesso non decidono immediatamente, ma ritornano dopo e fanno le loro prenotazioni.
Prenotare un viaggio in un ambiente multi-pagina
L’esperienza potenzialmente noiosa di ripetute ricerche on line viene aggravata dalle interfacce utente lineari e multi-pagina che la maggior parte dei siti di viaggi offrono ancora. Queste interfacce utente obbligano gli utenti a seguire un percorso predefinito e lineare, andando direttamente dalla ricerca ad una pagina con un modulo di prenotazione. Anche se ciò potrebbe soddisfare gli utenti esperti che scelgono rapidamente e sanno quello che vogliono, non è adatto a chi vuole ancora guardarsi intorno.
In un ambiente multi-pagina e soprattutto nel processo d’acquisto, vi sono delle pagine singole per quasi tutte le attività, compresa la pagina di ricerca, l’elenco dei risultati di ricerca, le pagine che visualizzano l’informazione dettagliata dei singoli risultati, alcune pagine di opzioni, le pagine che mostrano i prezzi e la disponibilità, le pagine per la prenotazione. È difficile dare un senso a tali informazioni così dispersive. Quando gli utenti stanno esaminando una pagina che mostri in particolare i dettagli su un risultato di ricerca, non riescono a vedere l’elenco dei risultati rendendo difficile l’operazione di confronto e allineamento dei differenti risultati. Quando stanno esaminando una lista dei risultati non riescono vedere i criteri di ricerca che li ha prodotti, rendendo difficile adattare il loro criteri di ricerca ed essere alle prese con le diverse offerte.
Gli utenti che hanno bisogno di valutare molti risultati di ricerca devono visitare e rivisitare tante pagine. In questo modo perdono spesso di vista il quadro generale e il tempo cliccando avanti e indietro mentre attendono che il server fornisca loro le pagine. Essi restano delusi davanti ad un sito di viaggi on line che sembra penalizzarli perché non offre esattamente ciò che vogliono.
I siti di viaggio multi-pagina non sostengono bene gli utenti nella ricerca, nella valutazione, nel confronto o nella decisione. A metà strada dal processo d’acquisto gli utenti frustrati potrebbero lasciar perdere. Gli studi mostrano che il 60 – 80% degli utenti abbandona un sito web dopo aver avuto un’esperienza negativa. In molti casi non vi ritornano più, per la semplice ragione che hanno trovato un altro sito concorrente che fa un ottimo lavoro offrendo loro quello che stanno cercando.
Prenotare un viaggio in un interfaccia utente a pagina singola
Utilizzando un'interfaccia utente a pagina singola si migliora notevolmente l'esperienza dell'utente su un sito di prenotazione viaggi. Tale interfaccia a pagina singola dovrebbe almeno comprendere i punti 2, 3, 4 del processo d’acquisto – ricerca, valutazione, decisione. La figura 2 mostra un’idea per un’interfaccia utente a pagina singola per un sito di prenotazione viaggi. I principali moduli funzionali che supportano tali passaggi sono: la ricerca, i risultati della ricerca, le viste dettagliate, una sintesi con le opzioni selezionate da un utente e il loro prezzo. Gli utenti dovrebbero essere in grado di osservare ed utilizzare tali moduli contemporaneamente. Dal momento che su una pagina singola lo spazio è limitato e non modificabile, per visualizzare tutto ciò è necessario usare le funzionalità 'mostra e nascondi' a seconda dei casi. All’inizio del processo di acquisto, per il modulo di ricerca bisogna assegnare più spazio; dopo, nel seguito del processo, si dedica più spazio alle viste dettagliate; ed infine è possibile concentrarsi su una visualizzazione del riepilogo. I moduli, perciò, possono avere vari stati. Ad esempio, dopo che un utente clicca su un risultato di ricerca, la lista dei risultati scompare parzialmente per fare spazio ad una vista dettagliata, ma rimane visibile, mostrando le informazioni di base di ogni risultato – ad esempio la posizione, il nome, e il prezzo – e consente di eseguire i confronti.
Grazie alla vicinanza dei componenti chiave, è più facile ricercare, adattare le ricerche, riconoscere le offerte disponibili, riconoscere i modelli, valutare e comparare le opzioni e prendere delle decisioni. La tecnologia Ajax supporta connessioni in tempo reale tra questi componenti, così gli utenti possono ordinare o filtrare i risultati di ricerca e vedere immediatamente che le loro liste con i risultati di ricerca cambiare. Non appena gli utenti aggiungono delle opzioni o seguono l’aggiornamento del servizio ad un livello più elevato, possono notare gli effetti sul prezzo finale. La combinazione del raggruppamento dei componenti e dell'immediatezza crea applicazioni molto potenti. Ad esempio, il filtraggio basato su uno slider consente ai clienti di ridurre facilmente una lista con centinaia di opzioni ad un paio di giorni di vacanza che corrispondono in realtà a quanto i clienti richiedono. Gli utenti possono guardarsi intorno e utilizzare le diverse opzioni, dando loro un maggior controllo su tutto il processo d’acquisto.
Questa sensazione di controllo viene ulteriormente aumentata da un’applicazione tollerante agli errori dell’utente che rende facile l’uso di combinazioni possibili, rimanendo sulla stessa pagina ed ottenendo un feedback immediato di errore. L’interfaccia utente supporta ogni vostro capriccio e non vi punirà qualora voi non sappiate che cosa desiderate.
Una volta accertato il fatto che alcuni utenti hanno bisogno di tempo e che preferiscono ritornare la prossima settimana piuttosto che fare subito un acquisto, il riconoscimento dell’utente diventa fondamentale. Agli utenti non piace fornire di nuovo le stesse informazioni. Per prenotare i viaggi on line, il riconoscimento da parte dell’utente dovrebbe essere parte integrante dell’applicazione. L'applicazione dovrebbe utilizzare le informazioni nei profili utenti e conservare le informazioni sui viaggi o sulle ricerche precedenti, aggiornando le date secondo le necessità , ma lasciando tutte le altre informazioni immutate. Facendo tutto questo diminuiscono le attività noiose e ripetitive migliora l’esperienza dell’utente.
Tutte queste caratteristiche contribuiscono alla creazione di un'interfaccia utente che non interrompe inutilmente gli utenti con messaggi di errore e non li fa attendere – in altre parole, un'interfaccia utente non invadente che dà agli utenti la possibilità di concentrarsi sui loro compiti e raggiungere un insieme di informazioni, o di interazioni. In questo modo, è più facile prendere delle decisioni sentendosi sereni.
Conclusioni
Le applicazioni web a pagina singola supportano molto meglio i complessi flussi di lavoro dell'utente rispetto alle applicazioni web multi-pagina. Prenotare una vacanza può diventare una cosa facile e divertente da fare. E ne beneficiano non solo i clienti. Un miglior uso da parte dell’utente può solamente aumentare il rapporto di conversione del proprio sito e la soddisfazione e la lealtà degli utenti.
Naturalmente se un’interfaccia utente a pagina singola non è ben progettata, non è sufficiente. Il layout gglobale di un’applicazione web e i relativi controlli richiedono un’attenzione particolare, poiché gli utenti potrebbero non avere familiarità con le caratteristiche e le funzionalità delle applicazioni web avanzate. Per fare solo un esempio, per evitare che gli utenti si disorientino quando si mostrano o si nascondono le diverse parti di una pagina, è importante animare sottilmente la loro comparsa e scomparsa.
Forse la sfida più importante per i progettisti di applicazioni web a pagina singola è il rapporto tra flessibilità e usabilità. Mentre aumenta la flessibilità di un’applicazione, diminuisce la sua usabilità. Il motivo di ciò è il relativo rapporto segnale-rumore, che è il rapporto di informazioni pertinenti e irrilevanti di una pagina. Se questo rapporto è elevato, un’applicazione è più usabile. Tuttavia, un'applicazione web che è molto flessibile può offrire tantissime possibilità e aumentare così nel rapporto il livello di rumore. Quindi la sfida consiste nel mantenere una pagina di applicazione il più semplice possibile. Abbellire una pagina con tanti controlli particolari e pomposi è tecnicamente possibile, ma non è una buona idea. Mostrare soltanto cioè che è importante per l’attività da svolgere e in base alle esigenze offrire altre funzionalità, questo è il segreto.
Traduzione a cura di Cinzia Pasqualino.
