FRA DØR TIL DØR Mobilsite til Rejseplanen ITU december 2010 Jakob Sindballe jsin@itu.dk CPR: 010679-2089 Webdesign og webkommunikation Vejleder: Brian Everitt antal tegn: 23.662
CONTENTS Søg rejse... 1 Gør det mobilt ikke mindre... 3 Fra Rejseplan til rejseguide... 5 Søgning i centrum... 5 Alle bruger Rejseplanen... 7 Din tur til at vise vej... 8 Støj... 10 m.rejseplanen.dk... 14 Tapping... 15 HTML6... 18 SØG REJSE Gennem Rejseplanen genereres hver måned 7 millioner ruter. Behovet for et nemme og tilgængelige digitale applikationer, der hjælper os med at planlægge, overskue og effektiviserer vores dagligdag er enormt, og Rejseplanen er et sådant værktøj. Rejseplanen har udskrevet en meget åben konkurrence, hvor der ønskes ideer til forbedringer af denne service der bruges af enormt mange danskere i. En af de store udfordringer er at omsætte indhold og service til mobile platforme. Eksplosionen i smartphones er så stor, at statistisk data bliver forældet måned for måned. Samtidig åbner de mobile platforme nye muligheder på grund af ny funktionalitet, ny teknologi, men fremfor alt ny adfærd hos brugerne. Det kan synes som en begrænsning at udvikle til meget mindre skærme og små processorer, men det mobile internet er ikke en nedskaleret version af internettet på desktop computere. I dette projekt har jeg forsøgt at undersøge hvilke udviklings- og designprincipper der er særlige ved udvikling til smartphones, og forsøgt at forstå hvad det betyder 1
for det digitale produkt, når brugeren er mobil, når enheden er personlig og når hardwaren sætter anderledes krav. Med brug af designprincipper for udvikling til smartphones ønsker jeg at udvikle et mobilt website for Rejseplanen, som tager udgangspunkt i brugerens kontekst og enhedens udfordringer. Projektet er som udgangspunkt skrevet til iphone/safari. Jeg er maskiningeniør, og det er første gang jeg beskæftiger mig med digitale produkter. Derfor har det også været en stor udfordring at beskæftige mig med både udviklingen og kodningen i dette projekt, men det har været spændende at dykke ned i HTML5 og smartphone design. Jeg har dog måtte sande at understøttelse for alle enheder ligger langt ud over mine evner på nuværende tidspunkt. Websitet er dog blevet testet på Android/HTC desire og burde ligeledes virke her. I rapporten vil jeg med udgangspunkt i Beginning smartphone webdevelopment ii etablerer en forståelse for konceptet mobil. Dernæst vil jeg beskrive konceptualiseringen med inddragelse af inspiration fra forskellige mobile sites. Derefter vil jeg gennemgå mit produkt, med udvalgte screenshots og forklaringer. Håber det er overskueligt Bedste hilsner // Jakob Sindballe // 2
GØR DET MOBILT IKKE MINDRE Ovenstående er et oversat citat fra Beginning smartphone webdevelopment og understreger rigtig godt udfordringerne ved udvikling til smartphones. I virkeligheden er det nok mest vanetækningen der er sværest at bryde med, og ikke platformens begrænsninger. Den mobile bruger er målorienteret iii. Man bruger de forskellige services gennem sin telefon med omhu, og har i langt højere grad end desktop brugere et klart defineret mål. Det skyldes både hardwarens begrænsninger, som download hastighed, men også at brugen af smartphonen er relateret til en anden kontekst. Lad mig Google det for dig, Jeg finder en restaurant eller Hvor langt er der til Hundige er situationer, hvor brugeren af smartphone service er langt mere målrettet i sin brug, end hvis man sidder hjemme foran en større skærm uden forstyrrende gadestøj og bekendtskaber omkring en. Mobile brugere bliver distraheret iv. Det er måske det der er nemmest at koble til det at være mobil. Man er på farten, der er mange indtryk omkring brugeren. Der er andre muligheder og det skal gå stærkt. Det handler om forventningsafstemning. Når brugeren nemt bliver distraheret, skal der ikke meget til før det digitale produkt bliver irrelevant, overflødigt eller irriterende. Det stiller krav til brugervenligheden, men i lige så høj grad til prioritering af indhold og funktioner. Brugen af mobile services er lokationsbestemt v. Det meste vi laver er vel i princippet lokationsbestemt, men for mobile brugere gælder det i høj grad, at der er en direkte sammenhæng mellem hvor de er, og hvad de har brug for. Det er en stor udfordring at udvikle digitale produkter, der er fuldstændigt relevante for netop en bruger på et tidspunkt på et sted, uden det bliver ligegyldigt for alle andre. Den mobile enhed er personlig vi. Efter min mening er dette muligvis det mest grænseoverskridende ved mobile platforme. Når telefonen alene er din ejendel, er integrationen med sociale netværk, betalingssystemer, kalender, kontakter og netværk i det hele taget lige ved hånden. Samtidig er den personlige ejendel i langt højere grad en integreret del af brugeren som hukommelsesunderstøttende teknologi og lagring. Det personlige internet i mobilen åbner nye muligheder, som kan optimerer brugerens oplevelse og effektivitet. Det betyder også at enhederne er identificerbare, hvilket kan bruges og misbruges i en uendelighed. 3
Smartphones er mindre vii. Det er oplagt, men bliver understreget igen og igen i Beginning smartphone webdevelopment viii og.net magazine ix. Man bliver nød til at forholde sig til den lille skærm, med touch funktionalitet, den mindre processor og den begrænsede båndbredde. Det stiller nogle krav til det rent tekniske, men i endnu højere grad til layoutet af mobile websites og applikationer. Frem for alt at gøre det simpelt, minimerer tekst-input og have en høj signal-tilstøj rate, så brugeren hurtigt kan identificerer værdifuld information. 4
FRA REJSEPLAN TIL REJSEGUIDE Rejseplanen er en søgeside. Brugeren søger information om at komme fra A til B på et givent tidspunkt. Lettest og hurtigst. Det er en meget simpel service, som kræver enormt meget information. Rejseplanen holder styr på køreplaner, afgange, stoppesteder, forsinkelser, ændringer og hele det offentlige net af busser, tog og metro x. SØGNING I CENTRUM En af de cases der behandles i Beginning smartphone webdevelopment er mobilsiden for Wikipedia xi. Når man går ind på Wikipedia fra en desktop computer, er der et væld af muligheder for at deltage. Desuden er der mange krydsreferencer mellem artikler og services, som kan være interessante for brugeren. På det mobile site er der stillet helt skarpt på kerneområdet søgning efter information. Indgangen til det mobile site består stort set kun af et søgefelt og en udvalgt artikel. Desuden er sproget for siden defineret gennem URL en, så brugeren ikke skal igennem flere klik for at søge. På rejseplanen.dk kan er der ligeledes mange muligheder for at specificerer søgningen og der er en masse underkategorier for specielle brugergrupper. Rejseplanen til bilister, rejseplanen til pendlere, søgning i Europa etc. 5
På mobil.rejseplanen.dk har man forsøgt at skærer ind til benet og fokuserer på selve søgningen. Alligevel har man valgt at inkluderer links til engelsk udgave og mulighed for at søge i Øresundsregionen. Der er endda fundet plads til en reklame. I udviklingen har jeg kigget meget på Rejseplanens applikation til iphone, som på en langt mere elegant måde end mobil-sitet formår at sætte fokus på selve søgningen. Alligevel er et af hovedmenupunkterne information omkring selve applikationen, som ikke har særlig værdi for brugeren. Menuen favoritter er vigtig, men applikationen udnytter ikke nok, at enheden er personlig. Adgang til Facebook, adresselister og lignende er oplagt, men ikke implementeret. Til gengæld er der gjort rig brug af telefonens bevidsthed om hvor den befinder sig, hvilket giver gode defaultindstillinger og kortere vej til et søgeresultat. I opbygningen af et nyt mobil site har jeg lagt vægt på at søgningen skal være i centrum. Der er mange måder at søge information på, og med den store brugerskare, er det nødvendigt at give flere mulige input, men når brugeren går på mobil.rejseplanen.dk er det for at finde en rejse fra A til B. I de fleste tilfælde vil det endda være endnu mere specifikt. Hvordan kommer jeg herfra hvor jeg står til B, med afgang lige nu vil være udgangspunktet for de fleste brugere. Ikke at planlægge en weekendtur i 2011 over på den anden side af Øresund det gør man derhjemme. 6
ALLE BRUGER REJSEPLANEN I forbindelse med konkurrenceoplægget, er der statistik på hvor mange der bruger Rejseplanen. Der bliver lavet ca. 7 mio. ruter på rejseplanen.dk hver måned. Heraf er der ca. 75.000 ruter gennem det mobile net. Desuden er der applikationer til flere forskellige mobile platforme, som er downloadet i alt ca. 190.000 gange xii. Der er altså tale om en massiv brug af Rejseplanens service. Det er et meget enkelt produkt, som de fleste mennesker forstår værdien af. Ud over den gruppe af danskere der ikke bruger internet, må det antages at rigtig mange forskellige typer med forskellige forudsætninger besøger Rejseplanen. Alligevel er der i idégenereringsforløbet skitseret 3 typer af brugere. Det er primært tænkt som et værktøj til at kunne diskutere forskellige løsningsmodeller, men kan også bruges som et oplæg til brugerinddragelse på et senere tidspunkt. Det er altså ikke personaer underbygget med data. Inge, 62 år, har almindelige computerfærdigheder og bruger internettet i forbindelse med sit arbejde. Hun bruger rejseplanen.dk fra arbejdet, men mest fra hjemmet. Her tjekkes afgangstider fra hendes hjemmeadresse når hun skal på besøg hos familie, venner og bekendte, men også når hun skal planlægge ruter til destinationer hun ikke kender. Inge bor i Køge og rejser mest i hovedstadsområdet. Kasper, 23, er ofte ude af døren før der er tænkt over rejseplanen. Det er ofte at tingene ændrer sig i løbet af dagen, så Kasper bruger primært Rejseplanen på sin iphone app. Det er fint med afgangstider og ruter, men Kasper supplerer ofte Rejseplanen med Google maps når han skal finde rundt. Kasper kan godt lide at A- busserne og metroen er kommet, hvor man ikke skal kigge på køreplaner, men hvis han skal langvejs planlægger han dog en rute. Kasper bor på Nørrebro og rejser primært i zone 1 og 2. Jens, 46, er forretningsmand og rejser ofte på tværs af Danmark. Han tager dog tit toget, fordi han kan få noget fra hånden i kupeen. Jens bruger rejseplanen til at planlægge de mest optimale afgange i forhold til at komme helt til døren. Han har bil i Odense, hvor han bor, men tager han til København eller Århus er det med toget. Jens bruger også rejseplanen på sin mobiltelefon, når han er væk fra sin bærbare computer. I idégenereringsforløbet er de 3 typer blevet bragt i spil til at overveje forskellige ideer, og det er oplagt at lave brugertest med udgangspunkt i typerne. Som konceptet har udviklet sig er det primært en forbedring for dem der bruger 7
Rejseplanen i København. Derfor har jeg forsøgt at inddrage de 2 andre typer, så vidt muligt. DIN TUR TIL AT VISE VEJ Det kan være kompliceret og tidskrævende at inddrage brugere i de tidligere konceptfaser i ethvert udviklingsprojekt. Når Rejseplanen har et forum, hvor brugerne af deres services kan give gode forslag til forbedringer og alle forslag tilmed kan downloades i en Excel fil xiii, må man tage imod det med kyshånd. Din tur til at vise vej, hedder sitet, hvor man kan kommenterer, og alle idéerne myldrer frem i små farvede bobler. 460 kommentarer og idéer gemte sig på ide.rejseplanen.dk. Samtidig kan besøgende på siden tilkendegive hvilke af idéerne de synes om ved at bruge et Facebook term like. Jeg har kategoriseret og sorteret i idéerne for at få et overblik. Der er 13 kommentarer omkring mobilt website og 102 der har tilkendegivet at de er enige. Kommentarerne kredser mest omkring selve eksistensen af et mobilt site, men flere tilkendegiver også at det nuværende site ikke fungerer. Der er dog andre kategorier der stikker mere ud. Således er der 58 idéer og 322 likes der omhandler realtids opdatering af forsinkelser. Der er altså et bemærkelsesværdigt stort antal brugere, der savner funktioner der hjælper dem under rejsen når de er ude på deres rejseplan. En anden kategori der er populær er brugen af SMS service. Der er et stort antal brugere der gerne vil have betaling via sms integreret i service til telefoner, men også kombinationen af realtidsopdatering og sms er meget populær. På baggrund af brugernes tilbagemelding har jeg udviklet et koncept fra Rejseplan til rejseguide. Rejseplanen har et stort potentiale for at udnytte de indbyggede funktioner i smartphones og hjælpe brugeren med at være mobil. På nuværende tidspunkt kan rejseplanen fortælle dig hvordan du kommer fra A til B, men den hjælper dig ikke hele vejen til B. Grundtanken med konceptet er at Rejseplanen skal følge dig til dørs. Det er mit ønske at lave en løsning, der gør Rejseplanen til en følgesvend på turen med offentlig transport. Man kan på mange måder sammenligne det med, hvordan en GPS til bilen virker. Den følger dig fra dør til dør og tilpasser sig omstændighederne. Dynamisk og intelligent. Konceptet er ikke begrænset til en mobil website, men kan skaleres til alle platforme og brugertyper. Inge på 63 år har måske mest af alt brug for en rigtig 8
god printvenlig udgave af rejseplanen, som ikke er fyldt med unødvendig data, som tilfældet er nu. Hvis hun kan vælge afgangssted og destination på et kort og få billeder fra Google streetview med pile der fortæller hvilken vej hun skal gå fra stationen på print, kan papiret følge hende helt til dørs. Figur 1 - Moodboard Jens på 46 har muligvis mest brug for en applikation, som er skræddersyet hans pendlerbehov, og er en integreret del af hans mobiltelefon. Og når han så står i en fremmed by, vil en oversigt over stationerne være en stor hjælp. Jeg har valgt at sætte spot på et mobilt site, som kan erstatte eller supplere applikationen, som Rejseplanen i øjeblikket har til iphone. Med HTML5 er det nu blevet muligt at aflæse enhedens position, men integrationen med resten af hardwaren og andre applikationer på telefonen er begrænset. Det lokationsbevidste mobile website udfylder dog langt de største behov for mobil information. I konceptet er det oplagt at integrere sms/besked service ved forsinkelser og ændringer. Taxa Motor har et fantastisk system til smartphone, hvor der popper en besked op når taxaen nærmer sig. Det er ikke en sms eller email og forsvinder 9
igen når brugeren trykker. Et lignende system kunne bruges i et mobilt website og applikation. 10
STØJ Der er andre end rejseplanen, som har lignende behov og udfordringer med mobile websites. Jeg har kigget nærmere på 3 danske sites, som alle er inden for transport og som hver især er interessante. DSB har lavet m.dsb.dk, hvor de blandt andet har integreret rejseplanen på forsiden. Faktisk er DSB s udgave flottere og mere overskuelig. Man skal indtaste fra og til og vælge dato og tid i drop-down lister. Det minimerer brugerens tastetryk, og overblikket er rigtig godt på startsiden. Hovedmenuen ligger godt placeret i toppen, men designet er for kompakt til at navigationen er god. Man trykker nemt på den forkerte menu. Desuden virker det umiddelbart som om at køb af billet er integreret i menupunktet mobilbillet, men siden efterfølgende er blot oplysning om, hvordan man køber. Skuffende. At man så skal klikke et par gange mere på nogle gemte menuer for faktisk at få en forskrevet sms, hjælper ikke meget, for der kommer brugeren aldrig hen. I forhold til hvor mange informationer DSB forsøger at give på deres desktop site er det dog ret imponerende at man har formået at skærer så meget ind til benet. 11
København Lufthavn har lavet m.cph.dk og også her er der prioriteret med skarp kniv. Afgange og ankomster er i centrum, med den tanke at den mobile bruger enten skal nå et fly eller hente i lufthavnen. Der er desuden forsøgt at integrerer check-in, men det består af links til forskellige flyselskaber og er ikke brugervenligt nok. Til gengæld er lufthavnens fremragende sms service integreret i sitet, og med et tryk ud for afgangen og indtastning af nummer kan man få opdateringer. Smart. Menu strukturen er god og flad, men knapperne for små til tykke fingre. 12
Busselskabet har lavet mobil.movia.dk, hvor der også er et link til rejseplanen. Menu strukturen i websitet er virkelig dårligt, med en lang vertikal liste af menupunkter. Man skal scrolle i en uendelighed, og det virker som om der ikke er blevet prioriteret i indholdet. Men grafikken er virkelig venligt til mobiltelefoner. Store farvede tværgående linjer adskiller menuer og menupunkterne har klarer farver på lysegrå baggrund. Det er et rigtig godt eksempel på høj signal-til-støj ratio og har været en stor inspirationskilde, sammen med rejseplanens andre produkter, til det grafiske layout i mit bud på en mobil site. 13
M.REJSEPLANEN.DK Og ikke mobil.rejseplanen.dk det er en lille ændring, men 5 tastetryk på det lille qwerty keyboard på touch telefoner. Og den skal selvfølgelig selv redirecte, hvis man taster rejseplanen.dk Der er enormt mange detaljer at tænke over, når man skal designe så simpelt, som det er påkrævet til smartphones. Det er ikke det hele der er komme med, men jeg vil forsøge at give en forklaring på mine valg i designet. Arkitekturen i sitet har taget udgangspunkt i at den skal være så flad som muligt. Det kolliderer enormt meget med behovet for at have så lidt indhold som muligt på hver side. Jeg har arbejdet med 3 niveauer inden live-servicen starter. 14
Første niveau er hovedmenuen. Alle menupunkter er mulige søgninger på forbindelser eller afgange. Det er det brugeren åbner sitet for og det skal være i fokus. I forhold til applikationen til iphone har jeg flyttet informationsknappen op i øverste højre hjørne, så den ikke tager fokus fra hovedfunktionen. Andet niveau er de mulige forbindelser eller afgange på en given søgning. Her skal brugeren helst præsenteres for få relevante muligheder og hurtigt kunne gennemskue hvad der er relevant. Afgangstid, ankomsttid, rejsetid og antal skift. Tredje niveau er præsentationen af den valgte forbindelse. Her er detaljer om elementerne i rejsen og skift. Her kan brugeren også blive fulgt til dørs. Herefter kommer følgesvenden på banen. Jeg har lavet en video i slutningen som illustrerer, hvilken vej konceptet er tænkt. Integration med Google Streetview er oplagt og at få vist ruten på video vil få mange til at huske vejen. Vi husker bedst gentagelser. SMS integrationen er ikke med i prototypen. Et af hovedelementerne i mit design er brugen af kort til at søge. For at undgå tastetryk på et lille keyboard er søgning på kort blevet sat i centrum. Index siden er søgning på kort, og ruten bliver i sidste ende også præsenteret på kort. Der er dog også mulighed for at skifte til indtastning og listevisning undervejs. TAPPING Det er vigtigt at skabe genkendelighed for brugeren på tværs af platforme. Derfor har jeg også valgt at bruge nogle af de samme elementer som rejseplanen applikation til iphone. De 4 hovedmenuer ligner applikationen og titel-baren under menuen er inspireret af applikationen. Det er en god måde at integrerer titlen på siden med søgemuligheder, så brugeren hele tiden ved hvor på sitet man er. 15
Den primære vej gennem en søgning er gennem kortfunktion. Ved at bruge brugerens lokation og tid, er mange data allerede indtastet. Det kan selvfølgelig ændres, og man har også mulighed for at gå til listevisning, hvis man foretrækker. I prototypen har jeg brugt billeder til at illustrerer processen, men brugeren vil skulle finde sin destination på kortet og trykke søg rejse. Herefter vil man blive præsenteret for mulige forbindelser og vælge en. Kortnavigationen minimerer tastetryk og brugeren behøver ikke at kende adressen på destinationen. Når man i øjeblikket søger på rejseplanen, skal man specificere ret stringent, hvor man vil hen, og desuden vælge fra en liste, hvilken destination man nu mente. Om det Nykøbing Sjælland eller Nykøbing Falster f.eks. Den mere traditionelle indtastning og listevisning er blevet forbedret med bedre default indstillinger, som minimerer indtastning og skaber overblik. Når sted og tid sættes til her og nu, skal brugeren blot indtaste destination. I listevisningen er tilføjet en kolonne med første transportmiddel, så brugeren i en travl situation hurtigt kan se, hvad næste skridt er. I listevisningen kan man udvide søgningen til at gælde særlige forhold som elevatorer eller udelukke bestemte transportmidler. Desuden er der tilvalg af cykel, så busser bliver sorteret fra og gåtider bliver omregnet til cykeltider. 16
Favorit menuen er til brugeren der ofte planlægger rejser. Her kan indtastes en destination eller forbindelse med tilføj favorit. Indtastingsdata gemmes automatisk, og defaultindstillingerne er her og nu, så brugeren kan få en forbindelse med 1 tastetryk. Alternativt kan man se ruter mellem 2 lokationer. Her og nu menuen er det som Rejseplanen kalder afgangstavler. Det dækker over situationer, hvor brugeren gerne vil vide hvilke toge, busser og metroer der kører fra en bestemt lokation. Igen er defaultindstillingerne her og nu. Når man har fundet sin forbindelse kan man blive fulgt til dørs. Det sker ved smsbeskeder ved forsinkelser, men også en visuel gengivelse af ruten, som man kan have med i lommen. En video af stationer og ruten, gør det muligt for den rejsende at finde det rigtige spor eller undgå at tage bussen på den forkerte side af vejen. Når Google har filmet hele verden kan DSB vel godt filme stationerne. 17
Rejseplanen har i forvejen et samarbejde med Google, og det er oplagt at integrerer Google Streetview i Rejseplanen, så den kan følge dig helt til dørs. HTML6 Når man er inde på mobil.rejseplanen.dk i øjeblikket, er alle andre muligheder stort set bedre. Websitet er sandsynligvis lavet dengang mobiltelefoner ikke havde de muligheder de har i dag, og på den måde er den meget inkluderende. Mit bud på et mobilsite med større fokus på søgning, kort og identificérbar grafik og mulighed for favorit-forbindelser, er et løft for brugerne af smartphones. Jeg har dog måtte sande at det har været en stor opgave at udvikle koncept, kode og beskrive alene og mange ting er blevet udeladt. Brugerne er blevet inddraget i de tidlige faser af konceptudviklingen, og jeg har fået andre til at gennemgå sitet, men en egentlig brugertest har der ikke været tid til, så det står højt på listen over næste skridt i processen. Derudover er der nogle funktioner jeg gerne ville have arbejdet med. Integration af betalingssystemer og udfoldelse af et beskedsystem til live-opdatering, er spændende elementer, som ligger i tråd med konceptet. Det har været en stor udfordring at kode til smartphone, og især den langsomme opdateringstid i forhold til desktop browsere har trukket kodeprocessen ud. Det har dog været interessant at lærer lidt til HTML5 at kende. Jeg synes og håber at websitet og rapporten giver et indblik i processen og overvejelserne omkring konceptet, selvom der er udeladt en del i begge elementer. 18
Kilder: Beginning smartphone webdevelopment, Gail Rahn Frederick, Apress 2009.net magazine, june 2010 Rejseplanens oplysninger: rejseplanen.dk http://labs.rejseplanen.dk/konkurrencen/rejseplanen_idag/ http://labs.rejseplanen.dk/konkurrencen/rejseplanens_api/ Input fra brugerne: http://ide.rejseplanen.dk/ også vedlagt digital som bilag Om HTML5 udvikling: http://diveintohtml5.org/video.html http://diveintohtml5.org/forms.html http://24ways.org/2009/have-a-field-day-with-html5-forms Creuna om mobile løsninger: http://video.creuna.dk/video/910272/digital-briefing-2010-mobile i Rejseplanens hjemmeside ii Beginning smartphone webdevelopment iii Beginning smartphone webdevelopment s.5 iv Beginning smartphone webdevelopment s.163 v Beginning smartphone webdevelopment s.5 19
vi Creuna video vii Beginning smartphone webdevelopment s.181-183 viii Beginning smartphone webdevelopment ix.net magazine x Rejseplanens API xi Beginning smartphone webdevelopment s.169 xii Rejseplanen konkurrenceside xiii Se bilag Excel fil 20