Modi per migliorare l'esperienza utente del tuo sito mobile di e-commerce

Ricorda sempre che una best practice condivisa da qualcuno potrebbe non essere la migliore per gli altri. Queste migliori pratiche non sono create allo stesso modo, ma sono solo i punti di partenza. In questa serie di articoli, esamineremo le best practice o le linee guida per i siti per dispositivi mobili altamente ricercate. Il nostro obiettivo è ampliare la nostra conoscenza dello sviluppo di sorprendenti siti per dispositivi mobili e convalidare le migliori pratiche con dati quantitativi su come gli utenti percepiscono un sito per dispositivi mobili nella dimensione specifica dell'aspetto, della chiarezza, della credibilità e dell'usabilità.

Sarebbe meglio usare queste linee guida per gli articoli nella tua pratica, ma non è quello con cui dovresti finire. È qui che dovresti iniziare la tua ottimizzazione. Dovresti essere bravo almeno quanto queste linee guida. Ricorda, queste sono le pratiche web attuali. Quello che funzionava 2 anni fa potrebbe non funzionare più. La cifra tattica è reale. Le persone, le tecnologie web e le tendenze di marketing cambiano continuamente e le vittorie sono sempre deperibili.

Ti consigliamo di prendere in considerazione queste linee guida, ma anche di considerare come il tuo sito Web specifico si adatta o si differenzia dalle linee guida. Puoi applicare subito queste pratiche sul tuo sito per dispositivi mobili, anche se ti consigliamo di testarle prima. Potrebbero non essere applicati in ogni caso. Passiamo alla prima parte di "Come migliorare la UX del sito mobile del tuo negozio di e-commerce?"

1. Prova a progettare prima il tuo sito mobile (cioè, prima di progettare il sito desktop)

Conosciamo tutti l'importanza dei dispositivi mobili nelle nostre vendite. Oltre il 50% delle vendite viene effettuato da dispositivi mobili. Progettare il tuo sito mobile non è né divertente né facile. È il modo più intelligente per iniziare a progettare il tuo sito. Sappiamo perché:

Le restrizioni sono che i dispositivi mobili sono più alti di qualsiasi altra piattaforma. Gli schermi sono di dimensioni più ridotte e la larghezza di banda è bassa e molte altre restrizioni. Se inizi da zero con il sito per dispositivi mobili, è possibile evitare complicazioni che derivano da un grazioso degrado (come funzioni che non si traducono su piattaforme o dati indesiderati che richiedono più tempo per il caricamento).

Successivamente, un sito mobile di facile utilizzo dovrebbe essere pulito, intuitivo e veloce da caricare. Questi requisiti costringono i progettisti a capire perché gli utenti visitano il sito e quali contenuti e funzionalità sono essenziali.
Una migliore UX sulle piattaforme mobili significa che gli utenti possono trovare facilmente tutto ciò che stanno cercando e niente di più. Oltre a ciò, lo sviluppo di un quadro chiaro per i contenuti prioritari riduce il carico di lavoro per la progettazione del sito desktop.

2. Reindirizza automaticamente il sito mobile e le pagine devono essere ottimizzate per dispositivi mobili

Il numero di utenti mobili è ancora in aumento, aumentando il numero di acquirenti da mobile. Le persone fanno acquisti frequenti dai loro telefoni cellulari e si aspettano che sia facile. Se non stai al passo, rimani indietro.

Per stare al passo, il sito di e-commerce dovrebbe essere ottimizzato per tutti i dispositivi. Offri un'esperienza mobile migliore grazie a un sito mobile ottimizzato, ad esempio un sito mobile completamente reattivo.

Il responsive design è una pratica in cui le pagine web si adattano allo schermo su cui vengono visualizzate. Il contenuto della pagina web si adatta automaticamente agli schermi dei diversi dispositivi come laptop, smartphone, tablet, desktop, ecc. Non ci saranno cambiamenti nel contenuto e nelle funzionalità con questo approccio.

Con un sito responsive, lo stesso URL corrisponde a tutte le piattaforme. Significa semplicemente che non ci saranno URL separati per i dispositivi mobili e gli utenti non devono aspettare per reindirizzare su questi URL. Meno tempo di caricamento = migliore esperienza mobile . Inoltre, tutto il SEO va a un URL.

