nrk.no

Artiklene på nrk.no har fått ny drakt

Kategorier: Design,Journalistikk & NRK

Artikkelmal design desktop og mobil
Ny artikkelmal for nrk.no ble nylig lansert. Sjekk ut artikkelen over i sin helhet – og fortell oss gjerne hva du synes i kommentarfeltet!

Onsdag lanserte vi nytt design på artiklene på NRK.no. Vi ønsker at det skal gi en bedre leseopplevelse på mobil, brett og desktop. Nå er vi spente på hva dere synes!

Denne artikkelen er skrevet av Ida Håkonsson, Helene Guldahl og Kristin Breivik – designere for nrk.no

NRK jobber aktivt for å spisse innholdet som produseres for nett, og har «større, færre, bedre» som et mantra for å nå dette målet. Det innebærer blant annet at de vanligste artiklene strippes for fyllord og forteller mer effektivt. Å skrive en lengre artikkel skal være et mer bevisst valg, og stiller andre krav til teksten. Som et ledd i denne prosessen har vi allerede lansert en egen feature-artikkelmal som vi har skrevet om tidligere her på NRKbeta. Nå er det imidlertid vår vanlige artikkelmal som får en overhaling – for å gi dere en bedre leseopplevelse, og for at malen skal fungere bedre sammen med ny innholdsstrategi.

Artikler fra Ut, Yr, Livsstil, Verden, Ytring, Nordland og Sport
Artikkelmalen skal dekke behovet til mange ulike redaksjoner som skriver i mange ulike sjangre.

Denne artikkelmalen brukes overalt på nrk.no, og skal kunne dekke alt fra tradisjonelle kortere nyhetssaker fra innenriks, utenriks, og distrikt, til sport-, kultur-, livsstil– og vitenskapssaker. I tillegg må den kunne håndtere lengre, gravende nyhetsjournalistikk som fortsatt ikke hører hjemme i en featuremal, samt enklere listesaker fra alle våre redaksjoner. Ytringartikler bruker også malen, men for å skille meninger bedre fra nyhetssaker har vi noen ekstra designgrep på lur som vi vil lansere etter hvert. Videre skal malen dessuten fungere på Yr og Ut. Med andre ord – et svært allsidig rammeverk.

desktop før og etter redesign
Flere endringer er blitt gjort i layout sett i forhold til gammelt artikkeldesign.

Økt lesbarhet

Artiklene har blitt lettere å lese. Smalere brødtekst, økt tekststørrelse og linjeavstand gjør teksten mer innbydende og mindre overveldende. Dette er særlig viktig for blant annet brukere med lese- eller konsentrasjonsvansker. Skrifttypen i brødtekst er endret fra Georgia til Helvetica. Helvetica står godt til NRK Etica Slab, en nyutviklet font som allerede er implementert på nrk.no/sport, og snart vil bli implementert som tittelfont på resten av nrk.no.

NRK Etica Slab og Helvetica Neue som tittelfont
Vi jobber med å bytte alle tittelfonter fra Helvetica Neue til NRK Etica Slab. Dette er en font spesialutviklet for NRK av Typetogether og LeftLoft.

Tittel og ingress over bildet

Vi har flyttet bildet under tittel og ingress. Bildet står nå i kontekst av saken og er mer integrert i leseopplevelsen. Når bildet er øverst risikerer bildet å forsvinne på grunn av «banner blindness». Rokkeringen gir også gi en bedre opplevelse på mobil, hvor bildene er det siste som lastes inn. I tillegg skiller det nyhetsartikkelene mer fra feature, og gjør at artiklene står bedre til andre designendringer vi har på blokka fremover.

Tilpasning for større skjermer

For å gi en mer strømlinjet leseopplevelse med færre avbrudd på desktop, har vi skilt ut informasjonen om artikkelen og lagt den til høyre for bildet. Dette lar oss også løfte opp profilbilder av artikkelforfatter – og på sikt gjøre noen av dem mer prominente der det er vesentlig, f.eks. i artikler fra Ytring.

