Design på norske nettaviser - nå og fremover

Pål Nedregotten
Leder for produktutvikling
A-pressen Digitale Medier

@nedregotten

1

Nettavisdesign

Det som begrenser oss

Rutenett/grids

Flyt

Hvordan vi gjør det

Hvordan leserne leser oss

Hva vi har i vente: touchenheter og mobil utvikling

2

Web Page Title

http://domain.com Google

Every design solution begins by deﬁning
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

3

Web Page Title


Begrensning #1: Skjermoppløsning

1280

1024 Minste felles multiplum

Andre

1600
800 1440

1920
1366
1680

Andel skjermoppløsning fra TNS Scores,
A-pressens nettsteder
4

Begrensning #2: krom
http://domain.com
Web Page Title

Google
Scrollbar:
~20 pixler bred

1024 pixler - 20 pixler = 1004
pixler

5

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

6

Begrensning #3: «Standard» annonsemoduler

Netboard:
468 pixler bred + marg =
500 px

7

Web Page Title


500 px 504 pixler

8


Skyskraper:
180 pixler bred
+ marg =
200 px

9

Web Page Title


Tre spalter som
utgangspunkt:
500 px
180 px
300 px

500 px 180 px 300 px

Ingen annonse-
modul!

10

Hvorfor har vi ikke noe slikt
på nett?

Modulkart fra

11

Forslag )l nye norske 
bannerstørrelser
Oppsummering av diskusjon på
h;p://labs.ﬁnn.no/forslag‐)l‐nye‐norske‐bannerstr 
og inns)lling )l INMA/MBL

Bakgrunn
• Samlet bransjeønske om
–Et se; standardformater )lpasset dagens reelle 
skjermstørrelser
• Viewport 1000px og 1250px
–Bedre utny;else av )lgjengelig skjermareal
–Forenklet annonseproduksjon for ulike medier
–Forenklet planlegging og plassering av kampanjer

Prinsipper
• Enkle regler
• Mulig å bygge andre formater på
• Forholdsbaserte (skalerbare) størrelser
–Grunnbredde basert på x80 pixel
• 980px, 580px, 180px
–Høyder se;es i forhold )l bredde
–Mulig å )lpasse de ﬂeste grids

Forslag )l nye standardformater
• Toppbanner 100% Toppbanner 100%
(980x150px)

– 980x150px (7:1)
• Skyskraper 20%

Skyskraper 20%
– 180x500px (1:3) Netboard 60%

(180x500px)
(580x400px)

• Netboard 60%
– 580x400px (3:2)

Kombinasjoner av standardformater
• Hestesko 140% Toppbanner 100%
(980x150px)

Skyskraper 20%

Skyskraper 20%
– 2 * skyskraper

(180x500px)

(180x500px)
– 2 * lub 20px
– 1 * toppbanner

• Omvendt L 120% Toppbanner 100%
(980x150px)
– 1 * toppbanner

Skyskraper 20%
(180x500px)
– 1 * lub 20px
– 1 * skyskraper

Agenda


Rutenett/grids

Flyt



Hva vi har i vente

20

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

21

Grids i nettdesign

• Viktigste
strukturerende verktøy
• Styrer øyet, etablerer
flyt
• Ekstremt viktig i
informasjonstunge
nettsteder

22

Obelix (forside stor) - super ex
- forsidemal for de store avisene
- super ex i toppen

980px

A-presseavisenes 710px
20px
250px

grid (enn så lenge) 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
23
Fastboks à la bruddfastboks

A-presseavisenes
grid 510
710
200

Et stort flytareal på
710px
(500 + 180 + padding 30
px)
Kan deles inn i
• 2 halvbredde (1/2+1/2) 236 236 236
• 3 tredelsbredder (1/3+1/3+1/3)
• 1/3 + 2/3
• 3/4 + 1/4
• etc
• Netboard går som 500-breddesak
• (1/3 sak + 2/3 netboard)

24

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
25
• Krever >1240-skjerm

980

DB.no (inntil nylig)
Et stort flytareal på 765
px 765 180
Kan deles inn i
• 2 halvbredde (1/2+1/2)
• 3 tredelsbredder (1/3+1/3+1/3)
• 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

26

Aftenposten.no
Et smalt flytareal på 470 1000

px
• Defineres av skyskraper
Deles opp, men følger ikke streng grid-
inndeling
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%

27

Begrensning #4: Første skjermfold?

28
http://iampaddy.com/lifebelow600/


29


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

30

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?

31

Agenda


Rutenett/grids

Flyt



Hva vi har i vente

32

Ned i
trakten

33
© 2009 Ignacio Sanz

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
34

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

35

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.»

36

Eksponering av annet innhold i flyten

37

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

38

Agenda


Rutenett/grids

Flyt



Hva vi har i vente

39

SÅ
HVORDAN
GJØR
VI DET?

40 © 2009 Sea Turtle

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...

41

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

42

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

43

Agenda


Rutenett/grids

Flyt