Un sito adattivo è come un sito reattivo, ma non esiste un unico layout per qualsiasi dimensione dello schermo. Invece, ci sono più layout per diverse dimensioni dello schermo. Il sito rileva quale dispositivo viene utilizzato e visualizza il relativo layout.

È facile raggiungere questa linea guida sviluppando un sito mobile reattivo. Assicurati di sottoporre a QA il sito su piattaforme e dispositivi diversi (con browser diversi). Inoltre, controlla tutte le pagine del sito per assicurarti che siano ottimizzate per dispositivi mobili. La chiave qui è offrire un'esperienza utente ottimale per gli utenti mobili.

3. Design coerente su diverse piattaforme per un'esperienza utente più fluida

È necessario mantenere coerenza e standard su tutte le piattaforme e i dispositivi per garantire l'usabilità. Significa che gli utenti incontreranno gli stessi elementi visivi, schemi e flussi sul tuo negozio di e-commerce indipendentemente dal dispositivo che stanno utilizzando. In breve, gli utenti che accedono al tuo negozio di e-commerce tramite un dispositivo mobile o un browser desktop hanno la stessa esperienza.

Poiché le dimensioni dello schermo sono diverse, potrebbe sorgere la necessità di layout diversi, ma in un'esperienza progettata in modo coerente, gli utenti riconosceranno le funzionalità familiari.

Molte startup e imprenditori commettono l'errore di trattare i siti desktop e mobile come prodotti diversi. Questo approccio può creare incoerenza, con conseguente UX più scadente e il potenziale per fraintendere il marchio dell'azienda.

Puoi evitare questo problema. Ecco alcuni consigli:

A. Identità visiva

Prova a utilizzare gli stessi colori, aspetto, stili di carattere, elementi visivi, ecc.

B. Iconografia coerente

le icone dell'app e del web dovrebbero rappresentare la stessa funzionalità

C. Formulazione

I nomi di pulsanti, collegamenti e opzioni di menu dovrebbero essere gli stessi sia sul sito web mobile che su quello desktop

D. Interazioni e flusso

Il processo di navigazione per ogni funzione dovrebbe essere lo stesso (ad es. ricerca di un prodotto o metodo di pagamento)

E. Coordinamento tra designer, sviluppatori e tester

Tutti i membri del team dovrebbero avere una comprensione simile di ogni funzionalità distribuita.

Applicando questi concetti di base gli utenti si sentono a proprio agio nell'utilizzo di servizi web e mobili senza difficoltà.

4. Sfrutta l'analisi per dare la priorità a un dispositivo durante la progettazione del tuo sito mobile

Tutti accediamo a un sito Web tramite i nostri dispositivi mobili almeno una volta. Ma se sai quale dispositivo mobile o piattaforma viene utilizzato maggiormente per navigare nel tuo negozio, puoi ottimizzare il tuo sito al meglio per quel dispositivo.

Strumenti analitici come Google Analytics possono fornirti approfondimenti sulle metriche efficienti, rapidi e chiari per determinare esattamente come un utente accede al tuo sito web. Utilizzando Google Analytics, puoi ottenere le risposte alle seguenti domande:

• Quanti utenti che hanno visitato il sito web provenivano dalla comunità Android o iOS?
• Quale frazione dei visitatori utilizza dispositivi con uno schermo a bassa risoluzione?
• C'è una differenza nel numero di visite alla pagina da parte degli utenti che utilizzano l'ultima versione di Android e quella di 2 anni fa?
• Quanto tempo trascorrono gli utenti mobili iOS nel negozio rispetto a quelli Android?
• Che tipo di connessione è stata utilizzata? Wi-Fi o dati mobili?

Dati come questi sono preziosi per la strategia di prodotto e le aziende possono concentrarsi sul pubblico di destinazione. Possono creare prodotti che si adattano alle reali esigenze dei loro utenti.

