Stäng Huvudmeny

7 misstag i SLs nya responsiva sajt

Mobil UX-Design

I förra veckan skulle jag försöka hinna till en utflykt med min sons nya skolklass. Efter 5 minuters svärande över  SLs nya responsiva sajt,  hade jag missat min buss och blev 40 minuter sen. Men, i stället för att  gå till sociala medier och skrika att SL och deras webbyrå är puckon, tog jag mig tid att gå igenom sajten flera gånger igen och analysera varför jag misslyckades. Jag hittade 7 problem med den nya responsiva sajten.

 

Sämsta ni gjort

 

Vårt jobb är att göra webb bättre. Inget gör oss mer frustrerade än dålig webb. Gamla dåliga webbar är inte kul, men när man lanserar nya dyra sajter som inte funkar som de ska, då blir vi arga på riktigt.  Men det är viktigt att vi omvandlar den energin till något konstruktivt. Den här bloggposten handlar inte om att dissa SL. Den handlar om att fler ska förstå vilka specifika utmaningar man står inför när man bygger responsiva sajter som ska fungera som ”verktyg”. Det gör vi med konkreta exempel på vad som inte fungerar och hur man kan göra istället.

 

Utgångspunkten för den responsiva designen är att den ska fungera väldigt bra i mobilen för att underlätta för SL:s resenärer.

– Från Webbyråns sajt

 

Men vi, och de flesta andra verkar inte alls tycka att det fungerar bra. Av 54 kommentarer på Facebook, var 40 negativa, 9 positiva och 5 neutrala (SLs egna kommentarer borträknade). Se hela tråden här:

 

Enough talk.

Här är de 7 misstag som gör att sajten inte ”fungerar väldigt bra i mobilen”.

  1. Man har ingen tydlig strategi för hur man ska ta användare från det gamla gränssnittet till det nya.
  2. Man bryter mot accepterade metaforer/konventioner
  3. Funktionen ”Nästa avgång” är inte grundad i data
  4. Sidan laddas på ett sätt som får innehållet att ”hoppa omkring”
  5. Prestandan för den nya sajten är för dålig för snabbt användande
  6. Responsiv design, blir ”one content fits all”
  7. Förval som ska hjälpa, stjälper i stället.

Längre ned i denna artikel hittar du en video där jag går igenom upplevelsen. För att bättre kunna se vad som händer: läs gärna igenom de 7 punkterna innan.

1.    Från det gamla gränssnittet till det nya

Som användare är jag van vid att – ”SL är ett ställe där jag ska skriva in två saker och trycka på en knapp”, så får jag reda på när jag kan åka.

SLs nya responsiva sajt har  blivit ett ställe där man skriver in en sak, inte trycker på en knapp och så händer det något oförutsägbart.

Man har lagt till en ny funktion – ”Nästa avgång”, så att man kan se de kommande avgångarna från en station. Den ”Gamla reseplaneraren” ligger under en ”tabb” – Sök resa.

 

Tabbar som inte är tabbar

 

Problemet är dels att det man förväntar sig ska hända inte är förvalt (default) samt att den visuella upptäckbarheten för ”tabben Sök resa” är låg.

Resultatet: De flesta av kommentarerna på Facebook, handlar om – ”Vart tog reseplaneraren vägen?

 

Reseplaneraren

 

Nu kan man argumentera att ”Det här är bara ett problem i början – man kommer att lära sig.” Fast, varför ska man tänka så, om man i stället kan göra det enkelt redan från början?

Den uppenbara lösningen är att göra ”Sök resa” förvalt, och sedan ”tipsa” som den nya funktionen.

En annan lösning är att man inte alls behöver välja mellan de två, utan att det går att kombinera de två funktionerna i ett gränssnitt. Se mitt förslag nedan. Tanken är att man ska kunna lämna det andra fältet tomt och då få funktionen ”Nästa avgång”. En fördel är också att man slipper att de två tabbarna tar upp dyrbar skärmyta.

 

