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 è Sonic Electronix, una società di elettronica di consumo. Entriamo e vediamo cosa pensiamo!
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 49 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.
Informazioni su Sonic Electronix
? Sonic Electronix è un rivenditore leader a livello mondiale di car audio e altri prodotti elettronici di consumo. Il nostro magazzino trasporta oltre 15.000 dispositivi elettronici di alta qualità. Offriamo un servizio senza pari a prezzi imbattibili. Inizia oggi a costruire il sistema audio per auto dei tuoi sogni e goditi un servizio premium e una spedizione veloce. Portiamo anche una vasta selezione di audio professionale, apparecchiature DJ e prodotti karaoke per applicazioni che vanno dal livello base allo specialista audio più serio.
Ecco uno screenshot della homepage:
Valutarlo!
Prime impressioni
Sonic Electronix si presenta come un rivenditore online piuttosto tipico. A colpo d'occhio, ci sono diversi aspetti del design che penso siano fatti bene. Posso dire che c'è stato sicuramente un certo sforzo per dare al sito un certo fascino estetico, che è grandioso. Ho visto innumerevoli altri siti in questo genere con un vero casino di una home page.
A prima vista, ciò che mi attrae sono i colpi di prodotto puliti e coerenti. Ogni prodotto è mostrato su uno sfondo bianco e sembra presentato professionalmente. Questa dedizione alla coerenza viene tentata in tutto il sito in varie forme attraverso la ripetizione di colori, stili di pulsanti, ecc.
? Ci sono punti in cui la pagina sembra essere davvero in difficoltà con il disordine? ?Detto questo, ci sono punti in cui la pagina sembra essere davvero in difficoltà con la confusione, come la stragrande maggioranza dei negozi online tendono a fare. Inoltre, ci sono varie modifiche e modifiche che potrebbero essere eseguite per migliorare l'usabilità e il flusso della pagina. In definitiva, penso che potrebbero essere apportati alcuni grandi miglioramenti. Scopriamolo e vediamo come.
L'e-commerce è diverso
La maggior parte del web design può essere affrontata da un punto di vista simile. Posso prendere alcuni principi di base e di design e revisionare il più brutto dei siti web. La cosa interessante dell'e-commerce è che è un campo bizzarro dove occasionalmente i siti con il design peggiore sembrano essere i più riusciti.
? Dobbiamo tenere a mente quando criticare un sito come questo che questo genere opera secondo le proprie regole?Ciò significa che dovremmo intenzionalmente rendere brutti i siti di e-commerce? Assolutamente no. Tuttavia, dobbiamo tenere a mente quando critichiamo un sito come questo che questo genere opera secondo le sue stesse regole e che alcune cose che potrebbero sembrare davvero importanti nel design di un portfolio sono quasi irrilevanti in questa situazione.
È sicuramente una buona idea guardare costantemente in giro per il settore e decidere chi sta facendo bene e perché. Quando un'azienda ha centinaia di migliaia di dollari da investire nella ricerca dei layout e dei flussi di shopping più efficaci, che cosa creano? Quando darò consigli di sotto cercherò di afferrare da riferimenti esterni per aiutarci a mantenere il punto.
Titolo della pagina
Una delle prime cose che faccio quando visito un sito è guardare la barra del titolo. Questo è del tutto istintivo, il web mi ha insegnato a pensare che questo mi dirà di cosa tratta un sito. Ecco cosa vedo sulla pagina di Sonic Electronix.
Come puoi vedere, la barra del titolo si concentra esclusivamente sull'audio dell'auto. Ora, sono disposto a scommettere che questo è per scopi SEO ed è davvero più per cramming di parole chiave che trasmettere informazioni all'utente. Sono tutto per ottimizzare la tua pagina per i motori di ricerca, ma non se riduce l'utilità per l'utente, e questo è esattamente ciò che sta accadendo qui.
? Sono tutti per ottimizzare la tua pagina per i motori di ricerca, ma non se riduce l'utilità per l'utente.?Il problema qui è che, non appena ho letto questo, se non sono alla ricerca di apparecchiature audio per auto, me ne sono andato. Probabilmente non guarderò nemmeno il resto della pagina, soprattutto se ho cinque schede aperte da una ricerca su Google e le visualizzerò rapidamente per vedere quali sono i prodotti di cui ho bisogno.
Anche se l'audio per auto è il tuo più grande venditore, e sembra che sia, penso che questo potrebbe essere rielaborato per qualcosa di più indicativo dei prodotti che effettivamente vendi. Ad esempio:? Car audio, GPS, sicurezza, telefoni cellulari e altro? Qualcosa di simile colpisce quelle parole chiave che ti piacciono mentre trasmettono ancora una descrizione accurata del sito.
Intestazione
L'intestazione è uno dei primi posti sulla pagina che vedo in difficoltà con la confusione. Questo è un problema estremamente comune su tutti i tipi di siti Web perché si desidera stipare così tanto in quell'importante prima impressione.
Mentre pensiamo a come migliorare questa intestazione per renderla un po 'più user friendly, prendiamo una prospettiva esterna. Non appena ho iniziato a guardare in giro su vari siti di e-commerce popolari, ho notato qualcosa di molto interessante su come trattano lo spazio nelle loro intestazioni. Ecco due esempi, il primo di Amazon e il secondo di Overstock.
Guarda le dimensioni di quelle barre di ricerca! Ovviamente, vedono la funzione di ricerca come probabilmente la destinazione principale per gli utenti che visitano il loro sito e vogliono assicurarsi che siano presenti il più prominente possibile.
? Sicuramente suggerisco di testare una pagina con l'intestazione rielaborata per caratterizzare la ricerca sopra ogni altra cosa.Su Sonic Electronix, c'è spazio significativo disponibile per un ampio campo di ricerca, ma è sacrificato nel perseguimento di altre idee. Suggerisco senz'altro di testare una pagina con l'intestazione rielaborata per eseguire la ricerca sopra ogni altra cosa.
Navigazione
Sono andato avanti e indietro su come mi sento dei mega menu che si accumulano in un milione di link, ma un posto che sembra funzionare bene è su siti di e-commerce che hanno un sacco di contenuti da setacciare. I menu di navigazione di Sonic Electronix sono ben organizzati e rendono abbastanza facile individuare rapidamente ciò che sto cercando di acquistare.
Ancora una volta, penso che il disordine di intestazione stia lavorando contro di noi in quest'area. Se attiriamo gli occhi su dove ci aspetteremmo dal menu di navigazione, lo troviamo davvero, ma è un po 'perso in un mare di collegamenti, gradienti, segni di spunta, menu a discesa, ecc.
Un buon design è prendere decisioni. Devi decidere cosa è importante e come lo evidenzi. Se ti speri e cerchi di rendere tutto importante, tutto quello che stai facendo non è niente di importante.
Oggetti presentati
Successivamente, passiamo alla parte degli elementi in primo piano della pagina. Qui è dove si ottiene la prima dose visiva reale della varietà e della qualità dei prodotti offerti sul sito. Gli elementi sono disposti ordinatamente in una griglia e, come ho sottolineato sopra, utilizzano un bell'aspetto di sfondo in studio con un sacco di spazi bianchi.
Mi piace molto quest'area, ma ci sono alcuni problemi che ho con questo. Prima di tutto, dal punto di vista dell'usabilità, è abbastanza fastidioso che ogni casella non sia un'area cliccabile. L'immagine può essere cliccata così come il nome del prodotto e? Acquista ora? pulsante, ma se guardi in giro su vari altri siti, la tendenza qui è quella di far sì che io possa fare clic in qualsiasi punto all'interno del riquadro per andare alla pagina del prodotto dedicata. Con l'attuale configurazione, potrebbe presumibilmente prendere una persona pochi clic per farlo bene.
? Scoprirai che gli utenti sono piuttosto cauti nel premere i pulsanti sui siti di e-commerce per timore di acquistare qualcosa involontariamente.Inoltre, mi sento come il? Negozio ora? i pulsanti sono vaghi. Non sono del tutto sicuro di cosa significhi e in che modo si riferisce a ciò che accade quando premo il pulsante. Non sto acquistando dal secondo caricamento della pagina? Questo bottone comprerà l'oggetto? È semplicemente qualcosa che clicco per maggiori informazioni?
Scoprirai che gli utenti sono piuttosto cauti nel premere i pulsanti sui siti di e-commerce per timore di acquistare qualcosa involontariamente. Quando crei un pulsante, assicurati che mi prepari adeguatamente per quello che succederà quando premendolo.
Perché acquistare Sonic?
La mia parte meno preferita della pagina è il? Why Shop Sonic? sezione vicino al fondo. Questa sezione è semplicemente una scatola con quattro grandi paragrafi. Non è davvero? Progettato? tanto quanto gettato. Sembra che fosse un grosso pezzo di contenuto che il designer non aveva idea di cosa fare:
Questo è un grande blocco di informazioni noiose che semplicemente non leggerò mai come utente a meno che tu non lo renda più interessante. Quindi, come possiamo aggiustarlo? Si scopre che il contenuto qui è davvero un elenco di funzionalità: spedizione veloce, pagamenti sicuri, ecc. Con queste informazioni in mente, non è difficile trovare qualche solida ispirazione. Scopri come l'Apple Store online affronta questo problema:
Vedi quanto è meglio? Nella sezione Sonic Electronix, tutto è gettato in una colonna goffamente lunga che è priva di immagini o di elementi visivi attraenti. Apple si è avvicinata in modo molto diverso suddividendo il contenuto in quattro colonne, mantenendo il testo in un breve paragrafo e catturando la tua attenzione con bellissime icone e foto.
footer
Un ultimo commento prima di concludere questa critica: penso che il footer sia un po 'un pugno nell'occhio:
Non sono sicuro che sia necessario evidenziare i punti elenco o il link, ma sono certo che entrambi rendono questa area difficile da leggere. Se dovessi abbandonarne uno, lancerei le sottolineature in modo che il piè di pagina assomigli più a quello di Newegg.com:
Le differenze tra questi due piedini sono sottili per l'occhio inesperto, ma quello di Newegg sembra molto più pulito e facile da navigare.
Conclusione
Nel complesso, ritengo che il sito di Sonic Electronix abbia un buon inizio con il loro design, ma è necessario ripensare la gerarchia delle informazioni. Questo è il problema in cui ci siamo imbattuti ripetutamente mentre percorrevamo la pagina.
"Presentare il contenuto in modo logico, navigabile e attraente è un obiettivo primario del web design."Presentare i contenuti in modo logico, navigabile e attraente è un obiettivo primario del web design. Informazioni cramming e un po 'di pigrizia da parte del designer in casi come il? Why Shop Sonic ?? sezione stanno trattenendo il sito da quello che potrebbe essere.
In definitiva, suggerisco alcuni studi di tracciamento dei clic per vedere cosa gli utenti desiderano / hanno bisogno. Utilizzare queste informazioni per ridurre ciò che non è efficace e evidenziare ciò che è. Sospetto fortemente che elementi come la barra di ricerca potrebbero essere molto più efficaci se fossero più prominenti.
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.