Ad esempio , un negozio di e-commerce ha molte immagini, contenuti e un lungo elenco che richiede lo scorrimento sullo schermo. Potrebbero rendersi conto che la maggior parte degli utenti rimane sul sito per alcuni secondi. L'azienda può controllare il profilo dei dispositivi che hanno avuto accesso al proprio sito. Se gli utenti che stanno uscendo utilizzano dispositivi con schermi piccoli e risoluzioni basse, le persone potrebbero lasciare il sito a causa di una scarsa esperienza utente. Quindi il prossimo passo che possiamo fare è migliorare la UX.

In breve, più conosciamo gli utenti, più possiamo garantire un prodotto accessibile, efficiente e divertente.

5. Prova le versioni mobili del tuo sito

Devi controllare l'aspetto e il funzionamento del tuo sito web su diversi dispositivi mobili. Sono disponibili alcuni strumenti che puoi utilizzare per testare il tuo sito web.

A. Google Mobile-Friendly

Questo è uno strumento semplice. Devi inserire l'URL del tuo sito e Google genererà una recensione "facile da usare". La recensione può essere così:
"Questa pagina è facile da usare su un dispositivo mobile."
O
"La pagina non è ottimizzata per i dispositivi mobili: questa pagina può essere difficile da utilizzare su un dispositivo mobile. Risolvi i seguenti problemi:

• Testo troppo piccolo per essere letto
• Viewport non impostato
• Elementi cliccabili troppo ravvicinati
• Utilizza plugin incompatibili."

B. Mobiletest. me

Nel test.me mobile, è necessario inserire l'URL del sito Web che si desidera controllare e selezionare il dispositivo e il sistema operativo. Da lì, puoi ottenere la visualizzazione completa del sito Web su qualsiasi dispositivo mobile. Testando, puoi correggere gli errori prima del lancio.

6. Crea layout di progettazione flessibili e fluidi

Nel mercato odierno, ci sono molte risoluzioni mobili e dimensioni dello schermo che aumentano gli sforzi dei designer. Anche le densità di molti dispositivi variano. Dallo schermo a bassa densità (360 pixel) allo schermo ad alta densità (4K), ecco i modi più comuni per descrivere la densità:

• Bassa densità (ldpi)
• Densità media (mdpi)
• Alta densità (HDPI)
• xhdpi (altissima densità)
• xxhdpi (extra-extra alta densità)
• xxxhdpi (Extra-extra-extra alta densità)

Ecco alcuni semplici termini relativi alla densità

A. Risoluzione

Numero di pixel sullo schermo

B. Pixel indipendente dalla densità (DP)

Un'unità pixel virtuale definisce un layout dell'interfaccia utente. Un DP esprime le dimensioni o la posizione del layout in modo indipendente dalla densità. Il DP è pari a 1 pixel fisico su uno schermo a 160 dpi.

C. Dimensioni dello schermo

La dimensione dello schermo viene misurata come lunghezza diagonale dello schermo.

D. Densità dello schermo

Quantità di pixel all'interno dell'area fisica dello schermo, solitamente rappresentata da punti per pollice.

Tutti questi concetti possono essere applicati durante lo sviluppo del sito mobile. Assicura che le interfacce siano adattabili su tutti i dispositivi. Questa è chiamata interfaccia fluida. In breve, un'interfaccia fluida è quella in cui le dimensioni sono definite in percentuale.

7. Se non utilizzi un design reattivo, crea URL separati per mantenere la coerenza

Durante la progettazione dell'interfaccia utente del negozio di e-commerce, i designer dovrebbero pensare a come verranno visualizzati i contenuti e gli utenti con dispositivi diversi potranno accedervi. In alcuni scenari, la proporzione e il layout differiscono molto dalle specifiche di progettazione originali. Quando i siti web non sono progettati per adattarsi a più dispositivi, non sono "responsive".
Il responsive design è una tecnica di sviluppo che rileva il tipo di dispositivo client e ne regola il design per adattarlo alle dimensioni dello schermo su cui viene visualizzato. Pertanto, lo stesso contenuto può essere visualizzato nel formato a 3 colonne su un desktop, nel formato a 2 colonne su un tablet e nel formato a 1 colonna su uno smartphone.