SL alternativ Sök resa

Kolla, man behöver inte tabbar!

 

Not: det är möjligt att man utvärderat/testat detta alternativ under utvecklingsarbetet men hittade problem som gjorde det mindre lämpligt. Vore kul att få veta?!

2.    Tabbar som inte är tabbar

Användbarhets-gurun Steve Krug skriver i sin bok ”Don’t make me think”, att om man använder Tabb-metaforen så ska tabbarna verkligen se ut som tabbar för att användarna ska förstå principen.

På den nya resposiva sajten använder SL  en ny princip med en ”box med en pil” som ska illustrera tabb-idén. Vi tror inte att det är tillräckligt. Det faktum att reseplanerarens bortgång är det vanligaste klagomålet stödjer den hypotesen.

 

Nästa avgång

 

Så här skulle sidan se ut om man använder tabb-metaforen fullt ut. Helst skulle det ligga en skugga så att man ser vilken tabb som är aktiv, men nu har man valt ”Flat design” vilket förhindrar en sån effekt.

 

Riktiga tabbar

 

Vi har också märkt i våra användartester och eyetracking-studier att tabbar har låg upptäckbarhet, dvs användarna ser dom inte.

Det verkar smart att använda tabbar, för man kan ”använda en yta för flera saker”, men om inte användaren förstår eller upptäcker principen så faller resonemanget.

3.    Do the maths!

Att jobba ”Datadrivet” innebär att man stödjer sina hypoteser på data om användare och deras beteenden.

Jag tror inte att funktionen ”Nästa avgång” skapats baserat på data. Snarare är det en kreativ webbstrateg som lyckats sälja in idén – ”Vore det inte cool om man kunde…?”.

Så här ser datan ut:

”Nästa avgång” kan vara användbar för en användare som åker från en liten station med en eller ett fåtal linjer. Så fort man har flera linjer blir det så många avgångar att det inte går att överblicka.

De allra flesta avgångar sker från stora stationer (de är därför de är stora, eller hur?!).

Så för de allra flesta resenärer är funktionen oanvändbar. Om den bara är användbar för minoriteten, borde den finnas, men inte vara det förvalda alternativet för de allra flesta.

Det kallas statistik. Fler borde använda det.

4.    Kassaapparat-effekten

Kassa-apparat

Dra i veven och se vad som händer

Jag tror att det värsta problemet med användarupplevelen på SLs nya sajt är det som jag brukar kalla kassaapparat-effekten. Tänk dig en gammal kassaapparat. Den har knappar, ett fönster med siffror och en vev. Du slår in ett nytt pris, drar ett varv med veven och så snurrar alla siffror vilt och landar till slut på en ny summa.

Ungefär så känns det att använda SLs sajt nu. Det rör sig och hoppar omkring. När alla bitar till slut stannat upp ställer man sig frågan: – ”Ok,  var har jag hamnat nu då? ” Att hela tiden tvinga användaren att göra sådana fullständiga omorienteringar ökar det vi kallar ”den kognitiva belastningen”, och användaren känner – ”Det här var jobbigt”.

Om du har svårt att förstå vad jag menar, kolla videon så fattar du.

5.    Mobilt ska vara snabbt. Typ: snabbt- snabbt

Det är välkänt att bra webbprestanda (sidan laddar snabbt) är viktigt för en positiv upplevelse. Det är EXTRA VIKTIGT i en mobil, stressad, uppgiftsfokuserad användarsituation. Och det är EXTRA SVÅRT att få till det på en mobil med långsammare processor och begränsad mobiluppkoppling.

Det jag märkte där vid Danderyds sjukhus var att laddningen av gränssnittet var precis för långsam för mitt stressade beteende. Eftersom gränssnittet hela tiden rör sig, lyckades jag klicka på saker som flyttade sig precis när jag skulle klicka och sedan klickade jag på något annat och hamnade på något ställe jag inte alls ville till.

