Web Design Critique # 45: Optimized Cable Company
Elke week bekijken we een nieuwe website en analyseren we het ontwerp. We zullen wijzen op zowel de gebieden die goed zijn gedaan als de gebieden die wat werk kunnen gebruiken. Ten slotte sluiten we je af met je eigen feedback.
De site van vandaag is Optimization-World.com, de thuisbasis van de Optimized Cable Company.
Ontdek ontwerpbronnen
Als u wilt dat uw website wordt opgenomen in een toekomstige ontwerpkritiek, duurt het maar een paar minuten. We brengen $ 49 in rekening voor het bekritiseren van uw ontwerp - aanzienlijk minder dan u zou betalen voor een consultant om uw site te bekijken! Meer informatie vind je hier.
Over Optimized Cable Company
Elke kabel die bij Optimized Cable Company wordt verkocht, is levenslang gegarandeerd. Als uw kabel ooit defect raakt, stuur hem dan gewoon terug voor een probleemloze vervanging. We zijn erg trots op het aanbieden van hoogwaardige kabels tegen zeer eerlijke prijzen. Betaal niet te veel voor uw kabels in de warenhuizen. Bestel bij ons en profiteer van onze gratis verzending special. We geven je geen cent. De prijs die u ziet, is de prijs die u betaalt.
Hier is een gedeelte van de homepage:
Eerste indruk
Er zijn hier enkele goede ideeën aan het werk, maar over het algemeen komt het ontwerp heel dicht overeen met iets dat ongeveer tien jaar geleden vrij gewoon was geweest. Trends in webdesign zijn iets dat de aandacht verdient wanneer u een website gaat ontwerpen. Niet zodat je de ideeën van anderen kunt afzetten, maar zodat je ervoor zorgt dat je eindproduct modern en relevant aanvoelt.
Als ontwerpers is het te gemakkelijk om vast te lopen in de manier waarop we een project benaderen. Het negatieve effect hiervan is dat de wereld verandert terwijl we hetzelfde blijven. Het hebben van een website die verouderd aanvoelt, is vooral gevaarlijk voor online winkels omdat het direct verband kan houden met lagere verkopen. Bezoekers komen langs en weten opeens niet zeker of de site een veilige plek is om geld uit te geven. Is dit een legitiem bedrijf dat mijn creditcardgegevens zal beschermen? Of is hun sitebeveiliging verouderd? In dit geval ga ik mogelijk door naar Best Buy, ongeacht de kosten en kwaliteit van de producten, alleen omdat de site veiliger aanvoelt.
Toegegeven, het is moeilijk precies vast te stellen wat een modern ontwerp onderscheidt van een verouderd ontwerp, dus vandaag zullen we doorkammen en kijken of we kunnen identificeren welke aspecten onze indrukken over de tijdsperiode direct beïnvloeden.
Koptekst
Het eerste dat hier onze aandacht trekt, is het logo. Het is een zwaar glanzend element dat aanvoelt alsof het uit de vroege web 2.0-periode komt. Glans kan nog steeds in veel webontwerpen werken als het goed wordt gedaan, maar hier voelt dit specifieke element niet op zijn plaats. Vrijwel niets anders op de pagina komt overeen met deze look en feel, inclusief de tekst op het logo, die meer aanvoelt als iets uit een advertentie voor een oldtimer (meer verwarring over de periode).
Vervolgens gaan we naar het gele verloop. Deze kleur is echt in strijd met het schema van de rest van de site. Marketeers vinden dit leuk omdat het opvalt, maar vanuit een ontwerpperspectief voelt het gewoon helemaal verkeerd. Kleuren die complementair zijn, kunnen opvallen en de aandacht trekken zonder te botsen. Verder, zelfs zonder rekening te houden met de rest van de site, is het gele verloop iets anders dat de huidige trends niet weerspiegelt.
Om te zien wat ik bedoel, laten we de verzendbanner op de site hierboven vergelijken met hetzelfde element op de Staples-website.
Hier kunnen we veel van leren. Ten eerste is de indeling veel ruimer en ruimer, alles is niet zo strak gepropt. We zien ook een aantal sterke links-uitlijningen, in tegenstelling tot relatief zwakke midden-uitlijningen. Merk op dat de sleutel hier subtiel is. Er zijn hellingen en zelfs een textuur gemaakt van dunne lijnen, die we allebei zien op de geoptimaliseerde website. Op de Staples-site zijn deze elementen echter veel ingetogener. Zowel de hellingen als de lijnen zijn gemakkelijk te missen als je niet oplet, wat betekent dat ze bijdragen aan de esthetiek zonder storend te zijn.
Kleuren en texturen
Als we naar beneden gaan op de site, kunnen we aannemen dat de kleuren en texturen een grote rol spelen in de indruk van een tijdsperiode. In de onderstaande schermafbeelding zien we dit in het spel, samen met sterk gebruik van harde hoeken met zwarte lijnen van één pixel die eraan grenzen. Dit creëert een boxy-gevoel dat me doet denken aan wat werk dat ik ooit voor een klant heb gedaan in een CMS genaamd Plone.
Nogmaals, laten we dit vergelijken met enkele van de behandelingen die we in een vergelijkbaar gebied van een grote concurrent zien. De onderstaande schermafbeelding toont de zijbalk van de Radio Shack-startpagina. Dit bedrijf is niet bepaald een perfect beeld van moderne bedrijfspraktijken, maar ze proberen hun site er fris en relevant uit te laten zien.
Foto's en tekst
Naast de grafische elementen op de pagina, moet u ook kijken hoe u uw beeldbehandelingen structureert. De onderstaande foto heeft echt geen goed effen kleurvlak om tekst op te plaatsen, dus kreeg de tekst een onhandige ghosted schaduwbehandeling om hem te laten opvallen.
Soms heb je een foto die echt niet werkt met tekst. In plaats van te proberen de twee bij elkaar te houden als het gewoon niet werkt, overweeg dan een alternatieve route. We hebben een heel artikel gewijd aan Ontwerpen met foto's dat geweldige trucs deelt voor het combineren van tekst en fotografie op een aantrekkelijke en leesbare manier.
Tekst en logo's
Het laatste deel van deze pagina dat ik wil adresseren, wordt weergegeven in de onderstaande afbeelding. Hier hebben we een hele hoop logo's, waarvan sommige ongetwijfeld noodzakelijk zijn, maar ik ben er absoluut niet van overtuigd dat ze er allemaal moeten zijn. Accreditatie van de BBB is goed, maar moet ik echt weten dat de site gebruik maakt van de US Postal Service? Het is vrijwel zeker dat als ik een product online koop, het op de een of andere manier naar mij zal worden verzonden en dat de meesten van ons de US Postal Service beschouwen als "gewone oude post".
Verder kunnen de creditcardlogo's waarschijnlijk naar de betalingspagina worden verplaatst. De meeste consumenten die comfortabel genoeg zijn om een online aankoop te doen, gaan ervan uit dat u grote creditcards gebruikt.
Wat tot slot volgt, is een enorm blok uniforme tekst. Er zijn geen kopteksten, pictogrammen, gedifferentieerde tekstbehandelingen (afgezien van links) of andere trucs die worden gebruikt om dit op te splitsen en leesbaarder te maken. In één oogopslag weet ik niet eens waar dit stuk tekst over gaat, dus waarom zou ik er een paar minuten over doen om het te lezen?
Bij webdesign kun je gewoon niet van bezoekers verwachten dat ze zo'n stuk pure tekst aanpakken. Een op de honderd bezoekers doorloopt misschien wel de eerste alinea, maar dat is optimistisch. Betekent dit dat u niet veel tekst op een webpagina kunt hebben? Absoluut niet. Je moet gewoon leren om het op te splitsen in betekenisvolle en beheersbare brokken die snel kunnen worden doorzocht voor relevante informatie.
De ontwerpers van MailChimp zijn hier geweldig in en ik verwijs altijd naar hun werk wanneer ik dit onderwerp bespreek. Hun recente aanpak voor het opnieuw ontwerpen van de site heeft een pagina met functies die vol staat met tekst, maar bekijk hoe ze ermee omgingen:
Sterke kopteksten, korte tekstblokken en afbeeldingen die naar de inhoud verwijzen, worden hier allemaal gebruikt om al deze inhoud gemakkelijk verteerbaar te maken.
Aanbevelingen
Om deze site in 2011 te brengen, raad ik de ontwerpers aan om eens goed naar andere websites te kijken, zowel in hun vakgebied als daarbuiten (onze Design Gallery is precies voor dit doel gemaakt). Onderzoek meer naar wat moderne sites onderscheidt van de trends en tactieken die te zien zijn op de geoptimaliseerde site.
Jouw beurt!
Nu je mijn opmerkingen hebt gelezen, kun je meedoen en helpen door de ontwerper wat verder advies te geven. Laat ons weten wat je geweldig vindt aan het ontwerp en wat je denkt dat sterker zou kunnen zijn. Zoals altijd vragen we u ook respect te hebben voor de ontwerper van de site en duidelijk constructief advies te geven, zonder harde beledigingen.
