Institutionen för datavetenskap Department of Computer and Information Science

Institutionen för datavetenskap Department of Computer and Information Science Examensarbete Mobilen först Framställning av en design för Östgötatrafikens mobila hemsida med fokus på användarna av Anna Larsson LIU-IDA/LITH-EX-A--13/023--SE 2013-05-30 Linköpings universitet SE-581 83 Linköping, Sweden Linköpings universitet 581 83 Linköping

Institutionen för datavetenskap Department of Computer and Information Science Examensarbete Mobilen först Framställning av en design för Östgötatrafikens mobila hemsida med fokus på användarna Anna Larsson LIU-IDA/LITH-EX-A 13/023 SE Linköping 2013 Handledare: Examinator: Anders Fröberg ida, Linköpings universitet Linus Engback Sogeti Barbro Kindgren Sogeti Erik Berglund ida, Linköpings universitet Institutionen för datavetenskap Linköpings universitet 581 83 Linköping

Sammanfattning Östgötatrafiken är ett länstrafikbolag i Östergötland och har idag en hemsida, en mobil hemsida och appar. De har sett att användningen av deras mobila hemsida och deras appar har ökat. För att skapa en bättre användarupplevelse samt för att minska de underhålls- och utvecklingskostnader som kommer med många system är en responsiv hemsida ett bra alternativ för dem. En responsiv hemsida innebär att ett system anpassar sig efter den skärmstorlek som den enhet som används har. Vad som visas och hur det visas beror på om det är en dator, en mobiltelefon eller en surfplatta som används. För att skapa en modern och innovativ hemsida valdes att fokusera på den mobila upplevelsen och att designa systemet för mobiltelefonen först. Syftet med studien var då att ta reda på vad användarna vill göra på Östgötatrafikens hemsida på mobilen samt att ta fram ett designförslag för systemet. Studien utfördes med fokus på användarna. Det första som gjordes var därför en användarstudie med hjälp av enkäter, intervjuer och observationer. Genom detta skapades en bild av användaren och dess behov på Östgötatrafikens hemsida via mobilen. En kravanalys gjordes för att ta reda på vad som var viktigt för användarna och för att se vad som kan förbättras och förändras med hemsidan. Ett designförslag ritades upp med hjälp av wireframes för de två viktigaste funktionerna. Funktionen Reseplaneraren låter användaren söka resor. I denna funktion har användarna fått fler valmöjligheter och sökresultatet visualiseras på ett mer lättöverskådligt sätt än tidigare. Funktionen Realtidskartan är ett nytt koncept som har skapats för att visualisera trafikinformation på ett modernt sätt. I kartan kan användaren se sin position för att få veta vilka hållplatser som finns i närheten. Användaren kan också se på kartan vart olika fordon är just då och om några trafikproblem finns för en tur. Utifrån användarstudien, kravanalysen och litteratur skapades ett användarvänligt system som låter användarna enkelt och snabbt utföra uppgifter. Detta bekräftades i det användbarhetstest som utfördes där ett högt resultat erhölls i den SUS-enkät som genomfördes. SUS-enkäten mäter systemet effektivitet och tillfredsställelse. Detta resultat är en del i det arbete som behöver göras för att skapa en responsiv sida till Östgötatrafiken. iii

Tack Denna studie är ett examensarbete på civilingenjörsprogrammet i informationsteknologi på Linköpings Universitet. Studien utfördes på Sogeti och jag vill tacka Helena Rosengren för att jag fick möjligheten att utföra examensarbetet där. Jag vill även tacka mina handledare Linus Engback och Barbro Kindgren på Sogeti för den hjälp och det stöd jag har fått under arbetets gång. Ett stort tack vill jag även ge till Jonas Landh på Östgötatrafiken för hjälpen med enkäten och intervjuer och för det trevliga bemötandet. Till sist vill jag tacka min familj och sambo för allt stöd jag har fått under utbildningens fem år. Linköping, Maj 2013 Anna Larsson iv

Innehåll Figurer Tabeller vii viii I Introduktion 1 Inledning 3 1.1 Syfte.................................... 3 1.1.1 Östgötatrafiken......................... 4 1.2 Problemformulering.......................... 4 1.3 Avgränsningar.............................. 4 1.4 Begrepp.................................. 5 1.5 Disposition................................ 5 II Litteraturstudie 2 Kravhantering 8 2.1 Intressenter................................ 9 2.2 Processer................................. 9 2.2.1 Utforskningsfas......................... 10 3 Användbarhet 11 4 Interaktionsdesign 12 4.1 Designprinciper............................. 13 v

