Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo sia le aree che sono fatte bene che quelle che potrebbero utilizzare del lavoro. Finalmente, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è Peter and James, un rivenditore di gioielli online.
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 34 per criticare il tuo design - molto meno di quanto paghi per un consulente per dare un'occhiata al tuo sito! Puoi saperne di più qui.
A proposito di Peter e James
? Quando si tratta di gioielleria, Peter & James vende solo il meglio. Dalle splendide gemme incastonate in argento sterling e oro bianco alla nostra rinomata collezione di bracciali in diamanti con maglia italiana, ogni singolo pezzo che troverai sul nostro sito è davvero eccezionale. Ci impegniamo a fornire ai nostri clienti il miglior valore, la qualità, il servizio e la selezione di gioielli firmati disponibili. Seguiamo gli stili più caldi e le tendenze della moda, per garantire che stiamo sempre offrendo i gioielli più recenti e più richiesti on-line.
Ecco uno screenshot della homepage:
Impressione iniziale
La mia impressione iniziale qui è decisamente positiva. Peter and James è un sito Web di grande impatto. La homepage è estremamente semplice, il che è ottimo per attirare la tua attenzione sulla foto di grande impatto della donna con i braccialetti.
Le modifiche che suggerirò oggi sono piuttosto ridotte alla luce del design generale. Persino i grandi stilisti possono sempre utilizzare un set di occhi in più per passare attraverso e suggerire modi per perfezionare il design e l'usabilità di un progetto.
Cominciamo a curiosare nell'intestazione per vedere cosa possiamo migliorare.
Allineamenti di intestazione
Il primo problema che noto quando guardo in cima alla pagina è che l'allineamento orizzontale per gli oggetti su entrambi i lati sinistro e destro sembra un po 'casuale.
In realtà, vedo cosa sta facendo il designer e in realtà è piuttosto intenzionale. Gli elementi inferiori sono concepiti per rientrare leggermente, che è una pratica comune nel layout. Il problema è che la pagina è così semplice che ci sono solo pochi oggetti nella pagina. Se ci fosse altro da allineare al di sotto di questo, potrebbe funzionare meglio, ma dato che quasi ogni elemento sembra avere una sua posizione orizzontale unica, che porta a una sensazione leggermente ingombra.
La soluzione semplice consiste nell'utilizzare l'immagine primaria come un bordo forte che può essere seguito su entrambi i lati. I pulsanti in alto a destra probabilmente rimarranno dove sono, ma ti consiglio di spostare la navigazione a sinistra e il campo di ricerca a destra in modo che gli elementi di intestazione assomiglino approssimativamente all'immagine sottostante.
Hover di navigazione
Un altro piccolo cambiamento possibile consiste nell'aggiungere un effetto hover evidente sui collegamenti di navigazione. Questo non è tanto un cambiamento estetico quanto un piccolo incremento nell'usabilità. Vedendo un cambiamento significativo avviene su un hover fornisce un feedback positivo per l'utente e assicura loro che stanno facendo la cosa giusta. Vuoi che passino con il mouse sulla navigazione e facciano clic più avanti nel sito, quindi aggiungi un piccolo effetto che rafforza questa azione.
Attualmente il cursore cambia ma non sono sicuro che sia sufficiente. Il colore è sempre un'altra opzione, ma non sono sicuro che sia appropriato qui. Una semplice sottolineatura può essere implementata con un minimo di CSS e manterrà l'integrità di classe del design aggiungendo un chiaro feedback visivo.
Immagine primaria
Il vero fascino estetico di questa pagina può essere attribuito alla grande immagine vista sopra. Questo imposta perfettamente il tono per il sito e dà alla pagina un chiaro punto focale. Il mio unico problema con questa immagine è che voglio di più!
Questo sito web vende orecchini, collane, bracciali e anelli. Questa immagine mostra solo i braccialetti. Penso che ci sia molto potenziale qui per entrambi, rendendo il sito più dinamico e inserendo alcuni clic in altre sezioni.
Raccomando di imitare questo stile e diramarlo in quattro diverse immagini, una per ogni sezione. Da qui hai due scelte. Il primo è una presentazione semplice. Niente di stravagante o di distrazione, solo una lenta dissolvenza nell'immagine successiva dopo diversi secondi. Se non sei un fan delle presentazioni, una possibile alternativa è quella di far apparire una delle quattro immagini in modo casuale quando la pagina viene caricata. Preferisco l'opzione precedente, ma quest'ultima potrebbe essere utile per alcuni test A / B interessanti per vedere quale scenario porta a risultati di acquisto migliori.
prodotti sponsorizzati
La sezione prodotti in primo piano appare direttamente sotto l'immagine principale. C'è molto da apprezzare in questa sezione, ma è anche un po 'difficile in alcune aree. Prima di tutto, l'effetto hover con i braccialetti è fantastico. Quando passi il mouse su un braccialetto, la foto si gira intorno per mostrarti l'altro lato. Questa è una soluzione fantastica e divertente per la visualizzazione di un prodotto tridimensionale in uno spazio bidimensionale.
Come puoi vedere nell'immagine qui sopra, al passaggio del mouse si apre anche questa piccola casella di informazioni / prezzi. Adoro questa idea, ma l'esecuzione si sente un po 'fuori. Nel complesso, lo spazio disponibile viene utilizzato in modo scomodo. Il prezzo e la descrizione sono spinti troppo oltre i bordi e non hanno molto spazio per respirare. Inoltre, i due pulsanti nella parte inferiore sono spinti in modo strano a destra, non completamente, abbastanza lontano da non essere esattamente giusto o allineato al centro.
La mia raccomandazione qui è di passare un po 'di tempo a giocare con questi elementi per vedere come è possibile utilizzare meglio questo spazio. Riorganizza ogni oggetto, regola le dimensioni di alcuni elementi e vedi se non riesci a trovare qualcosa di un po 'più attraente e leggibile.
L'immagine qui sotto è il mio rapido tentativo di due minuti. Non è il massimo, ma mostra almeno una buona idea generale su come usare lo spazio un po 'più efficientemente.
Foto del prodotto
Il mio ultimo commento in quest'area è riportato anche alle pagine dei prodotti. Non sono un grande fan del modo in cui i prodotti vengono attualmente visualizzati. Ci sono diverse ragioni per questo. Prima di tutto, le ombre esterne di Photoshop sono un po 'approssimative. Non sono sicuro che siano troppo scuri, non abbastanza morbidi o entrambi, ma potrebbero sembrare molto più realistici con un piccolo investimento nel tempo. In questo momento sembrano solo un po 'approssimativi e riducono un po' la qualità della pagina.
I gradienti sono anche un po 'scomodi. Sembrano violare lo schema visivo generale della pagina. È difficile individuare esattamente perché questo sia, ma penso che potrebbe essere che sono semplicemente troppo scuri sul lato inferiore del gradiente. Prova a semplificare e rendere il gradiente più sottile.
Inoltre, la fotografia attraverso il sito non è così attraente come dovrebbe essere. Si tratta di prodotti di fascia alta che costano centinaia e persino migliaia di dollari, eppure le foto sono scure e brutte. Fortunatamente, non penso che il servizio fotografico debba essere rifatto. Sono abbastanza sicuro che le immagini abbiano semplicemente bisogno di un amore post-elaborazione.
Il design del sito qui implora la fotografia ad alta chiave, e queste immagini semplicemente non riescono. Anche se c'è una tonnellata che potresti e dovresti fare per vestire ogni foto, ma anche un semplice aggiustamento dei livelli fa molto per illuminare quei mezzitoni e aggiungere un po 'di contrasto. Ecco un'altra anteprima rapida e sporca con sfumature più chiare e immagini più luminose.
Ora paragona questo a quello che abbiamo iniziato e puoi vedere chiaramente l'effetto dei cambiamenti che abbiamo fatto.
Vedi quanta differenza fa qualche piccolo aggiustamento? Immagina quanto sarebbe migliore ogni prodotto con uno sforzo serio per migliorare la qualità estetica. Molte delle immagini sono così simili che è possibile registrare un flusso di lavoro Photoshop su uno di essi e applicarlo rapidamente a tutti in pochi secondi invece di manipolare per ore su ogni singola ripresa.
Conclusione
Come ho già detto, la maggior parte delle modifiche suggerite sono abbastanza minime. Spostando gli allineamenti, aggiungendo effetti al passaggio del mouse, questi sono semplicemente miglioramenti possibili che non sono necessariamente emergenze.
Se hai solo il tempo e le risorse per affrontare uno dei problemi sopra elencati, ti consiglio di andare dopo la presentazione dei prodotti. Credo fermamente che le immagini nel loro stato attuale trascinino inutilmente la qualità del sito molto al di sotto di ciò che ha il potenziale di essere. In un negozio online, le foto dei prodotti sono una delle cose più importanti per avere ragione e tuttavia qui penso che siano l'area che è la più carente.
Non è necessario seguire esattamente le mie modifiche, basta provare a capire quali sono i problemi principali relativi all'aspetto dei prodotti e trovare le proprie soluzioni per aumentare la qualità percepita in queste aree.
Il tuo turno!
Ora che hai letto i miei commenti, inseriscici e dacci una mano dando al designer qualche ulteriore consiglio. Facci sapere cosa pensi sia importante per il design e cosa pensi possa essere più forte. Come sempre, ti chiediamo anche di essere rispettoso nei confronti del designer del sito e di offrire una consulenza chiara e costruttiva priva di insulti ostili.