Moderne
    nettavisdesign –
    begrensninger og muligheter

    Pål Nedregotten
    Leder produktutvikling,
    A-presse...
Litt om meg
Pål Nedregotten

Har jobbet i skjæringspunktet
mellom nett og journalistikk siden
1994

Var med på å lage noen...
A-pressen på nett

Mitt ansvar - produktutviklingen av:
• 48 lokale nettaviser
     Blant dem RB.no, BA.no, Nordlys.no, AN...
Nettavisdesign


 Det som begrenser oss

 Rutenett/grids

 Flyt

 Hvordan vi gjør det

 Hvordan leserne leser oss

 Hva vi...
Web Page Title

             http://domain.com                                                        Google




Every des...
Web Page Title

                 http://domain.com                                                Google




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

                                   ...
Tilgjengelig areal
       http://domain.com
                           Web Page Title

                                   ...
Begrensning #3: Standard annonsebredder




                                Netboard:
                                468 ...
Begrensning #3: Standard annonsebredder
                                   Web Page Title

               http://domain.co...
Begrensning #3: Standard annonsebredder




                          Skyskraper:
                          180 pixler bre...
Begrensning #3: Standard annonsebredder
                        Web Page Title

    http://domain.com                     ...
Agenda


 Det som begrenser oss

 Rutenett/grids

 Flyt

 Hvordan vi gjør det

 Hvordan leserne leser oss

 Hva vi har i v...
Grids

The grid is the
most vivid
manifestation of
the will to order in
graphic design.



Khoi Vinh/Mark Boulton, “Grids ...
Grids i nettdesign


• Viktigste
  strukturerende verktøy
• Styrer øyet, etablerer
  flyt
• Ekstremt viktig i
  informasjo...
Obelix (forside stor) - super ex
                                               - forsidemal for de store avisene
        ...
A-presseavisenes
grid                                          510
                                                    710...
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
•...
980




DB.no
Et stort flytareal på 765
px                                             765                     180
Kan del...
Aftenposten.no
Et smalt flytareal på 470                                   1000


px
•  Defineres av skyskraper
Deles opp,...
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 å
stop...
Oppsummert


Frihet innenfor begrensninger:
1. Skjermbredde begrenser
2. Annonseformater begrenser
3. Arealet du designer ...
Agenda


 Det som begrenser oss

 Rutenett/grids

 Flyt

 Hvordan vi gjør det

 Hvordan leserne leser oss

 Hva vi har i v...
Ned i
     trakten




26
       © 2009 Ignacio Sanz
Vi har (alle) gjort det feil
• Øyet flyter i hovedspalten:
  Flere spalter med ulike innholdstyper av ulik holdbarhet skap...
Ned i trakten:
Brukerens tunnellsyn
• Den store brorparten av trafikken vår går i midtspalten. Venstre-
  og høyrespalte i...
Hvordan unngå at flyten stopper

• Nok variasjon, nok relevant stoff, gjennom hele trakten.
    Likegyldig stoff = brukern...
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 erstatn...
Agenda


 Det som begrenser oss

 Rutenett/grids

 Flyt

 Hvordan vi gjør det

 Hvordan leserne leser oss

 Hva vi har i v...
SÅ
     HVORDAN
       GJØR
      VI DET?




33              © 2009 Sea Turtle
Metafor: varelager og butikkdesign


• God butikkdesign leder kunden gjennom så store deler av
  butikken som mulig - uten...
Vi må eksponere brukerne for varelageret vårt


• God interaksjonsdesign eksponerer brukeren for så mye av
  varelageret s...
Bygg varelageret ut fra leserens bruk av
nettavisene

• Hvordan bruker leserne bruker nettavisene? Hvordan påvirker det
  ...
Agenda


 Det som begrenser oss

 Rutenett/grids

 Flyt

 Hvordan vi gjør det

 Hvordan leserne leser oss

 Hva vi har i v...
Hvordan leses nettaviser:
To typer sider – som løser ulike behov

• Navigasjonssider:
    Sider som er skritt på vei til m...
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 sk...
Kjernesidene:
Resultatet av scanning på navigasjonssidene
(bl.a.)


                                                      ...
Forsidene/navigasjonssidene:
Eksponering for varelageret




     43
Navigasjonssidene:
Forsider og seksjonsforsider

• Inngangsporter til annet stoff: her presenterer vi det vi har å by på
•...
Oppsummert

Begrensninger
1. Skjermbredde begrenser
2. Annonseformater begrenser
3. Arealet du designer innenfor defineres...
Er det alt?




     46
              ?
Agenda


 Det som begrenser oss

 Rutenett/grids

 Flyt

 Hvordan vi gjør det

 Hvordan leserne leser oss

 Hva vi har i v...
48
Med iPad kommer erkjennelsen at ikke all lesing
er lik – selv på nettet




Nettavis:                              Papirav...
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




     Artik...
Lesemønstre i nettavis (det vi tror i dag)
Men hvor mange leser egentlig på den måten?



    Naviga-             Naviga- ...
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...
iPad utfordrer tradisjonell tenkning på
nettnavigasjon – og peker mot en løsning?


