Principali considerazioni sull'interfaccia utente per il miglior design PWA

Se non hai ancora sentito parlare di PWA, dovresti prima approfondire questo: "Cos'è PWA? Tutto quello che devi sapere sulle app Web progressive” . Si tratta, insomma, di applicazioni web realizzate con l'intento di offrire all'utente interfacce ed esperienze di gran lunga superiori a quelle offerte da quelle tradizionali.

In questo articolo, suggeriremo i principali problemi dell'interfaccia utente (interfaccia utente) durante la progettazione di una PWA. Continua a leggere per scoprire come avere la migliore interfaccia utente per la tua applicazione Web progressiva.

Caratteri di sistema

Se vuoi che gli utenti si sentano a proprio agio mentre usano la tua Progressive Web App (PWA), il suo stile dovrebbe essere leggermente migliorato per adattarlo al loro sistema operativo (SO). Prima di implementare menu e pulsanti diversi per piattaforma, puoi semplicemente iniziare con il carattere preferito del sistema, per iOS, Android, Windows separatamente.

In altre parole, lascia che il duro lavoro di Microsoft (Segoe), Google (Roboto), Apple (San Francisco) o anche Mozilla (Fira Sans) semplifichi il tuo lavoro migliorando l'esperienza per gli utenti. Di conseguenza, i caratteri di sistema sono un elemento che non dovresti mai lasciare fuori dalla tua lista.

 /* iOS */
famiglia di caratteri: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Android */
famiglia di caratteri: 'RobotoRegular', 'Droid Sans', sans-serif;

/* Windows Phone */
famiglia di caratteri: 'Segoe UI', Segoe, Tahoma, Ginevra, sans-serif;

Icone delle app

È vero che i designer di app mobili prestano particolare attenzione al design delle icone. E poiché la tua PWA (aggiungendola alla schermata principale) si siederà accanto al resto delle app native, dovresti pensare anche al design dell'icona.

C'è una buona ragione per questo. Le prime impressioni sono sempre estremamente importanti e l'icona di un'app è la prima impressione che fa all'utente. Per spiegare, un utente potrebbe esitare a toccare un'icona che ha un aspetto diverso tra le icone delle app native sul proprio telefono.

Per fare in modo che le tue icone PWA si fondano con il resto delle app nel tuo dispositivo, deve essere flessibile per adattarsi a piattaforme diverse, come Android, iOS e Windows, e ospitare elementi stilistici (la sua forma, come appare con/senza sfondi o in diversi colori, ecc.). Un buon modo per farlo è fare in modo che il design dell'icona della tua PWA corrisponda, o almeno si avvicini, allo standard visivo delle icone delle app native. Una fonte di ispirazione sono le linee guida per la progettazione dei materiali di Google, le icone dei materiali di Google.

 Letture consigliate: App PWA vs Native: quale ti si addice di più?

Interazioni al tocco

Le interazioni tattili dovrebbero essere implementate molto bene, o per niente.

Sebbene ciò non sia davvero impossibile, è troppo difficile incorporare interazioni touch avanzate, come "scorri per ignorare" o "tira per aggiornare". Anche se pensi che tali interazioni stupiranno gli utenti, questo è il caso solo se funzionano come previsto. Se no allora sei nei guai.

Se le tue PWA necessitano di interazioni touch avanzate, assicurati che funzionino bene su dispositivi reali. Di solito, questo significa che hai trovato un'implementazione di questa funzione che è stata sviluppata da qualcun altro con grande sforzo, come brillanti viste swappabili.

Nel frattempo, puoi evitare completamente questo problema modificando il design, in questo modo non suggerirà interazioni tattili avanzate, ad esempio puoi utilizzare le schede di navigazione in basso al posto delle schede.

Contenuti condivisibili

Nel caso delle Progressive Web App, spesso l'URL corrente non è facilmente accessibile; quindi devi assicurarti che gli utenti siano in grado di condividere ciò che stanno guardando, facilmente. È possibile integrare un pulsante di condivisione che consente agli utenti di copiare l'URL negli appunti in modo che possa essere condiviso su importanti siti di social network.

Un piccolo consiglio per questo caso: se stai implementando pulsanti di condivisione social, assicurati di ritardare il caricamento del JavaScript di terze parti fino al caricamento del contenuto principale nella pagina.

Tocca feedback

In primo luogo, le aree toccabili dovrebbero fornire un feedback tattile . Quando viene toccato un pulsante o un'area toccabile, l'utente non dovrebbe chiedersi se il tocco è stato riconosciuto.

