Hvor stor del av nettsiden din er faktisk synlig for brukerne?
Lurer du på hvor mye av siden din brukerne faktisk kan se? Hvor går den såkalte «bretten»? FINN.no har analysert den reelle nettleserflaten som er igjen på skjermen når menyer, toolbars og annet stash har krevd sin plass. Her er våre tall.
Tradisjonelt har man ofte målt skjermoppløsningen til brukerne når man har utviklet websider, og forsøkt å gjette på sånn omtrent hvor mye reell arbeidsplass dette gir oss i en standard nettleser (heretter viewport, i mangel av et godt norsk ord).
Hva mener vi med «viewport»?
Skjermstørrelsen er i grunnen uinteressant i denne sammenhengen, det er nettopp viewport’en som teller – det som er igjen når menyer, toolbars, rammer og annen staffasje har spist sitt.
Det er bitelitt mer vrient å måle den reelle viewport’en, ettersom ulike nettlesere rapporterer dette på forskjellige måter. Vi førsøkte oss først med analyseverktøyet Webtrends sin ut-av-boksen-analyse av dette, men tallene vi fikk ut av dette var alt for dårlige.
De mest vanlige viewport-størrelsene er:
- 1259X654
- 1259X629
- 1003X592
- 1003X599
- 1259X631
- 1003X567
Tør vi gjette på IE7 med standard innstillinger, på de mest vanlige skjermstørrelsene? Tallmaterialet totalt tyder også på at de aller fleste surfer med nettleseren i maksimert modus (så den dekker mest mulig av skjermen).
Vil du se hvordan du regner ut viewport, eller se hvor stor din egen viewport er, gå til http://offline.no/ . Er du en browser/javascript-guru som ser svakheter i metoden, så gi gjerne lyd fra deg i kommentarfeltet nedenfor!
Hvor går bretten?
Den såkalte «bretten» er for mange det mest kritiske tallet. Det vil si hvor langt ned på siden innhold er synlig uten at brukerne må scrolle nedover. Vi understreker at vi ikke påstår at brukerne ikke scroller – det gjør de gjerne så lenge det tydelig er noe som indikerer at det er noe spennende også lenger ned på siden.
Her er viewport-høyden for FINN.no sine brukere:
Det er ikke helt trivielt å lese denne grafen (og langt kjipere å lage den…), men den viser forsøksvis fordelingen av de ulike viewport-høydene på alle de målte brukerne. Det er ikke et magisk skjæringspunkt hvor du når de aller fleste, men en glidende overgang mellom ca 550 og 650 piksler. Skal vi driste oss til en tommelfingerregel, så kan vi si at du når 95% om du legger det viktigste innholdet innenfor en høyde på 560 piksler.
La oss forsøke å illustrere hva dette betyr i praksis, på forsiden til FINN.
Det grønne feltet viser hvor mye 70% av brukerne garantert kan se, eller for å snu på det; 30% av brukerne vil ikke se det som er utenfor det grønne feltet uten å scrolle.
Hva dette betyr for deg må du selv vurdere, men eksempelvis kan det være litt uheldig å ha en alt for stor illustrasjon på toppen, med linkene videre nedenfor bretten. Om brukerne er på sidene dine for første gang, bruker de gjerne ikke mer enn et par sekunder på å scanne siden for å se om de skjønner hvordan de kommer seg videre.
Bredden på viewport
Bredden reflekterer i stor grad de vanlige skjermoppløsningene der ute, ettersom det ikke er like mye stash som ligger på sidene av viewporten her.
Hva betyr alt dette i praksis?
Er i beita for plass, så utnytter du bredden dårlig ved å legge deg på f.eks 1100 piksler. Da kan du like gjerne øke til 1250, og få effekt av det hos 50% fler brukere, eller du kan gå ned til rett under 1000, og i praksis nå alle.
| Hvor mange vil du garantert nå? | Bredde | Høyde |
| 90% | 1003 | 568 |
| 80% | 1003 | 576 |
| 70% | 1003 | 592 |
| 60% | 1259 | 600 |
| 50% | 1259 | 606 |
| 40% | 1259 | 625 |
| 30% | 1259 | 632 |
Det er også verdt å ta med i beregningen at disse tallene ikke tar hensyn til rullefeltene som oppstår når innholdet er større enn det du ser på skjermen. Disse er typisk 15 piksler brede. I praksis vil svært mange nettsteder ha høyere sider enn viewport-høyden din, og da reduseres bredden i praksis med 15 piksler, ettersom det automatisk kommer et rullefelt på høyresiden.
Nedenfor finner du en sammenstilling av de to grafene.
Bakgrunn og grunnlagstall
Tallene er basert på drøye 177 millioner sidevisninger på FINN i uke 47. Ut fra dette har vi trukket ut viewport-data fra 1,4 millioner besøk. Dette er ca 1/3 av alle besøkene, nemlig den delen med de 1000 mest vanlige kombinasjonene av bredde/høyde.
Dette burde være tålelig representativt for den reelle skjerm-massen i Norge.
Arbeidet er inspirert av danske Thomas Baekdal sin strålende rapport Actual browser sizes (final) (2006). En titt på den anbefales!
Kommentarer? Fyr løs!
Takk for en fantastisk interessant artikkel!:)
En veldig interessant artikkel. Hadde imidlertidig vært svært artig å sett dere publisere en lignende artikkel om om den store debatten “Hvorvidt folk er villig til å benytte scroll eller ikke for å nå tak i relevant info”. Keep up the good work! :-)
@Bård: Indeed. Jeg har tenkt å komme med litt postings rundt dette også etterhvert. Vi kommer til å måle hvor langt ned folk scroller osv, for å lage litt heat maps. Men det er nok et par måneder frem i tid!
Helt enig med de som mener bretten-hysteriet tidvis er litt overdrevet, men som et supplement så er kunnskap om bretten svært verdifull. Kan det legges “in your face”, så hvorfor ikke gjøre det :)
Inntil videre; her er en særs interessant oppsummering av en del verktøy i denne gata: http://www.conversion-rate-experts.com/articles/understanding-your-visitors/
Takk for interessant artikkel og nyttig statistikk.
Men et spørsmål: Hvor stor del av RSS-feeden deres er faktisk synlig for brukerne?
Jøsses.. Med en viewport på 1675×829 så stiller jeg (og dama) med skjermer helt utenom det vanlige hvis jeg leser grafene dine rett?
Jeg trodde faktisk at skjermer på 19″ og mer var begynt å bli ganske vanlige, og da får man fort vekk oppløsninger på 1280×1024 eller der omkring.
Disse tallene tyder jo på at de fleste fortsatt kjører en oppløsning med kun 600 i høyden, men de har allikevel noe større enn 800×600, siden bredden på de fleste er rundt 1000…
@Morten. Disse tallene er egentlig litt overraskende. Resultatet er svært intr. Dersom vi kikker på FINNs forside og hvordan den idag er designet, så ser vi jo at vi helt klart vil dra svært så stor nytte av nettopp disse tallene (sjekk reise). Jeg sitter med en følelse av at mange designere ikke har et godt nok forhold til viewport. Nå finnes det vel heller ikke flust av rapporter og statistikk så Erlends glitrende arbeid her er gull verdt!
@Espen. Litt usikker på hva du mener. Tenker du på de lagrede søkene (agenter)?
Absolutt interessant undersøkelse, takker for den. Men hvorfor snu grafene «på hodet»? Jeg føler at når målet er å vise antallet brukere over en spredning oppløsninger burde antallet representeres på Y-aksen. Hadde vært litt lettere å tolke grafene da etter min mening.
@Jarre: Er enig i at det nok er mange designere som ikke tenker på viewport. Men jeg tror mange av de, spesielt de som ikke hovedsakelig jobber med web, trenger å få kompetente råd fra utviklerene (frontend). Men uansett hjelper det ekstra med slike undersøkelser gjort av større nettsider som FINN.
@larre: Beklager mangelfull beskrivelse. Tenker på RSS-feeden fra labs bloggen. Feeds uten full-text overlever sjelden lenge i min Google Reader.
@Frode: Gjett om jeg sleit med å finne en god måte å representere oppløsningsmengdene på… Angrer på at jeg skulka så mange statistikktimer på ingeniørhøgskolen.
Du har kanskje rett i at et slikt plott hadde vært bedre. Men ville jeg da på en enkel måte kunne forklart sjefen min at han mister in-your-face-effekten på 30% av brukerne om han på død og liv skal ha 4 linjer hjelpetekst på linken sin?
Jeg skal gjøre et forsøk anyway :)
@Espen: We aim 2 please. RSS er herved switchet til fulltekst :)
Baekdal har nylig konkludert med at man skal holde seg til maks 980px bredde.
“So you need to make it less than 980px in order to design a page that works well on all modern devices – including mobile phones and desktop browsers. And, it turns out that 980px is also a very comfortable size to use in general.
Do the smart thing. Forget about the size of people’s screens, design for a maximum width of 980px. Then your site will work (nearly) everywhere.”
960 er også en veldig beleilig størrelse å bruke, som er grunnlaget for 960 Grid System.
I og med at Iphone og Opera Mobile baserer seg på 980px bredde, syns det fornuftig å følge denne regelen når, som dere har funnet, den magiske grensen ligger rett under 1000px et sted. Men hvis man har en veldig spesifikk brukergruppe som har rundt 1200px (webutviklere, f.eks.), er det ingenting i veien for å lage en side som utnytter det.
@Erlend: Bra. Takk.
supernyttig artikkel.
takker og bukker.
:)
Dette er en viktig problemstilling som ikke er så lett å forholde seg til. Sant nok at viewport ikke er det samme som skjemoppløsning, men å i det hele tatt ta hensyn til dette er uansett et steg i riktig retning. Skal man designe for minimumsbrukeren, slik at de med fete skjermer opplever sidene som unødig små? Eller ut fra designernes megaskjermer, som fører til at den jevne bruker opplever siden som full av både horisontale og vertikale scoller?
I Tele2 gjorde vi nylig en analyse av klikkstatistikken på sidene våre vs vanligste oppløsning, og fant ut at det definitivt lønner seg å plassere nøkkelinnhold og kampanjer over bretten.
Etter at vi la om forsiden vår til å være tilpasset 1024 x 780, som er våre besøkendes vanligste oppløsning, opplevde vi en økning i klikk på 20% på vår viktigste forsidebanner.
@Kjartan: Det var interessant! Hvor var denne banneren plassert før, og hvor er den plassert nå?
Nå er banneret der hvor du ser “julenissens supertilbud”. Før var hele designet høyere, og de tre kampanjebannerne har mer eller mindre byttet plass med de tre ikonene webmail/driftsmeldinger/nettbutikk.
Før måtte man scrolle for å se kampanjebannerne, men nå får “alle” se dem med en gang, og klikktrendene gjenspeiler dette helt tydelig.
Vi hadde også en tilsvarende analyse på forsiden vår for mobil. Der fant vi ut at det ikke var noe poeng å ha et tredje element lenger ned på siden, for ingen gadd å scrolle så langt (at vi faktisk har et tredje element der nå er en annen sak. Heldigvis er det midlertidig).
[...] stor del av nettsiden din er faktisk synlig for brukerne? Mulig feil forum, men here it goes: Hvor stor del av nettsiden din er faktisk synlig for brukerne? – FINN labs Viewpoint – er det mange her som tenker p
Dette er kjempeinteressant, og viktig. Mener bestemt at dette er viktig for alle som jobber med web. Tross alt ligger vi godt oppe og fremme på både bruk og produksjon av sider i dette landet. Litt synd at det fortsatt kan virke som det er en generell mening at designere tar for lite hensyn til slike fakta. Opplever vel at fler og fler designere(og utviklere), blir bedre på å forstå både viewport og andre elementer som har litt flytende grenser for HVEM som bør bry seg :) Ikke minst blir bedre på å forstå psykologien i et nettsted, og koble det på en bedre måte sammen med fakta for å oppnå funksjonalitet for eier og bruker.
på siden min er sidebredde=”100%”
Nå har det gått et drøyt halvår siden denne studien ble gjort. Er det mulig å få en oppdatering for å se hvordan det har utviklet seg?
Geir
@Geir: Det skal jeg fikse!
Meget bra artikkel! Er noen tips her som jeg absolutt skal benytte meg av :) Thank you!
[...] har målt viewport i et par år, og har tidligere skrevet en artikkel om hvor stor del av nettsiden din som faktisk er synlig for brukerne. Der er hovedpoenget at folk flest har lave skjermer, og at du burde ha et bevisst forhold til hvor [...]