vi INNEHÅLL 5 Mobil design 15 5.1 Mobilt användande........................... 18 6 Wireframes 19 7 Responsiv design 20 III Forskningsmetodik 8 Metod 25 8.1 Enkät................................... 25 8.2 Intervju.................................. 27 8.3 Observation............................... 28 8.4 Användbarhetstest........................... 29 8.4.1 SUS-enkät............................ 30 IV Resultat 9 Användarstudie 34 9.1 Enkät................................... 35 9.2 Observation............................... 38 9.3 Intervju.................................. 38 9.4 Sammanställning av användarstudie................. 39 9.4.1 Krav............................... 39 10 Wireframes 45 10.1 Reseplaneraren............................. 46 10.2 Realtidskarta............................... 54 11 Användbarhetstest 62 11.1 Resultat av test.............................. 63 12 Designförslag 65 V Avslutning 13 Diskussion 72 13.1 Användarstudien............................ 72 13.2 Kravanalysen............................... 73 13.3 Designprocessen............................. 74 13.4 Användbarhetstestet.......................... 75 13.5 Designförslaget............................. 76 13.6 Fortsatt arbete.............................. 77 14 Slutsats 78

Litteraturförteckning 79 A Enkät 84 B Användbarhetstest 88 Figurer 5.1 Interaktion: vart föremål ska placeras för högerhänta........ 17 7.1 Responsiv design: media queries.................... 21 7.2 Responsiv design: bilder ska fokusera på innehållet......... 22 9.1 Resultat på frågan Hur ofta reser du med Östgötatrafiken i procent.................................... 36 9.2 Resultat på frågan När reser du med Östgötatrafiken? i procent. 36 9.4 Resultat på frågan Hur ofta använder du hemsidan via mobilen eller appen? i procent......................... 37 9.3 Resultat på frågan Har du någon gång under det senaste halvåret gått in på Östgötatrafikens hemsida på en mobiltelefon eller använt Östgötatrafikens app? i procent............... 37 9.5 Åldersfördelning på de svarande................... 38 9.6 Resultat på frågan Vilka funktioner har du använt på hemsidan via mobilen eller via appen det senaste halvåret? i procent.... 42 9.7 Antal som svarade mycket viktigt på frågan Hur viktigt tycker du det är att följande funktioner finns på Östgötatrafikens hemsida via mobilen? i procent......................... 43 9.8 Analys av frågan Hur viktigt tycker du det är att följande funktioner finns på Östgötatrafikens hemsida via mobilen?........ 44 10.1 Startvy för Reseplaneraren....................... 46 10.2 Avancerad sökning............................ 47 10.3 Senaste sökning.............................. 48 10.4 Karta med möjlighet att välja från och till............... 49 10.5 Kalendervy................................. 50 10.6 Vy för sökt resa.............................. 51 10.7 Vy för sökt resa, utvidgad........................ 52 10.8 Vy för sökt resa, med byten....................... 53 10.9 Startvy för Realtidskarta........................ 54 vii

10.10Vy för aktuell plats............................ 55 10.11Vy för buss................................. 56 10.12Vy för trafikinformation......................... 57 10.13Vy för hållplatsen Linköpings resecentrum.............. 58 10.14Vy för mer information på Linköpings resecentrum......... 59 10.15Vy för filtrering.............................. 60 10.16Karta med linjer.............................. 61 11.1 Uppgiftsframgång i användbarhetstestet................ 63 11.2 SUS-värdet för de fem testpersonerna................. 64 12.1 Designförslag för startvyn till Reseplaneraren............. 66 12.2 Designförslag för vyn Senaste sökning................. 67 12.3 Designförslag för startvyn för Realtidskartan............ 68 12.4 Designförslag för vyn med hjälptext................. 69 Tabeller 9.1 Krav för Trafikinformation....................... 40 9.2 Krav för Reseplanerare......................... 40 9.3 Krav för Kartfunktion......................... 40 9.4 Krav för Mina sidor........................... 40 9.5 Krav för Information.......................... 41 9.6 Krav för Övrigt............................. 41 viii

Del I Introduktion

