Quali sono le caratteristiche di una buona app web progressiva?

Il rendimento svolge un ruolo significativo nel successo di qualsiasi esperienza online, perché i siti con un rendimento elevato coinvolgono e trattengono meglio gli utenti rispetto a quelli con un rendimento basso. Concentrati sull'ottimizzazione in base alle metriche sul rendimento incentrate sugli utenti.

Perché

La velocità è fondamentale per convincere gli utenti a utilizzare la tua app. Infatti, con l'aumento del tempo di caricamento delle pagine da 1 a 10 secondi, la probabilità di un rimbalzo dell'utente aumenta del 123%. Le prestazioni non si fermano nemmeno con l'evento load. Gli utenti non devono mai chiedersi se la loro interazione, ad esempio un clic su un pulsante, sia stata registrata o meno. Lo scorrimento e l'animazione devono essere fluidi. Le prestazioni influiscono sull'intera esperienza, sia sul comportamento della tua app sia sulla percezione degli utenti.

Sebbene tutte le applicazioni abbiano esigenze diverse, i controlli del rendimento in Lighthouse si basano sui Core Web Vitals e un punteggio elevato in questi controlli aumenterà 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 sulle prestazioni reali della tua app web.

Come

Segui la nostra guida sui tempi di caricamento rapidi per imparare a far sì che la tua PWA si avvii e rimanga veloce.

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

Perché

Le app web progressive sono innanzitutto app web, il che significa che devono funzionare su più browser.

Un modo efficace per farlo, secondo Jeremy Keith nel suo libro Resilient Web Design, è identificare le funzionalità di base, renderle disponibili utilizzando la tecnologia più semplice possibile e poi migliorare l'esperienza, se possibile. In molti casi, significa iniziare solo con HTML per creare le 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 è tramite un modulo HTML che invia una richiesta POST. Dopo averli creati, puoi migliorare l'esperienza con JavaScript per eseguire la convalida del modulo e inviarlo tramite AJAX, migliorando l'esperienza per gli utenti che possono supportarlo.

Gli utenti utilizzano il tuo sito su una serie di dispositivi e browser. Non puoi scegliere come target solo la fascia più alta di questo spettro. Utilizza il rilevamento delle funzionalità per offrire un'esperienza utilizzabile per la gamma più ampia possibile di potenziali utenti, inclusi quelli che utilizzano browser e dispositivi che non esistono ancora.

Come

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

Letture aggiuntive

• L'articolo di A List Apart Understanding Progressive Enhancement è una buona introduzione all'argomento.
• Articolo di Smashing Magazine Progressive Enhancement: What It Is, And How To Use It? fornisce un'introduzione pratica e link ad argomenti più avanzati.
• L'articolo Implementing feature detection di MDN illustra come rilevare una funzionalità eseguendo una query direttamente su di essa.

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

Perché

I dispositivi sono disponibili in una serie di dimensioni e gli utenti possono utilizzare la tua applicazione su una serie di dimensioni, anche sullo stesso dispositivo. Pertanto, è fondamentale assicurarti non solo che i contenuti rientrino nell'area visibile, ma anche che tutte le funzionalità e i contenuti del tuo 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 con le dimensioni dell'area visibile. Puoi riorganizzare i contenuti per diverse dimensioni dell'area visibile e, in un modo o nell'altro, dovrebbero essere tutti presenti. Infatti, come afferma Luke Wroblewski nel suo libro Mobile First, iniziare in piccolo e modificare il design per schermi più grandi può 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 di un'applicazione. In uno schermo da 320 x 480 pixel non c'è semplicemente spazio per elementi estranei e non necessari. Devi dare la priorità.

Come

Esistono molte risorse sul design responsive, tra cui l'articolo originale di Ethan Marcotte, una collezione di concetti importanti correlati, nonché una vasta gamma di libri e conferenze. Per restringere questa discussione agli aspetti dei contenuti del responsive design, consulta il design incentrato sui contenuti e i layout responsive incentrati sui contenuti. Infine, anche se si concentrano sui dispositivi mobili, le lezioni di Seven Deadly Mobile Myths di Josh Clark sono pertinenti sia per le visualizzazioni di piccole dimensioni dei siti responsivi sia per i dispositivi mobili in generale.

