Jag är intresserad av:

Lämna dina uppgifter så ringer vi dig:

Eller ring oss:
0470 - 70 36 80

28 september 2015

Så utnyttjar du utrymmet "över vecket" på din hemsida

Simon Östemar - Webmaster på Smelink.se Simon Östemar
Webmaster

Utrymmet på din hemsida som syns innan besökaren börjar scrolla kallas över vecket. Vi reder ut hur viktigt det är och hur du utnyttjar det på bästa sätt.

Så utnyttjar du utrymmet över vecket på din hemsida | Smelink tipsar

Vad innebär "vecket" på en hemsida?

Över vecket, eller above the fold, är ett uttryck som hängt med länge. Det användes först för att beskriva utrymmet på översta halvan av en tidning, halvan som syntes när tidningen låg dubbelvikt. För att locka förbipasserande att köpa tidningen behövde innehållet över vecket väcka intresse och göra dem nyfikna.

Över vecket på en tidning

När det gäller tidningar är över vecket fortfarande oerhört viktigt. Där placeras ofta både den absolut största nyheten och de dyraste annonserna.

Men vad innebär vecket på en hemsida?

Även om du kanske inte har hört uttrycket innan, pratas det ofta om vad som ska placeras över vecket när en hemsida tas fram. Vecket på en hemsida är en osynlig linje längst ned på skärmen. Allt som är över vecket syns direkt och för att få se det som är under vecket behöver användaren scrolla. Enkelt va? Nja, det är faktiskt mer komplicerat än det låter.

För 10 år sedan visste vi att en majoritet av alla Internetanvändare surfade med en dator vars skärm som hade en upplösning på 1024x768 pixlar eller 800x600 pixlar. För att garantera att det viktigaste innehållet var över vecket behövde vi helt enkelt placera det inom de ramarna.

År 2015 ser situationen lite annorlunda ut. Ibland surfar vi på datorn, andra gånger på surfplattan och allt som oftast på mobilen. Skärmupplösningarna varierar något oerhört vilket gör det svårt att sätta en generell riktlinje att vecket oftast ligger X pixlar från toppen.

Vi tar ändå ett enkelt exempel med en vanlig laptopskärm på 1366x768 pixlar.

Över vecket och under vecket på en hemsida

Inom den röda ramen ser du hur mycket av Vings hemsida som syns före scroll på en datorskärm med 1366x768 pixlars upplösning.

Var är vecket på din hemsida?

För att få en uppfattning om var vecket ligger för de flesta av dina besökare måste du koppla på en statistiktjänst, till exempel Google Analytics. Där kommer du efter ett tag kunna se data på vilka som är de vanligaste skärmupplösningarna och enheterna bland dina besökare.

Så här gör du för att få fram datan i Google Analytics:

  1. Klicka på Målgrupp i vänstermenyn.
  2. Klicka på Teknik i undermenyn som dyker upp.
  3. Klicka på Webbläsare och operativsystem i undermenyn som dyker upp.
  4. Välj Skärmupplösning som Primär dimension.
  5. Klicka på Sekundär dimension, sedan Användare, sedan Enhetskategori.
  6. Granska datan. Vilka skärmupplösningar och enheter är vanligast hos dina besökare?
Så här hittar du dina besökares skärmupplösning och enheter i Google Analytics

I det här exemplet har 45% av besökarna en datorskärm (desktop) med 768-1080 pixlar på höjden. Det ger oss en idé vart vecket ligger för de flesta användarna.

Testa vad som hamnar över vecket på din hemsida

När du var vecket ligger för de flesta av dina besökare kan du börja kolla din egen hemsida med de vanligaste skärmstorlekarna. Oroa dig inte, du behöver inte köpa en massa olika skärmar! Det räcker med att installera webbläsaren Chrome och tillägget Window Resizer så är du igång och testar på nolltid.

Besök din hemsida i Chrome och klicka på Window Resizer-ikonen uppe till höger. Sedan är det bara att testa med de vanligaste upplösningarna och se vad som hamnar över respektive under vecket.

Använd Window Resizer för att testa din hemsida med olika skärmupplösningar

Så här enkelt är det att välja skärmupplösning i med Window Resizer i Chrome för att kolla vad som hamnar över och under vecket på din hemsida.

Kom ihåg att webbläsarfönstret tar upp ett antal pixlar också så i själva verket kanske någon med exempelvis 1366x768 pixlar bara ser runt 700 pixlar på höjden.

Så här scrollar vi, år 2015

Nu vet du vad vecket är och vad det innebär att placera innehåll över eller under vecket. Då kommer vi till det här med scrollning. Allt innehåll du har placerat efter vecket, kommer dina besökare verkligen scrolla ner och se det?

Idag är vi mycket vanare vid att scrolla än för 10 år sedan. Vi har smidiga verktyg som scrollhjul och pekskärmar som gör det enkelt för oss att ta oss nedåt på en hemsida. Om det är så enkelt att scrolla, då borde det väl inte spela någon roll vart vi placerar det viktiga innehållet?

Trots vanan att scrolla visar färsk statistik att bara 30% av besökare scrollar ner under 1500 pixlar från toppen, vilket motsvarar runt 2,5 skärmar. Vid slutet av fjärde skärmen är bara 13% kvar. Därefter börjar det vända och färre och färre lämnar. Liknande statistik verkar gå att applicera på hur vi läser artiklar; många slutar läsa någonstans bland de första 50 orden men därefter tappas bara ett fåtal läsare på vägen upp till 500 ord.

Den här bilden från Chartbeat illustrerar hur vi scrollar. Bara en bråkdel av besökarna är kvar 3000 pixlar från toppen.

