Una vetrina di e-commerce mobile
L'ottimizzazione dei siti Web per il Web mobile è un lavoro ingrato. E ottimizzare i siti di e-commerce per il web mobile è una bestia che i progettisti e gli sviluppatori hanno appena iniziato a domare.
Non sorprende che le aziende più grandi stiano abbracciando prima il mezzo, probabilmente perché hanno le risorse e il flusso di vendita per giustificarlo. Dopotutto, anche se un sito di e-commerce ottiene un traffico considerevole, una piccola percentuale sarà basata su dispositivi mobili. E una percentuale ancora più piccola di quel traffico completerà effettivamente le loro vendite.
Con lo slancio che inizia davvero proprio in questa arena, l'esperienza delle persone con le transazioni di e-commerce completamente mobili è limitata. Questo rende la nicchia una sperimentale al meglio. Fortunatamente, data la natura dell'e-commerce, il successo può essere attentamente misurato e testato. Questo è un mezzo che ha ancora bisogno di definizione.
Un enorme ostacolo al progresso è la scarsità di esempi. Navigare nelle gallerie per trovare un sacco di idee interessanti non è nemmeno vicino ad essere semplice e veloce. Ci sono solo alcune piccole collezioni di design mobile, ancora meno per l'e-commerce. Per risolvere questo problema, ho raccolto 10 fantastici esempi di e-commerce mobile. QR i codici sono stati inclusi per facilitare la navigazione. Puoi trovare molte app per i tuoi telefoni cellulari in grado di leggere questi codici.
1. Walmart
Un approccio comune a tutti i siti Web qui presentati consiste nell'avere una home page di tipo portale. Walmart non è diverso Tuttavia, mentre la maggior parte dei siti Web si basa su elenchi basati su testo, questo ha una griglia di icone, che è molto più facile da consultare. Molti dei siti web mobili qui trattati hanno elenchi così piccoli che sono difficili da usare. Walmart combina le icone con il testo per rendere gli obiettivi facili da colpire.
Il più grande trucco sul sito web di Walmart è che devi saltare al sito Web principale per completare una transazione. Tuttavia, le informazioni e i pulsanti sono estremamente facili da usare, chiari in funzione e ben organizzati.
2. Toys-R-Us
Il Toys-R-Us sito Web è un passo nella giusta direzione. Ma potrebbe fare alcune cose chiave meglio. Innanzitutto, ho trovato l'elenco dei pulsanti sulla home page solo un po 'troppo piccolo. Capisco la tentazione di ridurli per conservare lo spazio, ma sarebbero molto più facili da usare con solo un po 'più di spazio. Certo, dovrei scorrere di più, ma questo è un buon compromesso.
Una volta superata la home page, diventa molto meglio. In particolare, questo sito Web ha una delle migliori pagine del carrello degli acquisti. I pulsanti sono chiari e l'equilibrio tra densità e capacità di tocco sembra giusto. Tutto sommato, un buon esempio di come comunicare in modo chiaro i punti di azione.
3. Crocs
Lo sviluppo mobile è ancora molto dominato dagli sviluppatori, quindi trovare un sito web mobile ben progettato è un sollievo. Questo è il caso con Crocs . Il suo sito web è ben implementato e una bellezza da guardare.
La vista elenco del catalogo è particolarmente pulita. L'unico modo in cui potrebbe essere reso più snello sarebbe eliminare i nomi dei prodotti. Indipendentemente da ciò, ogni riga rappresenta un obiettivo facile, con informazioni chiare e pertinenti.
4. JC Penny
Un problema che i progettisti del JC Penny il negozio mobile di fronte era lo scopo del prodotto. Come abiliti gli utenti a navigare in modo efficace su una vasta gamma di opzioni in una sezione come i pantaloni da uomo? La soluzione, un semplice sistema a discesa, consente ai clienti di filtrare rapidamente i criteri per raggiungere i prodotti di cui hanno bisogno.
Le grandi immagini sono anche una bella funzionalità. Osserva quanto è facile vedere gli oggetti reali nella vista dei dettagli del prodotto. Sospetto che il tasso di conversione dei siti web per dispositivi mobili sia estremamente basso e non posso fare a meno di pensare che una fotografia di qualità come questa è una delle poche armi per combatterla.
5. Granaio di ceramiche
La formula dovrebbe essere abbastanza chiara ormai: il logo in alto, la ricerca in basso, una grafica introduttiva per promuovere un prodotto o una vendita, seguita da un elenco delle principali categorie di prodotti. E troviamo questa struttura esatta su Pottery Barn Il sito web mobile.
Un dettaglio assolutamente geniale è la soluzione di questo sito web per il problema dei lunghi breadcrumb. Nell'elenco delle categorie di prodotti si noterà che la traccia di breadcrumb è stata notevolmente ridotta per includere solo l'ultima parte della stringa. Confronta questo con l'invadenza del breadcrumb su Toys-R-Us e apprezzerai questa soluzione salvaspazio.
6. Senza fili
Non è una sorpresa Threadless 'sito web mobile è fantastico. La home page segue la formula del portale di categoria, ma con una svolta. Proprio come il sito web di Walmart, l'approccio alla griglia qui è molto più facile da usare rispetto alla maggior parte. La fotografia è coinvolgente e rende il negozio come una vera esperienza di shopping. Qualcosa su di esso sembra meno meccanico della maggior parte degli altri negozi coperti qui.
Troverai questo stesso approccio alla griglia nella visualizzazione elenco prodotti, che è un vero sollievo e mostra i prodotti molto bene. I progettisti sono riusciti a ridurre al minimo lo spreco di spazio pur mantenendo la facilità d'uso.
7. Brookstone
Brookstone Il negozio mobile soffre di una densa home page. Ma una volta superato, il sito web migliora. La grande fotografia chiara è molto apprezzata. Non so se le immagini sono state ottimizzate per i dispositivi mobili, ma sono sicuramente tra le più facili da vedere in questo intero batch.
Un punto debole è la quantità di scorrimento richiesta nella pagina del carrello per arrivare al pulsante check-out. Il contenuto potrebbe fare con un po 'di potatura e ottimizzazione per chiudere l'affare.
8. Dooney & Bourke
Apprezzo molto la fotografia Dooney e Bourke La home page di Trasmette esattamente ciò che l'azienda vende non appena atterri sulla pagina. Un dettaglio sottile a dir poco, ma sicuramente da considerare.
Un punto irritante sulla vista dei dettagli del prodotto è che il campo quantità è vuoto per impostazione predefinita. Ho dovuto aggiungere un "1" per aggiungere un prodotto al mio carrello. Ma è improbabile che ordino più di uno della stessa busta da $ 150.
Inoltre, la pagina del carrello degli acquisti è un po 'come un ripensamento. Ma darò credito alla società per aver posto gli elementi di azione chiave al vertice. Le possibilità che i clienti dimentichino ciò che hanno appena messo nel carrello sono ridotte, quindi concentrarsi su come aiutarle a raggiungere la pagina di check-out è un'idea intelligente.
9. Buy.com
La pagina iniziale di Buy.com ha qualcosa che nessun'altra home page in questo articolo ha: un prodotto reale. Il pensiero della maggior parte dei negozi di e-commerce è quello di creare un portale mobile che permetta agli utenti di scavare nella linea di prodotti completa. Mentre questo potrebbe essere essenziale, Buy.com mi ispira a prendere in considerazione alternative.
Cosa succede se un approccio migliore è quello di concentrarsi sulle offerte? La home page è il primo immobiliare; data la sfida di chiudere le vendite, perché non dedicare tutti i tuoi sforzi per mettere qualcosa di irresistibile di fronte ai clienti. Si noti che prima di raggiungere l'elenco dei dipartimenti su questo sito Web, viene visualizzato il prodotto in primo piano e quattro collegamenti separati a vendite, offerte e offerte speciali.
10. Petco
Una grande caratteristica del web mobile è che elimina il fluff. Quindi, quando vedo la home page di Petco Sul sito web mobile, non posso fare a meno di chiedermi se la grande fotografia sia utile in alcun modo. Il nome dell'azienda e l'icona cane-e-gatto di accompagnamento comunicano l'attenzione al prodotto. Quindi, perché mostrare questa immagine stupida? Invece, vorrei mettere un accordo speciale o una griglia di icone di categoria. Mentre apprezzo lo smalto del sito web, potrebbe essere ottimizzato un po '.
L'azienda ha trovato un'idea geniale nella visualizzazione dei dettagli del prodotto, evidenziando le vendite solo su Internet. Perché non fare un passo avanti e rendere alcuni di questi speciali solo per dispositivi mobili. Formulazione a parte, la pagina dei dettagli del prodotto è straordinariamente pulita e chiara. Anche la descrizione di lunghezza completa sotto le funzioni e le informazioni chiave sembra una decisione saggia.
Conclusione
Progettare siti web mobili è difficile, e progettare siti web di e-commerce mobili è forse doppiamente così. Capire come aiutare i clienti a trovare il prodotto giusto e come convertire quel processo in una vendita è tutt'altro che facile. Spero che questa piccola raccolta di risorse porti nuove idee alla tua prossima (o forse prima) progettazione di siti web per dispositivi mobili.
Scritto esclusivamente per WDD da Patrick McNeil . È scrittore, sviluppatore e designer freelance. In particolare, ama scrivere sul web design, formare persone sullo sviluppo web e costruire siti web. La passione di Patrick per le tendenze e gli schemi del web design si può trovare nei suoi libri su TheWebDesignersIdeaBook.com . Segui Patrick su Twitter @designmeltdown .
Cosa ne pensi se questi esempi? Si prega di condividere i commenti qui sotto ...