Det är svårt med menyer i mobilen!

Mobil-menyer behöver synas, får inte ändras och ska gärna vara kul att pilla på. Det är några resultat från tester som vi gjort med svt.se-besökare. Andra resultat är mer nedslående.

På svt.se vill vi erbjuda flera olika sätt att hitta våra program och nyheter. Sök, startsidan och länkar i artiklar hjälper våra besökare, men det är också viktigt att erbjuda en strukturerad meny.

Idag har vi två menyer på svt.se och här på bloggen. Den ”globala” menyn ligger överst på sidan och har svart bakgrund. Under Testbild-loggan finns den ”lokala” menyn, en meny som ibland har två nivåer, exempelvis för att visa upp sporterna på SVT Sport.

Hela sajten, inklusive menyerna, anpassar sig efter om man sitter på en dator/surfplatta/mobil. Sitter du på en dator kan du minska storleken på webbläsarens fönster för att se hur det fungerar på en mobil.

Mobil-menyer är spännande för oss Interaktionsdesigners. Flera olika varianter finns idag, varav några kända finns i Facebooks iPhone-app, på mobil.DN.se (i iPhone) och på m.BBC.co.uk/news. Någon tydlig vinnare bland meny-varianterna har dock inte krönts än.

Jag och min kollega Niclas testade nyligen 5 olika menyer på personer utanför SVT. En av Niclas varianter samlar alla menyer i sidfoten. En av mina samlar lokalmenyns två nivåer under ”Fler”-knappen. Prova gärna att leka med dem. Båda prototyperna funkar bäst i iPhone.

Tyvärr kom vi fram till att de meny-varianter vi testade inte fungerar speciellt bra. Vi drog dock några värdefulla lärdomar:

  • Navigations-menyer får inte vara helt dolda – dom måste vara synliga på sidorna hela tiden. Hela menyn behöver inte synas, men tillräckligt mycket för att det ska vara uppenbart ungefär vad menyn innehåller.
  • Menyer får inte ändra sig baserat på var man befinner sig – utöver att markera vart man är, exempelvis genom annan färg för den nuvarande sidan i menyn. Menyer kan dock byta innehåll helt – Allsången innehåller andra sidor än Portkod 1321.
  • Besökare vill helst hitta runt på sajten via dess innehåll. När de hittat en artikel om Murakami vill de hitta fler artiklar om författaren, fler bokrecensioner eller fler kulturnyheter.
  • Det är alltid den mest lokala menyn som är intressantast. På SVT Pejl är det menyn med Skolpejl, Brottspejl etc som är mest viktig för besökare – en meny vi just nu döljer helt i mobilen.
  • Att placera menyn i sidfoten, som BBC gör, funkar generellt bra.
  • Menyn på DNs mobilsajt är effektiv och ger touch-glädje.

Vi tar med oss våra insikter in i framtida meny-experiment. Vi SKA lösa mysteriet!

Liten uppdatering av TV-tablån

För cirka 6 månader sedan så uppdaterade vi tablåfunktionen på SVT.se. Det var ganska små justeringar som gjordes och de syftade främst till att få sidorna att fungera på mobiltelefoner och surfplattor i linje med vår strategi att göra om SVT.se enligt principerna om responsive design.  

En vanligt förekommande synpunkt efter lanseringen var avsaknaden av länkar till SVT Play i översiktsvyn.

Länken fanns kvar men hittades numera ett klick bort och dök upp först när man klickade för att expandera tablåtexten för ett program.

Nu lägger vi tillbaka symbolen för SVT Play i översiktsvyn. Den gröna symbolen visar att programmet kommer att publiceras i SVT Play.  Det är många som har hört av sig och velat ha den tillbaka eftersom den fyller en viktig funktion i planeringen av TV-kvällen samtidigt som den signalerar nya program som kommer att dyka upp i SVT Play.



Det som också är nytt är att länken “Se programmet” faktiskt leder till det aktuella avsnittet för programmet och inte enbart till det senaste (vilket den gör idag).  Innan programmet publiceras i SVT Play så kommer det finnas en informationstext som förklarar att programmet kommer finnas i SVT Play. Oftast blir programmet tillgängligt i SVT Play en stund efter att det sänts i TV, men ibland kan det dröja till efterföljande dag.