Det blir vanligare och vanligare med så kallad single-page-design där besökarna scrollar igenom allt innehåll istället för att klicka sig runt bland undersidor. Vad säger då scrollningsstatisstiken om detta? Om bara 13% av besökarna kommer till botten av sidan måste väl långa sidor vara helt värdelösa?

Okej, nu kan vi anta att bara ett fåtal av dina besökare kommer se innehållet som ligger några skärmars scrollande ner på sidan. Vad kan vi dra för slutsatser från det? Vissa drar slutsatsen att allt viktigt innehåll måste ligga över vecket, annars förlorar du potentiella kunder. Andra anser att de som väl har scrollat så pass långt ner på sidan då blivit fångade av innehållet och med större sannolikhet kommer göra en intresseanmälan eller köpa din produkt.

Var ska du placera dina calls-to-action?

En call-to-action är en uppmaning till dina besökare att utföra en handling på din hemsida. Den brukar börja med fördelarna med att köpa din tjänst eller produkt följt av en knapp eller ett formulär för att göra en intresseanmälan eller kontakta dig. Läs mer om hur du skapar en bra call-to-action

Call-to-action på Spotifys hemsida

Spotifys call-to-action börjar med fördelar ("Lyssna och njut", "lyssna gratis") och fortsätter med två tydliga knappar för att komma igång med tjänsten.

Vi behöver nu börja tänka på var på sidan du bör placera dina calls-to-action. Över, eller under vecket?

Calls-to-action anses vara några av de absolut viktigaste beståndsdelarna på en hemsida, eftersom de leder besökarna ett steg närmare att bli kunder. Att placera dem över vecket verkar ju därför självklart - då får ju alla besökare se dem. Det har dock visat sig i många tester att placeringen av calls-to-action faktiskt inte är avgörande för hur många intresseanmälningar som kommer in via hemsidan. Hur kan då det komma sig?

Jo, det verkar vara så att motivationen att klicka på en call-to-action inte kommer från placeringen av denna, utan från en känsla att produkten är bra och har ett värde för kunden. Istället för att fokusera för mycket på var du ska placera din call-to-action bör du alltså börja satsa på att bygga värde för kunden. Presentera fördelarna kunden får ut av din produkt så kommer du få fler intresseanmälningar än om du bara experimenterar med placeringen av din call-to-action.

Ett exempel:
En call-to-action utan substans över vecket presterar antagligen sämre än en call-to-action i botten av sidan, som föregås av bra information om fördelarna med produkten.

Hur ska du då använda utrymmet över vecket?

Vi har kommit fram till att placeringen av dina calls-to-action inte är avgörande för hur många intresseanmälningar du får in via din hemsida. Hur ska du då använda utrymmet över vecket till bästa effekt?

Några idéer när det gäller innehållet över vecket:

  • Presentera ditt budskap, kortfattat. Vilka är ni, vad gör ni och varför ska man bli kund?
  • Dra in besökarna och försök väcka deras nyfikenhet.
  • Indikera att det går att scrolla vidare genom en pil eller avhugget innehåll.
  • Ha inte för mycket innehåll över vecket. Det kan lätt bli rörigt vilket får besökarna att missa huvudbudskapet.
Exempel på hemsida med bra innehåll över vecket

Info Source har bra innehåll över vecket: En kort text som beskriver produkten med inriktning på kundfördelar, en enkel call-to-action för de som vill "Skapa demokonto", samt en liten pil och tre avhuggna bilder som indikerar att det finns mer information vid scroll. Längre ned på sidan, efter lite mer produktinformation, referenser och aktuella blogginlägg, finns en större call-to-action för att plocka upp besökare som scrollat hela vägen.

Sammanfattning

  • Över vecket kommer från tidningsbranschen och innebär övre halvan av tidningen, där det viktigaste innehållet placeras.
  • På hemsidor är vecket en osynlig linje längst ner på skärmen. Användaren måste scrolla för att se innehållet under vecket.
  • Ofta placeras det viktigaste innehållet och hemsidans call-to-action över vecket.
  • Vi surfar med mängder av olika skärmupplösningar och enheter idag, därför är det svårt att ge en generell riktlinje på hur många pixlar från toppen vecket på en hemsida ligger.
  • Statistik visar att placering av calls-to-action inte är den avgörande faktorn när det gäller att få fler intresseanmälningar. Bra innehåll följt av en genomtänkt call-to-action är bättre än en call-to-action längst upp på hemsidan.

Då så, är vecket verkligen så viktigt? Och måste du placera det viktigaste innehållet över vecket? Jag vill påstå att det är viktigare att du fokuserar på att skapa intressant och relevant innehåll till dina besökare, som gör dem intresserade av att scrolla eller klicka sig vidare. Om du väljer en single-page-design där besökarna scrollar sig igenom innehållet, eller en mer traditionell hemsida med undersidor, spelar ingen jättestor roll. Så länge du inte krånglar till det och visar för mycket information samtidigt på skärmen kommer din hemsida kunna prestera bra oavsett.

Fokus måste ligga på fördelar för kunderna. Hur kan du hjälpa dina kunder? Kan du spara dem tid eller göra deras liv enklare och bekvämare? Har du svaret på de frågorna är du på god väg till en bra hemsida!

Mer läsning

How important is the fold
Scroll behavior across the web
Life above and beyond the fold
Why the fold is a myth

Vill du förnya ditt företags hemsida?

Lämna dina uppgifter så ringer vi dig för en fri genomgång av dina behov:

Ny hemsida?

Öka din försäljning och få fler kunder. Låt oss skapa din nya hemsida.

Läs mer

Vill du hamna högre på Google?

Få fler och bättre besökare. Vi sökmotoroptimerar din hemsida.

Läs mer

Prenumerera på vårt nyhetsbrev:

Lämna följande fält tomt.