Uppfriskande ny webbdesign

Redesign De första bilarna såg ut som hästvagnar med en påkopplad motor. De första tv-programmen var egentligen filmade radioprogram. Och det är helt naturligt att när vi försöker skapa något nytt så tar vi avstamp i det redan kända.

Så har också nyhetsförmedlingen på internet växt fram ur hur en tidning redigerats. Det faller sig helt naturligt i ett land med högt tidningsläsande, att de första nyhetssajterna såg ut som en lång löpsedel. Däremot är det få sajter i Sverige som lyckats bryta sig loss från denna ursprungliga form. På den mest framgångsrika av dem, Aftonbladet.se, är det tydligt att läsarna fortfarande föredrar hästvagnen framför ett mer specialdesignat motorfordon.

Därför är det uppfriskande att se två exempel på nyhetssajter som bryter ny mark. Först ut var http://beta.usatoday.com. I går lanserades Quartzhttp://qz.com – en helt nystartad ekonomisajt.

 

USA Today, som föddes 1982 är tillsammans med Wall Street Journal den mest spridda tidningen i USA. Som sådan har den också kritiserats för att vara för sval och allmängiltig. Det pågående redesignarbetet gäller både tidningen och de digitala kanalerna. Jag har ännu inte sett den tryckta tidningen. Den omgjorda digitala designen har släppts i en betaversion och den skiljer sig på flera punkter från tidigare sätt att skapa en nyhetssajt.

Det mest slående är det tydligt visuella uttrycket med stora bilder och ett särskilt blädderläge med fullskärmsstora bilder. Artiklarna ”poppar upp” ovanpå sidan och de utnyttjar därmed skärmytan optimalt. Nästa artikel kommer fram genom att man bläddrar åt höger, och här förstår jag inte varför man inte möjliggjort swipe-funktion på ex en Ipad. Det är snyggt och aptitligt men den riktiga nyhetskänslan försvinner lite bland alla bilderna.

Att anpassningen till läsplattorna har varit en ledstjärna i designarbetet syns också tydligt på nya QZ.com. Det är en helt nystartad sajt och chefredaktören Kevin j Delaney beskriver i sin välkomstartikel sajten som ”a new kind of business news offering that is global, digitally native, and designed for the mobile and tablet devices that increasingly dominate our lives. This is version 1.0 of our efforts.”

QZ.com har tagit avstamp i en läsupplevelse tydligt inspirerad av Facebook och Twitter där innehållet förmedlas i en lång ström av texter. Sålunda bläddrar man aldrig till nästa artikel på qz.om utan det dyker hela tiden upp nya artiklar under de gamla.

Annonslösningen är intressant, då det dyker upp annonser och sponsrade meddelanden mitt i nyhetsflödet. I och med att man hela tiden lockas att läsa nästa artikel tror jag annonsörerna, trots avsaknad av traditionell sidvisningsmodell, får tillräckliga exponeringar av sina annonser.

Där USA Today fortfarande är fast i en tidningsstruktur med avdelningar som Nyheter, Sport, Livsstil, Ekonomi etc är Quartz friare med mer fantasifulla namn som Energy shocks, Mobile web, China slowdown och Euro crunch mfl.

Det här är ett spännande koncept, och det är läsvänligt och lockande. Men att ta fram nyheter och presentera dem på ett aptitligt sätt är bara ena halvan av businessen. Där medieföretagen behöver lägga ännu mer resurser är att ta fram nya bärande affärsmodeller som kan finansiera den fina bilen. I det avseendet är det för tidigt att bedöma dessa båda friska nysatsningarna.

Det är självklart lättare för en helt ny spelare att definiera sin roll. Men det är inspirerande för oss som kört på informationsmotorvägen ett tag, med nya sätt att designa användarupplevelsen på. Men det blir allt fler som har förmågan att köra om oss.

 

 

Gediget hantverk på nya Aftonbladet.se

