Muligheter og begrensninger i nettavisdesign

Moderne nettavisdesign – begrensninger og muligheter Pål Nedregotten Leder produktutvikling, A-pressen Digitale Medier 1

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

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

Nettavisdesign Det som begrenser oss Rutenett/grids Flyt Hvordan vi gjør det Hvordan leserne leser oss Hva vi har i vente 4

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 5

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

Begrensning #2: krom http://domain.com Web Page Title Google Scrollbar: ~20 pixler bred 1024 pixler - 20 pixler = 1004 pixler 7

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

Begrensning #3: Standard annonsebredder Netboard: 468 pixler bred + marg = 500 px 9

Begrensning #3: Standard annonsebredder Web Page Title http://domain.com Google 500 px 504 pixler 10

Begrensning #3: Standard annonsebredder Skyskraper: 180 pixler bred + marg = 200 px 11

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

Agenda Det som begrenser oss Rutenett/grids Flyt Hvordan vi gjør det Hvordan leserne leser oss Hva vi har i vente 13

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

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

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

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

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

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

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

Begrensning #4: Første skjermfold? 21 http://iampaddy.com/lifebelow600/

Begrensning #4: Første skjermfold? http://iampaddy.com/lifebelow600/ 22

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/

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

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

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

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

Eksponering av annet innhold i flyten 30

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

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

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

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

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

Navigasjonssider: Orientering, scanning, meny 39

Kjernesider: Resultatet av navigasjonen 40

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

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

Forsidene/navigasjonssidene: Eksponering for varelageret 43

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

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

Er det alt? 46 ?

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

Lesemønstre i papiravis Lineær lesing, full redaksjonell kontroll med flyt 50

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

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

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

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

iPad utfordrer tradisjonell tenkning på nettnavigasjon – og peker mot en løsning? Tese: Nettavis Antitese: Papiravis Anarkisk Sekvensiell, 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 55

Skisse/prototyp: Sports Illustrated Tablet – http://vimeo.com/7953553 56

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

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

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

http://www.slideshare.net/nedregotten/ 61

Muligheter og begrensninger i nettavisdesign

by Pål Nedregotten on Mar 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 46

Statistics

Muligheter og begrensninger i nettavisdesign — Presentation Transcript

http://blogg.api.no	30
http://www.slideshare.net	9
http://blogg.apdm.no	7