Varje vecka tittar vi på en ny webbplats och analyserar designen. Vi pekar på båda områdena som görs bra förutom de som kan använda lite arbete. Slutligen avslutar vi genom att be dig att ge din egen feedback.
Dagens webbplats är Sonic Electronix, ett konsumentelektronikföretag. Låt oss hoppa in och se vad vi tycker!
Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi tar ut $ 49 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att kolla på din webbplats! Du kan läsa mer här.
Om Sonic Electronix
? Sonic Electronix är en ledande global återförsäljare av bilstereo och annan konsumentelektronik. Vårt lager har mer än 15 000 högkvalitativa elektronik. Vi erbjuder oöverträffad service till oslagbara priser. Börja bygga bilens ljudsystem av dina drömmar idag och njut av högsta service och snabb leverans. Vi har också ett brett sortiment av professionellt ljud, DJ-utrustning och karaoke-produkter för applikationer från ingångsnivå till den allvarligaste ljudspecialisten.?
Här är en skärmdump av hemsidan:
Betygsätt det!
Första intrycken
Sonic Electronix ser ut som en ganska typisk online-återförsäljare. I ett ögonblick finns det flera aspekter av designen som jag tycker är bra gjort. Jag kan säga att det definitivt har gjorts en del ansträngningar här för att ge webbplatsen lite estetisk överklagande, vilket är bra. Jag har sett otaliga andra webbplatser i denna genre med en riktig röra av en hemsida.
Höger utanför fladdermusen, det som appellerar till mig är de rena, konsekventa produktbilderna. Varje produkt visas på en vit bakgrund och ser professionellt fram. Detta engagemang för konsistens försökas över hela webbplatsen i olika former genom repetition av färger, knappstilar etc.
? Det finns poäng där sidan verkar verkligen kämpa med rodnad? ?Allt detta sägs, det finns punkter där sidan verkar verkligen kämpa med rodnad, som de allra flesta online-butiker brukar göra. Vidare finns det olika tweaks och ändringar som kan utföras för att förbättra användbarheten och flödet av sidan. I slutändan tror jag att några stora förbättringar skulle kunna göras. Låt oss bryta ner det och se hur.
E-handel är annorlunda
Den flesta webbdesign kan närmas från en liknande synpunkt. Jag kan ta några grundläggande, grundläggande designprinciper och granska de fulaste av webbplatser. Det intressanta med e-handel är dock att det är ett knäppt fält där av och till de webbplatser med den värsta designen verkar vara mest framgångsrika.
? Vi måste komma ihåg när vi kritiserar en webbplats så att den här genren fungerar med sina egna regler.?Betyr det att vi avsiktligt skulle göra e-handelswebbplatser fula? Absolut inte. Vi måste emellertid komma ihåg när vi kritiserar en sajt så att denna genre fungerar med egna regler och att vissa saker som kan tyckas vara väldigt viktiga för en portföljdesign är nästan irrelevanta i denna situation.
Det är definitivt en bra idé att ständigt titta runt branschen och bestämma vem som har det bra och varför. När ett företag har hundratusentals dollar att investera i att undersöka de mest effektiva layouterna och shoppingflödena, vad kommer de med? När jag ger råd nedan kommer jag att försöka ta tag i externa referenser för att hålla oss på punkt.
Sidans titel
En av de allra första sakerna som jag gör när jag besöker en webbplats är att titta på titellistan. Det här är helt instinktivt, webben har tränat mig för att tro att det här kommer att berätta för mig vad en webbplats handlar om. Här ser jag på Sonic Electronix-sidan.
Som du kan se, fokuserar titelfältet rent på bilradio. Nu är jag villig att satsa på att det här är för SEO-ändamål och är verkligen mer för nyckelordskramning än att överföra information till användaren. Jag är alla för att optimera din sida för sökmotorer, men inte om det minskar användbarheten för användaren, och det är precis vad som händer här.
? Jag är alla för att optimera din sida för sökmotorer, men inte om det minskar användbarheten för användaren.?Problemet här är att så fort jag läser detta, om jag inte letar efter ljudutrustning, är jag borta. Jag kommer troligen inte ens att titta på resten av sidan, särskilt om jag har fem flikar öppna från en Google-sökning och jag cyklar snabbt igenom dem för att se vilka produkter som jag behöver.
Även om bilstereo är din största säljare, och det ser ut som det är, tror jag att det här kan omarbetas till något mer vägledande för de produkter som du faktiskt säljer. Till exempel: • Bil ljud, GPS, Säkerhet, Mobiltelefoner och mer.? Något som detta träffar de sökord som du tycker om samtidigt som du ger en noggrann beskrivning av webbplatsen.
Rubrik
En av de främsta platserna på sidan som jag ser kämpar för röran är huvudet. Detta är ett extremt vanligt problem på alla typer av webbplatser eftersom du vill prata så mycket i det allvarliga första intrycket.
När vi tänker på hur man förbättrar den här rubriken för att göra den lite användarvänlig, låt oss få lite utsiktsperspektiv. Så fort jag började titta på olika populära e-handelswebbplatser märkte jag något väldigt intressant om hur de behandlar utrymmet i sina rubriker. Här är två exempel, den första från Amazon och den andra från Overstock.
Titta på storleken på dessa sökfält! Självklart ser de sökfunktionen sannolikt det primära målet för användare som besöker deras webbplats och de vill se till att det är så framträdande som möjligt.
? Jag föreslår definitivt att man testar en sida med rubriken omarbetad för att söka över allt annat.?På Sonic Electronix finns det ett betydande rum tillgängligt för ett stort sökfält, men det offras i strävan efter andra idéer. Jag föreslår definitivt att du testar en sida med rubriken omarbetad för att söka över allt annat.
Navigering
Jag har gått fram och tillbaka på hur jag känner till mega menyer som klämmer in i en miljon länkar, men ett ställe som verkar fungera bra är på e-handelswebbplatser som har massor av innehåll att siktas igenom. Sonic Electronix navigeringsmenyerna är trevligt organiserade och gör det ganska lätt att snabbt upptäcka vad det är som jag vill köpa.
Återigen, men jag tror att huvudrörelsen arbetar mot oss på detta område. Om vi drar våra ögon till var vi förväntar oss att navigeringsmenyn ska vara, finner vi det faktiskt, men det är lite förlorat i ett hav av länkar, gradienter, checkmarker, nedgångar etc.
Bra design handlar om att fatta beslut. Du måste bestämma vad som är viktigt och hur du kommer att markera det. Om du wuss ut och försöker göra allt viktigt, gör allt du gör inte något viktigt.
Erbjudna objekt
Låt oss sedan hoppa ner till den delade delen av sidan. Här får du din första riktiga visuella dos av sorten och kvaliteten på produkterna som erbjuds på webbplatsen. Elementen är snyggt inredda i ett rutnät, och som jag påpekade ovan använder du en fin studio bakgrundsutseende med massor av blankutrymme.
Jag gillar verkligen det här området, men det finns några problem som jag har med det. Först av allt, från användbarhetsperspektiv är det ganska irriterande att varje låda inte är ett klickbart område. Bilden kan klickas såväl som produktnamnet och? Köp nu? knappen, men om man tittar på olika andra sidor är tendensen här så att jag kan klicka någonstans inom gränsen för rutan för att gå till den dedikerade produktsidan. Med den nuvarande inställningen kan det tänkas ta en person några klick för att få det rätt.
? Du kommer att upptäcka att användarna är ganska försiktiga när man trycker på knappar på e-handelswebbplatser av rädsla för oavsiktligt att köpa något.?Dessutom känner jag mig som "Shop Now"? knapparna är vaga. Jag är inte helt säker på vad det betyder och hur det hänför sig till vad som händer när jag trycker på knappen. Ska jag inte handla från den andra sidan laddas? Kommer den här knappen köpa objektet? Är det helt enkelt något jag klickar på för mer information?
Du kommer att upptäcka att användarna är ganska försiktiga med att trycka på knappar på e-handelswebbplatser av rädsla för att oavsiktligt köpa något. När du skapar en knapp, se till att den förbereder mig tillräckligt för vad som ska hända när jag trycker på den.
Varför handla Sonic?
Min minst favorit del av sidan är "Varför handla Sonic?" avsnitt nära botten. Det här avsnittet är helt enkelt en låda med fyra stora stycken. Det är inte riktigt? Utformat? så mycket som kastat in. Det känns som om det var en stor del av innehållet som designern bara hade ingen aning om vad man skulle göra med:
Detta är ett stort block av tråkig information som jag helt enkelt aldrig kommer att läsa igenom som en användare om du inte gör det mer intressant. Så hur kan vi fixa det? Det visar sig att innehållet här verkligen är en funktionslista: snabb frakt, säkra betalningar etc. Med denna information i åtanke är det inte svårt att hitta en solid inspiration. Kolla in hur online Apple Store hanterar detta problem:
Se hur mycket bättre är det? I Sonic Electronix-sektionen kastas allt i en obekväm lång kolumn som saknar bilder eller några attraktiva bilder. Apple närmade sig så mycket annorlunda genom att dela upp innehållet i fyra kolumner, hålla texten nere till ett kort stycke och ta tag i din uppmärksamhet med vackra ikoner och foton.
sidfot
En sista kommentar innan vi paketerar denna kritik upp: Jag tycker att sidfoten är lite ögonblicklig:
Jag är inte säker på att du behöver antingen kulorna eller länken understryker, men jag är säker på att båda tillsammans bara gör det här området svårt att läsa. Om jag var tvungen att dike en, skulle jag kasta understruken så att sidfoten ser mer ut som Newegg.com:
Skillnaderna mellan dessa två sidfot är subtila för det otränna ögat, men Newegg ser bara så mycket renare ut och är lättare att bläddra.
Slutsats
Sammantaget tror jag att Sonic Electronix-webbplatsen har en stark start med sin design, men de behöver ompröva hierarkin av information. Det här är det problem som vi sprang igen och igen när vi reste ner på sidan.
? Att presentera innehåll på ett logiskt, bläddrabart och attraktivt sätt är ett primärt mål för webbdesign.?Att presentera innehåll på ett logiskt, bläddrabart och attraktivt sätt är ett primärt mål för webbdesign. Information cramming och lite latskap hos designern i fall som "Why Shop Sonic ??? avsnittet håller webbplatsen tillbaka från vad det kan vara.
I slutändan föreslår jag några klickspårningsstudier för att se vilka användare som / behöver. Använd den här informationen för att minska vad som inte är effektivt och markera vad som är. Jag misstänker starkt att artiklar som sökfältet skulle kunna vara mycket effektivare om de var mer framträdande.
Din tur!
Nu när du har läst mina kommentarer lägger du in och hjälper till med att ge designern ytterligare råd. Låt oss veta vad du tycker är bra om designen och vad du tycker kan vara starkare. Som alltid ber vi att du också respekterar webbplatsens designer och erbjuder tydliga konstruktiva råd, utan att det blir några svåra förolämpningar.