tisdag, 30 augusti 2011

Förstår dina kunder din logik?

På senare år har många webbplatser blivit snabbare och vi användare har fått en förbättrad upplevelse tack vare tekniken, nämligen den att bara de delar som förändras uppdateras. Facebook använder sig frekvent av detta och de gör det bra – när man använder Facebook händer nämligen det man förväntar sig. Om jag skriver en kommentar till ett inlägg så visas inlägget på rätt plats, detta utan att hela sidan behöver laddas om och utan att jag behöver skrolla tillbaka dit där jag var.

Om man inte tänker sig för kan dock denna teknik bli väldigt otydlig för besökare. Om det som händer sker utom synhåll är det nästan omöjligt för besökaren att förstå att något faktiskt har inträffat.

Se upp med “smart” uppdatering av produktlistningar

Ett vanligt sätt att göra produktlistningar är att erbjuda någon typ av filter för att filtrera fram en begränsad mängd produkter. Detta gör t.ex. både Tretti och Scorett. Båda använder samma teknik som Facebook. Så fort man ändrar urvalet visas en uppdaterad lista på produkter.

De har väldigt lika funktioner, men genomförandet gör det ena bättre än det andra.

Rörigt – men förståeligt hos Tretti

Hos Tretti kan man enkelt bestämma t.ex. prisintervall eller om jag bara vill se lagerförda produkter etc. Jag tycker Trettis funktion funkar bra, eftersom man direkt ser att något händer. Väljer jag ett snävare prisintervall faller en del tillverkare bort och jag ser även att antalet produkter ändrar sig:

Före urval har jag 161 produkter att välja på:

Efter ändring till snävare prisintervall har antalet produkter minskat till 17 st:

Trots att min skärmstorlek inte tillåter mig att se en enda produkt förstår jag ändå att min filtreringsönskan är uppfylld. Jag får viktig feedback och har alltså lyckats med en uppgift! Det gör att mitt tålamod och min tro på mig själv ger mig inspiration att leta efter produkterna!

Tretti har en sida som är lång/hög, men deras layout gör att man förstår det på ett bra sätt ändå. Här är några exempel på det:

• En högerkolumn som ger halva bilder får mig att förstå att sidan fortsätter nedåt.

• Även mittenkolumnen har tätt med innehåll, som gör det enkelt att förstå att den går att skrolla.

Tittar man på hela Trettis sida lägger man märke till att den inte har några horisontella mellanrum, som besökaren kan misstolka som sidslut. Detta beror på att de har tre, av varandra oberoende, kolumner.

Scorett – när snygg layout hindrar användaren

Jämför det ovan sagda om Trettis sida med t.ex. Scoretts som innehåller ett antal horisontella “stopp-områden”.

Facebook-tekniken att ladda om sidan i delar kombinerat med layouten på sidan gör att jag som kund inte riktigt förstår vad som händer när jag ska filtrera fram de skor jag är intresserad av.

Det här är vad jag ser när jag väljer ”Herrskor”:

Jag förstår ganska snabbt att jag här kan välja att filtrera fram skor endast i storlek 42 och gjorda av skinn. Så låt oss se hur det ser ut då:

Efter en kort blinkning får jag se den här skärmen:

Jag saknar helt återkoppling på min filtrering, det enda jag kan se är att mina val har blivit verkställda.

Jag antar då att Scorett vill att jag laddar om sidan, t.ex. genom att klicka på ”Visa webshopen”. (Vilket inte alls är den funktion som jag först antog.)
Men detta ger ingen extra ledtråd till var jag hittar skorna.

Svaret är att jag måste skrolla för att kunna se dem. Men den svarta linjen (rödmarkerad nedan), som råkade sammanfalla med skärmslutet för min skärmupplösning lurar mig att tro att sidan faktiskt slutar där.

Hur hade Scorett kunnat göra?

Eftersom man inte vet vilken skärmstorlek kunderna har så gäller det att visa ledtrådar som alla kan se.

Om Scorett lägger till en siffra som visar hur många skor som finns i urvalet, kanske kompletterat med en länk till skorna, så hade jag säkert förstått att min filtrering blivit utförd.

Eller så hade de kunnat minska höjden på grafiken (inte bara ge besökaren en stäng-knapp), som nu tar upp en väldigt stor del av min skärm:

De hade också helt enkelt kunnat ta bort den svarta linjen som lurade mig. På så sätt skulle inte den svarta ramen gå runt och rama in sidan:

Verktygstips

Om du tittar i din webbstatistik kan du få en ledtråd till vilken skärmstorlek kunderna använder:

Men skärmupplösning är inte hela sanningen. På min dator har jag t.ex. upplösningen 1366×768, men kvar till en webbplats är bara 1350×638. En hel del försvinner till verktygsfält, statusrader etc. Detta är också individuellt, en del har flera verktygsfält och då försvinner ännu mer av ytan.

www.foldtester.com är ett verktyg som snabbt visar hur stor del av alla besökare som kan se olika delar av dina sidor. För Scorett är det bara 30% av besökarna som ser produktlistan utan att skrolla!

Summering

Se till att du tittar på dina sidor med dina besökares ögon.
Om dina sidor kräver skrollning, se till att ha en layout som uppmanar till det.

Har du frågor om e-handel, allt från användbarhet till betalningssätt, så är du varmt välkommen att kontakta mig på fredrik.lennstrom@klarna.com.

Jag delar dagligen med mig av tips och observationer på Twitter. Följ mig där genom @flennstrom

Fredrik Lennström
Klarna AB
0700-012945