Storebror Aftonbladet.se, som nyss fyllde 18, har äntligen släppt sin omgjorda sajt. Av de rapporter jag tagit del av ser det ut att ha varit en mycket lyckosam lansering. Stort grattis till alla som har slitit hårt med detta. Mest imponerande är uthålligheten och konsekvensen i att lyssna på läsarna och att genom hela processen bjuda in dem. Så förstod jag också att under lanseringsdagen hade flera hundra tusen varit inne i maratonchatten om nya Aftonbladet. Kraften i läsarkontakten har byggt Aftonbladet och veckans lansering visar med största tydlighet att man fortsätter bygga vidare på den.

Några ytterligare reflektioner:

Blålänkarna borta: Ända sedan starten har ingressernas blålänkar varit ett tydligt riktmärke för vägen in till artiklarna. Så tydligt att vi i tidigare redesignarbete ansett oss tvungna att följa den standard som marknadsledaren satt upp. Att Aftonbladet nu tar bort blålänkarna betyder därför inte bara att ett färgelement tagits bort utan att den nya renare looken är definitionen av hur en puff ska se ut. I webbtidningens barndom fick vi ofta kommentarer som ”Varför är artikeln så kort?, finns det inte mer att läsa?”, från läsare som inte ens upptäckt att man kunde klicka vidare in till artikeln. Med nya designen myndiggör Aftonbladet alla Sveriges nyhetsläsare på webben och markerar att det nu är självklart hur man hittar in till artikeln.

Löpet borta under artiklarna: På denna punkt är jag mer tveksam om läsarna är mogna. Vid en informationsträff om nya Aftonbladet.se ställde en i publiken frågan: ”Menar ni att man måste klicka på tillbaka-knappen för att komma till ettan?” läsarbeteenden består av starka vanor och om många läsare hör av sig kommer vi få se en snabb återgång till en återupprepning av löpet under artiklarna. Vi gjorde en redesign av artiklarna i våras där vi presenterade ett urval, ganska likt det Aftonbladet nu gör. Men på nyhetsartiklarna har vi återgått till löpet. Det ger bättre effekt.

Sidvisningar och annonsformat: Här hade jag hoppats att innovationsförmågan hade kunnat ge branschen ännu större förhoppningar om framtida möjligheter. Aftonbladet är ju marknadsledande, ja kanske till och med världsledande på digitala intäkter. De nya annonslösningarna är inte revolutionerande, men kanske tillräckligt smarta för att ge önskad effekt. Här ska det bli särskilt spännande att följa resultatet. Ett av målen med nya sajten är uttalat att generera fler sidvisningar och på så sätt höja intäkterna. Det ska bli spännande att följa de kommande veckornas utveckling i KIA-index.

Vänsterspalten: Den gula spalten längst till vänster har tidigare bara varit en lång navigeringslist. Sådana tenderar att snabbt bli en död yta för ögat. Att ge Senaste nytt en framträdande placering här är ett bra grepp. De flesta av oss läser från vänster till höger och då är det den mest naturliga placeringen att lägga nyhetsrubriker här.

Webb-tv längst upp till höger: En annan tydlig markering i nya layouten är att webb-tv verkligen tar plats i toppen. Med en stor puff längst upp till höger bekräftar man att detta är en prioriterad del av nyhetsverksamheten. Aftonbladet har helt valt bort olika typer av puffar som bläddrar bild automatiskt, som återfinns på många internationella sajter och här i Sverige används på Expressen.se och DN.se. Valet av en statisk puff tolkar jag som att man tror på att en utvald grej ger fler klick än att läsaren ska sitta och vänta eller själv bläddra fram till något klickbart.

Sammanfattningsvis ger vi Aftonbladet en tärningsfemma för den nya sajten. Det är ett gediget hantverk, mycket väl genomfört av marknadsledaren som har en tuffare balansgång att hantera mellan en stor läsekrets och önskan att förnya. Med några fler innovativa grepp hade det blivit en klar sexa.

I juryn: Ola Henriksson, Johan Möller och Johan Silfversten.

