Sliderns vara eller icke vara?

Brad Frost brukar beskriva slidern, eller snurran, som en kompromiss mellan ett gäng människor som alla vill synas på startsidan.

– Jag är viktig. Jag ska vara på startsidan!
– Jag är också viktig, jag ska också vara på startsidan!
– Men jag då? Jag är precis lika viktig och ska också vara med!
– Hej, vet ni vad? Vi gör en slider. Då kan vi alla vara med! Horaay!

I många faller stämmer faktiskt detta scenario. Det kan vara om människor eller om produkter eller annat. Man vill visa allt, och allt är lika viktigt och det ska vara högst upp, ovanför det magiska strecket.

Men tycker verkligen besökarna att allt i slidern är så viktigt?

Nope. Besökarna ignorerar till och med slidern ibland. Man lär sig tidigt att bilder som rör sig bara är annonser och försäljningsknep och man ignorerar det. Man behandlar sliders ungefär som försäljaren på gatan. Tittar lite på vad säljaren säljer, kanske lyssnar lite, men går sedan snabbt därifrån. Eller går långa omvägar runt för att slippa dem.
Jakon Nielsen, ”användarvänlighetsguru”, säger själv att sliders ignoreras. Man gjorde bland annat ett test där användarnas uppgift var att se om Siemens hade några erbjudanden på tvättmaskiner. Informationen var i slidern. Användarna såg det inte, de totalt ignorerade den.

Förvirrande

I de fall en slider inte ignoreras kan de faktiskt vara förvirrande. Faktum är att vissa inte ens förstår att slidern är en slider. Eller hur den fungerar. Designers ääälskar att ha en minimal navigering som få förstår sig på. “Vadå, prickarna? Ska jag byta bild med dem?” Många förstår inte att prickarna inte tillhör bilden eller inte är dekoration utan är en form av navigering och “här är jag”-funktion.

Gör sidan långsam

Utöver att sliderns är förvirrande så slöar de ner siten. Det är idag inte helt ovanligt att man som företag vill ha en stor fet slider, så stor att om man sitter på en 15’’ skärm inte ens ser slutet på slidern.

Bild tagen på en 15’’ skärm, site: lindex.se

Bild tagen på en 15’’ skärm, site: lindex.se


Stora krispiga bilder. Kanske 5-10 stycken. Som alla ska laddas in samtidigt och döljas fram till att de visas fram. Med andra ord, det tar tid att ladda sidan.

Men jag vill ha en slider!

Fine. Men hur tänker du kring de mobila besökarna? Ska de också ha en slider?
“Nej”. Svaret är ganska ofta nej. Man vet att siten blir för tung, och rent horribel att besöka på en knackig 3G-uppkoppling. Och vi vet att om en sida tar mer än 5 sekunder, då har vi förlorat 74% av besökarna.
Så, om det inte är så viktigt med en slider för de mobila besökarna, varför för desktopbesökarna?

Innan du bestämmer dig för att ha en slider, ställ dig frågorna:

  • Behöver jag verkligen en slider?
  • Kommer jag att vilja dölja den för de mobila besökarna?

Om svaret är nej, ha inte en slider bara för att alla andra har det.

Om du nu trots allt behöver eller vill ha en slider

Det finns faktiskt tillfällen då man behöver men tänk då på följande:

Gör navigationen uppenbar

Dölj den inte med fancy prickar. Ha pilar. Använd ord som Nästa och Föregående. Skriv ut i klarttext vilken sida i slidern besökaren befinner sig på.
slider_navigering

Samma typ av innehåll

Ha ett och samma typ av innehåll. Visa de senaste nyheterna, eller de senaste produkterna, eller utvalda produkter. Så länge de är av samma typ av innehåll. Blanda inte friskt med “Nu är det rea!” “Gilla oss på Facebook” “Visste du att vi har en ny butik i Nya staden?”.

Mät klicken

Mät klicken. Kolla statistiken. Klickar folk bara på den första slidern? Varför då? Behöver vi minska antalet slides? Klickar ingen!? (är nog läge att ta bort slidern då).
Notre Dame universitet kollade tex sin statistik (http://weedygarden.net/2013/01/carousel-stats/) och la märke till att om man klickade så klickade man på första sliden, medan det andra innehållet ignorerades.

Med andra ord, använd inte sliders såvida du verkligen verkligen behöver dem och besökarna använder dem.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Följande HTML-taggar och attribut är tillåtna: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">