1 Inledning Användningen av mobiltelefoner och surfplattor bara ökar och ökar. Det kommer fler och fler skärmar, i olika storlekar och med olika upplösningar. Detta gör att ett företag som vill nå ut till sina kunder idag skapar system för många olika enheter till sina kunder, till exempel på datorer, mobiltelefoner och surfplattor. För ett företag som har en hemsida eller app för varje enhet innebär det höga utvecklings- och underhållskostnader. Detta problem går att lösa med hjälp av responsiv design. Responsiv design innebär att ett enda system anpassar sig efter vilken skärmstorlek som används och visar innehållet på bästa sätt för just den storleken. Wroblewski (2011) har skapat uttrycket Mobile first, med det menar han att webbsidor och appar ska byggas för mobila enheter först, innan systemet byggs för datorer och surfplattor. Detta skapar möjligheter att vara innovativ och kreativ, men det kräver också att innehållet prioriteras. För att ta reda på vad användarna vill göra i systemet så behöver en kravanalys genomföras. Enligt Kotonya and Sommerville (1998) kommer användarna inte att använda systemet om inte systemet uppfyller deras krav, därför är det viktigt att en gedigen analys genomförs med ett stort fokus på användarnas behov. 1.1 Syfte Syftet med detta arbete är att göra en undersökning kring en ny hemsida till Östgötatrafiken där fokus ligger på den mobila designen utifrån Wroblewskis (2011) filosofi att bygga webbsidor för mobilen först. Slutresultatet ska vara en kravlista på det användaren vill göra på hemsidan i mobilen och ett designförslag byggt med hjälp av wireframes av hur sidan skulle kunna se ut. 3

4 1 Inledning 1.1.1 Östgötatrafiken Östgötatrafiken är ett länstrafikbolag i Östergötland och har idag en hemsida, en mobil hemsida och appar. Det är många system som ska fungera på flera olika skärmar. Ett responsivt system skulle hjälpa Östgötatrafiken genom att de får färre kanaler att underhålla. Att göra en omdesign skapar även ett tillfälle att arbeta för en bättre användarupplevelse för kunderna. Östgötatrafiken använder sig idag av följande begrepp på sina webbsidor och i sina appar: Reseplaneraren Användaren kan söka en resa här Trafikinformation Visar information om störningar i trafiken Mina sidor En portal för användarna där de till exempel kan spara sina vanligaste sträckor och köpa biljetter Östgötatrafiken har ungefär 400 000 besökare på hemsidan 1 och ungefär 100 000 besökare på den mobila hemsidan 2 i snitt under en månad under 2012. 1.2 Problemformulering Vad vill användarna göra på en mobiltelefon på Östgötatrafikens hemsida? Hur vill användarna förbättra och anpassa Östgötatrafikens hemsida i mobilen. Hur skulle Östgötatrafikens hemsida i mobilen kunna designas utifrån vad användarna vill göra? 1.3 Avgränsningar Denna studie har endast fokuserat på den mobila designen. För att skapa ett helt system behövs design för fler delar, även för datorer och surfplattor. Designen har bara ritats upp med hjälp av wireframes och inte implementerats, därför är det inte säkert att det är möjligt att realisera designen. Vissa förändringar kan behöva göras för att systemet ska fungera. Studien har haft en tidsbegränsning på 20 veckor. Detta har inneburit att endast ett urval av användarna har kunnat kontaktas och att endast en iteration av användbarhetstester har utförts. Studien har utgått ifrån Linköping och är anpassad efter de färdmedel som finns i de centrala delarna av staden. Dock bör resultatet vara realiserbart på hela Östergötland och liknande länstrafikbolag efter mindre justeringar. 1 http://www.ostgotatrafiken.se 2 http://m.ostgotatrafiken.se

1.4 Begrepp 5 1.4 Begrepp Följande begrepp används i rapporten, vad begreppet syftas på i denna rapport förklaras nedan. Mobiltelefon Med mobiltelefon avses en smartphone med touchskärm. Mobil enhet En mobil enhet kan vara en mobiltelefon, en surfplatta eller en mindre dator som är mobil. Surfplatta En surfplatta är en handdator som har en touchskärm. Dator En dator är avsedd för att användas vid ett skrivbord. För att interagera med en dator används en mus och ett tangentbord. App En app är ett program som användaren kan ladda ner till sin mobiltelefon eller surfplatta. Upplösning Upplösning är ett mått på hur många pixlar per längdenhet som kan visas. Grafisk manual En grafisk manual innebär att det finns regler för vilka färger och stilar som ska användas. 1.5 Disposition Rapporten är indelad i fem delar: Introduktion, Litteraturstudie, Forskningsmetodik, Resultat och Avslutning. Del 1 är introduktion till studien och innehåller kapitlet Inledning där bland annat studiens syfte och avgränsningar gås igenom. Del 2 är en litteraturstudie med sex kapitel. Där beskrivs litteratur kring bland annat kravhantering och mobil design. Del 3 redovisar den forskningsmetodik som använts. Kapitlet beskriver forskningsmetoder och fyra olika undersökningsmetoder. Del 4 redogör det resultat som har funnits i studien. Det är uppdelat i fyra kapitel, de kapitel som redogörs är Användarstudie, Wireframes, Användbarhetstest och Designförslag. Del 5 som är en avslutning av studien innehåller två kapitel. Det första kapitlet Diskussion, diskuterar resultatet av studien och det andra kapitlet Slutsats, presenterar slutsatser och besvarar problemformuleringen.

