Kritisk gennemgang af det nye Houseofkids.dk
Den danske dronning inden for salg af børnetøj online, Houseofkids.dk, har fået ny platform og nyt design.
Umiddelbart ser det jo meget nydeligt ud, men under overfladen lurer en hel stribe problemer.
Hvorfor skal man så bruge tid på at rette hvad der ligner mindre detaljer?
Jeg har tidligere været inde på det, din underbevidsthed opfanger alle disse små æstetiske fejl, og sender et advarselssignal med op til din bevidsthed. Og sker det, så starter sitet allerede med minus troværdighed før der er gået 500 milisekunder!
Jeg bringer her en kritisk gennemgang af hvad jeg umiddelbart er faldet over.
Hvad kan jeg lide ved designet
Jo jo, der er skam ting i det nye design jeg er vild med :-)
- Det magasin-agtige design lægger sig tæt op af en af mine største favoriter. Me like
:-)
- Farvepaletten er godt sammensat. Der er ikke rigtigt nogen farver, der falder uden for. Og pastel er lige målgruppen :-)
- Størrelsesfilter / quick søgning inde på produktkategorierne er
et must inden for tøjshops. Men kan være utroligt svært at lave,
derfor er det endnu få der har det.
På trods af små problemer (de har ikke helt styr på multistørrelser, f.eks. sandaler str. 21-23), så virker det rigtigt godt hos Houseofkids. Og filter på køn (dreng/pige) er noget jeg ved rigtigt mange kunder også efterspørger.
- Deres "Inspiration"-magasin er en rigtig, rigtig god facon at
lave vertikale kataloger på, dvs. præsentere kollektioner på tværs
af produktkategorier.
Og så er det guld værd, når det kommer til SEO og Adwords :-)
- De har en fed måde at gruppere en produktsøgning på. Den gad
jeg godt usability-teste lidt på, for at se om effekten også er
positiv også for"normale" mennesker.
- Rigtigt flotte og inspirerende fotos, der bliver brugt rundt
omkring. Især på de overordnede produktkategorisider. Havde de
smidt lidt tekst ind på disse også, ville man kunne have lavet lidt
SEO på det også.
Hvad bryder jeg mig ikke om
Hold fast, nu går det løs!
- Hvorfor den overdrevne brug af store bogstaver?
Ikke alene kan det være direkte smertefuldt at læse (se f.eks. leveringsboksen på forsiden), men store bogstaver svarer i chat-sprog til at råbe. Og der er rigtigt meget på siden, der "råber" til kunderne!
- Der bliver brugt alt for mange forskellige skrifttyper, -farver
og -størrelser rundt omkring.
Hver gang man skriver noget med en anden skrift, skiller det sig ud fra alt det andet. Og øjet lægger ekstra meget mærke til det. Men hvis denne visuelle effekt bliver brugt for meget, så står alt teksten og "råber" til dig, og så mister man effekten.
- Og nu hvor vi er ved fonten, hvorfor skal tekst-tunge afsnit
skrives med så pokkers små bogstaver?
For det første siger man, at når visse dele af ens målgruppe er på 30+ år, så har over 20% synsproblemer. Og det er simpelthen ikke behageligt at læse tekst med en Arial 11px.
For det andet siger man, at så snart tekstlinier når op over 60 karakterer, så begynder øjet at have problemer med at "skifte linie". Hos Houseofkids når de af og til op på over 100 karakterer per linie.
Font-størrelsen kunne sagtens sættes en størrelse eller to op, uden at det går ud over designet. Hvorfor så ikke gøre det?
Prøv at gå ind på Reklamation-siden. Zoom en tak ind i din browser (tryk Ctrl +). Ser det pænere eller grimmere ud? - Hvem står egentligt bag butikken?
Jeg har ledt og ledt, men ingen steder kunne jeg finde den "gode historie" om hvem der egentligt står bag butikken. De har den ellers, inde på deres blog, som der forøvrigt vist heller ikke er links til nogen steder?
En god "Om os"-side er ekstremt vigtig, når det handler om at overbevise de besøgende om at de trygt kan handle med en. Og her falder butikken helt igennem. Hvorfor har de f.eks. ikke linket "Nyt design"-kassen på forsiden til den gode historie?
- Ingen klare Call-to-actions!
En af de ting, synscentret i vores hjerne analyserer uden at vi er bevidste om det, er hvor man skal klikke for at komme videre mod sit mål. Og er synscentret ikke istand til at vurdere dette, overlades vurderingen til den tænkende del af vores hjerne. Hvilket er rigtigt, rigtigt skidt!
Prøv f.eks. at lave den berømte squint-test på forsiden. Kan din hjerne regne ud hvordan du kommer videre?
En simpel underline hover-effekt på alle hyperlinks vil desuden også hjælpe utroligt meget (ren Jakob Nielsen, jeg ved det), da det visuelt tydeligere vil kommunikere hvad der kan klikkes på.
- Når man klikker sig ind på en under-kategori, så er der
utroligt meget tom plads (white space) ud for Quick-søgningen /
filteret. Det er spild af god plads, og kan få designet til at
blive "sidetungt". Især, når der ikke rigtigt er nogen grund til
det.
- De skulle vist have hyret en bedre grafiker til at fritlægge Ny-knappen.
- Prøv at klikke på et produkts billede for at få det op i en
større udgave. Er det virkeligt stort nok for at danne sig et bedre
indtryk af f.eks. en bluses ekstra detaljer, stoffets tekstur
osv.?
- Målgruppen sidder ofte med en bærbar PC, og surfer rundt med det irriterende mousepad mens de har børn hængene om anklerne. Jeg har ved flere usability tests observeret, at de godt kan have svært ved at ramme de små links, knapper og andre navigationselementer, som Houseofkids.dk benytter.
Ud over det er der en række tekniske problemer rundt omkring. Det
vil der selvfølgelig altid være i starten, men rettes der ikke op
på disse hurtigst muligt kan det have store konsekvenser.
- Går man ind på http://houseofkids.dk (altså uden www.), så
skifter den ikke til www-domænet. Det er ikke god SEO, og kan give
dem duplicate content problemer fremover.
- "Send til en ven" virker ikke i Firefox / Chrome.
- Prøv at lade være med at skrive en e-mail adresse i
adresse-trinnet i checkout'et. Hvor er fejlmeddelelsen? Hvorfor er
det lige jeg ikke kan få lov til at komme videre?
Faktisk kommer advarslen i næste trin, men her giver det jo ikke rigtigt mening.
- Prisen på fragt kommer lidt som en ubehagelig overraskelse i sidste trin i checkout flow'et.
- Prøv at åbne Firefox, skriv noget i søgefeltet og tryk på
enter-tasten. Hvad skete der lige der?
- "Tilmeld nyhedsbrev" åbner i et nyt vindue. Hvorfor mon
det?
- Hvad mon det betyder, når et produkt har et kamera ikon på sig?
Umiddelbart skulle man tro der var en video et sted (se det kunne være fedt!), men jeg kan dælme ikke finde den.
Konklusion
Der er rigtigt mange andre detaljer rundt omkring, men jeg vil ikke lige til at bruge en hel dag på en tilbundsgående analyse samt at skrive en 10-siders blog post. Bemærk desuden at denne blog post er skrevet før jeg har læst Amino-posten for at undgå at jeg blev farvet af andre menneskers holdning.
Det er forøvrigt Lone Sanco, der har lavet det nye design. Lad mig starte med at sige at jeg er vild med hendes stil og hendes illustrationer. Men nogle af mine kritikpunkter tyder på, at der har været for meget fokus på "godt design", og lidt for lidt fokus på "god interaktion". Det interaktive, dvs. hvordan det føles at klikke sig rundt fra side til side, er ekstremt vigtigt når det kommer til nethandel. Det er en hel ekstra dimension, som ikke bruges så kraftigt i normalt webdesign.
Desværre går "det interaktive element" ofte tabt, når et design overleveres fra designeren og til frontend nørden, der skal kode det ind i shoppen. Hvor kæden lige er hoppet af her tør jeg ikke gætte på.
Men hvad synes du?
Har jeg været for grov og bør pakke piben ind?
Såkaldte "eksperter" kan ofte godt være lidt for opslugte af deres
egen verden, og være helt forkert på den.
Det er derfor man har usability tests :-)