Hva vi har i vente

44

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
45

Navigasjonssider:
Orientering, scanning, meny

46

Kjernesider:
Resultatet av navigasjonen

47

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
48

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…

49

Forsidene/navigasjonssidene:
Eksponering for varelageret

50

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.
51

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
52

Agenda


Rutenett/grids

Flyt



Hva vi har i vente

54

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

56

Lesemønstre i papiravis

Lineær lesing, full redaksjonell kontroll med flyt

57

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
58

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

59

Lesemønstre i nettavis (satt på spissen)
To indre og vekk me’n

Forside Artikkel Facebook

60

Problemet:

Tid brukt daglig på site: Data fra Alexa.com – tolk som sterk indikasjon, men merk potensiell feilmargin
61

iPad utfordrer tradisjonell tenkning på
nettnavigasjon – og peker mot en løsning?

Tese: Nettavis Antitese: Papiravis
flyktig, lukket,
delbar/lenkbar, dedikert tidsbruk,
multiple innganger, definerte innganger
multiple utganger definerte utganger

Syntese: iPad
Sekvensiell,
åpen - lenkbar/delbar?
dedikert tidsbruk?
definerte innganger/utganger

62

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
63

“Wired on iPad takes up
+20% extra editorial
resources”

http://jon-lund.com/main/wired-on-ipad-takes-up-20-extra-
editorial-resources/

65

“Wired on iPad takes up
+20% extra editorial
resources”

http://jon-lund.com/main/wired-on-ipad-takes-up-20-extra-
editorial-resources/

67

WIRED on iPad: Just like a Paper Tiger…
The WIRED app launch success doesn’t come as a surprise. It’s the result of brand
blindness by the reader (“It’s WIRED, it looks like WIRED, so it must be WIRED
good”) and wishful thinking by the journalist audience […].

[T]he future of journalism is definitely not a stack of banners spiced with videos,
exported from a paper layout program. You need to try harder.

http://www.informationarchitects.jp/en/wired-on-ipad-just-like-a-paper-tiger/

68

«Let’s make this clear once and
for all: at the current surface and
resolution of the iPad, multi
column layouts for long
screen texts are sentimental
nonsense. And the more
columns you use, the worse it
gets.»

69
http://www.informationarchitects.jp/en/wired-on-ipad-just-like-a-paper-tiger/

Wireds iPad-salg

100000

75000

50000

25000

0
Juni Juli August

100000 31000 28000
http://goo.gl/5HLr

70

I Norge?
Fellesprosjekt i MBL-regi
Enkeltprosjekter i avishusene

77

Men altså: vi skriver 19. oktober

79

Appene
må
utvikles
på nytt

…for
Android
og andre?

82
(cc) striatic @ Flickr

Dette er de tre trollene som avisbransjen står overfor: Det
blir ikke mange nok leseplater, samtidig blir det for
mange utgaver av dem, og leserne kommer ikke til å bruke
platene til å lese de ryddige og varierte pakkene som
redaksjonene har hundre års erfaring i å lage. Avisene kan
ikke satse på at Steve Jobs skal lede dem ut av fortapelsen.
De må frelse seg selv, de som kan.

Det er ingen frelse i Ipad
Sven Erik Omdahl

http://www.aftenbladet.no/debatt/medieblikk/1275974/Det_er_ingen_frelse_i_Ipad.html

83

“Everything we’ve learned in the past decade about preferring open
standards to proprietary platforms and user-focused interfaces to
masturbatory ones is forgotten as designers and publishers once again
scramble to create novelty interfaces no one but them cares about.”

84

Risiko

(cc) rosipaw
http://flic.kr/p/85i5yW

Løser forskjellige behov

Touch vs pek/klikk
Skjermstørrelse: fokus
Direkte aksess til OS-elementer: sømløs opplevelse
Direkte aksess til hardware
Distribusjonsplattform/butikk

Touch vs pek/klikk

Tappbart areal


Lesbarhet


Fra presentasjonen: Rethinking the Mobile Web by Yiibu

Men skal du virkelig presentere alt
på mobil?


(1024 pixler bred,
10597 pixler høy)

Fokus: Velger bort det minst
viktige for mobil brukerkontekst

Direkte aksess til OS-elementer: sømløs opplevelse

GUI-elementer. Responstid i GUI.


GPS


INVENTIO-prosjektet, Institutt for Medier og Kommunikasjon, UiO
http://bit.ly/bb1PLY

Augmented reality

Distribusjonsplattform/butikk

Lavterskel tilgang, lavterskel betaling!

iPad utfordrer tradisjonell tenkning på
nettnavigasjon – men er svaret et annet?

Tese: Nettavis Antitese: iPad
flyktig, åpen - lenkbar/delbar?
delbar/lenkbar, dedikert tidsbruk?
multiple innganger, definerte innganger/utganger
multiple utganger

Syntese
?

98

Design på norske nettaviser - nå og fremover

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Design på norske nettaviser - nå og fremover

Notas del editor