Tese: Nettavis                        ...
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 enter...
Desire lines




        …trails worn into a landscape that demonstrate the paths people want to
        take, not those t...
iPad utfordrer tradisjonell tenkning på
nettnavigasjon – men er svaret et annet?


Tese: Nettavis                         ...
60
     ?
http://www.slideshare.net/nedregotten/




61
Upcoming SlideShare
Loading in …5
×

Muligheter og begrensninger i nettavisdesign

1,870 views
1,816 views

Published on

Presentasjon holdt på Institutt for journalistikk, 15. mars 2010

Published in: Design, Technology, Business
2 Comments
2 Likes
Statistics
Notes
  • Jeg leste den posten med stor interesse da den ble publisert, og er litt enig. Men jeg er ikke sikker på den representerer den hele og fulle sannhet. En del av virkeligheten, javisst - sågar en viktig del av den.

    Men det er vel omtrent her den kolliderer head-on med løftene i iPadens brukeropplevelse. Som du vil se tar jeg opp akkurat det problemet helt til slutt.

    Jeg kunne sikkert sagt noe om Googles Living Story-format også, men poenget er at vi nå trekkes i to retninger: 1 mot/tilbake til det lineære. 2 mot andre typer saksenheter - som Living stories. Det var poenget jeg forsøkte få frem mot slutten.

    At begrensninger er flyktige kan vi enes on, men noen av dem er flyktig i lengre tidsperspektiv.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Begrensninger er flyktige - for bare et par år siden var video utenkelig, i 2010 har alle nettsider video og vi bare forventer at det skal funke. Er Nettavisene blant de som sitter fast pga side-metaforen? Den digitale verden har ingen sider, se f.eks: http://www.adaptivepath.com/blog/2010/02/25/adventures-in-logomachia-or-page-rage-redux/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,870
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
22
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide





























































  • Muligheter og begrensninger i nettavisdesign

    1. 1. Moderne nettavisdesign – begrensninger og muligheter Pål Nedregotten Leder produktutvikling, A-pressen Digitale Medier 1
    2. 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. 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. 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. 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. 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. 7. Begrensning #2: krom http://domain.com Web Page Title Google Scrollbar: ~20 pixler bred 1024 pixler - 20 pixler = 1004 pixler 7
    8. 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
    9. 9. Begrensning #3: Standard annonsebredder Netboard: 468 pixler bred + marg = 500 px 9
    10. 10. Begrensning #3: Standard annonsebredder Web Page Title http://domain.com Google 500 px 504 pixler 10
    11. 11. Begrensning #3: Standard annonsebredder Skyskraper: 180 pixler bred + marg = 200 px 11
    12. 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. 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. 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. 15. Grids i nettdesign • Viktigste strukturerende verktøy • Styrer øyet, etablerer flyt • Ekstremt viktig i informasjonstunge nettsteder 15
    16. 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. 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. 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. 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. 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
    21. 21. Begrensning #4: Første skjermfold? 21 http://iampaddy.com/lifebelow600/
    22. 22. Begrensning #4: Første skjermfold? http://iampaddy.com/lifebelow600/ 22
    23. 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. 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. 25. Agenda Det som begrenser oss Rutenett/grids Flyt Hvordan vi gjør det Hvordan leserne leser oss Hva vi har i vente 25
    26. 26. Ned i trakten 26 © 2009 Ignacio Sanz
    27. 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. 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. 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
    30. 30. Eksponering av annet innhold i flyten 30
    31. 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. 32. Agenda Det som begrenser oss Rutenett/grids Flyt Hvordan vi gjør det Hvordan leserne leser oss Hva vi har i vente 32
    33. 33. SÅ HVORDAN GJØR VI DET? 33 © 2009 Sea Turtle
    34. 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. 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. 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. 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. 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
    39. 39. Navigasjonssider: Orientering, scanning, meny 39
    40. 40. Kjernesider: Resultatet av navigasjonen 40
    41. 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. 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
    43. 43. Forsidene/navigasjonssidene: Eksponering for varelageret 43
    44. 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. 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
    46. 46. Er det alt? 46 ?
    47. 47. Agenda Det som begrenser oss Rutenett/grids Flyt Hvordan vi gjør det Hvordan leserne leser oss Hva vi har i vente 47
    48. 48. 48
    49. 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
    50. 50. Lesemønstre i papiravis Lineær lesing, full redaksjonell kontroll med flyt 50
    51. 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. 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. 53. Lesemønstre i nettavis (satt på spissen) To indre og vekk me’n Forside Artikkel Facebook 53
    54. 54. Problemet: Tid brukt daglig på site: Data fra Alexa.com – tolk som sterk indikasjon, men merk potensiell feilmargin 54
    55. 55. 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
    56. 56. Skisse/prototyp: Sports Illustrated Tablet – http://vimeo.com/7953553 56
    57. 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. 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. 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
    60. 60. 60 ?
    61. 61. http://www.slideshare.net/nedregotten/ 61

    ×