Inom kort kommer vi att komplettera utskriftsfunktionen med en sjudagarstablå och en fungerande tidsskillnadsväljare för SVT Worlds tittare.

Vad tycker du om förändringen? Skriv gärna en rad i kommentarsfältet nedan.

 

Designmönster för navigation på små skärmar

En rapport från An Event Apart i Boston 2012, del 2

När vi började processen med omgörningen av svt.se och Play-tjänsten så var en parameter att vi skulle arbeta enligt mobile first-principen. Att utgå ifrån det minsta läget gör att man tvingas identifiera det som är viktigast. Innehållet borde vara det viktigaste men hur kommer det då sig att det första man ofta möter är en navigation som tar upp större delen av skärmytan? Är det viktigare att kunna navigera bort från sidan man befinner sig på än att upptäcka innehållet?

Foto: Jakob Rahm

Luke Wroblewski ägnade en del av sin föreläsningstid på An Event Apart i Boston åt att gå igenom exempel på olika navigeringslösningar, och framför allt hur dessa ter sig i mindre skärmstorlek.

Ett exempel som känns spännande är att lägga navigationen i botten. I topp lägger man en ankarlänk som skickar användaren till rätt position och längst ned på sidan kan man lägga ytterligare en ankarlänk som skickar användaren tillbaka till toppen.

Man kan på detta sätt ge menyn det utrymme som den kräver, inklusive stora klickytor etc. och det blir även en naturlig avslutning på sidan. En annan fördel är att denna lösning inte kräver någon form av JavaScript och kräver inga kostsamma operationer.

Ytterligare ett exempel är lägga menyn utanför den synliga ytan (”off canvas”). Detta är en av mina personliga favoriter. När man väljer att visa menyn så skjuts menyn in i den synliga ytan medan innehållet skjuts ut enligt bild nedan.

Detta bryter lite mot mönstret där man ofta staplar element ovanpå varandra, vilket jag tror kan ge en känsla av balans och lugn.

Vidare pratade Josh Clarke i sin föreläsning “Buttons are a hack” om nya beteenden som kommer med touch-enheter. Om man t.ex. använder en surfplatta så förväntar, i alla fall jag, att man kan använda swipe för att röra element till höger och vänster i en horisontell lista. Detta beteende kan högst troligt komma att utvecklas så att man t.ex. kan använda inzoomning respektive utzoomning (pinch-zoom) för att navigera i en hierarkisk struktur.

Hur vi än kommer att lösa navigering i fortsättningen så hoppas jag att det kommer bli ett iterativt arbete där vi kan exprerimentera, betatesta och försöka hitta en så bra lösning som möjligt.

Till del 1 – Bra design måste börja med innehållet
Till del 3 – Ansvarsfull webbutveckling

Program tillbaka i navigationen

I den övergripande navigationen på svt.se har Program nu återkommit som länk intill Nyheter, Sport och Barn som fanns där sedan tidigare. Vi tog bort Program-länken när vi släppte nya förstasidan, med planen att låta länken återkomma när vi byggt en bättre egen ingång till hela programvärlden.

Många reagerade på borttagandet och uppfattade det t ex som att vi bara satsar på nyheter, sport och barn nu. Så är det inte, vi har precis lika mycket programsidor som förut, och vi såg också själva att programfokuset blev för svagt utan den länken i navigationen.

Därför är den tillbaka redan nu, och den leder till en sida som lyfter ett antal aktuella titlar och undertill visar en filtrerad A-Ö-lista för alla våra program. Den sidan är en förstaversion som förstås ska utvecklas vidare, och dess huvudsakliga funktion kommer att vara att visa våra besökare vilket utbud vi har och hjälpa dem hitta i det. Exakt hur det ska gå till finns det många idéer och tankar kring, och vi återkommer till det.

Bra design måste börja med innehållet

En rapport från An Event Apart i Boston 2012, del 1

An Event Apart är en konferens “för människor som gör webbsajter” av personerna bakom A List Apart. Alla talare är personer som gjort ett stort bidrag till webbranchen. Konferensen passar både för utvecklare och designers samt ett dussintal andra titlar som används.
Det var på en An Event Apart för några år sedan som vi på SVT först fick upp ögonen för “Responsive Web Design”, “Progressive Enhancement” och “Mobile First”.