Tyvärr lyckades jag inte återskapa den här effekten när jag gjorde videon så du kan inte se den där. Men du kan fundera på om det samma händer när du använder sidan?

Vi har inte gjort någon djupare utredning av prestanda och laddtider, men det ser ut som att kartan tar ca 25% av laddtiden, vilket man alltså skulle kunna kapa. Det byter en hel sekunds bättre prestanda på mobilen (från 4 s till 3s enligt våra mätningar).

6.    Responsiv design = One content fits all

”Responsiv” betyder i de flesta fall ”Re-sizing”, dvs man behåller allt innehåll för alla användare och så skalar man om storlek och disposition för de olika innehållsblocken.

Mot detta ska ställas ”adaptiv design”, där man mer genomgående kartlägger informations- och funktionsbehov i de olika användningsfallen och skapar mer anpassade upplevelser för varje situation.

SLs nya sajt är responsiv – Bra! Det är inte One size fits all. Däremot är det One content fits all, dvs alla användare ser samma innehåll, fast i olika format.

Det leder till två saker:

  1. Eftersom allt innehåll måste laddas får man sämre prestanda.
  2. Den mobila användaren får se en massa innehåll som är helt onödigt för det användningsfallet.
Kartan

Och vad ska jag med den här grejen till?

I synnerhet tänker jag på kartan. Den ligger långt ned på sajten, men när man söker på mobilen hamnar den av någon anledning i fokus när jag väntar på mitt resultat. Så man använder en massa bandbredd (vilket kart-applikationer normalt kräver), för att gång på gång visa mig en utzoomad karta över Stockholm. Den kartan är helt överflödig i min fokuserade ”åka från-till söksituation”.

Det är möjligt att kartan på något sätt går att använda för detta, men att gång på gång visa samma statiska karta är inte ett sätt att få användaren att upptäcka denna funktion. Snarare lär jag mig att stänga av och det blir lite som ”banner blindness”.

Eniros karta

Kolla, man kan klicka och göra mer!

Vi brukar säga till våra kunder – ”Visa användarna vad man kan göra, och be dem att göra det så kommer de att göra det”. En smart och enkel princip. Så här gör Eniro på sin nya sajt:

Fulare? Ja!

Bättre? Ja!

Fast i det här fallet tror jag SL gör bäst i att ta bort den helt från det mobila läget.

Var rädd om dyrbar skärmyta

När man har samma innehåll i alla kanaler missar man lätt någon detalj på något av ställena. På mobilen är det superviktigt att man snålar med dyrbar skärmyta.

dropdown-exempel

Hej – Var är min hållplats?

De fina designade dropdown-förslagen där man väljer hållplats ser fina ut på datorn, men tar väldigt mycket av skärmytan på mobilen. Och när tangentbordet kommer upp blir det knappt någonting kvar. Här borde man tänkt:  ”Hur många alternativ borde vi kunna visa som ett minimun på de vanligaste mobilerna, med tangentbordet uppfällt och hur hög ska då varje rad vara?” (men såklart att man fortfarande kan klicka med en normaltjock snickartumme).

Det här är ofta en effekt av att sitta på kontoret med Photoshop, dvs man ser inte vad användaren verkligen upplever med menyer, tangentbord och saker som dyker upp och förändrar den synliga skärmytan.

Get out of the office!

7.    Att hjälpa blir att stjälpa

Slutligen, en sak jag märkt är att man alltid behåller den sista sökningen (med en cookie antar jag), och ”hjälper” användare med att fylla i sökningen. I grunden smart tänkt, men problemet är att om man gör fel så återupprepas felet, eftersom det hela tiden fylls i automatiskt.

Vet egentligen inte vad som är bäst här, det är ju i grunden en bra funktion, men den ställer till det ibland.

What now?