Hovedbildet er gjort mindre på desktop for å optimalisere balansen mellom bilde og ny, smalere brødtekst. Når vi har løftet tittel og ingress over bildet får bildet større fokus enn tidligere, til tross for redusert størrelse.

Relaterte saker

På høyre side av hovedbildet lister vi emnene artikkelen tilhører. Dette er for å gjøre det lettere for leseren å tolke tittel, ingress og bilde. I tillegg løfter vi automatisk frem siste saker fra disse emnene i høyrespalten for å gi bruker interessante veier videre.

Gammel vs. ny artikkelmal.  Illustrerer at korte artikler ofte fikk store tomrom i gammel artikkelmal.
Gammel og ny mal i sin helhet. Her ser vi at korte, konsise artikler risikerte å få en i overkant lang liste med relaterte artikler i høyrespalte i den gamle malen.

Å løfte frem relaterte saker basert på emnetilhørighet er ikke et nytt grep. Vi har imidlertid måttet tilpasse artikkelmalen til vår nye innholdsstrategi. Den vil føre til at langt flere artikler formidler innholdet gjennom færre ord. Med kortere saker må vi sikre at viderenavigasjonen (de relaterte artiklene) ikke tar helt overhånd og skaper ubalanse i layouten – med mye luft under brødteksten slik vi ser gammel mal gjorde i bildet over. Derfor har vi både redusert størrelsen på relatertsakene, fjernet ingress, samt vi eksperimenterer med å vise færre saker. Der vi før hadde maksimalt seks artikler, har vi nå maksimalt fire, avhengig av hvor mange emner saken er tilknyttet.

Vi vurderer fortløpende om vi skal innføre en alternativ løsning for de lengre artiklene som også skal kunne leve i malen. Disse har tross alt mer plass til veier videre i sin høyrespalte. En løsning vil kunne være å øke maksgrensen for antall relaterte artikler i saker der teksten overstiger et visst antall ord.

Gammel og nytt design på mobil
Mobilversjon av artiklene der vi ser endring fra gammel til ny mal.

Mobiloptimalisering

For å korte ned veien fra tittel, ingress og bilde til brødtekst har vi gjort noen grep. Bildeteksten tones ut når den går over to linjer. Ved å klikke på teksten vil man kunne lese resten av teksten. På desktop viser vi både tidspunktet for når artikkelen ble publisert første gang, og når den ble sist oppdatert. På mobil viser vi den mest relevante tiden øverst, og begge tidspunktene i bunn av teksten. Dersom en tekst er oppdatert er det tidspunktet for oppdateringen som vises øverst.

Ekspander og kollaps

Per i dag blir faktabokser plassert i bunn av artikkel på mobil og til høyre for brødtekst på desktop. På sikt så skal de kunne plasseres inn i brødteksten, slik at de kan stå i direkte sammenheng med teksten. Journalisten vil da kunne velge om faktaboksen skal være kollapset, for at den ikke skal forstyrre leseflyten mer enn nødvendig, eller åpen dersom den er viktig.

Kommentarfelt øker lastetid, og gjør veien til andre artikler lang. Derfor har vi valgt å kollapse kommentarfeltet som standard på alle artikler utenom Ytring, hvor dette er en viktig del av innholdet.

Fryder forandringen?

Vi håper og tror at vi har landet på en løsning som løfter artiklene på nrk.no og gir leserne en bedre opplevelse. Vi har imidlertid hatt mange runder internt med dette designet, testet ulike løsninger, og ser klart både fordeler og ulemper med de grepene vi har gjort. Noen av avgjørelsene er dessuten blitt tatt uten at vi har klare tall som forteller oss at dette er den riktige veien å gå (eksempelvis å flytte tittel og ingress over bildet). Dermed tenkte vi høre med dere beta-lesere; er NRKs nye artikkeldesign en forandring som fryder?