“Content First!”

Under hela konferensen så var den röda tråden ledorden “Content First” (innehållet först), en vidareutveckling av det tidigare “Mobile First, Web Second” som vi här på SVT jobbar efter när vi utvecklar för webben. Att utveckla och designa betyder att innehållet måste komma först. Detta blir extra tydligt när man jobbar mot små skärmar.

Kungen av webbstandards Jeffery Zeldman menade att vi som skapare behöver vara väldigt noggranna med vad vi väljer att inkludera för innehåll på sidan. Innehållet är ett designproblem och ofta är nuvarande formuttryck fientliga till innehållet. Design i frånvaro av innehåll är inte design, det är dekoration.

En trend som vi tidigare sett på SVT och även Jeffery pratade om är att vi inte längre kan förvänta oss att det är vi som kontrollerar designen kring vårt innehåll. Besökarna använder i större utsträckning andra tjänster för att ta del av vårt innehåll. Några exempel är Instapaper och Readability. Sedan finns det även de som ändrar utseende på sajten för att anpassa den efter deras särskilda behov som dålig syn eller färgblindhet.

Foto: Jakob Rahm

Anpassa oss till anpassningsbart innehåll

Hur kan man då göra för att få till ett innehåll som går att använda på alla olika plattformar som användarna vill få tillgång till det på? Användarupplevelsegurun Karin McGrane föreslår att man ska använda ett API mellan sitt system för innehåll och de klienter man vill tillhandahålla det i. Du måste skapa innehåll med tanken att det kanske kommer distribueras via massa olika plattformar. Därför måste du skapa ett system kring hur du skapar innehållet. Detta gör man genom struktur och metadata. Till exempel skapar man flera olika beskrivningar som kan användas separat på olika ställen.

Vi på SVT använder ett internt API för att fylla SVT Play med innehåll men samtidigt så använder vi samma innehåll utan att gå via ett API för att fylla våra programsidor. Om vi skulle använda Karins tankar så skulle vi behöva skapa ett API för allt vårt innehåll och använda det till alla klienter. Några som har lyckats med detta är NPR (National Public Radio) som genom sitt strukturerade innehåll har kunnat ge besökarna rätt upplevelse på alla plattformar. De har sedan man infört sitt system som de kallar COPE (Create Once, Publish Everywhere) ökat sina sidvisningar med 80%.

Foto: Jakob Rahm

Responsivt anpassa layout till innehåll

Ethan Marcotte, personen som startade hela den här “Responsive Web Design”-grejen, menar att vi även måste fokusera vår layout av sidorna efter innehållet istället för som många gör nu fokusera på kolumner och rutnät. Att layout är en förbättring som vi först kan göra efter att vi fokuserat på innehållet.

Även designern Jason Santa Maria som pratade om typografi nämnde att man borde anpassa sin typografi för olika skärmar. Till exempel hur man kan anpassa radavstånd beroende på hur bred spalten är och beroende på radavstånd kan man anpassa färgen på texten.

Till sist så använde Luke Wroblewski, känd för “Mobile First”, uttrycktet “Content First, Navigation Second” när han pratade om designmönster för små skärmar. Besökarna kommer till din sajt för innehållet, inget annat, och du måste fokusera på vad som viktigast för dem.

Foto: Jakob Rahm

Till del 2 – Designmönster för navigation på små skärmar
Till del 3 – Ansvarsfull webbutveckling

Fortsätt tyck till!

Vi är glada. För vi har blivit överösta med synpunkter om svt.se och nyhets- sport- och kultursajterna sedan lanseringen den 15 maj. Det har flugit både ris och ros åt vårt håll och vi har samlat in allt. I höst kommer vi att fortsätta förbättringsarbetet med målet att så många som möjligt av er ska vara så nöjda som möjligt. För att få en mer samlad bild har vi nu slagit ihop de användarforum som finns. Vi vill självklart fortfarande ha era synpunkter på sajten, men nu kan ni framföra dem här.
Ha en riktigt bra sommar!

SVTs barnsajter funkar inte som övriga svt.se

Barnkanalens startsida 2012-06-07
Barnkanalens startsida 2012-06-07

Jag heter Björn och arbetar som Interaktionsdesigner med svt.se/barnkanalen och svt.se/bolibompa – SVTs sajter som riktar sig till barn som är 3-11 år gamla. Vi har nyss lanserat nya versioner och dom kommer bli ännu bättre framöver.

