Quali sono le caratteristiche di una buona app web progressiva?

Il rendimento svolge un ruolo importante per il successo di qualsiasi esperienza online, perché i siti ad alto rendimento coinvolgono e fidelizzano gli utenti meglio di quelli con scarso rendimento. I siti dovrebbero concentrarsi sull'ottimizzazione in funzione di metriche sul rendimento incentrate sull'utente.

Perché

La velocità è fondamentale per indurre gli utenti a utilizzare la tua app. Infatti, man mano che i tempi di caricamento delle pagine passano da un secondo a dieci secondi, la probabilità di rimbalzo da parte di un utente aumenta del 123%. Il rendimento non si interrompe con l'evento load. Gli utenti non dovrebbero mai chiedersi se la loro interazione, ad esempio la selezione di un pulsante, è stata registrata. Lo scorrimento e l'animazione dovrebbero essere fluidi. Le prestazioni influiscono sulla tua intera esperienza, da come gli utenti percepiscono la tua applicazione alle sue effettive prestazioni.

Sebbene tutte le applicazioni abbiano esigenze diverse, i controlli delle prestazioni in Lighthouse si basano sui Segnali web essenziali e i punteggi elevati di questi controlli aumentano le probabilità che gli utenti abbiano un'esperienza piacevole. Puoi anche utilizzare PageSpeed Insights o il Report sull'esperienza utente di Chrome per ottenere dati reali sulle prestazioni della tua app web.

Come

Segui la nostra guida ai tempi di caricamento rapidi per scoprire come far avviare velocemente la tua PWA e assicurarti che sia sempre veloce.

Gli utenti possono utilizzare qualsiasi browser scelgano per accedere alla tua app web prima che venga installata.

Perché

Le app web progressive sono innanzitutto le app web, il che significa che devono funzionare su più browser, non solo in uno di essi.

Un modo efficace per farlo è, come dice Jeremy Keith in Resilient Web Design, identificare la funzionalità di base, renderla disponibile utilizzando la tecnologia più semplice possibile e quindi migliorare l'esperienza, ove possibile. In molti casi, questo significa iniziare con il solo codice HTML per creare la funzionalità di base e migliorare l'esperienza utente con CSS e JavaScript per creare un'esperienza più coinvolgente.

Prendiamo ad esempio l'invio di moduli. Il modo più semplice per implementarlo è un modulo HTML che invia una richiesta POST. Dopodiché, puoi migliorare l'esperienza con JavaScript per eseguire la convalida del modulo e inviare il modulo tramite AJAX, migliorando l'esperienza per gli utenti che supportano il modulo.

Tieni presente che gli utenti potranno utilizzare il tuo sito su una vasta gamma di dispositivi e browser. Non puoi scegliere come target semplicemente l'estremità più alta dello spettro. Utilizzando il rilevamento delle funzionalità, potrai offrire un'esperienza utile al maggior numero di potenziali utenti, compresi quelli che utilizzano browser e dispositivi che al momento potrebbero non esistere.

Come

Resilient Web Design di Jeremy Keith è un'eccellente risorsa che descrive come pensare al web design in questa metodologia progressiva e cross-browser.

Letture aggiuntive

• La sezione Comprendere il miglioramento progressivo di List Apart è un'ottima introduzione all'argomento.
• Progressive Enhancement: What It Is, And How To Use It? di Smashing Magazine fornisce un'introduzione pratica e link ad argomenti più avanzati.
• MDN ha un articolo intitolato Implementazione del rilevamento delle funzionalità che spiega come rilevare una funzionalità tramite query dirette.

Gli utenti possono utilizzare la PWA su qualsiasi dimensione dello schermo e tutti i contenuti sono disponibili in qualsiasi dimensione dell'area visibile.

Perché

I dispositivi sono disponibili in diverse dimensioni e gli utenti possono utilizzare la tua applicazione in diverse dimensioni, anche sullo stesso dispositivo. Di conseguenza, è fondamentale assicurarsi che i contenuti non solo rientrino nell'area visibile, ma che tutte le funzionalità e i contenuti del sito siano utilizzabili in tutte le dimensioni dell'area visibile.

Le attività che gli utenti vogliono completare e i contenuti a cui vogliono accedere non cambiano in base alle dimensioni dell'area visibile. I contenuti possono essere riorganizzati in base all'area visibile di dimensioni diverse e dovrebbero essere tutti presenti, in un modo o nell'altro. Infatti, come afferma Luke Wroblewski nel suo libro "Mobile First", iniziare da piccolo e diventare grande anziché viceversa può effettivamente migliorare il design di un sito:

> I dispositivi mobili richiedono ai team di sviluppo software di concentrarsi solo sui dati e sulle azioni più importanti > in un'applicazione. In uno schermo da 320 x 480 pixel non c'è spazio per elementi estranei e non necessari. > Devi dare delle priorità.

Come