Del II Litteraturstudie

2 Kravhantering Krav definierar vad systemet ska göra och kan även beskriva vilka förutsättningar systemet har. Eriksson (2008) anser att krav bör tas fram både för vad systemet ska göra och hur det ska utföras. Detta görs genom att dela upp kraven i olika typer, han beskriver funktionella och ickefunktionella krav. Funktionella krav redogör vad något ska göra, dessa krav kan beskrivas utifrån indata och utdata. Ickefunktionella krav redogör hur systemet ska fungera, dessa krav har betydelse för hur användarna uppfattar systemet. De ickefunktionella kraven behandlar användbarhet, tillförlitlighet, prestanda och underhållbarhet. Kotonya and Sommerville (1998) anser också att det är viktigt att ta fram krav både för vad systemet ska göra och hur det ska utföras. Systemets design beskriver hur något ska göras och författarna nämner följande argument för att specificera designen samtidigt som övriga krav definieras. Ofta används en specifik plattform som har en viss design Viss design för arkitekturen är nödvändig för att förstå relationer för systemet i stort Av budgetskäl kan det vara bra att arbeta med designen samtidigt som kraven tas fram När nya system tas fram idag blir det ofta problem på grund av att kraven inte har varit tillräckligt bra enligt Kotonya and Sommerville (1998). Om kraven inte är rätt framtagna kan det innebära att användarna blir missnöjda och inte använder systemet. För att förbättra ett system behöver ytterligare krav- och utvecklingsprocesser göras vilket medför ökade kostnader. Kotonya and Sommerville (1998) hävdar att det är dyrare att behöva rätta till fel i efterhand än att lägga ner tid på att skapa bra krav från början. Författarna har därför tagit 8

2.1 Intressenter 9 fram fyra punkter som bör tänkas på under kravprocessen för att undvika problem och otillräckliga krav: Kraven bör beskriva användarnas behov Krav är ofullständiga Det är svårt att ändra ett krav i efterhand Missförstånd mellan kunden och utvecklare sker ofta Även Eriksson (2008) beskriver flera problemområden, dessa handlar om att användarna, beställarna och kravinsamlarna har svårt att förstå varandra. De problem som Kotonya och Sommerville beskriver stämmer överens med de problem som Eriksson redogör för. 2.1 Intressenter Det finns flera olika typer av intressenter till ett system. Enligt Kotonya and Sommerville (1998) är det följande: Utvecklare Slutanvändare Ansvarig för systemet Utomstående experter, till exempel myndigheter Experter på systemets område Dessa intressenter har alla olika bakgrund och olika tekniska kompetenser. Samarbetet mellan rollerna, personernas personlighet och deras status i gruppen kommer att påverka vilka krav som tas fram och hur slutprodukten blir (Kotonya and Sommerville, 1998). Det är därför viktigt att värva rätt personer till projektet. 2.2 Processer Kotonya and Sommerville (1998) beskriver flera olika processer för kravhantering. Oavsett process gås fyra olika faser igenom: 1. Utforskning 2. Analys och förhandling 3. Dokumentering 4. Verifiering Eriksson (2008) använder sig av metoden Stjärnan, där gås sex faser igenom: 1. Insamling