I arbetet med sajterna gör vi hela tiden användbarhetstester med barn. Testerna innebär att jag hänger med ett eller två barn en stund och ber dom kolla på video, spela spel och leka på sajterna. Genom att kolla hur barnen gör på sajterna kan vi hitta problem som vi ”vuxna” inte ser och sen kan vi rätta till konstigheterna. Just nu söker vi barn i Stockholm som vill hjälpa oss med tester 20 juni, 27 juni och 4 juli.

Vi har redan fått många insikter om hur barn generellt beter sig på vår sajt (och på webben i allmänhet). Och barn beter sig till viss del annorlunda än vuxna när dom använder webben. Bland annat är barn ofta till synes kaotiska när dom surfar – dom öppnar Barda-spelet och spelar i två minuter, stänger spelet, hittar en favoritkaraktär och klickar in på programsajten för karaktären, kollar ett klipp i 20 sekunder, byter till ett annat klipp, kollar i en halvminut, vill sen prova att skriva sitt namn på mina anteckningspapper, ritar en drake på datorn och vill sen spela drake-spelet på sajten. :) Barn gillar också bilder mer än text och surfar ofta efter premissen ”bara det som syns, finns”.

Vi har därför byggt barnsajterna så de funkar annorlunda än övriga svt.se. Några skillnader:

  • man kan aldrig komma från barnsajterna till övriga svt.se – så barnen inte råkar hamna på nyheter om krig och så’nt
  • allt innehåll om var program finns på en och samma sida – till skillnad från exempelvis Melodifestivalen som har många sidor med innehåll
  • vi använder så lite text vi bara kan – istället finns massor med material från våra program såsom logotyper och bilder på karaktärer
  • roliga spel och kluriga pyssel är vårt näst viktigaste innehåll, bara video är viktigare – till skillnad från exempelvis Melodifestival-sajten där texter om artisterna är näst viktigaste innehållet.

En av många saker som barn har gemensamt med vuxna är att de allt oftare surfar på smartphones och surfplattor. Vi har byggt sajterna så dom funkar någorlunda bra på mobiler. Men få av våra spel och pyssel funkar i mobiler så vi har mycket kvar att göra!

Vad tycker du skulle göra barnsajterna ännu bättre? Har du idéer eller vill påpeka något som är dåligt? Skriv gärna en kommentar eller kontakta mig.

Björn Johansson
bjorn.johansson@svt.se

Tiden går – vad händer med SVT Play Beta?

Användbarhetstest av SVT Play Beta
Användartest med pensionärer på seniorboende söder om Stockholm. Foto: eLots

För exakt en månad sedan bjöd vi in besökarna att tycka till om SVT Play Beta. Och det har ni gjort! Så vad har vi själva gjort under tiden? Och vad har vi i kikaren?

Till att börja med vill vi säga TACK till alla som testat och hört av sig med glada tillrop, tips, kommentarer och buggar. Vi har läst och noterat men inte hunnit besvara alla inlägg, än.

När vi nu fortsätter utveckla SVT Play Beta har vi en lång lista på förbättringar som både vi och många användare efterlyser. Vi försöker beta (!) av dem en efter en genom ständiga förbättringar.

ALLA besökare kan naturligtvis inte representeras av betabesökarna som tyckt till via bloggkommentarer, twitter och vårt beta-forum. Därför jobbar vi även med riktade användartester och målgruppsanalyser, vid sidan av den löpande dialog vi har om vanliga SVT Play. Mer om det i ett annat blogginlägg.

Några saker vi har fixat sedan beta-premiären

- Bättre information om videorättigheter

Bättre överblick av rättigheter

Som ett första steg har vi försökt förbättra informationen om videon du valt att se. Nästa steg är att göra det lättare att sortera ut allt du för tillfället vill och kan se, om du till exempel är humorfantast på utlandsresa som tittar i mobilen och behöver teckentolkning.

- Bättre videoformat
Om nya SVT Play verkligen ska fungera på alla skärmar – från mobilen till tv-apparaten -måste vi erbjuda rätt videoformat. Och här har det börjat röra på sig rejält den senaste tiden. Läs mer i det här blogginlägget.

