Non peggiorare la UX con le Single Page Application

Non peggiorare la UX con le Single Page Application

Se ci fosse un giuramento di Ippocrate per gli sviluppatori Web, includerebbe sicuramente la promessa che qualsiasi modifica a una pagina Web fornirà un netto miglioramento all’esperienza dell’utente.

Eppure, ci sono molti siti che hanno una pesantezza assurda e che generano attese infinite per gli utenti prima di mostrare il contenuto della pagina.
Molto spesso la causa principale di ciò è un’implementazione scorretta dell’architettura a pagina singola (SPA).

Quali sono quindi  le insidie ​​comuni che riducono l’esperienza dell’utente.

 

Architettura SPA (Single-page application)

La maggior parte dei siti è suddivisa in pagine per rendere più semplice il consumo delle informazioni. L’architettura tradizionale prevede di assegnare a ciascuna pagina un URL univoco. Per navigare su una pagina, il browser invia una richiesta GET all’URL della pagina. Il server risponde con la pagina e il browser scarica la pagina esistente e carica quella nuova.

Per la connessione Internet media, il processo di navigazione richiederà probabilmente alcuni secondi, durante i quali l’utente deve attendere il caricamento della nuova pagina.

Diagram showing the loading pattern of a traditional page

Con JavaScript e XMLHttpRequest, è possibile un modello diverso: il contenuto della pagina può essere letto dall’API in modo asincrono con AJAX e quindi scritto nella pagina corrente con JavaScript.

Dal punto di vista utente, la navigazione sembra non avere varianti rispetto a quella tradizionale, ma dal punto di vista tecnico questo sito ha solo una pagina. Il nome è appunto “applicazione a pagina singola”

Diagram showing the loading pattern of a single-page app

 

Miglioramento della UX

L’intenzione dell’architettura a pagina singola è migliorare la UX e lo fa nei seguenti modi:

  • Le SPA possono offrire un’esperienza più continua all’utente, eliminando la necessità di ricaricare la pagine.
  • Una volta che la SPA è stata caricata, la navigazione tra le pagine è più veloce perchè vengono riutilizzati gli elementi della pagina senza caricare lo stesso markup.

Tuttavia, è necessario aggiungere una libreria di routing al pacchetto JavaScript

 

Insidie

Ironia della sorte, le applicazioni a pagina singola possono danneggiare la UX se non vengono evitate alcune insidie:

  • Le SPA hanno una dimensione di download iniziale di grandi dimensioni.  Finchè il router e gli elementi della pagina non sono stati scaricati, l’applicazione non funziona. Strumenti di build come Webpack possono essere d’aiuto caricando in modalità “lazy-loading”  il codice non necessario inizialmente.
  • Nella modalità di navigazione classica, i browser forniscono indicazione evidenti del caricamento di una pagina e di eventuali errori, come il  404.
    Il risultato di una richiesta AJAX, invece, è nascosto all’utente. Con le SPA, occorre quindi trovare un modo per far comunicare agli utenti eventuali errori presenti nelle loro azioni
  • Con una SPA, il contenuto della pagina potrebbe non essere incluso nel download della pagina iniziale, il che significa che un utente potrebbe dover attendere l’esecuzione di JavaScript e il completamento delle chiamate AJAX.
    In questo caso, il rendering lato server o il prerendering potrebbe essere una soluzione, ma spesso richiede una configurazione complessa.

 

Conclusioni

Lo scopo dell’architettura SPA è quello di fornire un’esperienza utente superiore, ma se non si presta la dovuta attenzione, può avere l’effetto opposto!
Impostiamo quindi correttamente il routing , utilizziamo il lazy-loading, forniamo messaggi di errore chiari ed evidenti,
e, se possibile, adottiamo un prerendering delle informazioni.

 

Riferimento web: https://vuejsdevelopers.com/2017/12/18/single-page-application-ux/?utm_source=linkedin-page-vjd&utm_medium=post&utm_campaign=spx

×