Share
Se non hai mai sentito parlare di Shopify prima, forse hai preso dimora sotto una roccia. Shopify è uno dei servizi più popolari per la creazione di soluzioni di e-commerce online e ha recentemente ridisegnato il loro sito frontale.
Oggi daremo un'occhiata ad alcuni dei dettagli più raffinati della riprogettazione e parleremo un po 'di come è stata realizzata la riprogettazione. Tuffiamoci dentro!
Lo spostamento verso la risposta è il cambiamento principale Shopify fatto in questa riprogettazione, e il livello di dettaglio in ogni punto di interruzione non lascia alcun utente dietro.
Shopify è un ottimo esempio di decisione di progettazione basata su dimensioni dello schermo. Diamo un'occhiata ad alcuni di questi esempi, iniziando dalla homepage.
Per la durata di questo articolo, utilizzeremo il termine "mobile" in riferimento al punto di interruzione più piccolo, "tablet" per fare riferimento alla successiva dimensione del punto di interruzione e "desktop" per fare riferimento ai punti di interruzione superiori. Ci sono più di 3 breakpoint di base in questo design, ma questi termini ci forniscono un quadro per pensare ai dispositivi.
Alla dimensione mobile, vediamo un chiaro invito all'azione, Iniziare, che viene ripetuto due volte. Vediamo anche una versione minimale del logo shopify, una tagline centrata e un blocco di colore verde impilato verticalmente con una funzione sovrapposta di un cliente Shopify. Un pulsante del menu stile hamburger è posizionato nella parte superiore sinistra dell'intestazione.
Non appena ci spostiamo verso il punto di interruzione della tavoletta, possiamo vedere che la preferenza si sposta dall'impilamento verticale, e invece il contenuto è posizionato orizzontalmente. Il livello di dettaglio, o "risoluzione del contenuto", aumenta; vediamo un logo più dettagliato (ancora centrato), un testo più grande e l'immagine del cliente Shopify mostra più dettagli.
Forse, cosa più interessante, il blocco verde si sposta dalla pila verticale a un allineamento orizzontale, fluttuato sul lato destro dell'intestazione. Vediamo anche a Accesso pulsante accanto alla chiamata principale all'azione nella parte superiore dell'intestazione. Con le dimensioni del tablet, vediamo ancora il menu in stile hamburger.
Il livello più alto di dettaglio nell'intestazione può essere trovato nella versione desktop dell'intestazione. Il logo si allinea sulla sinistra e il menu dell'hamburger viene sostituito con un menu esplicito. Manteniamo l'allineamento orizzontale mostrato nel punto di interruzione della tavoletta. Sul lato sinistro, il Iniziare call to action viene convertito in un pulsante di invio modulo, con un campo di testo che consente all'utente di inserire il proprio indirizzo email. Al di sotto di questo, vediamo un nuovo contenuto, "Scelto da oltre 100.000 proprietari di negozi".
L'intestazione è un case study nel prendere decisioni per il mobile. Quali sono gli elementi più importanti che non dovrebbero mai essere rimossi? Quali elementi sono appropriati per ogni punto di interruzione e dispositivi che comunemente si adattano a quel punto di interruzione? Shopify ha scelto, ad esempio, di utilizzare l'immagine di un singolo cliente Shopify in tutti i punti di interruzione, ma mostra solo il messaggio quantitativo "Trusted by over 100,000 * store owners" sui desktop. Questo tipo di decisioni sono di livello superiore e sono più che esteticamente mirate.
*Nota: da quando abbiamo iniziato a scrivere questo articolo, Shopify ha aggiornato questo numero a 120.000.
Accentsconagua
Va notato che Shopify utilizza molte tecniche di risposta conformi allo standard web, come l'uso di
Il immagine di sfondo, e caricamento JavaScript non semantico. Ciò consente ai dispositivi con schermi ad alta risoluzione di richiedere immagini ad alta risoluzione; tieni presente che non troverai immagini in pixel su nessuna delle pagine ridisegnate su Shopify.
Shopify utilizza anche dati uri codificati in base 64 per definire determinate immagini in tutto il progetto, inclusa la leggera trama sul blocco verde nell'intestazione. Ciò evita una richiesta HTTP extra non necessaria ed è particolarmente efficace per immagini UI di dettaglio più piccole che non possono essere convertite in SVG e pattern ripetuti.
Parlando di SVG, il logo di Shopify utilizza anche un data-uri codificato in base 64 per definire un'immagine SVG. Funziona allo stesso modo delle precedenti immagini con codifica uri.
La navigazione mobile principale si basa su una barra laterale nascosta che viene visualizzata quando si fa clic o si tocca il menu dell'hamburger.
L'animazione è realizzata usando trasformare e translateX, in combinazione con la seguente regola di transizione:
transizione: trasforma 0.6s cubic-bezier (0.66, 0, 0.41, 1);
Il cassetto stesso è impostato su posizione: fissa, con un troppopieno-y regola impostata su scorrere. Quando il cassetto viene aperto, l'elemento del corpo riceve un js-cassetto aperto class, che imposta l'altezza al 100% e overflow su hidden. Ciò impedisce all'utente di scorrere la pagina del contenuto mentre il nav è aperto.
Una navigazione secondaria è presente su alcune pagine interne, che è semplicemente stilizzata elemento. Ecco il CSS usato per stilizzare il elemento:
.nav__mobile__select width: 100%; background: transparent URL ("data: image / svg + xml; base64, PCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3 ... wIDUuMTkyLDMuNzM1IDguODY1LDAuMDEgMTAuMjg5LDEuNDE0IAkiLz4KPC9nPgo8L3N2Zz4K") no-repeat right center; confine: nessuno; -webkit-apparenza: nessuno; -moz-aspetto: nessuno; -ms-aspetto: nessuno; -apparenza: nessuna; aspetto: nessuno; colore: # 767676; Ancora una volta vediamo la tecnica data-uri utilizzata per la freccia in giù sul lato destro della selezione, così come la aspetto regola, che definisce gli stili del browser di livello base.
Lo stesso menu principale viene utilizzato al di sotto sia dei tablet che dei punti di interruzione mobili, ma il menu secondario viene utilizzato solo sotto il punto di interruzione mobile. Nel punto di interruzione del desktop, i menu vengono visualizzati esplicitamente, con il menu secondario a livello di pagina che appare nella parte superiore della pagina. La barra di navigazione stessa utilizza Headroom, un plugin JavaScript per controllare la visualizzazione di una barra di navigazione appiccicosa basata su diverse azioni. Ad esempio, nelle pagine interne, la barra di navigazione principale si nasconde mentre l'utente scorre verso il basso, lasciando solo il navigatore secondario visibile, ma nel momento in cui l'utente inizia a scorrere di nuovo su, la barra di navigazione principale riappare.
Scorri verso il basso, andato
Scorri verso l'alto, eccoloParlando di menu scorrevoli, Shopify ha scelto una strategia interessante per rispondere ai clic sui pulsanti Call-to-action: un cassetto scorrevole proveniente dal lato destro dello schermo con un menu. Questo cassetto mostra sia su tablet che su dispositivo mobile; sul desktop, gli input del modulo vengono rilasciati sulla parte superiore di uno sfondo nero semi-trasparente a schermo intero, in stile modale.
La pagina "Vendi online" offre alcune considerazioni particolarmente interessanti per le considerazioni di risposta.
L'immagine di intestazione è la prima ovvia considerazione reattiva, poiché cambia dimensione ad ogni punto di interruzione. Ma un cambiamento più sottile si verifica nel punto di interruzione del desktop. Invece di fornire solo un Crea il tuo negozio pulsante, viene visualizzato un modulo con tre campi, che invita gli utenti a registrarsi e creare un negozio in una singola trasmissione di moduli. Questo segue lo stesso schema dall'invito alla home page all'azione.
Un altro modulo di contenuto che viene ripetuto in più punti appare nella pagina Vendi online. Al punto di interruzione mobile, il modulo è essenzialmente una fisarmonica di sezioni di contenuto, ciascuna con un'intestazione e una + pulsante che rivela la sezione. Quando viene rivelato, l'utente può fare clic o toccare a - pulsante per nascondere quella sezione.
Al punto di rottura del tablet e del desktop, tuttavia, il modulo passa a una navigazione del pulsante orizzontale più dettagliata.
Ogni pulsante nella navigazione è associato a un blocco di contenuti. La copia del pulsante cambia da titoli più lunghi e più descrittivi a singole parole accompagnate da un'icona. Le stesse sezioni del contenuto presentano immagini più grandi associate al titolo della sezione.
Questo stesso schema compare due volte nella pagina "Vendi online". La fisarmonica viene riutilizzata anche altrove, anche nel punto di interruzione mobile nella pagina Funzioni. Una differenza interessante, tuttavia, è che il modulo di fisarmonica non è sempre accompagnato dalle stesse sezioni di pulsanti sopra descritte. Nel caso della pagina Funzioni, viene visualizzata una navigazione a contenuto fisso sul lato sinistro, con sezioni di contenuto scorrevoli e sempre visibili a destra.
In due sezioni, "Porta il tuo negozio ovunque tu vada", e alla fine sotto "Siamo qui per aiutare, 24 ore al giorno, 7 giorni alla settimana", le scelte di immagine sono fatte a diversi punti di interruzione. Nella sezione "Porta il tuo negozio ovunque tu vada", l'immagine di un iPhone viene visualizzata solo al punto di interruzione della tavoletta e sopra. Nella sezione "24 ore su 24, 7 giorni su 7, un'immagine dei rappresentanti del servizio clienti mostra sette persone ai punti di interruzione per dispositivi mobili e tablet, ma cresce fino a tredici individui nel punto di interruzione desktop. Questo è realizzato usando il
Notare lo specifico IE9 elemento; questo permette a IE9 di usare il
Al punto di interruzione mobile, le testimonianze mostrano come singoli elementi in una giostra.
A dimensioni tablet e più grandi, queste diapositive si mostrano in parallelo tra loro.
Non è del tutto chiaro perché Shopify abbia scelto di utilizzare una giostra anziché una disposizione verticale degli elementi, ma potrebbero essere fatte alcune ipotesi informate. Ad esempio, Shopify potrebbe non aver voluto sacrificare lo spazio verticale necessario per impilare le testimonianze in modo che l'utente potesse arrivare più velocemente all'ultima chiamata all'azione. O potrebbe semplicemente essere una scelta estetica.
La pagina dei prezzi potrebbe essere vista come una delle pagine più importanti su qualsiasi pagina di marketing di servizi. Per questo motivo, è quasi certo che le decisioni di Shopify su questa pagina sono state accuratamente studiate. Diamo un'occhiata a come il contenuto cambia nel corso dei diversi breakpoint.
All'utente viene chiesto di scegliere un piano che si adatti al loro budget e viene presentato con tre opzioni: vendere online, vendere in negozio o entrambi.
La scelta di una di queste opzioni modifica i moduli di tariffazione per adattarsi alla particolare situazione che hai scelto. Questo cambiamento è accompagnato anche da un cambiamento di colore. Una decisione di design sottile fatta da Shopify era quella di usare il giallo per "online", il blu per "in negozio" e il verde per la combinazione per entrambi; questo è particolarmente intelligente perché la combinazione di blu e giallo produce effettivamente verde.
Una volta che l'utente ha scelto il proprio punto vendita, vengono presentati con blocchi disposti verticalmente che mostrano molto chiaramente il prezzo e il nome del piano. Ogni blocco fornisce anche un menu a discesa "Dettagli del piano" per visualizzare le informazioni dettagliate del piano, come la frequenza e le caratteristiche.
Le domande frequenti vengono visualizzate in basso nel modulo fisarmonica discusso in precedenza. Le intestazioni di fisarmonica si riferiscono ai tipi di domande e ogni sezione contiene più domande. Ciò differisce dall'approccio comune di creare una fisarmonica per ogni domanda.
Al punto di interruzione del tablet, sia il selettore del punto vendita che i blocchi di prezzo si spostano su un layout orizzontale.
I dettagli vengono ora visualizzati senza richiedere un clic su un menu a discesa all'interno di ogni blocco di contenuti. Il selettore del punto vendita passa anche da testo solo a testo accompagnato da un'icona. Il piano "Professional" è leggermente spostato verticalmente rispetto agli altri due piani ed è contrassegnato come il piano "più popolare". Sia al tablet che ai punti di interruzione mobili, un piano "Starter" è progettato per attirare molta meno attenzione e non include Prova Shopify gratuitamente chiamare all'azione. È interessante notare che la stessa mancanza di attenzione viene applicata al piano Shopify Plus, che è per i piani di grandi volumi a livello aziendale.
Le domande frequenti non vivono più in una fisarmonica e vengono invece mostrate in un layout a due colonne.
L'unica modifica relativa al layout del contenuto delle dimensioni del desktop è che i piani meno focalizzati vengono inseriti in una quarta colonna accanto ai tre piani principali.
Esempi di temi Shopify sono in definitiva il modo migliore per comunicare flessibilità e casi d'uso per Shopify. Queste pagine hanno utilizzato alcuni grandi esempi di interattività reattiva che vorremmo sottolineare.
Spesso, le finestre modali sui dispositivi mobili soffrono di una mancanza di considerazione progettuale intenzionale per gli utenti mobili. Questo non è il caso delle modali "esempio" di Shopify. Incentrato su immagini a schermo quasi intero, il modale fornisce pulsanti freccia di navigazione e metadati sotto.
Passando al layout di una tavoletta, le frecce e i metadati si posizionano a destra dell'immagine. La transizione tra ogni modale utilizza a scala e dissolvenza spostamento di attributo. La transizione suggerisce un effetto di zoom dentro e fuori l'indice delle immagini. In ogni momento, quando la modale è aperta, sia una chiamata all'azione che una × pulsante sono presenti, fornendo percorsi di uscita appropriati per l'utente.
La griglia stessa fornisce filtri contestuali per consentire all'utente di navigare su diversi tipi di temi in-page. Anche qui si ripropone l'effetto di ridimensionamento e opacità.
La strategia di Shopify per la navigazione a piè di pagina rivela un'altra situazione in cui viene utilizzata la risoluzione dei contenuti. Al punto di interruzione mobile, vengono visualizzate due colonne:
al tablet e punti di interruzione più ampi, vengono introdotte due sezioni completamente nuove, che forniscono un accesso più diretto ai dettagli degli interni e alle pagine di "autorità" (pagine basate sul contenuto che stabiliscono autorità su un argomento specifico).
In definitiva, questo dimostra che Shopify ha determinato una strategia per la risoluzione dei contenuti: quale contenuto dovrebbe essere disponibile a tutti punti di interruzione, su tutti dispositivi, rispetto a quali contenuti dovrebbero essere disponibili solo se lo spazio su schermo è quello di un desktop o di un tablet? Questo tipo di domande porta a una migliore strategia complessiva dei contenuti e dovrebbe essere probabilmente parte di tutti gli sforzi di progettazione reattivi.
Shopify è riuscito a realizzare una riprogettazione straordinaria, con un'elevata integrità sia nello sviluppo dei contenuti che nelle loro considerazioni di risposta.
Inoltre, hanno impiegato alcune delle migliori tecniche che i moderni browser hanno da offrire. Anche se ci sono ancora pagine nell'ecosistema di Shopify che non si sono ancora spostate sulle nuove tecniche e sul nuovo sistema di progettazione, il sito frontale e le pagine di marketing primarie forniscono un modello di progettazione reattivo solido e unico per i web designer e gli sviluppatori front-end per imparare a partire dal.