Unik sammanställning av alkoholkonsumtionen

Utveckling Nu publicerar vi Alkoholkartan på SvD.se, en unik sammanställning över alkoholens konsekvenser i Sverige. Kommun för kommun redovisar vi försäljning, dödlighet och brottslighet kopplad till alkoholen. Du kan enkelt söka upp din kommun för att jämföra med andra kommuner. Till exempel kan man se att Vaggeryd är den kommun i landet som har lägst brottslighet. Där säljs motsvarande 3,3 liter ren alkohol per person. Att jämföra exempelvis med Nordmaling där det säljs 8,6 liter per person.

Notera att vi bara kan redovisa mängden såld alkohol. Konsumerad mängd kan vara helt annan på grund av privatimport eller annat. Till exempel slår det genom i alla gränskommuner mot Norge, där Systembolagen säljer mycket sprit och vin som förs direkt in i grannlandet.

Alkoholkartan har utvecklats av vår systemutvecklare Daniel Halldin och vår grafiker Jenny Alvén. Den bygger framför allt på data från Statens folkhälsoinstitut. Vi har laddat ner datan, lagt över i ett Google kalkylark där vi kunnat sortera och göra beräkningar. Sedan är datat exporterat till en textfil som den interaktiva grafiken läser från.

Detta är ytterligare ett steg i vår utveckling av interaktiv grafik, se till exempel Inflyttarna del 1 och del 2. Den här gången sker det inte i samarbete med läsarna som med Räntekartan.

Vill du veta mer vilka källor som ligger bakom och vad som ingår i Alkoholrelaterad dödlighet, kan du läsa källförteckningen här.

 

 

Dags för årets webbcamp

Övrigt Traditionsenligt i augusti beger sig den svenska webben till Blekinge och Sweden Social Webcamp, så också Utvecklingsbloggen och SvD.se. SSWC är en så kallad unconference eller en knytkonferens och är du inte bekant med begreppet kan du läsa mer om det här.

För min del blir årets upplaga mitt tredje webbcamp (missade år två) och jag pratar som vanligt gärna om journalistik, en mediebransch i utveckling eller SvD.se. Så har du förslag eller idéer som gäller vår journalistik eller SvD.se – tveka inte att haffa mig för ett samtal.

Vi syns bland Iphones, tältpinnar och får!

/ Johan Silfversten Bergman

 

Nyhetssvepet – ett nytt sätt att läsa artiklar på SvD.se

Utveckling De senaste veckorna har vi pratat en del om presentationen av våra artiklar. Kan vi exempelvis presentera flera artiklar i en serie eller i ett ämne på ett överskådligt och mer lättillgängligt sätt? Hur kan vi underlätta för den som snabbt vill bilda sig en uppfattning om ett skeende eller få en snabb överblick i ett ämne? Har vi element i våra artiklar vi kan ta bort för den som faktiskt bara vill läsa?

Som ett första svar på dessa frågor släpper vi idag SvD Nyhetssvepet – ett nytt sätt att läsa och navigera bland artiklar på SvD.se. Här kan du exempelvis läsa de senaste perspektiven på Eurokrisen i Nyhetssvepets format.

Konceptet är enkelt, genom att klicka på pilarna ute till höger ”skjuts” nästa artikel in och ersätter den artikel du vill lämna. Använder du en Ipad* eller någon annan device som stödjer ”swipe”-rörelsen är det bara att dra med fingrarna för att läsa nästa artikel. SvD:s Daniel Halldin står för den fina koden och det vi släpper nu är en första version, med allt vad det innebär.

Vi på SvD.se är vanligtvis ganska restriktiva med betasläpp men med Nyhetssvepet skickar vi också en liten betastämpel. Under kommande veckor kommer vi att testa Nyhetssvepet på ett litet urval artiklar på SvD Näringsliv och vi vill gärna höra vad du tycker om den. Vad funkar bra och vad funkar dåligt? Saknar du något? Tyck gärna till i formuläret här.