35 kommentarer

  1. Disse flygende deleknappene føles for meg som en forstyrrelse. Man bør lese hele artikkelen før man deler, derfor mener jeg det er greit å ha deleknappene under siste avsnitt i saken. De fleste er vel også vant til at de er der.

    Jeg ser at de samles i en «Del»-knapp høyt oppe i artikkelen hvis nettleservinduet er smalt, der kan den også gjerne ligge hele tiden.

    Svar på denne kommentaren

    • Litt uenig der.
      Hva om man har lest saken fra før og trykker inn på saken bare for å dele, da er det greit at deleknppen er der med en gang!

    • Kristin Breivik (svar til Pål Elnan)

      Som Rasmus er inne på – det finnes litt ulike scenarioer når det kommer til hvordan deleknapper blir brukt, og med dette grepet har vi forsøkt å dekke alle disse. Du sier jo også selv at det hadde vært fint om de var i bunnen, samtidig som de godt kunne ligge i topp under en ‘Del’-knapp. Vi har jo gått for «ja takk, begge deler – og enda litt til!», og vi har inntrykk av at våre journalister er fornøyde med at de har fått en mer prominent plassering. Om de forstyrrer leseopplevelsen har vi imidlertid bommet, for den er tross alt viktigst! Da må vi i så fall ta noen grep for å roe ned knappene på et eller annet vis.

      Takk for innspill, Pål!

    • Kristin Breivik (svar til Anders Ekkje Slettebø)

      Hei Anders! Deleknappene er generelt relativt lite brukt: 1.6% av alle brukersesjoner har bruk av deleknapper. Vi har dessverre ikke statistikk på manuell kopiering av URL, men vi kan anta at det brukes betraktelig mer. AddThis (som sporer dette for kundene sine) har skrevet en interessant bloggpost om dette. Det er imidlertid kanskje fortsatt en verdi å bli minnet på deling gjennom å se deleknappene til tross for at man ikke faktisk klikker på dem ved deling…

    • Anders Ekkje Slettebø (svar til Kristin Breivik)

      Takk Kristin. Har ikke tenkt på at deleknappene i seg selv kan minne leseren om å dele, selv om han ikke bruker knappene. Jeg synes likevel å huske at Mailchimp på et tidspunkt fjernet deleknappene, uten at det resulterte i færre delinger. Finner ikke referansen nå, så det er mulig jeg roter. Jeg hadde faktisk trodd at knappene ble brukt mindre enn 1,6 %.

  2. Det nye designet ser stort sett renere ut siden det ikke er tydelige skillelinjer mellom seksjonene, men personlig foretrekker jeg større artikkelbilde fra den gamle versjonen. Tror også jeg likte plasseringen av artikkelforfatter i den gamle versjonen bedre, men dette henger jo da også sammen med bildestørrelsen. Savner også litt større bilde på de relaterte artiklene.

    Svar på denne kommentaren

    • Helge Heyerdahl (svar til Jan Olsen)

      Foretrekker også større bilde. Men liker at tittelen er flyttet til over bildet. Den gamle versjonen er mer symmetrisk i formen, liker det bedre. Ser også bedre ut med to linjer i bildeteksten. Men når brødteksten ender hadde jeg foretrukket å trekke de relaterte sakene inn under teksten og fylle hele bredden på siden, som dere har gjort i den nye versjonen. Fin font! Ble mye jeg, jeg, jeg…men men 🙂 Kudos til dere for å dele slikt stoff som dette med oss lesere.

  3. Mye bra i den nye versjonen, men lenkene i den løpende teksten har for dårlig kontrast, blekgult er ingen god farge og gir dårlig lesbarhet! Velg en skarpere farge som gir bedre kontrast mot hvit bakgrunn.

    Svar på denne kommentaren

    • Ida Håkonsson (svar til Maja Arnestad)

      Er litt usikker på hvilke lenkefarger du sikter til her, er det Ytring-artiklene du tenker på? Lenkene der har dessverre litt dårlig kontrast. Vi skal justere fargen. Om du mener lenkene her i denne artikkelen så har ikke NRKbeta vært en del av dette redesignet – de bruker en annen artikkelmal.

    • Kristoffer Bakkejord (svar til Ole Amundsen)

      Benytter ikke lesevisning i Safari seg av samme parsing av artikler som andre lesere for økt tilgjengelighet (for.eks. skjermlesere)? Om folk foretrekker å vise eller få lest opp artikkelen annerledes enn det NRKS designere foretrekker, bør muligheten til dette være tilstede.

      Vil også tro det er god SEO å ha artikler enkelt lesbart for maskiner (roboter).

    • Kristin Breivik (svar til Sturle Svendal)

      Sturle, å finne ut hvorfor dette feiler innimellom på artikkelen er høyt prioritert hos oss nå. Vi forsøker nøste opp i det og løse det så fort vi kan!

  4. Hei, takk for fine og konstruktive kommentarer så langt. Vi har notert oss innspill rundt deleknappene og størrelsen på bildet er noe vi tar en runde på internt nå.
    Hilsen Helene, designer på NRK.no

    Svar på denne kommentaren

  5. Liker designere som har «økt lesbarhet» som første mellomoverskrift! Alt for mange designere lager nettsidedesign med «lorem ipsum«-tekst som ser flott ut, men uten å lese mange mange sider selv. Boktrykkerne i Venezia fant ut ca 1550 hvordan tekst bør være utformet for å være behaglig å lese, men siste 20 års webdesignere som har lekt typografer har ofte glemt hva en har vist om tekstutforming siste 500 år.

    Svar på denne kommentaren

    • Helene Guldahl (svar til Harald)

      Så hyggelig å høre! Med alt det fantastiske innholdet vi har, må jo vi gjøre vårt ytterste for at leseropplevelsen støtter det 🙂

    • Helene Guldahl (svar til Anders Drage)

      Hei Anders, tusen takk for hyggelig tilbakemelding 🙂
      Fonten vår NRK Etica Slab er en videreutvikling av konsernfonten Etica, og er utvilket av Typetogether. Du kan se den i bruk i artikkelmalen på nrk.no/sport

  6. Hei! De nye sidene er flotte, men jeg er enig i at bildet burde vært større. Kan ikke byline flyttes under bildet over de relaterte artiklene?

    Synes også det er litt mange «marger» om dere forstår hva jeg mener. Særlig i høyre kant av artikkelen. Er det en grunn til at dere ikke har lagt alt i kant med NRK-logoen som tidligere?

    Svar på denne kommentaren

    • Kristin Breivik (svar til Rasmus)

      Takk for tilbakemeldingen, Rasmus! Når det gjelder forsiden, gjør vi fortløpende forbedringer på den, og har samtidig et større forsideprosjekt på gang som vi har skrevet om før her på NRKbeta. Vi gleder oss til å lansere dette for leserne våre!

      Vi har fått en del klager på at artikkelbildet i topp er for lite, og tar nok en evaluering etter juleferien på om størrelsen skal justeres noe.

  7. Kommentarfeltene på ytring blir litt for smale nedover i trådene. Den bredden de har på toppnivå er helt grei, men det blir liksom litt smalt etter hvert. (Jeg kan godt avstå med å kommentere med hva som skjer om jeg skulle maksimere nettleservinduet.)

    Nå har jeg aldri satt opp disqus selv, men er det mulig å få det til å fungere mer som reddit, hvor bredden på en kommentar sjelden skrumper, men det rykkes inn etter hvert som man kommer dypere ned i tråden? Greit nok at disqus har max-innrykk på threadlevel 2 og at det går i HTML og ikke Markdown …

    Svar på denne kommentaren

  8. Veronika Burian

    I would like to add to this discussion that the custom typeface NRK Etica Slab has been developed by us at TypeTogether, in collaboration with the original designer of LFT Etica (LeftLoft), that NRK has been using as in-hosue typeface for a few years now.

    Svar på denne kommentaren

    • NRK.no design (NRK) (svar til Veronika Burian)

      Thanks, Veronika! We’ve added links to TypeTogether and LeftLoft in the caption about NRK Etica Slab in the blog post 🙂

      Kristin

  9. Eg synast den nye malen er rein og lettlest, det er eit godt tiltak av NRK å ta tak i lesbarheita.

    Men eg synast ikkje linene i den nye malen er tiltalande. Det er, etter mi meining, forstyrrande at ikke margen er rett frå venstre biletekant og ned langs artikkelen, men forskyve til høgre på grunn av deleknappane. Det ville vært penare dersom deleknappane låg horisontalt under tittel, evt. nederst i artikkelen.

    I tillegg synast eg godt bylinen kunne vært flytta tilbake under bileta, slik at bileta blei breiare att. Sia tekstspalten under bilete uansett er blitt smalare, ville det framleis vært plass til bylinen der. For øvrig synast eg den gamle bylinen var enklare å lese pga. den horisontale, blå lina. Eg liker ikkje flytande byline som ikkje er «forankra» i spalteoppsettet vidare nedover.

    Svar på denne kommentaren

  10. Jeg synes det er for stor linjeavstand. Dere skriver at den økte linjeavstanden fører til at det blir lettere å lese og mindre overveldende. For meg virker det motsatt. Jeg synes det oppleves som mer usammenhengende. Det blir mer scrolling, og dette oppleves stressende. Jeg mister konsentrasjon og helhet av å ikke kunne se større deler av teksten i sammenheng – faktisk særlig ved lesing på mobil.

    Svar på denne kommentaren

  11. Anders Matre Gåsland

    Liker svært godt de nye endringene. Godt jobbet! 🙂 Liker spesielt vektingen av innholdet og prioriteringene. Overskriften øverst gjør det veldig tydelig hvor brukeren befinner seg, og vil også alltid være på samme sted, uavhengig om artikkelen har bilde eller ikke. Det tror jeg er lurt.

    Fjerning av tynne grå linjer og gruppering av informasjon får det til å se lekkert og seriøst ut. Veldig bra! 🙂

    De tekstlige endringene ser også veldig bra ut, og gjør det lettere for folk å lese fort og få oversikt.

    Større bilder på relatert-sakene gjør at de plutselig konkurrerer med kjerneinnholdet, selve teksten i artikkelen. Som du sa Kristin, selve artikkelen er viktigst. Jeg synes den nye størrelsen på relatert-sakene passer bra, og tar ikke for mye fokus fra artikkelen.

    Om hovedbilde skal være som i ny versjon (litt mindre), eller gammel (stort) kan fort bli en diskusjon med bare subjektive meninger. Kanskje dere kunne testet ut de to forskjellige mot hverandre og valgt den som funker best? (dvs. støtter målene til en artikkel. Kan være forskjeller i lastetid på mobiler med dårlig forbindelse feks. Eller andre ting). Da tar man hvertfall en avgjørelse basert på fakta, ikke bare synsing.

    Deleknappene: Har dere noe data på hvor mye deleknappene til NRK faktisk blir brukt? Da kan det kanskje være en idé å prioritere viktigheten basert på bruken. Men det spørs jo hva målene for fremtiden er også. Bare en tanke.
    Slik knapper får ofte altfor mye fokus til tross for at de sjeldent brukes. Dermed stjeler de verdifull plass og fokus fra viktigere ting.
    Litt data om bruk av deleknapper: lukew.com/ff/entry.asp?1852

    Et solid og godt stykke håndtverk dere. Godt jobbet 🙂

    Svar på denne kommentaren

Legg igjen en kommentar til Rasmus Avbryt svar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *. Les vår personvernserklæring for informasjon om hvilke data vi lagrer om deg som kommenterer.