Il design non responsivo può causare molteplici problemi come dimensioni dei caratteri errate, pulsanti non cliccabili, ecc. Non tutti sono come noi che possono creare design altamente reattivi. Ma c'è un'alternativa per gli sviluppatori e i designer per gestire il web design reattivo. Possono generare URL che riconoscono automaticamente (tramite tag HTML) il tipo di dispositivo. Dopo aver rilevato il dispositivo, il contenuto può essere visualizzato in modo ottimale:

Alcuni esempi di URL generati sono

• www.website.com (accesso desktop)
• m.website.com (accesso mobile)
• www.website.com (versione più leggera con HTML di base) (accesso telefonico)

8. Usa "meta tag viewport" per adattare le pagine agli schermi mobili

Secondo Google, "un viewport può controllare il modo in cui la home page verrà visualizzata sui dispositivi mobili". In altre parole, se i designer non prendono in considerazione la visualizzazione, l'interfaccia utente su un dispositivo mobile apparirà proprio come il sito desktop. Il sistema adatterà lo schermo per l'utilizzo mobile in questo scenario, ma generalmente non funziona. In alcuni casi, le immagini verranno distorte e creeranno un'esperienza utente scadente. Dopo aver applicato la finestra, i progettisti possono controllare la modalità di visualizzazione e migliorare l'esperienza utente.

Come prendere in considerazione il Viewport?

Puoi utilizzare un tag CSS chiamato "meta tag viewport", che è incluso nella specifica CSS Device Adaptation.
Questo tag ha la seguente sintassi: <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9. Durante l'avvio della progettazione mobile, determinare il "core" del sito web.

Durante la creazione del design del sito per dispositivi mobili, i progettisti devono garantire che le caratteristiche principali del sito siano presentate in modo chiaro. In breve, i siti Web mobili dovrebbero consentire funzionalità complete perché il CTA è ovvio su qualsiasi sito Web progettato per dispositivi mobili.

Ma come determinare le altre funzionalità da includere? Pensa al cuore del tuo sito web. Quali sono i pilastri principali del sito web? Quali sono le caratteristiche principali del sito web? Quali funzionalità sono minori ma migliorano la UX (come ricerca, filtri, ecc.)?

Esaminiamo un esempio di applicazione del concetto di base a un sito di e-commerce di consegna di cibo. I pilastri principali di questo sito sarebbero:

• Accedi e registrati
• Ricerca prodotti
• Elenco prodotti
• Aggiungi al carrello
• Guardare

Un sito desktop ha più funzionalità, ma puoi filtrare quelle necessarie e includerle nel sito mobile. Elimina anche la possibilità che gli utenti si sentano sopraffatti da troppe opzioni su un piccolo schermo.

10. Usa moduli semplici e campi di input

C'è un modulo che l'utente può compilare su molti siti per contattare il team di supporto o ricevere newsletter e altri scopi. Gli utenti mobili possono trovare questi moduli un grosso problema se non sono progettati correttamente. Più lungo e complesso è il modulo, più difficile sarà per gli utenti inserire le informazioni.

Come ottimizzare il modulo per i dispositivi mobili?

• Includere solo i campi essenziali obbligatori per l'inserimento da parte degli utenti. Se ci sono troppi campi obbligatori, è più probabile che l'utente abbandoni il processo di registrazione.
• Non dividere i campi in troppi campi. Ad esempio, il nome/cognome può essere considerato un semplice nome.
• Assicurati che la tastiera numerica sia attivata automaticamente per i campi numerici come Contatto n. , codice postale, ecc.
• Rendi concisi i messaggi di errore.
• Prova a includere l'automazione nei campi. Ad esempio, mentre chiedi l'indirizzo dell'utente, sfrutta la funzionalità GPS e precompila i campi come codice PIN, stato, città, ecc.

L'applicazione di questi concetti di base migliorerà l'esperienza utente del tuo sito mobile. Queste applicazioni limiteranno la possibilità che gli utenti abbandonino il modulo o il tuo sito.

Avvolgendo

Nella prima fase di questa serie, abbiamo esaminato 10 linee guida per migliorare l'UX del sito mobile del tuo negozio di e-commerce. In Emizentech, la migliore società di sviluppo di e-commerce in India, abbiamo esperienza nello sviluppo di negozi di e-commerce altamente reattivi. Fateci sapere le vostre esigenze.