Esistono molte risorse sul design adattabile, tra cui l'articolo originale di Ethan Marcotte, una raccolta di concetti importanti correlati, nonché numerosi libri e dibattiti. Per restringere questa discussione agli aspetti relativi ai contenuti del design adattabile, puoi approfondire la progettazione basata sui contenuti e i layout adattabili per la destinazione dei contenuti. Infine, sebbene sia incentrato sui dispositivi mobili, le lezioni di Josh Clark in Seven Deadly Mobile Myths sono pertinenti tanto per le visualizzazioni di piccole dimensioni dei siti adattabili quanto per i dispositivi mobili.

Quando gli utenti sono offline, tenerli nella PWA offre un'esperienza più fluida rispetto al passaggio alla pagina offline del browser predefinito.

Perché

Gli utenti si aspettano che le app installate funzionino indipendentemente dallo stato della connessione. Un'app specifica della piattaforma non mostra mai una pagina vuota quando è offline e un'app web progressiva non dovrebbe mai mostrare la pagina offline predefinita del browser. Fornire un'esperienza offline personalizzata, sia quando un utente visita un URL che non è stato memorizzato nella cache, sia quando un utente prova a utilizzare una funzionalità che richiede una connessione, contribuisce a far sembrare che l'esperienza web faccia parte del dispositivo su cui viene eseguita.

Come

Durante l'evento install di un service worker, puoi pre-memorizzare nella cache una pagina offline personalizzata per utilizzarla in un secondo momento. Se un utente passa alla modalità offline, puoi rispondere con la pagina offline personalizzata prememorizzata. Puoi seguire il nostro esempio di pagina offline personalizzato per vedere un esempio pratico e scoprire come implementarlo autonomamente.

Gli utenti che installano o aggiungono app al proprio dispositivo tendono a interagire di più con queste app.

Perché

L'installazione di un'app web progressiva consente di avere l'aspetto e il comportamento di tutte le altre app installate. Viene avviata dallo stesso punto in cui gli utenti avviano le altre app. Viene eseguita in una finestra separata dell'app, separata dal browser, e viene visualizzata nell'elenco delle attività, proprio come le altre app.

Perché vuoi che un utente installi la tua PWA? Lo stesso motivo per cui vorresti che un utente installi la tua app da uno store. Gli utenti che installano le tue app sono il tuo pubblico più coinvolto e hanno metriche sul coinvolgimento migliori rispetto ai visitatori tipici, spesso alla pari con gli utenti di app sui dispositivi mobili. Queste metriche includono un maggior numero di visite ripetute, tempi più lunghi sul tuo sito e tassi di conversione più elevati.

Come

Puoi seguire la nostra guida all'installazione per scoprire come rendere installabile la tua PWA, come verificare che sia installabile e provare a farlo autonomamente.

Laddove la connettività non è strettamente richiesta, la tua app funziona come offline e online.

Perché

Oltre a fornire una pagina offline personalizzata, gli utenti si aspettano che le app web progressive siano utilizzabili offline. Ad esempio, le app di viaggi e compagnie aeree dovrebbero avere i dettagli dei viaggi e le carte d'imbarco facilmente disponibili quando sono offline. Le app di musica, video e podcasting devono consentire la riproduzione offline. Le app social e di notizie devono memorizzare nella cache i contenuti recenti in modo che gli utenti possano leggerli offline. Gli utenti si aspettano di rimanere autenticati anche quando sono offline, quindi progetta per l'autenticazione offline. Una PWA offline fornisce agli utenti un'esperienza reale simile a quella di un'app.

Come

Dopo aver determinato quali funzionalità gli utenti si aspettano di usare offline, devi rendere i tuoi contenuti disponibili e adattabili ai contesti offline. Inoltre, puoi utilizzare IndexedDB, un sistema di archiviazione NoSQL interno al browser, per archiviare e recuperare i dati, nonché la sincronizzazione in background per consentire agli utenti di eseguire azioni offline e rimandare le comunicazioni con il server fino a quando l'utente non avrà di nuovo una connessione stabile. Puoi anche utilizzare i Service worker per archiviare altri tipi di contenuti, come immagini, file video e file audio da utilizzare offline, e utilizzarli per implementare sessioni sicure e di lunga durata al fine di garantire l'autenticazione degli utenti. Dal punto di vista dell'esperienza utente, puoi utilizzare scheletri che offrono agli utenti un'idea della velocità e dei contenuti durante il caricamento, che possono poi tornare ai contenuti memorizzati nella cache o a un indicatore offline, se necessario.

Tutte le interazioni degli utenti superano i requisiti di accessibilità WCAG 2.0.

Perché

La maggior parte delle persone, a un certo punto della vita, vorranno sfruttare la tua PWA in un modo coperto dai requisiti di accessibilità WCAG 2.0. La capacità degli esseri umani di interagire con la tua PWA e comprenderla esiste in un ampio spettro e le sue esigenze possono essere temporanee o permanenti. Se rendi accessibile la PWA, ti assicuri che sia utilizzabile da tutti.

Come