10 2 Kravhantering 2. Strukturering 3. Prioritering 4. Dokumentering 5. Kvalitetssäkring 6. Förvaltning De olika författarnas steg är lika, skillnaden är att Eriksson har delat upp processen i fler steg, men samma innehåll finns i Kotonya och Sommervilles process. Processen av Kotonya and Sommerville (1998) innebär att det första steget utforskar vilka krav som finns utifrån intressenter, dokument och marknadsstudier. I det andra steget analyseras i detalj de krav som framkommit. Dessa krav ska förhandlas och godkännas. Dokumentering är den tredje fasen och i den ska de krav som accepterats skrivas ner. I det sista steget ska dokumentationen verifieras. Syftet är att kontrollera att kraven är konsekventa och fullständiga och det är även en möjlighet att se till att alla inblandade förstår det som står i dokumentet. (Kotonya and Sommerville, 1998) I denna studie gås endast det första steget från Kotonya and Sommerville (1998) process igenom och utifrån Eriksson (2008) modell så används det första och andra steget. Det är endast de stegen som kommer att beskrivas mer detaljerat och Kotonya and Sommerville (1998) benämning utforskningsfas används. 2.2.1 Utforskningsfas Utforskningsfasen börjar med att definiera syfte och mål för systemet. Efter det ska kraven samlas in utifrån de olika intressenterna. I utforskningsfasen finns det fyra dimensioner att ta hänsyn till enligt Kotonya and Sommerville (1998). De olika dimensionerna är: Branschen Kunskap inom området som systemet utvecklas i. Problemet Kunskap i det specifika problemet. Företaget Kunskap i hur systemet påverkar företagets affärsmål. Intressenterna Förståelse för alla intressenters mål och deras behov av systemet. Målet med fasen är att få med alla fyra dimensioners krav för att skapa en produkt som de olika intressenterna är nöjda med och vill använda. Det är extra viktigt att få med användarnas krav eftersom de inte kommer att använda produkten om dem inte är nöjda med den. För att bearbeta den information som samlats in under utforskningsfasen kan informationen beskrivas i olika delar och roller. Namn kan sättas på delarna och rollerna för att göra det tydligt vad som menas och hur det fungerar (Kotonya and Sommerville, 1998). En struktur som är lätt att överblicka bör skapas.

3 Användbarhet För ett människocentrerat interaktivt system är användbarhet viktigt. Enligt ISO-normen 9241-11 (1998) definieras användbarhet så här: Den grad i vilken användare i ett givet sammanhang kan bruka en produkt för att uppnå specifika mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt. Enligt Benyon et al. (2005) ger ett system med hög grad av användbarhet möjlighet att göra uppgifter effektivt. Det ger även användaren möjlighet att lära sig systemet på ett enkelt sätt. Benyons beskrivning stämmer överens med den definition som ISO har. För att åstadkomma en hög grad av användbarhet bör fokus vara på följande tre punkter som Gould m.fl. (1987) har utvecklat och som beskrivs av Benyon et al. (2005): Lägg fokus på användarna och deras uppgifter. Det är viktigt att förstå vem användaren är och vilket problem systemet ska lösa. Låt användarna få utvärdera systemet under utvecklingens gång. Arbeta i en iterativ process. Upprepa de olika faserna som genomförs eftersom det är svårt att göra allt rätt från början. Gould m.fl. (1987) har även insett utifrån de tre tidigare punkterna att en fjärde punkt behövs; det är viktigt att de faktorer som påverkar användbarheten bör influeras av varandra. 11

4 Interaktionsdesign Interaktionsdesign innebär att designa hur en användare interagerar med ett system. Ett interaktivt system kräver hög kvalité och att systemet anpassar sig efter människorna och deras behov. Benyon et al. (2005) beskriver att följande fyra objekt bör arbetas med när ett interaktivt system designas: Designen Vad är design och hur ska den användas? Design kan innebära flera saker när ett system utvecklas, till exempel ska en design göras för layouten för sidan och en design för färgschemat. Teknik Vilka olika typer av enheter och komponenter finns det? Enheter och människor talar olika språk och en svårighet ligger i att kombinera dessa språk. Hänsyn till indata och utdata till systemet bör tas. Indata handlar om hur människor matar in data, det kan till exempel vara genom att trycka på skärmen eller genom att prata till systemet. Utdata handlar om att fundera över storleken på skärmen, det kan också vara att fundera på om resultatet ska visas genom en video eller som text. Människor Vilka ska använda systemet och hur förbättrar produkten deras liv? Alla människor är olika och vill använda tekniken på olika sätt. Interaktiva system är enheter som svarar på handlingar utförda av människor. Benyon et al. (2005) beskriver att en nyckelprincip är att designa produkter så att användarna direkt ska förstå hur det ska användas och att de ska förstå vad de kan göra med produkten. Aktiviteter Vad kommer människorna göra med systemet och i vilken miljö? Aktiviteten kan ske på olika sätt, till exempel kan den göras frekvent eller sällan, det kan användas i ett led av flera olika aktiviteter eller då användaren har gott om tid eller är under tidspress. (Benyon et al., 2005) 12