*Uppdatering: Vi och några läsare har upptäckt att ibland låser sig artiklarna på Ipaden, för att lossna en stund senare. Vi försöker fixa detta tills nästa version.

En av alla dessa skisser

Utveckling Rensade skrivbordet härom veckan och hittade en post-it-lapp med en av alla dessa skisser som passerar, konkretiseras och kodas här på avdelningen. Här till vänster ser ni mina första streck i det som senare kom att bli SvD Näringslivs nyhetsbox på Corren.se, NT.se och Affarsliv.com

Olle Morén är det som har byggt, kodat och förvandlat en tafflig skiss till en fin produkt. En trevlig detalj bland många med nyhetsboxen är att det bara är företag med anknytning till Östergötland som visas i börstickern. Och på tal om börsen, ni har väl inte missat vår tunga börstjänstNliv.se?

De senaste veckornas utveckling på SvD.se har förutom nyhetsboxen ovan handlat om delar av kommande större byggen, buggfixar och optimeringsärenden. De nyheter och förbättringar som berör dig som läsare mer direkt är dessa:

  • Förbättrat Senaste nytt och andra listor.
  • Förbättringar i vilken version av SvD.se som presenteras när du besöker sajten med en mobiltelefon.
  • Förbättringar i bildspel – Klicka vänster/höger i bilden för att navigera framåt/bakåt.
  • Nya möjligheter för redaktionen att relatera in exempelvis livesändningar av webb-tv vid stora nyhetshändelser.
  • Nya företag från USA i aktielistorna.
  • Nya möjligheter för redaktionen att göra olika utsnitt för puffar på Nliv.se respektive SvD.se

Veckans utveckling på SvD.se

Utveckling I stort sett varje vecka genomförs en deploy där vi installerar ny kod för olika funktioner på SvD.se. En del av detta berör bara interna system som du som läsare aldrig ser eller rör delar av pågående större ärenden. Här redovisar vi de viktigaste av veckans genomförda förändringar.

  • Skapat möjlighet för en speciell temazon på startsidan.
  • Nya börsskärmen på Näringsliv fungerar nu fullt ut på Ipad.
  • Fortsatta förbättringar av spärren på tre kommentarer per användare i Disqus.
  • Skapat ny sektion och tillhörande blogg för Kan du ditt Stockholm?
  • Publicerat SvD:s Androidappar i marknadsplatsen Appland.
  • Skapat möjlighet för prioriterade sökträffar även på Näringsliv.

Varför har vi inte gjort det här förut?

Utveckling Vad är och kännetecknar framgångsrik utveckling? Snabb ärendehantering? Nöjd beställare eller snygg kod? Själv har jag kommit fram till att framgångsrikt utvecklingsarbete nästan alltid kan sammanfattas i frågan Varför har vi inte gjort det här förut?

Känslan av en ny produkt som känns så självklar att den direkt lägger en mörk skugga över sin föregångare. Hur man än försöker kan man inte annat än få fram teoretiska och konstruerade argument för att motivera sina tidigare val. Det är känslan av att byta från en gammal Nokia till Iphone eller att prova Spotify för första gången.

Denna känsla får jag när jag tittar på vårt arbete med ett eget presentationslager ovanpå SvD:s chatt- och direktrapporteringsverktyg. Denna vecka deployade vi ut de sista delarna i bygget och inom kort får alla chattar och direktrapporter på SvD.se en ny och fräsch kostym. Vill du veta mer om arbetet har vi har tidigare skrivit om det här.

Utöver nyheter i chatt- och direktrapporteringspresentationen innehöll veckans deploy följande nyheter i urval.

  • Förbättringar av förhandsgranskningen för redaktörer
  • Exkludera valda artiklar från mobilflödet
  • Justeringar av cachetider
  • Färgjusteringar i sidfoten
  • Förbättrad listdesign

 

Veckans utveckling på SvD.se

