5 consigli per avere una Progressive Web App dalla UX eccellente

Praticamente, ogni volta che devo installare un’applicazione, finisco per pensare “sto finendo la memoria”, oppure “il mio cellulare è già pieno di applicazioni”.

Sono una di quelle persone che devono provare le app di tendenza, oppure che sono sempre alla ricerca di app che le aiutino a gestire la routine di lavoro; il punto è che dover installare molte app diventa piuttosto faticoso.

Nella realtà dei fatti, la maggior parte delle persone installa un’app e si dimentica in pochi giorni, così l’app rimane lì in attesa di essere cancellata.

Per fortuna, le società di sviluppo di applicazioni mobili hanno inventato le “Progressive Web Apps”. Se non hai ancora sentito parlare delle Progressive Web App, ecco cosa sono:

 

Sei alla ricerca di sviluppatori di Progressive Web App? Possiamo metterti in contatto con i migliori esperti!

 

Cosa sono le Progressive Web App?

Le Progressive Web App sono siti web che hanno lo stesso aspetto e funzionano proprio come le applicazioni mobili. La ragione per cui esistono è per risparmiare agli utenti di dover installare e gestire le applicazioni.

Gli utenti evitano di dover visitare l’app store, trovare l’app, scaricarla, installarla e poi utilizzarla alcune volte prima di disinstallarla.

Con l’aiuto delle Progressive Web App, gli utenti possono semplicemente aprire il loro browser sullo smartphone, inserire l’URL e saranno indirizzati alla PWA della loro rispettiva applicazione mobile. Date un’occhiata all’immagine qui sotto:

 

Di seguito sono menzionati alcuni altri vantaggi delle applicazioni web progressive:

• Sono molto reattive
• Si caricano istantaneamente anche senza connessione a Internet
• Offrono una buona esperienza d’uso
• Risolvono il problema dell’App Gap

Aliexpress, Twitter e Forbes sono alcuni famosi esempi di siti web che hanno sviluppato alcune PWA eccezionali; le loro applicazioni web li hanno aiutati a migliorare la loro usabilità e ad attrarre un pubblico più vasto.

Ora che abbiamo compreso a fondo il concetto alla base delle Progressive Web App, diamo un’occhiata a come una società di sviluppo di applicazioni mobili può garantire un’eccellente User Experience design nelle PWA.

 

Potrebbe interessarti: Sviluppo di Progressive Web Apps per nuove opportunità di Business

 

#1 Ottimizzare il tempo di caricamento e le prestazioni

Quando un utente entra nella tua applicazione web, non dovrebbe avere la sensazione di usare il browser e non dovrebbe aspettare che la pagina si carichi.

Dovrebbe, anzi, caricarsi bene anche senza una connessione internet. Google ha raccomandato di seguire il modello PRPL per ridurre i problemi causati da reti lente:

L’architettura PRPL

PRPL è il modello per strutturare siti web e applicazioni che funzionano bene su smartphone e altri dispositivi; senza alcun impedimento da connessioni di rete inaffidabili. PRPL sta per:

• Push critical resources per il percorso iniziale dell’URL
• Renderizza il percorso iniziale
• Pre-Cache i percorsi rimanenti
• Lazy-load e crea i percorsi rimanenti su richiesta

Il modello PRPL agisce per migliorare il tempo di risposta della tua applicazione web soprattutto per le prime interazioni su dispositivi mobili reali.

Il PRPL continua a migliorare l’efficienza delle Progressive Web Apps man mano che vengono rilasciati nuovi aggiornamenti e il caching viene fatto in modo più efficace.

Service Worker Caching

I service worker sono un’incredibile caratteristica della piattaforma web che abilita funzionalità come il caching delle URL responses. Questa funzionalità è ciò che permette alle applicazioni Web Progressive di funzionare offline.

I service workers consentono di salvare le richieste come script, file CSS, pagine, immagini, ecc. come dati di cache. Quando un utente fa una richiesta di rete, passa attraverso il Service Worker e sta a te decidere se restituire le risposte nella cache o rispondere alla richiesta di rete.

Rendering lato server

Google raccomanda di utilizzare il rendering lato server per le Progressive Web Apps perché significa che l’utente otterrà i dati più velocemente anche se il JavaScript è disabilitato.

 

Quando un utente entra nella tua progressive web app, non dovrebbe avere la sensazione di utilizzare il browser.

 

#2 Attenzione nel ricreare l’ambiente nativo

Quando si progettano le PWA, ricorda che devono avere l’aspetto e restituire la sensazione della loro corrispettiva applicazione mobile nativa. Perché? Perché la costruzione di un senso di familiarità è una caratteristica essenziale delle Progressive Web Apps.

Prendiamo l’esempio di Instagram, le persone sono abituate al layout, alle funzionalità e alla navigazione dell’app; se Instagram progettasse una PWA che funziona e assomiglia di più al sito web, perché la gente vorrebbe investirci del tempo? Sarebbe contro le loro aspettative e probabilmente tornerebbero all’applicazione.