4.1 Designprinciper 13 Det är viktigt att vara människocentrerad när ett interaktivt system designas. Det innebär att systemet anpassar sig efter människan och låter den vara kreativ och flexibel. Fokus bör vara på vad människor vill göra istället för vad tekniken kan göra. Motsatsen är att vara maskincentrerad och ett system designas då så som en maskin fungerar. (Benyon et al., 2005) Med hjälp av de fyra objekten ovan kan en analys utföras som Benyon et al. (2005) kallar en PACT-analys. Det innebär att designern ska hitta den nivå på tekniken som underlättar de aktiviteter användarna vill göra i olika områden. Analysen undersöker den aktuella situationen, försöker hitta förbättringsmöjligheter och visualiserar framtida möjligheter. 4.1 Designprinciper Benyon et al. (2005) har sammanställt en lista med designprinciper. Innehållet kommer ifrån flera förespråkare inom design. Principerna är uppdelade i tre kategorier. Designprincip 1-4 handlar om inlärning, princip 5-9 handlar om effektivitet och princip 10-12 handlar om anpassning. 1. Synlighet De funktioner som är tillgängliga och som används ska visas. Detta kan göras genom ljud och markeringar. Det är lättare att se än att försöka komma ihåg vad som finns. 2. Konsekvent Var konsekvent med hur systemet fungerar. Systemet ska kunna likna andra system både i stil och hur uppgifter utförs. 3. Familjärt Använd ett språk som användarna känner igen. Metaforer kan användas för att förklara saker. 4. Tydlighet Designa saker så användaren förstår vad det är för något. Var tydlig med vad saker har och vad de kan användas till. 5. Navigering Visa information om hur navigeringen fungerar. Det går att göra genom kartor och informationsskyltar. 6. Kontroll När det är möjligt, låt användarna ha kontroll. Visa tydligt vad systemet hanterar och vad som händer utanför. Användarna känner kontroll när systemet är konsekvent.

14 4 Interaktionsdesign 7. Återkoppling Ge fort återkoppling till användaren för att visa att aktiviteten har registrerats. 8. Återställning Låt användarna återhämta eller ångra sig från misstag och fel. 9. Begränsningar Låt begränsningar finnas så att användarna inte kan göra saker som dem inte borde. Varningar bör finnas när en användare gör kritiska saker som inte går att ångra. 10. Flexibilitet Skapa ett flexibelt system. Låt användarna göra saker på flera sätt och ge användarna möjlighet att påverka utseende och beteenden. 11. Stil Designa systemet på ett attraktivt sätt. 12. Gemytlighet Skapa ett system som är familjärt och vänligt. Designa ett artigt system som ger ett bra intryck.

5 Mobil design Wroblewski (2011) har skapat uttrycket Mobile first vilket innebär att hemsidor ska byggas för mobiler först. Detta gör att man tvingas att fokusera och prioritera efter de begränsningar som finns. Det skapar möjligheter att vara innovativ och kreativ. Wroblewski (2011) motiverar uttrycket med tre argument. Det första argumentet är att användningen av mobiltelefoner ökar explosionsartat. Det andra argumentet innebär att för att kunna designa för mobilen krävs det att fokus är på det som är viktigt, all information kommer inte att få plats. Det sista argumentet handlar om att det finns mer kapacitet då det första som görs är designen för mobilen, designern behöver inte begränsas till det sättet som webbsidor brukar designas på. Genom dessa argument menar Wroblewski (2011) att en design för mobiltelefonen är det första som ska göras, sedan görs designen till surfplattor och datorer. För att bygga en bra mobil upplevelse bör följande tre komponenter uppmärksammas enligt Fling (2009): Kontext Arkitektur för information Visuell design För att förstå kontexten behöver designern förstå vem användaren är och hur produkten kommer att användas. Designern behöver även förstå varför användaren kommer använda produkten. Kontexten som systemet ska användas i behöver analyseras och beaktas under hela designarbetet (Fling, 2009, Wroblewski, 2011). 15