Quando gli utenti sono offline, mantenerli nella tua PWA offre un'esperienza più scorrevole rispetto al ritorno alla pagina offline del browser predefinito.

Perché

Gli utenti si aspettano che le app installate funzionino indipendentemente dallo stato della connessione. Un'app specifica per la piattaforma non mostra mai una pagina vuota quando è offline e una PWA non deve mai mostrare la pagina offline predefinita del browser. Fornire un'esperienza offline personalizzata, sia quando un utente accede a un URL che non è stato memorizzato nella cache sia quando tenta di utilizzare una funzionalità che richiede una connessione, contribuisce a far sì che la tua esperienza web sembri parte del dispositivo su cui è in esecuzione.

Come

Durante l'evento install di un worker di servizio, puoi memorizzare in cache una pagina offline personalizzata da mostrare quando un utente passa alla modalità offline. Consulta Creare una pagina di riserva offline per scoprire come implementarla autonomamente. Tieni presente che Chrome mostrerà una pagina offline di base se non ne viene fornita una.

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

Perché

L'installazione di un'app web progressiva consente di avere l'aspetto, il design e il comportamento di tutte le altre app installate. Viene avviata dalla stessa posizione in cui gli utenti avviano le altre app. Viene eseguita nella propria finestra dell'app, separata dal browser, e viene visualizzata nell'elenco di attività, come le altre app.

Come per le app specifiche per dispositivo, gli utenti che installano le tue app costituiscono il tuo pubblico più coinvolto e spesso hanno metriche sul coinvolgimento in linea con quelle degli utenti delle app sui dispositivi mobili. Queste metriche includono un maggior numero di visite ripetute, un tempo di permanenza più lungo sul tuo sito e tassi di conversione più elevati rispetto ai visitatori tipici.

Come

Segui la nostra guida all'installabilità per scoprire come rendere installabile la tua PWA.

Se la connettività non è strettamente necessaria, la tua app funziona allo stesso modo offline e online.

Perché

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

Come

Dopo aver stabilito quali funzionalità gli utenti si aspettano di utilizzare offline, dovrai rendere i tuoi contenuti disponibili e adattabili ai contesti offline. Puoi utilizzare IndexedDB, un sistema di archiviazione NoSQL in-browser, per archiviare e recuperare i dati e la sincronizzazione in background per consentire agli utenti di eseguire azioni offline e rimandare le comunicazioni con il server finché l'utente non avrà di nuovo una connessione stabile. Puoi anche utilizzare i worker di servizio per archiviare altri tipi di contenuti, come immagini, file video e file audio, per l'utilizzo offline e per implementare sessioni sicure e durature per mantenere autenticati gli utenti. Dal punto di vista dell'esperienza utente, puoi utilizzare schermate di scheletro che danno agli utenti una percezione della velocità e dei contenuti durante il caricamento, che può poi passare ai contenuti memorizzati nella cache o a un indicatore di offline, se necessario.

Tutte le interazioni utente soddisfano i requisiti di accessibilità delle WCAG 2.0.

Perché

La maggior parte degli utenti, a un certo punto della propria vita, vuole utilizzare la tua PWA in un modo conforme ai requisiti di accessibilità del WCAG 2.0. La capacità delle persone di interagire con la tua PWA e di comprenderla varia in base a una serie di fattori e le esigenze possono essere temporanee o permanenti. Se rendi accessibile la tua PWA, la rendi utilizzabile da tutti.

Come