Cerca di chiarire immediatamente che i rubinetti sono stati riconosciuti. Ad esempio, questo può essere fatto evidenziando la regione toccata in grigio (chiaro), mostrando un'increspatura del materiale o facendo iniziare immediatamente una transizione di pagina.

Esempio di feedback touch fatto bene:

L'app Web Google I/O 2016 fornisce un'evidenziazione grigia immediata quando si tocca una conversazione e il colore blu predefinito del tocco è disabilitato (per impostazione predefinita alcuni browser mostrano la propria evidenziazione quando si toccano gli elementi. Questo stile predefinito non è attraente e potrebbe entrare in conflitto con il tuo qualità visiva del marchio).

In secondo luogo, il tocco di un elemento durante lo scorrimento non dovrebbe attivare il feedback del tocco .

Ogni volta che implementi il ​​feedback sul tocco, è importante che non si attivi erroneamente quando l'utente tocca solo un elemento per SCORRERE la pagina.

Esempio di feedback tattile fornito al momento sbagliato:

Una prima versione della popolare libreria Material-UI attivava increspature sugli elementi toccabili quando venivano toccati durante le pergamene.

Il problema è stato risolto interrompendo l'animazione dell'ondulazione se la posizione del tocco dell'utente si spostava di più di 6 pixel in qualsiasi direzione entro le prime centinaia di millisecondi.

Mantieni la posizione di scorrimento nella pagina dell'elenco precedente

Premendo indietro da una pagina dei dettagli si dovrebbe mantenere la posizione di scorrimento nella pagina dell'elenco precedente

Quando l'utente torna indietro da un dettaglio, la pagina deve mantenere la posizione di scorrimento nella pagina dell'elenco precedente. Quando un utente seleziona elementi da un elenco e ne visualizza i dettagli, il tocco indietro NON deve portarli in cima all'elenco. L'obiettivo principale è che mentre l'utente tocca, dovrebbe essere riportato alla pagina dell'elenco "con la stessa posizione di scorrimento" in cui si trovava prima di premere sull'elemento.

Dopotutto, la navigazione in un elenco di prodotti, articoli o altri elementi diventa difficile quando premendo indietro l'utente torna in cima all'elenco.

Ovviamente, quando si rende la navigazione più difficile per gli utenti, questi tendono a non tornare più.

Evita un design eccessivamente "simile al web".

Il web design "classico" dipende fortemente dai collegamenti nel testo e dagli elementi statici disponibili su ogni pagina come un'intestazione e un piè di pagina. In effetti, questi elementi di progettazione si trovano raramente nelle app native, quindi per abbinare i modelli mentali dell'utente, si consiglia di evitarli e utilizzare invece un design più simile a un'app.

Ad esempio, i collegamenti dovrebbero essere usati con parsimonia. Dovresti posizionare con attenzione i pulsanti o le regioni toccabili.

Inoltre, dovrebbero essere evitati i piè di pagina statici che contengono collegamenti di navigazione e informazioni sul copyright. Prendi ispirazione dal design dell'app nativa per vedere come informazioni simili possono essere spostate in un menu o comunque non incluse in ogni pagina.

Tema scuro

I temi oscuri sono qui per restare e miglioreranno solo.

Secondo gli sviluppatori Android, il tema scuro ha molti vantaggi : può ridurre il consumo di energia di una quantità significativa (a seconda della tecnologia dello schermo del dispositivo). Migliora la visibilità per gli utenti ipovedenti e per coloro che sono sensibili alla luce intensa. Rende più facile per chiunque utilizzare un dispositivo in un ambiente con scarsa illuminazione.

Coloro che riescono a trovare l'equilibrio tra l'accessibilità dell'interfaccia utente scura e la risposta emotiva di colori sgargianti saranno in cima il prossimo anno. C'è una guida di Google Material che può aiutarti.

Insomma

Le app Web progressive sono la necessità del momento in quanto consentono agli sviluppatori di offrire un'esperienza Web intuitiva agli utenti sui loro telefoni. Semplicemente implementando questi consigli, puoi facilmente offrire ai tuoi utenti fantastiche interfacce ed esperienze simili a app mentre usano la tua PWA.

SimiCart è qui per rispondere a ogni tua domanda ed esigenza relativa alla PWA. E soprattutto per i commercianti online che cercano una soluzione Magento PWA perfetta a tutto tondo per il tuo negozio web di eCommerce, offriamo una soluzione completa ed economica per te e il tuo negozio.