1. Moderne
nettavisdesign –
begrensninger og muligheter
Pål Nedregotten
Leder produktutvikling,
A-pressen Digitale Medier
1
2. Litt om meg
Pål Nedregotten
Har jobbet i skjæringspunktet
mellom nett og journalistikk siden
1994
Var med på å lage noen av
Norges første nettpublikasjoner
Kanalsjef nettavis i A-pressen
Interaktiv 2005-2009
Leder produktutvikling i A-pressen
Digitale Medier 2010
Ansvarlig for (blant annet)
nettavisdesign i A-pressen
2
@nedregotten
3. A-pressen på nett
Mitt ansvar - produktutviklingen av:
• 48 lokale nettaviser
Blant dem RB.no, BA.no, Nordlys.no, AN.no
• En del eksterne lokalaviser
Blant dem HA-halden.no, GD.no
• Til sammen 65 aviser på samme plattform
• Leverer nettsider til i underkant av 350.000 unike brukere per dag,
1,2 millioner lesere i uken (for A-pressens lokalaviser)
• Til sammen er vi røft regnet Norges sjette største nettaktør (regnet
kun fra interne aviser) / femte største (med de eksterne)
A-pressen eier også
• En del nisjepublikasjoner
• Halve Nettavisen.no
• Halve TV2
3
4. Nettavisdesign
Det som begrenser oss
Rutenett/grids
Flyt
Hvordan vi gjør det
Hvordan leserne leser oss
Hva vi har i vente
4
5. Web Page Title
http://domain.com Google
Every design solution begins by defining
the problem and establishing constraints.
Constraints are the mother of design
invention.
Khoi Vinh/Mark Boulton, “Grids Are Good”: SXSW 2007: www.subtraction.com/pics/0703/grids_are_good.pdf
5
6. Web Page Title
http://domain.com Google
Begrensning #1: Skjermoppløsning
1280
1024 Minste felles multiplum
Andre
1600
800 1440
1920
1366
1680
Andel skjermoppløsning fra TNS Scores
uke 9 2010, A-pressens nettsteder
6
7. Begrensning #2: krom
http://domain.com
Web Page Title
Google
Scrollbar:
~20 pixler bred
1024 pixler - 20 pixler = 1004
pixler
7
8. Tilgjengelig areal
http://domain.com
Web Page Title
Google
Marg:
~10 pixler på hver
side
Tilgjengelig areal for å vise frem
nettavisen:
1004 pixler
- marg på selve nettavisen ~20 px
= 980 pixler
8
12. Begrensning #3: Standard annonsebredder
Web Page Title
http://domain.com Google
Tre spalter som
utgangspunkt:
500 px
180 px
300 px
500 px 180 px 300 px
12
13. Agenda
Det som begrenser oss
Rutenett/grids
Flyt
Hvordan vi gjør det
Hvordan leserne leser oss
Hva vi har i vente
13
14. Grids
The grid is the
most vivid
manifestation of
the will to order in
graphic design.
Khoi Vinh/Mark Boulton, “Grids Are Good”: SXSW
2007
14
15. Grids i nettdesign
• Viktigste
strukturerende verktøy
• Styrer øyet, etablerer
flyt
• Ekstremt viktig i
informasjonstunge
nettsteder
15
16. Obelix (forside stor) - super ex
- forsidemal for de store avisene
- super ex i toppen
980px
A-presseavisenes 710px
20px
250px
grid 10px
Annonse 980*30
Logotopp / Meny
10px
Et stort flytareal på 710px Annonse Annonse 7px
(500 + 180 + padding 30 15px
180*150 768*150
px)
Kan deles inn i
• 1 helbredde (1/1)
• 2 halvbredde (1/2+1/2)
Vær 63*500
Linje 1 - superflex
• 3 tredelsbredder (1/3+1/3+1/3) Annonse
180*500
• 4 firedelsbredder (1/4+1/4+1/4+1/4)
• eller kombinasjoner derav:
• 1/3 + 2/3
• 3/4 + 1/4 10px
• etc 15px
• Netboard går som 500-breddesak 120 120
• (1/3 sak + 2/3 netboard) Linje 2 - superflex 15px
120 120
En utvidet høyrespalte på
15px
250 px 120 120
Egenannonse Annonse Annonse Annonse
e-avis 150*60 150*60 150*60 15px
Og en utstrakt bruk av
visuelle tjuvtriks
16
Fastboks à la bruddfastboks
17. A-presseavisenes
grid 510
710
200
Et stort flytareal på
710px
(500 + 180 + padding 30
px)
Kan deles inn i
• 1 helbredde (1/1)
• 2 halvbredde (1/2+1/2) 236 236 236
• 3 tredelsbredder (1/3+1/3+1/3)
• 4 firedelsbredder (1/4+1/4+1/4+1/4)
• eller kombinasjoner derav:
• 1/3 + 2/3
• 3/4 + 1/4
• etc
• Netboard går som 500-breddesak
• (1/3 sak + 2/3 netboard)
17
18. 1000
VG.no
Et stort flytareal på 600
px
Kan deles inn i
• 4 * 138 px + padding = 150 px
• 3 * 188 px + padding = 200 px
• 2 * 288 px + padding = 300 px
• eller kombinasjoner derav
• 1/3 + 2/3 600 400
• 3/4 + 1/4
• etc
Merk: har innført nytt annonseformat
til erstatning for Netboard på 580 px
338 238
En bred høyrespalte på
400 px
Kan deles inn i
• 2 * 188 px + padding = 200 px
• 1 * 388 px + padding = 400 px
Merk: har innført nytt annonseformat
på 200 px
Skyskraper henger på
utsiden av 1024
• 18
Krever >1240-skjerm
19. 980
DB.no
Et stort flytareal på 765
px 765 180
Kan deles inn i
• 1 helbredde (1/1)
• 2 halvbredde (1/2+1/2)
• 3 tredelsbredder (1/3+1/3+1/3)
• 4 firedelsbredder (1/4+1/4+1/4+1/4)
• eller kombinasjoner derav:
• 1/3 + 2/3
• 3/4 + 1/4
• etc
• Netboard går som 500-breddesak
• (1/3 sak + 2/3 netboard)
En smal høyrespalte på
180 px
• Defineres av skyskraper 372 372
236 236
19
20. Aftenposten.no
Et smalt flytareal på 470 1000
px
• Defineres av skyskraper
Deles opp, men følger ikke streng grid-
inndeling
• 1 helbredde (1/1)
470
En bred indre
høyrespalte på 320 px
En smal høyrespalte på
180 px
• Defineres av skyskraper
180 280 372 180
40% 60%
20
23. Begrensning #4: Første skjermfold?
Studier viser at folk scroller
(men ikke alltid)
Tydelige skiller får folk til å
stoppe scrollingen: Visuelle
vollgraver
Studie: http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm
23
http://iampaddy.com/lifebelow600/
24. Oppsummert
Frihet innenfor begrensninger:
1. Skjermbredde begrenser
2. Annonseformater begrenser
3. Arealet du designer innenfor defineres av rutenett - grids
4. Første skjermfold kan være en begrensning – men ikke
nødvendigvis
• Men hva gjør vi med friheten vi sitter igjen med?
• Når fungerer det godt?
24
25. Agenda
Det som begrenser oss
Rutenett/grids
Flyt
Hvordan vi gjør det
Hvordan leserne leser oss
Hva vi har i vente
25
27. Vi har (alle) gjort det feil
• Øyet flyter i hovedspalten:
Flere spalter med ulike innholdstyper av ulik holdbarhet skaper
blindhet for annet enn hovedspalten
“
Stor svensk studie om annonseeffektivitet (Mejsel, «Nya ögon på Internet», høsten 2008):
Surfarna har lärt sig att material i en högerspalt är mindre
fräscht och inte uppdateras på samma sätt som huvudflödet när
man kommer ner en bit på sajten, säger Magnus Damstedt,
analyschef på Dagens Nyheter”
[Innhold] som ligger i en sajts huvudspalt bibehåller dock
uppmärksamheten oberoende av hur långt ner det ligger när de
väl har scrollats in på skärmen.”
• Sagt på en annen måte:
Nettavisleserne leser midtspalten, fordi det er der vi prioriterer inn nyhetene, og det er der vi som lesere
skanner etter innhold
Studie: Nya ögon på Internet: http://advertising.microsoft.com/sverige/new-eyes-news
27
28. Ned i trakten:
Brukerens tunnellsyn
• Den store brorparten av trafikken vår går i midtspalten. Venstre-
og høyrespalte i langt mindre grad
Brukeren holder seg i flytspalten når han hun først har entret trakten. Ignorerer andre spalter.
• Vi er ikke alene:
VG kvittet seg med venstrespalten sin i siste redesign og økte størrelsen på høyrespalten
Dagbladet har fjernet venstrespalten sin, og har flyt i alt unntatt høyrespalten. Brukerne scanner en
større del av siden enn hos aviser med flere spalter.
• Bekreftes av eyetrackingstudier - både av våre aviser og andres:
rb.no vg.no dagbladet.no
28
29. Hvordan unngå at flyten stopper
• Nok variasjon, nok relevant stoff, gjennom hele trakten.
Likegyldig stoff = brukerne forlater oss
• Faste stoppunkter/elementer i flyten som får brukeren til å ta ny
sats
• Unngå visuelle vollgraver
Store felter som blokkerer flyten øker sjansen for at vi ikke får vist frem hele varelageret.
Brede elementer (x-akse) må ikke være så høye at de struper flyten
Høye (y-akse) elementer kan ikke dekke hele flytsonen – men må ha flytsone for å slippe øyet
forbi
• God miks av ulike stofftyper fører til økt synlighet for alle
elementene:
«Studien visar också att hur annonser och artiklar placeras i förhållande till varandra påverkar hur
besökaren uppmärksammar materialet. Chansen att en annons uppmärksammas ökar med
150-200 procent om mer än 30 procent av den omges av redaktionellt material.»
«Det omvända visas också av studien, chansen att en artikel ska uppmärksammas av ögat ökar
med nästan 50 procent om artikeln [ligger i nærheten av en] annonse.»
«– Resultaten visar att artiklar utsätts av konkurrens av andra artiklar men inte av annonser.
Omgivningens påverkan är större än vad vi trodde, säger Daniel Lundqvist.»
29
31. Innføre en ny flyt med ny miks
• Større flyt, horisontale brudd, bevisst miks:
Innføre horisontale brudd til erstatning for venstrespalte - innhold som er en del av trakten og som
er synlig selv etter at brukeren har entret den.
Bruke en omvinklet høyrespalte langt mer bevisst: til å profilere helt andre typer tjenester enn de
som vises i flytspalten
Bruke trakten bevisst til å mikse og eksponere ulike typer innhold for brukeren
Legge i så stor grad som mulig fast innhold på faste plasser i flyten.
Oppmuntre til etablering av vaner: faste plasseringer avføder faste vaner
Tørre å legge attraktivt innhold mot slutten av siden - for å trekke brukeren gjennom hele trakten
Nytteinnhold:
– TV-tablåer
– Omfattende rubrikkdekk
– Utvidet værtjeneste
Fordi:
• “Studien visar att surfarna mycket sällan scrollar ner speciellt långt på sidor. Artiklar som
ligger 2.000 pixlar från toppen missas av hälften av alla surfare. Ner till 5.000 pixlar är det
enbart 20 procent som scrollar.”
• Vi ser identisk mønster i våre eyetrack-studier
31
32. Agenda
Det som begrenser oss
Rutenett/grids
Flyt
Hvordan vi gjør det
Hvordan leserne leser oss
Hva vi har i vente
32
34. Metafor: varelager og butikkdesign
• God butikkdesign leder kunden gjennom så store deler av
butikken som mulig - uten å verken irritere eller avspore
• God butikkdesign viser frem så mye av varene som overhodet
mulig uten at det kommer i konflikt med brukerens konkrete
oppgave: å handle varer
• I vår kontekst er varelageret:
• Nyheter
• Annonser
• Rubrikk
• osv...
34
35. Vi må eksponere brukerne for varelageret vårt
• God interaksjonsdesign eksponerer brukeren for så mye av
varelageret som mulig, samtidig som det gjør varelageret enkelt
tilgjengelig.
• Tar utgangspunkt i reelle brukerbehov – og løser dem
• Fellestrekk for samtlige av nettsuksessene: Amazon.com,
Ebay.com - og Finn.no
• På redaksjonell side: VG.no
35
36. Bygg varelageret ut fra leserens bruk av
nettavisene
• Hvordan bruker leserne bruker nettavisene? Hvordan påvirker det
mulighetene for å eksponere hele eller de viktigste delene av
varelageret?
• Nøkkelen ligger i å lede leserne gjennom nettstedet, med
løsninger tilpasset leservanene på nett
36
37. Agenda
Det som begrenser oss
Rutenett/grids
Flyt
Hvordan vi gjør det
Hvordan leserne leser oss
Hva vi har i vente
37
38. Hvordan leses nettaviser:
To typer sider – som løser ulike behov
• Navigasjonssider:
Sider som er skritt på vei til målet
Inngangsport til annen informasjon
Her skanner vi hvileløst etter det vi er på jakt etter
Forsider og seksjonsforsider
• Kjernesider
Selve målet
Stor vilje til å lese - til og med større enn på papir.
Sakssider, rubrikksider, osv
Modell: Kjernemodellen, NetLife Research – http://j.mp/bis7El
38
41. Kjernesidene
Sakssider, rubrikksider, katalogsider
• Målet (eller delmålet) for brukeren
• Når brukerbehovet er dekket skal sakssidene alltid tilby prioriterte
og relevante veier videre som balanserer brukermål og
forretningsmål
Veier inn
Kjerne Veier videre
Artikkelside
Rubrikkside
Produktside
(Fra kjernemodellen - NetLife Research)
Modell: Kjernemodellen, NetLife Research – http://j.mp/bis7El
41
42. Kjernesidene:
Resultatet av scanning på navigasjonssidene
(bl.a.)
Veier videre
Viktigste Calls to action:
Relatert informasjon:
Veier inn
Forside innhold og • saker
• bildeserier
Internsøk
Søkemotorer funksjonalitet • videoer
• lenker
RSS
• Relatert kommersiell informasjon
Nyhetsbrev
Tips/del
Eksterne lenker/partnere
Kommenter
...etc
Kjøp
Støtteinformasjon, navigasjon og veier
videre ...etc
Krever sin
egen miks…
42
44. Navigasjonssidene:
Forsider og seksjonsforsider
• Inngangsporter til annet stoff: her presenterer vi det vi har å by på
• Brukeren skanner forsidene for interessante elementer
• Parallel:
Butikkdesign
Kunden ledes gjennom butikken slik at han eksponeres for hele varelageret i så stor grad som
mulig
Varelageret vårt:
Nyheter
Bildeserier og andre typer redaksjonelt innhold
Brukerskapt (men redaksjonelt røktet) innhold
Kalender
Annonser
Andre kommersielle elementer
Etc
• God forsidedesign eksponerer brukeren for så mye av
varelageret som mulig, samtidig som det gjør varelageret enkelt
tilgjengelig.
44
45. Oppsummert
Begrensninger
1. Skjermbredde begrenser
2. Annonseformater begrenser
3. Arealet du designer innenfor defineres av rutenett - grids
4. Første skjermfold kan være en begrensning – men ikke
nødvendigvis
Frihet innenfor begrensningene
1. Mest mulig flyt: Størst mulig område av forsiden dedikeres flyt
2. Færrest mulige hindringer: Flyten gjennom siden må ikke
avskjæres med visuelle vollgraver
3. Faste holdepunkter: Flyten skal ha faste stoppunkter – såsom
tjenester eller magasinstoff fast plassert i flyten
4. Payoff i enden av tunnelen: Flyten skal ende i relevant,
verdifullt nyttemateriale
5. Forsterkende stoffmiks: Redaksjonelt stoff, annonser og annet
materiell skal mikses i flyten slik at de forsterker hverandre
45
49. Med iPad kommer erkjennelsen at ikke all lesing
er lik – selv på nettet
Nettavis: Papiravis:
Anarkisk Sekvensiell,
flyktig, lukket,
delbar/lenkbar, dedikert tidsbruk,
multiple innganger, definerte innganger
multiple utganger definerte utganger
49
51. Lesemønstre i nettavis (det vi tror i dag)
Flyktig lesing – liten redaksjonell kontroll over inngang/utgang
Artikkel: http://madebymany.co.uk/content-design-with-cojones-003109
51
52. Lesemønstre i nettavis (det vi tror i dag)
Men hvor mange leser egentlig på den måten?
Naviga- Naviga- Naviga- Naviga-
Kjerne- Kjerne- Kjerne-
sjons- sjons- sjons- sjons-
side side side
side side side side
Naviga- Naviga-
Kjerne- Kjerne- Kjerne-
sjons- sjons-
side side side
side side
52
53. Lesemønstre i nettavis (satt på spissen)
To indre og vekk me’n
Forside Artikkel Facebook
53
54. Problemet:
Tid brukt daglig på site: Data fra Alexa.com – tolk som sterk indikasjon, men merk potensiell feilmargin
54
57. Men kanskje ikke helt ute av skogen ennå?
“
Sit back, turn the pages and read. Just as we thought we were entering a
web of data, of synchronised, personalised content shooting freely around
through APIs, along comes the self-contained application; and just as
we thought we were moving from mass media to social media,
making and treading our own path, along comes Interview as a linear,
editorially driven page-by-page experience on my iPad (with a
couple of token sharing features chucked in).
I see in these publishers’ videos a position of denial. They believe you
can pour a magazine (and its business model) straight and unadulterated
into a new medium that works in an entirely different way. The
threats and opportunities magazine publishing faces are more profound
than this approach addresses and the response must be equally profound,
more innovative.
The iPad: One step forward and two steps back? http://madebymany.co.uk/the-ipad-one-step-forward-
two-steps-back-003238
57
58. Desire lines
…trails worn into a landscape that demonstrate the paths people want to
take, not those that were laid down by the designer.
Desire lines – the metaphor that keeps on giving: http://www.adaptivepath.com/blog/2009/10/27/desire-
lines-the-metaphor-that-keeps-on-giving/
58
59. iPad utfordrer tradisjonell tenkning på
nettnavigasjon – men er svaret et annet?
Tese: Nettavis Antitese: iPad
Anarkisk Sekvensiell,
flyktig, åpen - lenkbar/delbar?
delbar/lenkbar, dedikert tidsbruk?
multiple innganger, definerte innganger/utganger
multiple utganger
Syntese
?
59