I siti di e-commerce sono notoriamente affollati e sovraffollati.
Oggi esamineremo una tonnellata di negozi online che rompono questa tendenza essendo funzionali e attraenti. Ognuno degli esempi qui sotto ha una lezione unica per insegnarci una buona progettazione di e-commerce. Iniziamo!
Innanzitutto, il problema
Prima di poter apprezzare i siti che sono ben progettati, dobbiamo pensare a cosa c'è di sbagliato nel tradizionale formato di e-commerce. Qualche individuo saggio una volta osservò che un cammello è un cavallo progettato da un comitato. Questo scherzo intelligente si applica sicuramente ai siti di e-commerce. I negozi online di grandi nomi hanno spesso troppi input da troppe persone, con il risultato di un pasticcio di buone intenzioni e grandi idee di funzionalità che non sono mai state correttamente integrate l'una con l'altra in modo sinergico.
Lo screenshot qui sopra è solo una piccola parte della home page di Kmart.com. Come puoi vedere, è un disastro ferroviario. Naviga sul sito e vedrai che la pagina presa nel suo insieme è anche peggio. Come Kmart.com, molti siti di e-commerce soffrono di immenso disordine. C'è così tanto da competere per la tua attenzione che il risultato finale è che i tuoi occhi rimbalzano da un posto all'altro senza un vero scopo o concentrazione.
Ora, la soluzione
Diamo un'occhiata approfondita ad alcuni siti che hanno capito bene. Osservando ognuno dei siti sottostanti, confronta l'interfaccia con quella di Kmart per vedere quanto può essere più efficace un layout pulito e semplice.
Xtreme Mac
Xtreme Mac ha l'esperienza di acquisto più originale e innovativa che ho trovato nella mia ricerca (Icon Dock in basso era un secondo vicino). Ti viene presentata una semplice griglia di colpi di prodotto con effetti di rollover luminosi e colorati. Quando si fa clic su un elemento, anziché spostarsi su una pagina dedicata, l'intera griglia si sposta fluidamente in modo che la cella selezionata possa espandersi fino a otto volte rispetto alle dimensioni normali. Vi viene quindi dato un colpo di prodotto più grande, una breve descrizione e l'opzione per saperne di più o acquistare ora. Fai clic su un altro elemento e il layout dinamico cambia di nuovo per mostrare quell'elemento.
Ho trovato l'interfaccia Xtreme Mac bellissima e divertente da usare. Fare in modo che i tuoi visitatori non solo siano impressionati dal design del tuo sito, ma in realtà goderti l'esperienza di acquisto è il Santo Graal del design dell'e-commerce. Più apprezzano il tuo sito, più tempo dedicano a questo. Il che, in teoria, li rende più propensi ad acquistare effettivamente qualcosa (l'obiettivo finale di qualsiasi sito di e-commerce!).
Icona Dock
A prima vista puoi vedere che Icon Dock è un bel sito pieno di illustrazioni di prima qualità. La cosa che preferisco di icon dock è il modo in cui hanno gestito i carrelli della spesa. Alcuni siti web rendono abbastanza difficile vedere e modificare il contenuto del tuo carrello, ma Icon Dock ti offre un dock? Visivo? di icone che rimangono con te mentre fai acquisti. Quando vuoi aggiungere qualcosa, devi semplicemente trascinare l'icona sul dock per rilasciarla. Quindi se vuoi rimuovere qualcosa dal dock, premi semplicemente la piccola? X? sull'icona.
Questo è realizzato in modo così intuitivo che non hai davvero bisogno di istruzioni. Funziona esattamente come ti aspetti. E per quelli che non capiscono subito, c'è ancora la vecchia opzione di fare clic su? Aggiungi al carrello? pulsante. Questa è una caratteristica importante. Quando si progetta un'interfaccia in modo univoco interattivo, pensa sempre se devi ancora includere il modo tradizionale per coloro che potrebbero non capire la tua nuova fantasia fantasia. Ciò ti consente di illuminare il tuo percorso nell'interattività preservando l'usabilità.
Nike
Scusa chi odia Flash, ma mi piace molto questo sito. Per concedere un po ', i tempi di caricamento per ogni pagina sono piuttosto fastidiosi. Tuttavia, il sito nel suo complesso è un gioco visivo impressionante. Come Kmart, hanno un sacco di oggetti in vendita (forse non tanto, ma l'argomento è ancora valido), ma invece di ingombrare la home page con articoli in disaccordo, Nike ha integrato tutto nella pagina in modo visivamente modo senza cuciture. Hanno ben oltre dieci sezioni uniche su una singola pagina, eppure sembra completamente coeso. Diamo un'occhiata ad alcune delle cose che hanno fatto per realizzare questo.
La prima cosa che hanno fatto per tagliare la confusione è abbastanza semplice. Invece di impilare banner di dimensioni casuali che promuovono oggetti diversi uno sopra l'altro come Kmart, Nike ha un banner principale che ruota tra tre messaggi. Questo sicuramente non è pionieristico, ma è qualcosa che pochi designer considerano di fronte al caricamento di una pagina fino all'orlo del contenuto. Le librerie preconfigurate come jQuery rendono questo tipo di contenuto rotante un gioco da ragazzi e possono davvero rendere una pagina altrimenti statica prendere vita in un modo sottile e non fastidioso.
La prossima cosa che Nike ha fatto per tagliare la confusione è di mettere tutte le sezioni sotto il banner principale su un colore di sfondo continuo per evitare che questo? guarda che ottieni con le scatole degli articoli in vendita nel design di Kmart. Questo rende l'intera pagina come se fosse costruita allo stesso tempo dagli stessi designer, invece di avere un vecchio design che continua a riempire gli elementi sempre più disomogenei nel tempo. Si tratta di gente di sinergia.
Dyson
La lezione che possiamo imparare da Dyson è che puoi fare shopping per un vuoto come comprare una Mercedes. Qualunque cosa tu stia vendendo, se vuoi che sia di alto livello, prendi ispirazione dai siti web che vendono auto di lusso, yacht o qualsiasi altra cosa che costa più di quanto tu faccia in un anno. Lo sfondo nero e grigio è davvero completato da schizzi di bianco e / o blu che salta fuori dalla pagina con contrasto. Quello che veramente ruba lo spettacolo è la fotografia del prodotto (senza dubbio tanto Photoshop quanto la foto reale), che cattura davvero l'essenza del design attraente del prodotto. Notare anche il banner rotante come nell'esempio Nike.Lo vedrete più e più volte negli esempi qui sotto per una buona ragione, è solo un ottimo modo per mettere un sacco di contenuti in un piccolo spazio senza alcun ingombro visivo.
SkinBox
Skinbox rende incredibilmente semplice lo shopping per le skin del forum. La homepage è composta principalmente da una grande sezione che espone i loro temi. Le categorie logiche (light, dark professional, ecc.) Facilitano l'individuazione immediata del tipo di skin che stai cercando. Le skin di ogni categoria vengono visualizzate in una griglia di grandi dimensioni con l'opzione per acquistare subito o visualizzare ulteriori informazioni sulla skin. Quest'ultima opzione è importante. I siti di e-commerce troppo spesso riempiono una pagina con noiose informazioni sul prodotto, risultando in un layout di testo pesante che cerca di vendere qualcosa che sia davvero tutto di attrazione visiva (almeno in questo caso). Se stai vendendo il design di un oggetto, considera la possibilità di inserire le funzionalità specifiche dietro a? Maggiori informazioni? pulsante in modo che gli utenti che desiderano tali informazioni possano trovarlo facilmente e gli utenti che stanno solo navigando non ne siano distratti.
DropBags
Onestamente non ho idea di cosa stia vendendo questo sito. Il? Come usare? sezione dice qualcosa su come mettere la borsa in un secchio, riempirlo di piante e ghiaccio e mescolare, ma non riesco a immaginare perché vorrei mai voler congelare la vita vegetale. Potrebbero volere che pensassi che è scientifico, ma sono abbastanza sicuro che sia stregoneria.
Il punto è che è un prodotto originale. Stanno vendendo una borsa che hai messo in un secchio. Grande affare vero? Tuttavia, hanno reso il sito attorno alla pazza borsa del secchio così attraente che ero quasi convinto che ne avessi bisogno. Come web designer, non puoi sempre sbarcare l'account Nike. A volte ottieni un cliente che vuole vendere un kit di estrazione multiuso? questo è essenzialmente un rivestimento secchio troppo costoso. In queste circostanze, dovresti mettere avanti la stessa quantità di impegno e creatività come faresti se lavorassi per qualsiasi cliente di grande nome. Rendi l'esperienza di acquisto il più semplice e diretta possibile e rendi l'ambiente intorno al prodotto invitante e attraente.
IKEA
Ikea vince il premio per l'esperienza di shopping più interattiva. Quando ricevo per posta il catalogo Ikea, io e mia moglie adoriamo sederci insieme e sfogliarlo insieme per idee di design e per vedere quali fantastici nuovi prodotti hanno creato. Questo è divertente perché l'esperienza Ikea è stata attentamente strutturata in modo che sfogliare il catalogo sia come camminare nel loro showroom. Invece di essere presentati con singoli elementi, vedi la fotografia personalizzata di un'intera stanza completamente composta da prodotti Ikea. Ti danno una ripartizione utile di quanto costa ciascun articolo, nonché il costo di acquistare l'intera stanza come set. Ciò aiuta le persone normali che non sanno molto sull'interior design a creare stanze bellissime.
Recentemente, Ikea ha trasferito questa esperienza nel proprio negozio online. Quello che ottieni è un'esperienza simile a sfogliare il catalogo, solo molto più interattivo e dinamico. È possibile fare clic sulle icone accanto a determinati prodotti per ottenere uno sguardo più ravvicinato o visualizzare le funzionalità nascoste, modificare le viste per guardarsi intorno nella stanza, o saltare la vista della stanza e guardare una semplice griglia di prodotti. Come alcuni degli altri esempi sopra, Ikea sta girando per un'esperienza di shopping che non è solo piacevole, ma potrebbe anche essere considerata divertente. Se stai costruendo un sito di e-commerce, pensa a come puoi vivacizzare l'esperienza aggiungendo qualcosa di un po 'più interattivo del tuo negozio online medio.
Cellar Thief
Cellar Thief è solo un grande esempio di web design creativo. I progettisti hanno mescolato le attuali tendenze del web design con trame e colori brillanti provenienti dall'industria del vino per creare un negozio online incredibilmente attraente. Si noti che in realtà vendono solo tre vini separati, ovvero un set di prodotti più piccolo di quello che è probabile avere nei propri progetti, ma c'è ancora molto da imparare da questo esempio.
Prima di tutto, a parte i vini in vendita, c'è una serie di contenuti secondari nella pagina come consigli sui vini, un feed del blog, ecc. Si noti che ciascuna di queste piccole sezioni è stata posizionata sul lato destro di una pagina piena di sinistra testo allineato. Questo è strutturato in modo che la prima cosa che vedi (dare un'occhiata alla pagina da sinistra a destra) sia il contenuto principale: il prodotto in vendita. Solo dopo aver guardato la pagina per qualche secondo, noti il contenuto secondario. In questa particolare pagina, questo non sarebbe vero se quel contenuto fosse collocato a sinistra. Allineare a sinistra questo contenuto secondario potrebbe dargli una posizione primaria immeritata nella gerarchia visiva. Cerca sempre di immaginare l'ordine in cui un visitatore vedrà gli oggetti sulla pagina e strutturerà i tuoi contenuti di conseguenza.
Un'ultima cosa sull'organizzazione delle informazioni. Controlla quanti contenuti ci sono in relazione a ogni singolo vino. Ora immagina come sarebbe la pagina se il progettista non avesse pensato di suddividere le informazioni in schede. Come lo striscione rotante dei contenuti di cui abbiamo parlato sopra, le schede forniscono un modo elegante ed efficace per racchiudere una quantità ridicola di contenuti in uno spazio piccolo e intuitivo. Durante la progettazione di materiali stampati, sto costantemente pregando i miei clienti di ritagliare le loro informazioni richieste a causa di restrizioni spaziali. Al contrario, il web design ti dà molta più libertà di fornire la ricchezza di informazioni che il tuo cliente desidera nella maniera contenuta che richiede un buon design.
Siti di e-commerce più attraenti
Ecco altri esempi di designer che hanno superato lo stigma di e-commerce ingombrante e goffo, concentrandosi sia sull'aspetto estetico che sulla funzionalità. Fermati con ogni esempio e cerca le cose che abbiamo menzionato sopra.Ci sono un sacco di esempi di esperienze di shopping divertenti ma semplici, fotografie e opere d'arte stupefacenti e organizzazione di contenuti creativi per ispirarti alla grandezza dell'e-commerce.
Baby Quasar
Ooga Zone
ShoeGuru
Madsen Bicycles
i / Denti / T
Abercrombie & Fitch
Sucr?
DNA11
MacStylez
Solo un +
Dodici sud
Sony
Conclusione
Ora che abbiamo esaminato quello che considero il modo giusto e sbagliato di progettare un sito di e-commerce, mi piacerebbe sentire le tue opinioni. Diteci cosa vi infastidisce nello shopping online e cosa amate o odiate degli esempi sopra.
Per ancora più ispirazione e-commerce, controlla Cart Frenzy, una galleria dedicata alla progettazione di negozi online.