Ricordati di evitare di commettere i seguenti errori se vuoi che i tuoi utenti abbiano un’esperienza ottimale:

Problemi di scorrimento

I siti web hanno problemi di scorrimento, come ad esempio le pagine vuote che appaiono quando si fa scorrere un sito web con un feed infinito, come Twitter. Twitter ha risolto il problema dei problemi di scorrimento utilizzando le liste virtualizzate.

Le liste virtualizzate rendono visibile quella parte di contenuto che si trova nel punto di vista dell’utente. Dopo quel punto di vista, rivela in modo incrementale gli elementi su vari frame utilizzando l’API requestAnimationFrame, mentre mantiene la posizione di scorrimento tra le schermate.

 

Quando si progettano le PWA, ricorda che devono avere l’aspetto e restituire la sensazione della loro corrispettiva applicazione mobile nativa.

 

Problemi di transizione sul network

Quando si creano le PWA, è necessario assicurarsi di progettare con l’obiettivo della velocità. La tua applicazione web deve essere reattiva all’interazione dell’utente.

I problemi di transizione nelle PWA si verificano quando gli utenti toccano un pulsante o un link e devono aspettare che la schermata corrente cambi, conducendoli alla nuova schermata selezionata.

Questo passaggio risulta poco reattivo e fastidioso, proprio perché una PWA dovrebbe dare la sensazione che tutte le informazioni siano già memorizzate nel telefono e che sia possibile accedere istantaneamente ai dati. Per evitare che ciò accada, è possibile incorporare skeleton screens nelle PWA.

Le skeleton screens sono fondamentalmente schermate vuote che vengono visualizzate dall’utente dopo un’interazione, il contenuto viene gradualmente caricato nelle schermate.

Gesti insoliti

Rendi la navigazione un gioco da ragazzi, mantienila il più simile possibile all’app nativa. Come già detto sopra, bisogna costruire l’applicazione sulle aspettative dell’utente mantenendo la familiarità.

#3 Evita gli standard del Web Design

Se lavori da troppo tempo nel settore del web design, dovresti fare un respiro profondo, ricominciare da capo e concentrarti solo sulla progettazione di un PWA che assomigli all’applicazione mobile nativa.

Adottare un approccio minimalista, mantenere solo le informazioni necessarie e filtrare i contenuti extra. Progettare l’interfaccia in modo che sia informativa oltre che accessibile è una delle sfide che gli sviluppatori di app devono affrontare.

A parte questo, cerca di usare gesti familiari come toccare e strisciare, ed evita di aggiungere troppi link e pulsanti.

#4 Utilizzare font di sistema

Il modo migliore per aggiungere un senso di familiarità alla tua Progressive Web App è selezionare lo styling in modo che corrisponda al sistema operativo (OS) dell’utente. Si può iniziare implementando i font di sistema dei i singoli sistemi operativi, iOS, Windows, Android, ecc.

Con l’aiuto di Google (Roboto), Apple (San Francisco), Microsoft (Segeo) e altri possono aiutarti efficacemente a migliorare la User Experience della tua Mobile App. Se vuoi essere creativo, puoi continuare a utilizzare font personalizzate nelle intestazioni o nei loghi.

#5 Ottimizzare le interazioni dei contenuti

A causa delle limitazioni di spazio sui dispositivi mobili, i designer devono fare molta attenzione ad evitare l’affollamento dei contenuti. Le limitazioni di spazio possono causare comportamenti indesiderati, come l’apertura accidentale di un elemento durante lo scorrimento di una lista.

Ad esempio, in Chrome, anche un solo tocco su alcuni contenuti può essere interpretato come un’interazione. Può risultare in un’esperienza piuttosto fastidiosa per gli utenti se i tap su ‘plain-content’ si trasformano in selezioni e reindirizzano gli utenti verso risultati indesiderati.

A parte questo, progettare ‘pulsanti di selezione’ e ‘contenuto interattivo’ come testo in chiaro può anche risultare in un’esperienza utente terribilmente confusa. Si può evitare che ciò avvenga utilizzando i CSS per contrassegnare gli elementi non contenutistici.

Inoltre, se la tua PWA richiede interazioni tattili avanzate come lo strisciare per eliminare un menu di navigazione, dovrai  assicurarti che funzioni senza errori sui dispositivi reali.

Per concludere

Con l’aiuto di accurate strategie di sviluppo e progettazione, offrirai un’esperienza utente indimenticabile sulla tua Progressive Web App.

Le Progressive Web App sono state accolte favorevolmente anche da Google, quindi sono sicuramente la prossima grande novità sia dal punto di vista dell’utente che da quello del business.

Speriamo che questo articolo abbia risposto ad alcune delle tue domande. In caso contrario, non esitare a chiederci una mano.