- Förbättrad hjälpinfo
Vi har äntligen en hjälpsida! Just nu hittar du den under fliken Hjälp nedanför videon du har valt men snart når du den överallt. Informationen är utformad för att vara relevant och begriplig för de som behöver hjälp, inte för de som redan kan allt. Den kommer göras mer begriplig och tillgänglig med grafik och video/ljud.

Varning för våldsamt innehåll

- Varning för våldsamt innehåll
Vid betastart kunde vi inte publicera vissa programtitlar i SVT Play eftersom vi saknade möjlighet att varna känsliga tittare för dem. Nu kan vi det. I nästa steg ska vi skapa ett smartare skydd. Läs mer om hur vi skyddar barnen

- Mer innehåll
Sedan betastart har vi arbetat hårt för att fylla på med programtitlar, avsnitt och korta klipp. Nu börjar det arta sig eller vad tycker du?

Saker på vår att göra-lista

Det här blogginlägget är redan för långt och du skulle ändå inte orka läsa om allt vi har på vår att göra-lista. Här följer därför bara ett litet urval av planerade funktioner och önskade förbättringar.

- Lättare att se SVT Play på TVn
Vid betastarten presenterade vi ett sätt att förvandla din smartphone till en fjärrkontroll. Intresset blev så stort att vi  skrev ett särskilt blogginlägg om hur vi byggde den. Det ledde bland annat till en fjärris för Youtube*! Vår fjärrkontroll är långt ifrån färdig och inte heller den enda lösning vi funderar på. Vi kommer hur som helst undvika att utveckla dyra specialappar för olika apparater.  Läs gärna om vår app-strategi här.

- Öppet arkiv
Är du en av dem som har efterlyst Öppet arkiv i SVT Play Beta? Håll ut, det kommer. Just nu jobbar vi på att skapa en kategori som bygger på programtitlar istället för dagens krångliga klippmappsystem.

- Sportfokus
I vanliga SVT Play har sportkategorin en del brister: du hitter till exempel inte Fotbollskväll under Fotboll och det är svårt att skilja program från kortare klipp. I nya SVT Play fokuserar sportkategorin på hela program och livesändningar. Den kompletteras snart av nya svt.se/sport där de kortare klippen presenteras i sitt sammanhang på ett tydligare sätt. Men naturligtvis ska du även kunna leta bland sporter i nya SVT Play.

- Lättare att söka och hitta
Från dag ett var sökfunktionen i nya SVT Play Beta avsevärt bättre än söket i vanliga Play. Men bra kan bli bättre och ett riktigt bra sök kommer, i kombination med bättre märkning av innehållet, göra det mycket lättare att hitta det du vill se.

- Dela mera
I nya SVT Play ska det bli enklare att dela med sig och tipsa andra om program, till exempel via sociala nätverk och så kallad inbäddning.

Ja, det var några få exempel.

Fortsätt gärna kommentera, tipsa och buggrapportera (vi är suckers för beröm också!) i vårt användarforum för SVT Play Beta: http://kontakt.beta.svtplay.se

Tack för hjälpen så här långt!

*En av alla som hörde av sig om fjärrkontrollen skapade en egen, för Youtube: http://segorify.com/youtube_remote_pn/ Ja, vi har tackat upphovsmannen för hans cred i sidfoten!

Vad tycker du om nya SVT Play Beta?

Nu kan du testa och tycka till om nya SVT Play. Än så länge är det en ofärdig så kallad betaversion. Vår förhoppning är att få utveckla den tillsammans med dig. En godbit som vi bjuder på redan nu är en funktion som gör mobilen till en Play-fjärr!

När den nya betaversionen blivit tillräckligt bra kommer den att ersätta nuvarande SVT Play. Vanliga SVT Play kommer alltså att fungera som vanligt under beta-perioden. Vi kommer berätta löpande hur utvecklingen går framåt, bland annat via den här bloggen.

SVT Play BETA
SVT Play BETA

 

Nya SVT Play Beta hittar du här

Här tycker du till om SVT Play Beta

Några nyheter till att börja med
Nya SVT Play Beta ser ut ungefär som vanliga SVT Play och det är viktigt – det är en uppskattad tjänst med över en miljon användare varje vecka. Så vad är egentligen nytt? Här är de viktigaste förbättringar vi har fått till hittills:

- Automatisk anpassning för olika skärmar
Nya SVT Play byggs med så kallad responsive design för att anpassa sig till din mobil, läsplatta och dator och det händer utan att du märker det när sidan laddas. Fungerar det tycker du?

- Fingertoppskänsla
10-15 procent av våra besökare använder en mobil eller surfplatta som styrs med en pekskärm. Du ska kunna använda nya SVT Play med pekfingret eller tummen på till exempel en smartphone. Är knapparna tillräckligt stora? Sitter de lagom tätt? Kan du “swipa” bildkarusellen på förstasidan?

- En bättre videospelare för alla
Navigeringen är så klart viktig, men hur bra den än fungerar kommer den att vara meningslös om inte videospelaren fungerar. Alla har vi olika behov vid olika tillfällen och det enda vi kan vara säkra på är att om det fungerar för en synskadad person med skärmläsare så kommer det alla till godo, och alla ska kunna ta del av SVTs programutbud. Prova gärna den separata popout-spelaren som du kan skala till valbar storlek. Funkar det?

- Tydligare information om programmen
Vi har försökt göra det lättare att hitta viktig programinformation, till exempel hur länge ett avsnitt finns tillgängligt. Har vi lyckats?

- Bättre sökfunktion
Vi har en förbättrad sökfunktion. Märks det? Vid starten kommer inte utbudet att vara komplett men vi fyller på vartefter.

- Ingen autostart
Nu kommer inga program att starta utan att du vill det. De autostarter som tidigare fanns är ett minne blott.

Och en sak till…..

- Mobilen som fjärrkontroll!

SVT Play Beta Kontroll
SVT Play Beta Kontroll

Säga vad man vill men det skönaste med en TV är ju ändå fjärren! I den här betan testar vi ett sätt att förvandla din smartphone till en fjärrkontroll som styr SVT Play.
Med den kan du välja program, starta, stoppa och justera volymen medan du tittar på SVT Play på din datorskärm eller kanske till och med i TV:n. Och som du vet har vi passerat 1:a april med råge…

Gå till den här adressen på din dator eller via webbläsaren i din uppkopplade TV och ha mobilen redo: http://beta.svtplay.se/kontroll

Hur funkar det tycker du?

Vi ser fram emot att utveckla nya SVT Play tillsammans med dig. Håll koll här på bloggen, för vi återkommer snart med mer.

Vi ses och hörs!
Gunnar Slott, Produktägare SVT Play

Ingen undkom Mello. Och snart blir det värre

Melodifestivalens videospelare
Melodifestivalens nya videospelare ska funka för alla

Förr kunde blinda och döva tittare som missade Melodifestivalen skylla på sina funktionsnedsättningar. Det går inte längre. Förutom att även årets final teckenspråkstolkades på webben visades den dessutom i en helt ny videospelare, anpassad för synskadade.

Den nya videospelaren på svt.se/melodifestivalen är byggd för att vara enkel att använda för alla, inklusive de som tittar med hjälp av skärmläsare. Tester visar att vi har lyckats ganska bra.

Så här säger Andreas Cederbom, tillgänglighets- och hjälpmedelsexpert på företaget Funka Nu:

”Resultatet av skärmläsartesterna är det bästa vi sett hittills. Det här flyttar fram gränsen för tillgänglighet i videospelare ytterligare ett steg. Den är inte perfekt men nu är vi i ett läge där de största problemen inte ligger i spelaren utan i hjälpmedlen.”

Den nya videospelaren används även på Uppdrag Gransnknings sajt svt.se/ug och under våren kommer den ersätta videospelaren i SVT Play och på resten av svt.se.

Tanken bakom är densamma som idén med SVT: om alla, för alla. På webben har SVT unika möjligheter att göra utbudet tillgängligt men arbetet har bara börjat:

För att SVTs webb ska vara 100 procent tillgänglig ska den inte bara funka bra med skärmläsare. Den ska vara enkel att använda för alla, på alla typer av skärmar oavsett om de styrs med mus, fingrar, tangentbord etc. Vi vet att den nya spelaren fortfarande har tekniska och pedagogiska brister, till exempel i vissa smartphones, men de kommer vi åtgärda.

Läs gärna mer om hur vi tänker om tillgänglighet.