Utveckling Flitens lampa fortsätter lysa starkt över utvecklingsavdelningen på SvD.se. Veckans deploy innehöll flera småfixar, några nya funktioner samt de första delarna av ett par större projekt som vi kommer att ha anledning att återkomma till.

Här följer en kort sammanfattning av nyheter och förändringar på SvD.se för senaste veckan. Veckans deploy innehöll 22 förändringar varav några av de viktigaste var:

  • Möjlighet att länka in tabeller från Scoreradar.
  • Ny integration av Servicefinder-widget.
  • Förbättrad länkhantering för redaktörerna på SvD.se.
  • Trimmad och förbättrad förhandsgranskning för puffar som ska visas på Aftonbladet.se.
  • Artiklar som inte är mobile friendly visas inte längre ut som relaterade artiklar på mobilsajten.

Erfarenheter från ett hackathon

Övrigt I helgen deltog ett litet team från Svenska Dagbladet i Sveriges första hackathon i datajournalistik. Uppdraget var att på 24 timmar producera databasjournalistik med hjälp av Stockholm stads öppna API:er. Hackathonet anordnades av föreningen Fajk tillsammans med Södertörns högskola och totalt deltog 33 journalister från bland annat SR, SVT, Lärarnas Tidning, TV4, Helsingin Sanomat och Aftonbladet.

Vi i teamet från SvD bestämde oss ganska tidigt för att vi ville bygga någonting som kombinerade officiell öppen data med användargenererad data. Valet föll ganska snabbt på uppgifterna från SvD:s framgångsrika räntekarta, kunde vi genom att jämföra med data från Stockholms stad se några mönster i vilka de riktiga vinnarna i ränterejset var? Hur såg utbildningsnivån, inkomsterna, kvadratmeterpriser och valresultatet ut i stadsdelarna med bäst ränteförhandlare? Vilket är vinnarreceptet och finns det några förlorare?

I team SvD deltog Simon Larsson (från SvD utveckling), Mark Malmström (SvD Näringsliv) och Jenny Alvén och Peter Grensund (SvD grafik). Här nedan kan du se ett klipp från vår presentation.

YouTube Preview Image

Processen fram till det som kom att bli vårt slutgiltiga resultat var ganska lång och komplex. Mycket av arbetet vi gjorde syntes heller inte i produkten vi presenterade. På grund av vårt valda urval fick vi exempelvis välja bort data vi lagt mycket tid på att behandla, och det vi tänkt rita ut med automatik ritades tillsist ut för hand efter ett hästjobb av SvD:s Jenny Alvén. Tanken var från början att helt enkelt generera grafiken från live-data med hjälp av SVG-biblioteket D3, men då komplexiteten på diagrammen ökade och klockan började bli kväll föll vi tillbaka på beprövad 90-talsteknik: statiska bilder som byts ut med javascript när man för musen över vissa ytor.

Även om slutresultatet inte riktigt nådde den tekniska och innovativa verkshöjd vi hade önskat var vi alla överens om att det stora värdet i hacket låg i erfarenheterna vi kunde resa hem med. Det är helt enkelt väldigt värdefullt att kastas in i en obekant miljö med personer man vanligtvis inte samarbetar med.

Det jag själv framförallt tog med mig från helgen var:

* Våga mera. Ställd inför tävlingsmomentet föll vår grupp tillbaka i en ganska klassisk journalistisk approach på uppgiften och problemet.

* Var inte rädd för att kasta allt och börja om, vi hade haft mycket att vinna genom att göra en Ice-T och säga fuck it. Och på så sätt hitta nya vägar.

* Ett journalistiskt arbetssätt behöver inte alltid mynna ut i en klassisk journalistisk produkt. Kanske hade presentationen kunnat vara ett spel, ett pussel eller som i SVT:s fall, ett quiz?

* Att para ihop stadsdelar med postnummer är en riktigt tidsödande uppgift…

Har du förslag på datajournalistik SvD borde göra? Kommentarerna står till ditt förfogande!