La Guida introduttiva all'accessibilità del web del W3C è un ottimo punto di partenza. La maggior parte dei test di accessibilità deve essere eseguita manualmente. Strumenti come i controlli di accessibilità in Lighthouse, axe e Accessibility Insights possono aiutarti ad automatizzare alcuni test di accessibilità. È inoltre importante utilizzare elementi semanticamente corretti anziché ricrearli autonomamente, ad esempio gli elementi a e button. In questo modo, quando devi creare funzionalità più avanzate, vengono soddisfatte le aspettative di accessibilità (ad esempio quando utilizzare le frecce rispetto alle schede). Le schede nutrizionali A11Y forniscono ottimi consigli su questo argomento per alcuni componenti comuni.

La tua PWA può essere facilmente rintracciata 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 del sito web proviene dalla ricerca organica. Assicurati che esistano URL canonici per i contenuti e che i motori di ricerca possano indicizzare il tuo sito. È fondamentale per consentire ai potenziali utenti di trovare la tua PWA. Questo è particolarmente vero quando si adotta il rendering lato client.

Come

Per prima cosa, assicurati che ogni URL abbia un titolo e una meta descrizione unici e descrittivi. Puoi quindi 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 visibilità della tua PWA. Puoi anche utilizzare gli strumenti per i proprietari di siti di Bing o Yandex e prendere in considerazione l'inclusione di dati strutturati utilizzando gli schemi di Schema.org nella tua PWA.

La tua PWA è utilizzabile allo stesso modo con un mouse, una tastiera, uno stilo o tocco.

Perché

I dispositivi offrono una serie di metodi di inserimento e gli utenti devono essere in grado di transitare facilmente da uno all'altro durante l'utilizzo della tua applicazione. Altrettanto importante, i metodi di inserimento non devono dipendere dalle dimensioni dello schermo, il che significa che le aree visibili grandi devono supportare il tocco e quelle piccole tastiere e mouse. Nel miglior modo possibile, assicurati che la tua applicazione e tutte le sue funzionalità supportino l'utilizzo di qualsiasi metodo di inserimento scelto dall'utente. Ove opportuno, migliora le esperienze per consentire anche i controlli specifici per i dati inseriti (ad esempio il trascinamento per aggiornare).

Come

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

Quando chiedi l'autorizzazione a utilizzare API potenti, fornisci il contesto e chiedi solo quando l'API è necessaria.

Perché

Le API che attivano una richiesta di autorizzazione, come 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 queste richieste senza contesto aggiuntivo, ad esempio al caricamento della pagina, riduce le probabilità che gli utenti accettino queste autorizzazioni e aumenta la probabilità che non si fidino di loro in futuro. Attiva invece queste richieste solo dopo aver fornito all'utente una motivazione contestuale per la quale hai bisogno di questa autorizzazione.

Come

L'articolo Esperienza utente per le autorizzazioni e l'articolo di UX Planet I modi giusti per chiedere autorizzazioni agli utenti sono ottime risorse per capire come progettare richieste di autorizzazione che, pur essendo incentrate sui dispositivi mobili, si applicano a tutte le PWA.

Mantenere la base di codice sana semplifica il raggiungimento dei tuoi obiettivi e l'implementazione di nuove funzionalità.

Perché

La creazione di un'applicazione web moderna richiede molto lavoro. Mantenere aggiornata la tua applicazione e la tua base di codice ti consente di implementare più facilmente nuove funzionalità che soddisfano gli altri obiettivi descritti in questo elenco di controllo.

Come

Esistono diversi controlli di alta priorità per garantire un codebase sano:

• Evita di utilizzare librerie con vulnerabilità note.
• Assicurati di non utilizzare API ritirate.
• Rimuovi dal codebase le pratiche di programmazione non sicure (ad esempio l'utilizzo di document.write() o di ascoltatori di eventi di scorrimento non passivi).
• Puoi anche scrivere codice in modo da assicurarti che la tua PWA non si blocchi se non riesce a caricare i dati e le analisi o altre librerie di terze parti.
• Valuta la possibilità di richiedere l'analisi statica del codice, come il linting, nonché i test automatici in più browser e canali di rilascio. Queste tecniche possono aiutarti a rilevare gli errori prima che vengano inseriti in produzione.