16 5 Mobil design Användarna fokuserar på att hitta den information som de söker, alltså är arkitekturen för informationen viktig enligt Fling (2009). Arkitekturen ska därför arbetas med och organiseras så att användarna så fort som möjligt kan hitta den information som eftersöks. Den visuella designen avgör hur länge användaren vill använda produkten (Fling, 2009). Wroblewski (2011) introducerar begreppet one eyeball and one thumb. Han menar att användarna oftast bara utnyttjar ett öga och en tumme när de använder sin mobiltelefon. Detta innebär att vi behöver designa utifrån det. Det kräver att det är en enkel design där det går fort att utföra en uppgift (Wroblewski, 2011). Användaren ska inte behöva möta några hinder på grund av systemets utformning. Dessa tre komponenter är inte unika för mobil design utan stämmer överens med det som Benyon et al. (2005) beskriver i kap 4 kring interaktiva system. Han beskriver fyra objekt, dessa är design, teknik, människor och aktiviteter. Kontexten innebär att förstå användaren och hur de använder produkten, alltså hänger det ihop med Benyons människor. Arkitektur för design innebär att användaren vill ha ett system som hen hittar i och vet hur det fungerar, detta stämmer överens med Benyons aktiviteter. Visuell design handlar om systemets yttre vilket hänger ihop med Benyons design. Benyons fjärde objekt är ej med som ett objekt eftersom tekniken är alltid på mobilen. Det innebär att författarnas objekt/komponenter stämmer överens med varandra och det är alltså samma komponenter som designern bör ta hänsyn till oavsett teknik. Skärmstorlek En stor skillnad mellan att använda en mobiltelefon och en dator är skärmstorleken. Tidigare när en design för en dator har skapats så har ofta en fast bredd på designen använts, men det skapar idag problem då webbsidan ska fungera för många olika skärmstorlekar. Webbsidan kan då inte anpassa sig på ett snyggt sätt till alla storlekar. Skärmar har inte bara olika storlekar utan även olika upplösning och pixeldensitet. En lösning på detta problem är att ha en fri design som beror på procentsatser, då kan innehållet enkelt anpassa sig efter hur mycket plats som finns. (Fling, 2009) Innehållet behöver även anpassas för en mobiltelefon då allt inte kan få plats. Det är angeläget att endast de viktigaste funktionerna finns på skärmen eftersom det inte finns plats för överflödig information. Det är därför viktigt att prioriteringar görs. (Wroblewski, 2011) Interaktion De flesta mobiltelefoner idag använder sig av touch, alltså att fingrarna styr vad som ska göras. Det finns flera gester som går att göra med fingrarna och vilka som ska användas i ett system bör bestämmas i designprocessen. (Wroblewski, 2011) Eftersom fingrar är oprecisa och finns i olika storlekar bör saker göras tillräckligt stora för att användarna ska träffa dem. Enligt Wroblewski (2011)

17 ska saker göras ännu större än vad man tror. Vilken typ av händelse som sker avgör storleken på föremålet. För föremål som inte är jättekritiska föreslår Apple att de ska vara cirka 44x44 points, vilket innebär cirka 7x7 mm (Clark, 2010). Microsoft rekommenderar en storlek på 9x9 mm och Nokia föreslår 7-8 mm för höjd och bredd beroende på avståndet till nästa föremål (Microsoft, 2012, Wroblewski, 2010). Sammanfattningsvis så är ett föremål som är 7-9 mm högt och brett att föredra. Dock kan själva texten på föremålet vara mindre, det viktiga är att ytan att trycka på är i den nämnda storleken (Wroblewski, 2011). Om händelsen är kritisk bör föremålet vara ca 1-2 mm större för att undvika feltryckningar och även området mellan föremålen bör vara större (Wroblewski, 2011). De flesta människor är högerhänta och använder då främst höger tumme för att manövrera med mobiltelefonen. Enligt Wroblewski (2011) bör föremål placeras från vänster till höger och i mitten eller i nedre delen av skärmen. Figur 5.1 visar vart det är lättast att trycka (mörkgrönt), lätt (ljusgrön) och svårast att trycka (gult). Wro- Figur 5.1: Vart föremål ska placeras för högerhänta. (Baserad på blewski, 2011, s.72)

18 5 Mobil design 5.1 Mobilt användande Enligt Wroblewski (2011) kan interaktionen med en mobiltelefon kategoriseras på fyra olika sätt. De fyra kategorierna är: 1. Uppslagsverk Användaren vill snabbt ha ett svar på en fråga, ofta relaterad till personens plats. 2. Utforska/Leka Användaren har tid över och vill göra något som distraherar. 3. Statusuppdatering Användaren vill uppdatera sig om det senaste. 4. Skapa Användaren vill åstadkomma något och det ska gå fort. Dessa fyra sätt beskriver med vilket syfte en användare använder sin mobiltelefon. Det är lättare att anpassa innehållet i ett system till en specifik typ av användare. (Wroblewski, 2011)