Consulta il documento Introduction to Web Accessibility di W3C per iniziare. La maggior parte dei test di accessibilità deve essere eseguita manualmente. Strumenti come i controlli di accessibilità in Lighthouse, Axe e Statistiche accessibilità possono aiutarti ad automatizzare alcuni test sull'accessibilità. Inoltre, è importante utilizzare elementi semanticamente corretti invece di ricrearli autonomamente, ad esempio gli elementi a e button. In questo modo, quando è necessario creare funzionalità più avanzate, vengano soddisfatte le aspettative accessibili (ad esempio quando utilizzare frecce e schede). A11Y Nutrition Cards offre ottimi consigli in merito per alcuni componenti comuni.

La tua PWA può essere facilmente scoperta tramite la ricerca.

Perché

Uno dei maggiori vantaggi del web è la possibilità di scoprire siti e app tramite la ricerca. Infatti, più della metà di tutto il traffico sul sito web proviene dalla ricerca organica. È fondamentale che gli utenti possano trovare la PWA e che esistano URL canonici per i contenuti e che i motori di ricerca possano indicizzare il sito. Ciò è particolarmente vero quando si adotta il rendering lato client.

Come

Inizia assicurandoti che ogni URL abbia un titolo e una meta descrizione univoci e descrittivi. Dopodiché puoi utilizzare Google Search Console e i controlli di ottimizzazione per i motori di ricerca in Lighthouse per eseguire il debug e risolvere i problemi di rilevabilità della tua PWA. Puoi anche utilizzare gli Strumenti per i webmaster di Bing o Yandex e valutare la possibilità di includere i dati strutturati tramite gli schemi di Schema.org nella tua PWA.

La PWA può essere usata allo stesso modo con un mouse, una tastiera, uno stilo o un tocco.

Perché

I dispositivi offrono diversi metodi di immissione e gli utenti devono essere in grado di passare facilmente da uno all'altro durante l'utilizzo dell'applicazione. Altrettanto importanti, i metodi di immissione non devono dipendere dalle dimensioni dello schermo, il che significa che le aree visibili di grandi dimensioni devono supportare il tocco, mentre quelle di piccole dimensioni devono supportare tastiere e mouse. Al meglio delle tue possibilità, assicurati che l'applicazione e tutte le sue funzionalità supportino l'utilizzo di qualsiasi metodo di inserimento scelto dall'utente. Ove opportuno, dovresti anche migliorare le esperienze per consentire anche controlli specifici dell'input (come il pull per l'aggiornamento).

Come

L'API Pointer Eventi fornisce un'interfaccia unificata per lavorare con varie opzioni di input ed è particolarmente utile per aggiungere il supporto dello stilo. Per il supporto sia del tocco che della tastiera, assicurati di utilizzare gli elementi semantici corretti (ancoraggi, pulsanti, controlli modulo e così via) e di non ricrearli con HTML non semantico (ideale per l'accessibilità). Quando includi le interazioni che si attivano al passaggio del mouse, assicurati che possano essere attivate anche al clic o al tocco.

Quando chiedi l'autorizzazione per usare API potenti, fornisci contesto e chiedi solo quando l'API è necessaria.

Perché

Le API che attivano una richiesta di autorizzazione, ad esempio notifiche, geolocalizzazione e credenziali, sono progettate intenzionalmente per essere invasive per un utente perché tendono a essere correlate a funzionalità potenti che richiedono l'attivazione. L'attivazione di questi prompt senza ulteriore contesto, ad esempio al caricamento della pagina, riduce le probabilità che gli utenti accettino queste autorizzazioni e la loro attendibilità in futuro. Attiva invece questi prompt solo dopo aver fornito una motivazione contestuale all'utente per il motivo per cui hai bisogno di questa autorizzazione.

Come

L'articolo sull'esperienza utente relativa alle autorizzazioni e l'articolo I modi giusti per chiedere le autorizzazioni agli utenti di UX Planet e di UX Planet sono ottime risorse per capire come progettare richieste di autorizzazione che, pur concentrandosi sui dispositivi mobili, si applichino a tutte le PWA.

Mantenere il codebase integro ti consente di raggiungere più facilmente i tuoi obiettivi e di fornire nuove funzionalità.

Perché

La creazione di un'applicazione web moderna richiede molto lavoro. Mantenere l'applicazione aggiornata e il tuo codebase integro ti consente di fornire più facilmente nuove funzionalità che soddisfano gli altri obiettivi definiti in questo elenco di controllo.

Come

Esistono una serie di controlli ad alta priorità per garantire un codebase integro: evitare di utilizzare librerie con vulnerabilità note, assicurarsi di non utilizzare API deprecate, rimuovere gli anti-pattern web dal codebase (ad esempio utilizzare document.write() o avere listener di eventi di scorrimento non passivi) e anche programmare in modo difensivo per garantire che la PWA non si interrompa in caso di mancato caricamento delle analisi o di altre librerie di terze parti. Valuta la possibilità di richiedere analisi del codice statico, come il filtraggio tramite lint, nonché test automatici, in più browser e canali di rilascio. Queste tecniche possono aiutare a individuare gli errori prima che diventino in produzione.