Ok SL, om ni tycker att det finns något i det jag säger, gör då så här:

  1. Ta bort kartan från den mobila versionen, ersätt med en textlänk till kartan och spara en sekunds laddtid
  2. Styr om förvalet till ”sök resa” i stället för ”nästa avgång”
  3. Ännu bättre – Kolla om det går att blir av med tabbarna med nåt i stil med mitt förslag.
  4. Kolla för guds skull om det går att göra något åt den okontrollerade scrollningen (kassaapparat-effekten).
  5. Mät – kolla data.
  6. A/B-testa.

Oj, det var många ord. Egentligen är det nog enklare att kolla videon . Och du. Det här är ju bara ETT försök att förstå vad som händer och vad man kan förbättra. Om du har egna idéer eller tycker att jag är ute och cyklar, lämna en kommentar! Vi är många som är beroende av att SLs sajt blir riktigt bra i framtiden.

 

 

Video Disclaimer: I Videon så drabbas jag av en bugg där jag felaktigt får resultat för Ösby Sigtuna i stället för Djursholms Ösby. En bugg kan vi alla drabbas av. Poängen är inte att visa att sajten är buggig, utan visa på frånvaron av ”robusthet”, dvs hur gränssnittet kan hjälpa användaren att göra rätt när det blivit fel. Det är frånvaron ar denna ”robusthet” som är poängen med min video – inte buggen. Men som sagt, ge gärna din egen syn på det hela.

Vad tycker du?

Håller du med John? Rösta här!



John Ekman Om John