6 Wireframes Wireframes är ett verktyg för att visualisera en design på ett enkelt sätt. En wireframe är en skiss av vart olika element ska vara placerade (Miller, 2013). Enligt Fling (2009) är syftet att visa hur användaren ska interagera med produkten. Kadlec (2013) instämmer och tillägger att det även skapar en möjlighet att se vilket innehåll som ska vara med. Genom att använda wireframes i ett tidigt skede kan en gemensam bild av projektet skapas (Miller, 2013). Designen kan skapas på olika detaljnivåer. Det bör bestämmas tidigt hur lik designen ska vara slutprodukten. Detta beror på hur mycket kunskap kunden har eftersom om designen har få detaljer behöver kunden och designern kunna fantisera fram en egen bild av produkten (Vegh, 2010). Om det är för mycket detaljer kan användaren distraheras av den färg och form som valts (Miller, 2013). Wireframes kan skapas på olika sätt, till exempel genom webbaserade program eller genom att rita på papper. Om ett datorprogram används är det vanligt med drag-and-drop -funktioner, det innebär att de moduler som ska finnas i vyn dras ifrån en meny dit den ska ligga. I vissa program går det även att ställa in olika skärmstorlekar för att kunna skissa hur sidan ser ut i olika storlekar. Det går även då att bestämma vilket innehåll som ska visas för de olika storlekarna för en responsiv sida. I systemet kan användaren testa att använda systemet precis som det kommer fungera när det är implementerat på riktigt. Det går att gå steg för steg igenom olika uppgifter vilket innebär att det är en bra miljö att göra tester på. 19

7 Responsiv design Idag är det vanligt att skapa olika webbsidor för olika enheter. Det kan innebära att det finns en webbsida för datorn, en för mobilen och en för surfplattan. Fördelen med detta är att innehållet anpassas efter den enhet som används, men det krävs mer tid och pengar att uppdatera och underhålla alla dessa olika webbsidor. Med hjälp av responsiv design kan en webbsida skapas som anpassar sig efter den skärmstorlek som används. Designen anpassar vilket material som visas beroende på vilken enhet som används, alltså om det är en mobil eller dator, och beroende på hur stor skärmen är. Det är då bara en webbsida som behöver underhållas. (Wroblewski, 2012) Enligt Marcotte (2011) och Kadlec (2013) innehåller responsiv design tre huvudingredienser. 1. En flexibel layout 2. Media queries 3. Flexibla bilder och medier En flexibel layout innebär att storleken på objekten bestäms i procent. Huvudkolumnen kan till exempel ha 60 % av utrymmet, en annan kolumn 30 % och en tredje kolumn 10 %. Detta gör att innehållet kan anpassa sig efter det utrymme som finns. Även storleken på texter och rubriker kan använda procent. Genom att sätta en storlek till en basenhet så kan andra texter sedan anpassa sina storlekar i förhållande till den, denna enhet kallas em. (Kadlec, 2013) En flexibel layout innebär också att ett rutnätssystem används. Rutnätet ger webbsidan balans och hjälper till att strukturera innehållet. Antalet kolumner som ska finnas bör avgöras av det innehåll som ska finnas på sidan, det kan vara 20

21 till exempel tre eller tolv stycken beroende på vad som är viktigt att visa och hur stor plats det tar att visa det. (Kadlec, 2013) Media queries innebär att det som ska finnas under vissa omständigheter definieras. Systemet kan ta reda på vilken skärmstorlek och upplösning som användaren har och sedan anpassa innehållet som ska finnas och hur det ska visas för just den skärmstorleken och upplösningen. För att bestämma hur innehållet ska visas kan brytpunkter användas för att skapa gränser för de olika skärmstorlekarna. Det går då att använda de traditionella mått som finns för mobiltelefoner och datorer. Ett alternativ till dessa brytpunkter är att låta innehållet bestämma när det kan brytas eller flyttas. Flödet på sidan får då bestämma vilka brytpunkter de olika enheterna ska ha. (Kadlec, 2013) Figur 7.1 visar hur media queries kan hjälpa till att bestämma vart olika innehåll ska finnas, beroende på den skärmstorlek och upplösning som finns, på bilden visas en dator, en surfplatta och en mobiltelefon. I figuren visas hur de olika områdena har olika storlekar och arrangeras på olika sätt beroende på enhet. Figur 7.1: Visar hur media queries kan definiera vart olika element ska vara placerade på olika enheter. Bilder gör att användarna får en bättre upplevelse av systemet enligt Kadlec (2013), men detta skapar ett problem när dessa bilder ska laddas ner i mobilen. Användarna vill att det ska gå snabbt att ladda ner en sida och om stora bilder finns så gör det att det tar längre tid för sidan att hämtas. Det finns flera