Differenze tra siti web classici e Single Page Application

Una delle grandi trappole delle single page application è il decadimento dell'esperienza utente in seguito agli aggiornamenti che si succedono dopo la prima pubblicazione; all'introduzione di nuove funzionalità, che dovrebbe mirare a consolidare o migliorare l'usabilità del sito, si ottiene invece spesso l'effetto contrario; questo può avvenire o a causa di problemi di natura tecnica, come la povertà della struttura della codebase iniziale, oppure in virtù di una scarsa attenzione e superficialità nella fase di design stesso.

Il primo problema che sovente si riscontra è quello della lentezza, a volte insopportabile: nel caricamento delle pagine, nei feedback, in generale in tutte quelle interazioni con la UI che può incorrere in freeze anche prolungati. Uno UX designer non può quindi esimersi dal conoscere a fondo l'architettura di una spa moderna e di come essa verrà implementata utilizzando i framework web contemporanei, soprattutto per quanto concerne il routing, la renderizzazione delle view, la gestione di stati ed eventi, i sistemi di caching e i processi asincroni... il che ovviamente non vuol dire saper implementare direttamente in prima persona tutto questo.

Nell'architettura di un sito web tradizionale, basata sul protocollo HTTP, ogni pagina è identificata da un URL; quando l'utente naviga verso una determinata rotta il browser richiede la pagina corrispondente tramite una richiesta GET al server. Anche in una SPA è prevista una rotta per ogni pagina, ma stavolta sfruttiamo le funzionalità asincrone di Javascript per andare a modificare sempre e solo la stessa pagina iniziale, renderizzando di volta in volta il nuovo contenuto richiesto.

Eliminazione dei pitfall

Il primo grande miglioramento dell'esperienza utente risiede proprio nell'utilizzo di una singola pagina. Così come avverrebbe in un'applicazione nativa possiamo prevedere ogni sorta di componente e meccanismo di manipolazione della UI che ci permette di in tempo reale di rendere l'utente consapevole di cosa sta accadendo e di ricevere dei feedback appropriati con tempi di risposta molto brevi.

L'avvio della SPA è probabilmente il punto di maggior criticità sia a livello computazionale che di trasferimento di dati, poiché sono eseguiti tutti i processi di boot dell'app attraverso i quali sono caricate librerie e configurazioni; bisogna curare con attenzione lo stato della UI in questa fase per ridurre al minimo il senso di frustrazione dell'utente, facendogli percepire cosa sta accadendo e quanto potrebbe perdurare la situazione.

La navigazione tra le pagine è agevolata grazie alle librerie di caching e routing che contraddistinguono i vari framework. Uno UX Designer deve rimanere costantemente aggiornato a riguardo e documentarsi riguardo le API utilizzate (soprattutto quelle di terze parti), per evitare il congestionamento di troppe azioni e relative chiamate o operazioni in una stessa pagina.

In fase di Design, grazie allo studio dell'IA del sito, sono state identificate proattivamente rotte, contenuti e flussi utente, abbiamo inoltre a disposizione una mappa dei componenti che, passata agli sviluppatori, permette loro di riutilizzarli con efficacia ed efficienza, implementando correttamente i vari stati e le interazioni, minimizzando il numero di nodi che si vanno a creare all'interno della pagina stessa, che risulterà più snella nei caricamenti e nel consumo di memoria.

Caso Studio: Gmail

Segnalazione del caricamento

Abbiamo detto che una differenza sostanziale tra una SPA e un sito web classico è nel caricamento dei dati. Confrontiamo le due versioni di Gmail: ci accorgeremo che in quella SPA, oltre all'interfaccia del browser, è l'app stessa delegata a fornire all'utente feedback riguardo le operazioni di caricamento della pagina, in maniera estremamente minimale. Riscontri simili si hanno anche al cambio di rotta.

Cambio di sezione

Confrontiamo ancora la versione classica e quella SPA di Gmail. In quella classica, se proviamo a passare dalla casella di Posta in Arrivo al Cestino noteremo che la pagina e il suo contenuto si aggiorna visibilmente per intero, comprese eventuali immagini, al netto del minor tempo di caricamento dovuto dal caching del browser. In quella SPA ciò non avviene poichè gli elementi comuni come il menu laterale non hanno la necessità di essere nuovamente renderizzati, dando la possibilità al Designer di utilizzare soluzioni estetiche e strutturali più gradevoli e usabili.

Prevenzione degli errori

Se pensiamo al problema più banale che i client di posta web del passato presentavano ci verrà sicuramente in mente quello riguardante la non segnalazione all'utente della mancanza degli allegati in un messaggio; sovente dopo aver scritto un'email ci si accorgeva di aver dimenticato di allegare i file citati nel testo dell'email. Tali tipologie di errore sono più comuni di quanto si possa pensare, addossano sull'utente frustrazione e delusione facendolo sentire "un inetto"; è proprio nelle operazioni più semplici ma che richiedono maggiore concentrazione che un corretto studio UX dovrebbe prevenire ogni situazione d'errore.

Pensiamo al client web di Gmail oggi. Una situazione come quella sopra descritta non può più accadere. L'app ci segnalerà l'errore mediante una modale e ci chiederà se davvero intendiamo inviare la nostra email senza alcun allegato, nonostante chiari riferimenti ad esso.

Reversibilità delle azioni

Sulla versione SPA di Gmail proviamo a selezionare più elementi e flaggarli "come non lette". L'applicazione ci darà immediato riscontro dell'operazione e ci chiederà se vogliamo annullarla. Questo avviene su tutte le azioni che sono considerate rischiose e da la possibilità all'utente di non incorrere in problemi dovuti il più delle volte a mancanza di attenzione o input non voluti.

Conclusioni

Possiamo quindi sostenere che una SPA senza una degna progettazione UX è peggiorativa dell'esperienza utente rispetto ad un classico sito web, poiché presenta più flussi e casi di errore che hanno le necessità di essere ben definiti e testati. Deve essere inoltre prestata estrema attenzione ai layout e ai componenti utilizzati nelle varie schermate, alla definizione di tutti gli stati possibili.