John är galet passionerad av att förbättra Konvertering och Konverteringsgrad. Han har lång erfarenhet av att Optimera Affärsutfallet för online-företag och är grundare av Conversionista! - nr 1 på Online-konvertering i Sverige.

  • Joacim Nitz

    Haha, klockrent! 🙂 Efter mitt första försök så stängde jag ner webbläsaren och hoppade in i appen Res i STHLM 😀

  • videren

    Bra post. Nyfiken – vilket poll-verktyg använder du för röstningen?

  • Ole Gregersen

    Hej John. Super interessant, også selvom jeg ikke bor i Sverige. Virkelig god video.

    • Chief Conversionista

      Tack Ole!. Nu får du ta alla punkter och ge dig på Köpenhamns lokaltrafik och göra det riktigt bra!

    • Chief Conversionista

      Tack Ole!. Nu får du ta alla punkter och ge dig på Köpenhamns lokaltrafik och göra det riktigt bra!

  • Mikko

    Förut gick det att söka leta fram rätt address med kartan och högerklicka i kartan och klicka på åka hit

  • Mikko

    Förut gick det att söka leta fram rätt address med kartan och högerklicka i kartan och klicka på åka hit

  • MiroVB

    Konstruktiv kritik när den är som bäst. Hoppas SL tar till sig detta. Misstag (och lösningar) som vi alla som bygger sajter kan ta lärdom av.

  • Pingback: Designidéer till SL:s reseplanerare - axbom()

  • Strålande inlägg John! Och jag kunde förstås inte hålla mig och gjorde ett nytt designförslag på reseplaneraren, och går igenom hela rasket i en video: http://axbom.se/sl-reseplaneraren

    • Bra video Per, jag gillar hur du tagit interaktionen till en ny bra nivå.

      • Erik Lif Sjöcrona

        Det mest svårsmälta med SL.se tycker jag ändå är ”möjligheten” att ladda SL-kortet online. När man gör detta, reskassa eller period, så tar det ca tre dagar (!) innan laddningen finns på kortet. Detta är, med en rejäl underdrift, omodernt och opraktiskt. Allt annat än ”pengarna finns på kortet omedelbart efter betalning via nätet” gör att funktionen inte fyller ditt syfte. Inte en ren designfråga, men onekligen en fråga om användarvänlighet.

    • Bra video Per, jag gillar hur du tagit interaktionen till en ny bra nivå.

  • Erik Lif Sjöcrona

    Det mest svårsmälta med SL.se tycker jag ändå är ”möjligheten” att ladda SL-kortet online. När man gör detta, reskassa eller period, så tar det ca tre dagar (!) innan laddningen finns på kortet. Detta är, med en rejäl underdrift, omodernt och opraktiskt. Allt annat än ”pengarna finns på kortet omedelbart efter betalning via nätet” gör att funktionen inte fyller ditt syfte. Inte en ren designfråga, men onekligen en fråga om användarvänlighet.

  • Eddie

    Bra post John! Måste dock säga att det var längesen jag använde hemsidan. Appen Res i STHLM har allt man behöver och lite till. Lite speciellt men samtidigt läckert nördigt att det inte är SL själva som har utvecklat utan att det är en fristående utvecklare som har jobbat mot publika API:er.

  • ”Flikar” 🙂

  • Patrik Åkerman von Knorring

    Bra John! Har gått här och känt mig som en gnällgubbe och funderat på om jag skulle skriva nåt, men även tänkt att det kanske är jag som inte fattar nåt.. ”Skönt” å se att fler irriterar sig…

  • Magnus Johansson

    Mycket bra synpunkter! Jag skulle också vilja lägga till en kort kommentar om att använda SLs nya sajt i en vanlig webbläsare i en traditionell dator, med mus och tangentbord. Gränssnittet är FÖR touch-anpassat och allt känns väldigt stort och klumpigt. Man har också tagit bort möjligheten att skriva in önskad avgångs-/ankomsttid med tangentbord, istället måste man välja tidpunkt i två olika dropdownmenyer. Tidigare räckte det med att skriva ”13” så fyllde sidan automatiskt i ”:00” eller ”1445” så ändrades det automatiskt till ”14:45”. Det var MYCKET smidigare än nuvarande funktion.

  • Virre

    Jag håller med om nästan allt som sägs här, men den här nästa avgång grejen är inte ny bara omdöpt. Den låg tidigare under en undangömd menypunkt som heter realtid och den är användbar ibland, typ när sökningen totalt går sönder.

    Med det sagt det finns en bra mobilsida för sl, den har funnits länge. Det är den gamla WAP sidan som nu finns under http://mini.sl.se. Där är med enkel design allt jag vill ha ut av SLs hemsida oavsett media. Jag vill inte ha massa avancerat skit jag vill ha användbarhet och enkelt att nå både reseplanerare och realtid.

    • Tack för tipset. Den var verkligen bättre än den nya. Märkligt nog.

  • Belnat

    Så skönt när nån skrivit ett inlägg där man bara kan nicka och säga
    ”exakt!” för varje mening. Håller med om allt. Dina förslag under punkt 1
    och 2 var så mycket mer överskådliga än SL:s nuvarande! Hoppas de läser
    och tar till sig.

  • Många bra punkter och insights John! Sajten är dock fortfarande bättre än tidigare och jag tycker personligen att de har lyckats få bort mycket krimskrams. 🙂

Få gratis konverteringstips

Anmäl dig till vårt nyhetsbrev

Nyhetsbrev

Lär av…

Kundcase Mathem ✻ Guldkorn
✻ Mallar och metoder
✻ A/B-tester och resultat
Lär av case

Kan du göra lika?

Se kundcase Se kundcase✔︎ Analys & webbpsykologi
✔︎ A/B-tester & resultat
Se alla case

Få platser kvar till flera seminarier

Anmäl dig till seminarium ✔︎ Webbpsykologi & verktyg
✔︎ A/B-testning & Google 360
✔︎ Snacka med experterna

Flera tillfällen i vinter

Säkra din plats

Spara 1000 kr

Conversion Jam 2017

Missade du?

Världens största CRO-event

Spara 1000 kr på din biljett till CJAM8

Du, kontakta oss!

Kontakta oss
Gitte eller hennes awesome kollegor hjälper dig.