Navigationsmönster för responsiv utveckling till mobil webb

Examensarbete 15 högskolepoäng, grundnivå Navigationsmönster för responsiv utveckling till mobil webb Navigation patterns for responsive development towards mobile web Jakob Ebbinger Robert Karlsson Examen: Kandidatexamen 180 hp Examinator: Andreas Göransson Huvudområde: Datavetenskap Handledare: Göran Hagert Datum för slutseminarium: 2013-05-29

Sammanfattning Uppsatsen undersöker fyra navigationsmönster som kan tillämpas på responsiva webbsidor. Ett navigationsmönster består av själva placeringen av en webbsidas navigationsmeny samt eventuell interaktion en användare måste göra för att få tillgång till denna. Frågeställningen ämnar att utröna vilket av dessa fyra mönster som är bäst lämpat för att implementeras på webbsidor vars menyalternativ även har underkategorier. Studien använder sig av fritt tillgängliga mönster som modifieras och implementeras i fyra webbsidor, en för vardera navigationsmönster. Resultaten utifrån de intervjuer och observationer som utförts visar på att fliksystemet som finns i Paneled prototypen är det navigationsmönster som majoriteten av användaren upplevde som minst tidskrävande och mest överskådligt. I slutsatserna diskuteras det att det inte är optimalt att använda navigationsmönstret Paneled i e-handelssyfte utan ytterligare modifiering p.g.a. av användbarhetsproblem. Abstract This essay examines four navigation patterns that can be applied to responsive websites. A navigation pattern consists of the placement of a website's navigation menu as well as any interaction a user must do to gain access to this. The posed question aims to determine which of these four patterns that are best suited for implementation on websites whose menu items also have subcategories. The study makes use of freely available patterns that are modified and implemented in four websites, one for each navigation pattern. The results from the interviews and observations shows that the tab system that's included in the "Paneled" prototype is experienced as least time consuming and most orderly. In the chapter of conclusions it is stated that it isn't optimal to use navigation pattern "Paneled" for e- commerce purposes without further modification due to usability problems. Keywords: RWD, Responsiv, Navigation, Meny, Mobil, Webb

Innehållsförteckning Figurförteckning... 1 Begreppsförklaring... 1 1.0 Inledning... 2 1.1 Bakgrund... 2 1.2 Problemdiskussion... 2 1.3 Syfte och frågeställning... 3 1.4 Fokus och avgränsning... 3 2.0 Metod... 3 2.1 Litteraturstudie... 3 2.2 Användartester... 4 2.3 Testmiljö... 4 2.4 Intervjuer... 4 2.5 Testets utformning... 5 2.6 Metoddiskussion... 5 3.0 Teori... 6 3.1 Tillgänglighet... 6 3.2 Navigering på webbsidor... 6 3.3 Användbarhet... 7 3.4 Mobil teknik... 7 3.5 Responsiv webbdesign... 8 3.5.1 Media queries... 8 3.5.2 Layoutalternativ... 9 3.5.3 Användbara riktlinjer... 10 3.6 Navigationsmönster... 11 3.6.1 Bottom Nav Layout... 11 3.6.2 Top Nav Layout... 11 3.6.3 Paneled... 12 3.6.4 Sidebar on Mobile Only... 12 3.7 Design... 13 3.7.1 Design för små skärmar... 13 3.7.2 Navigationsdesign... 13 4.0 Empiri... 14 4.1 Bottom Nav Layout... 14 4.2 Top Nav Layout... 15 4.3 Paneled... 15 4.4 Sidebar on Mobile Only... 16 4.5 Summering... 17 4.5.1 Intervjuresultat... 17 5.0 Analys... 19 5.1 Bottom Nav Layout... 19 5.2 Top Nav Layout... 19 5.3 Paneled... 19 5.4 Sidebar on Mobile Only... 20 6.0 Slutsatser... 20 7.0 Referenser... 22

Figurförteckning Figur 1. Illustration över navigationens positionering i Bottom Nav Layout. Figur 2. Illustration över navigationens positionering i Top Nav Layout. Figur 3. Illustration över navigationens positionering i Paneled Layout. Figur 4. Illustration över navigationens positionering i Sidebar on Mobile Only Layout. Figur 5. Totaltid för samtliga utförda uppgifter i Bottom Nav Layout. Figur 6. Sammanställning av testpersonernas uppfattning av navigationsmönstret. Figur 7. Totaltid för samtliga utförda uppgifter i Top Nav Layout. Figur 8. Sammanställning av testpersonernas uppfattning av navigationsmönstret. Figur 9. Totaltid för samtliga utförda uppgifter i Paneled. Figur 10. Sammanställning av testpersonernas uppfattning av navigationsmönstret. Figur 11. Totaltid för samtliga utförda uppgifter i Sidebar on Mobile Only Layout. Figur 12. Sammanställning av testpersonernas uppfattning av navigationsmönstret. Figur 13. Totaltid för samtliga utförda uppgifter i de olika navigationsmönstren. Figur 14. Sammanställning av testpersonernas uppfattning av de olika navigationsmönstren. Begreppsförklaring Tredimensionellt navigationsdjup - Navigationsstruktur i tre nivåer. T. ex. Datorer Laptop Tillverkare URL - Uniform Resource Locator, texten som utgör en webbadress så som www.urlexempel.com UX - User Experience. Interaktionsdesign med syfte att främja användarupplevelse. Dragspelsmeny En meny med utdragbara poster. Varje element i posterna kan antingen agera som en länk till en destination eller dras ut på nytt för att utgöra ytterligare en underkategori. Swipe - En dragrörelse i sidled som utförs med ett eller flera fingrar. 1

1.0 Inledning Allt fler människor använder sin mobil för ärenden på internet. I slutet av 2012 bestod 13% av all internettrafik av anrop från mobila enheter såsom mobiltelefoner och surfplattor [17]. Jämför man den siffran med tre år tidigare då mobila internetanrop endast tog upp 1% av internet trafiken så ser man den intensiva utveckling som råder. 15% av svenska konsumenter köpte något online via sin mobil under 2012 [3]. I takt med att användarna besöker webben oftare med hjälp av sin mobiltelefon så börjar verksamheter anpassa sina sidor därefter [18, 16, 8]. Detta sker eftersom det nu finns teknik för att hemsidor anpassar sig efter vilken plattform den besöks ifrån utan att en separat sida som är utvecklad speciellt för mobilanvändning skall behöva anropas. Den här tekniken kallas responsiv webbdesign och är något av ett nybyggarområde. Här råder det inga standarder än utan experimentlustan, kreativiteten och idéerna flödar på många av webbens utvecklarbloggar och särskilt vad gäller navigationsmönster. Den svenska webbsidan Responsivelistan listar svenska responsiva webbplatser och har i skrivande stund 138 länkar. Av dessa är det endast sju stycken webbsidor vars menyer innefattar ett tredimensionellt navigationsdjup eller ett större navigationsdjup än så [22]. 1.1 Bakgrund Wrobleski har identifierat fem stycken layoutmönster som han finner vara de oftast förekommande bland responsiva webbsidor [25]. Dessa mönster har som uppgift att strukturera om innehållet på en webbsida i förhållande till den skärmstorlek på vilken den projiceras. Valet av layoutmönster återspeglas i navigationsmönstret, då sidans layout redan ska ha anpassat sig så pass mycket vid storleksförändringen innan koden tillhörande varje media query initieras. Koden som tillhör en media query bestämmer utseendet på webbsidan för det storleksformat som media queryn är satt till. Den kod som initieras behöver således inte fokusera på att arrangera om befintliga element. Koden ska istället lägga fokus på att framhäva interaktionsmöjligheterna i den nya storleken. Detta görs genom att anpassa interaktionsområden såsom knappar i enlighet med Fitts lag [14] samt att implementera en lämplig navigationstyp. Flertalet navigationsmönster finns redan och nya tillkommer [4, 5]. De navigationmönstren vi avsett att undersöka i den här studien är utvecklade av Luke Wrobleski och Jason Weaver efter Wrobleskis observationer gällande layout mönster [25, 26]. 1.2 Problemdiskussion Då allt mer informationsrika sidor anpassas till en mindre skärmyta desto viktigare blir det att användarens interaktion med webbsidan leder till det för användaren förväntade målet. Navigering blir således väldigt viktigt att ha i åtanke vid responsiv utveckling då användaren förväntar sig ett effektivt gränssnitt för att kunna utföra sitt ärende. Men vilket av de vanligt förekommande navigationsmönster inom responsiv webbdesign är effektivast? 2

1.3 Syfte och frågeställning Syftet med vår undersökning är att vi, utifrån den teori vi hittat om responsiv navigering och design skall utröna vilken navigationsmetod som är effektivast vid mobil navigering i ett tredimensionellt navigationsdjup som återfinns på e-handelssidor. Frågeställningen lyder följaktligen: Vilket navigationsmönster för mobilwebb är att föredra vid utveckling av en responsiv e-handelssida? 1.4 Fokus och avgränsning Studiens fokus är lagd på navigation och interaktionen mellan användare och gränssnitt vid responsiv webbdesign för mobil användning. Då den befintliga mängd navigationsmönster som finns, vida överstiger den tid som är avsatt för den här studien, så har vi valt att avgränsa vår studie genom att undersöka fyra stycken navigationsmönster. De fyra mönstren vi har valt har Luke Wrobleski och Jason Weaver tagit fram till ramverket Foundation [28]. Däremot så är ej navigationsmönstren unika för Foundation utan de återfinns även i andra ramverk för webbutveckling. Koden till navigationsmönstren har modifierats för att passa vår studie då syftet är att skapa en simulerad e- handel att utföra användartest på. 2.0 Metod I detta avsnitt redogör vi för de metoder vi valt som tillvägagångssätt med syftet att uppnå godtyckligt resultat. De metoder vi har använt för att komma fram till ett resultat är följaktligen litteraturstudier, observationer och intervjuer. 2.1 Litteraturstudie För att hitta relevant teori till den här studien har vi använt oss främst av litteratur som behandlar navigationsmönster för responsiv utveckling till mobil webb. Mycket litteratur har varit av digital karaktär som tex Kindle och PDF men det har även förekommit tryckt litteratur. Då tekniken är så ny och föränderlig så utgör internetsidor en del av referensmaterialet, då denna information ej var tillgänglig i andra format. En bra källa hittades för mobil användarbarhet och denna användes som guide för att hitta de riktlinjer som gällde mobilt användande. För den responsiva delen av teorin så hittades information om olika områden som webbdesign, navigationsmönster och layoutmönster. Litteraturen användes även för att förklara vad användbarhet är och hur viktigt just detta är för att användaren skall få en bra upplevelse vid interaktion. Exempel på sökord som använts: Responsive web design, webnavigation, navigationpatterns, layoutpatterns, usability, mobile web 3

2.2 Användartester Det finns olika anledningar till att göra ett användartest, ett av dessa är att hitta de problem som finns eller uppstår under användning [13, sid 414]. Det finns olika undersökningsmetoder att utgå ifrån om man vill göra ett användartest. I vår undersökning har vi valt en variant som kallas användbarhetstest [13, sid 15]. Detta då Lauesen menar att det är den mest effektiva metoden vid utvärdering av ett system ur aspekten människadatorinteraktion [1, loc 1695], i vilken användbarhet som begrepp ingår. Vad det gäller att välja hur många användare man skall utföra test på, så menar Lauesen att om användartesten utförs av noviser så bör man inte utföra test på fler än tre användare [13, sid 416]. Nielsen däremot säger att fem testpersoner är brukligt för att kunna utröna ett mönster och undvika redundans [21]. Amerikanska Department of Health & Human Services skriver i sin rapport om riktlinjer gällande användbarhet, att sex användare är tillräckligt för att identifiera problem med informationsarkitekturen vid navigering och andra övergripande design spörsmål [24]. Vi valde att utföra testerna på fem personer i två omgångar. 2.3 Testmiljö En mobil testmiljö skapas i form av en simulerad e-handelsida. De produktbilder som finns på sidan samt de produktkategorier som återfinns på sidans meny är hämtade ifrån den svenska hemelektronikbutiken Sibas webbsida. Utifrån den simulerade e-handelssidan skapas ett antal prototyper som får varsitt navigationsmönster implementerat. Samtliga navigationsmönster ges identiska menyer med samma innehåll. Prototyper är en lämplig metod för en sådan här studie eftersom de existerar för att antingen falsifiera eller validera designhypoteser [11, sid 263]. 2.4 Intervjuer För att få ytterligare förståelse för den data som samlas in genom användartesterna, så ämnas även kortare intervjuer att utföras med testpersonerna. Cooper, Reiman och Cronin har lagt fram åtta stycken riktlinjer för hur en kvalitativ undersökning skall utföras [1]. Fyra av dessa ansåg vi vara relevanta för vår undersökning. Återstoden av punkterna uppmuntrar användarens berättande under tiden testen utförs. Vi fann det mer intressant att låta användarna fokusera på uppgifterna som de tilldelats och agera instinktivt, än att de även skulle behöva tänka på vad de skulle säga. Därför ställde vi frågor efter testet var utfört. De fyra relevanta punkterna för undersökningen är: Utför intervjun där interaktionen utförs. Undvik ledande frågor. Undvik att göra användaren till en designer. Undvik tekniska diskussioner. 4

2.5 Testets utformning Sju slumpvist utvalda personer på Malmö Högskola samt tre utomstående utgör gruppen av testpersoner som ska utföra användartesterna. Testerna utförs i en vardaglig omgivning, där yttre faktorer kan påverka de olika resultaten i vår undersökning. Faktorer som kan vara påverkande kan t.ex. vara stress, oro, solljus och oljud. Samtliga användartester har utförts på en och samma smartphone, Apple Iphone 3GS. De fyra olika prototyperna laddas in i webbläsaren Safari. Samtliga testpersoner har vana av att navigera på webben med en mobil enhet. Åtta av de tio testpersonerna har erfarenhet av använda en Iphone, varav resterande två har endast erfarenhet av Android baserade smartphones. Testpersonerna får utföra samma fem uppgifter i samtliga prototyper, varför man får anta att inlärning genom återupprepning av uppgifterna kan ha påverkat tidsresultatet. Uppgifterna som skall utföras läses upp för vederbörande och ges även skriftligt. Testpersonernas interaktion med prototyperna har spelats in med mjukvaran Display Recorder för skärminspelning. Detta tillåter oss att återuppspela testtagnings förloppet för att kunna mäta av tider i syfte att sammanställa resultat och observationer. Efter att testen utförts har testpersonerna intervjuats där tonvikten legat på tre frågor som behandlade personernas uppfattningar om prototyperna de interagerat med. 2.6 Metoddiskussion I vår studie har vi valt att använda oss av kvalitativa undersökningar. De kvalitativa metodval som vi har valt är litteraturstudier, observationer samt intervjuer. Gulliksen och Göransson [7, sid 39-41] menar att en sådan triangulering ger ett mer heltäckande och bättre undersökningsresultat än vad en kvantitativ undersökning gör. Gällande våra metodval anser Cooper, Reimann och Cronin att de är bland de metoder som är mest användbara vid en kvalitativ undersökning [1, loc 1589]. De menar på att fördelen med att använda en kvalitativ undersökning är att det hjälper till att förstå domän, sammanhang och begränsningar av det som ska utvärderas. Författarna menar på att detta tillvägagångssätt ger en möjlighet att kunna identifiera olika mönster och beteenden mellan de potentiella användare av den produkt som skall undersökas på ett snabbare och enklare vis. [1, loc 1557]. 5

3.0 Teori I detta avsnitt går vi igenom relevant teori för att belysa vikten av att förstå tillgängligheten av information. Mobilanvändare har höga förväntningar om vad de skall kunna utföra på en mobiltelefon och vid mobilt webbsurfande. Användbarhet anses var väldigt viktig då det gäller interaktiva system då systemet skall vara ett stöd för användarna och kunna agera därefter. Syftet med att utveckla speciella webbsidor som är anpassade för mobil användning är att man skall kunna ta bort de funktioner som inte är nödvändiga vid mobil användning. Kapitlet tar upp vad responsiv webbdesign innebär då man optimerar en webbsidas layout efter skärmstorlek och dess skärmorientering. 3.1 Tillgänglighet Mobilanvändare har höga förväntningar om vad som skall kunna utföras på en mobiltelefon och vid mobilt webbsurfande [20, sid 21]. Användare utgår ifrån att det som kan utföras på en webbtjänst på en stationär dator, även skall kunna utföras ifrån en smartphone eller surfplatta. Att ta bort innehåll ifrån mobila webbsidor kan leda till tappat förtroende för tjänsten ifråga. Den stora utmaningen ligger då i att tillfredsställa användarens mobilsurfande genom att skapa en brytpunkt mellan de mobila och vanliga webbsidornas funktioner. Enligt Nielsens och Budius riktlinjer om mobil användbarhet så är det rekommenderat att en mobil webbsida har en länk till den vanliga webbsidan i de fall då det fattas innehåll som endast är åtkomligt på den vanliga webbsidan [20, sid 21]. Användaren bör ha tillgång till allt innehåll på en webbsida oavsett om innehåll har uteslutits på den mobila webbsidan. 3.2 Navigering på webbsidor En webbsidas navigation är kritisk för användarupplevelsen vid interaktion. Webbdesignern Tim Kadlec anser att en navigationsmeny bör uppfölja vissa kriterier [10, sid 87]. I dessa kriterier inbegrips att menyn är så pass intuitiv så att användaren känner att denna har kontroll. Och även att menyn bör kunna användas på olika enheter, dock med hänsyn till de olika enheternas begränsningar. Cooper m.fl. tar också upp detta då de skriver att navigation i form av en meny måste vara åtkomlig för alla och lätt att använda oavsett vilken storlek användaren har på sin skärm. Om en användare blir tvungen att navigera sig fram och tillbaka mellan olika fönster för att uppnå sina mål så leder detta till frustration över uppgiften som skall utföras. Om det finns för många fönster kan användaren komma att bli desorienterad och således tappar bort sig i gränssnittet, något som Cooper m.fl. kallar navigationstrauma [1, loc 5282]. För att förhindra detta så anser de att man bör tillhandahålla en översikt över de navigationsval som finns. Likaså bör man inventera antalet navigationslänkar för att reducera dessa till minsta möjliga antal för att användaren skall slippa navigera i djupa, komplexa trädstrukturer [1, loc 5357, 5580]. Garrett [6, loc 1447], känd inom UX är inne på samma spår då han skriver att navigationsdesignen måste kommunicera genom relationen mellan innehållet 6

och den webbsida som användaren tittar på, dvs kommunikationen hjälper användaren att förstå vilka av de tillgängliga navigationsval som finns och matchar det användaren söker. Detta belyser även Nielsen och Budiu [20, sid 73] då de påpekar, att det viktigaste med att länka information är att försäkra sig om att länkar och beskrivningar av kategorier beskriver vad användaren kommer att hitta vid slutet av länken. Då en användare navigerar ner på en webbsida så skall han/hon hela tiden veta under vilken kategori han/hon befinner sig. Zaphiris, Shneiderman och Norman [27, sid 13] skriver att navigationen bör utformas med minimalt djup och maximal bredd. Om det ej är möjligt så anser de att en meny av dragspelskaraktär bör endast användas upp till ett tredimensionellt navigationsdjup. Ett större djup än så minskar drastiskt på användarheten. 3.3 Användbarhet Användbarhet är tveklöst viktigt i ett interaktivt system som används dagligen. Systemet skall vara ett stöd för användarna och agera därefter [7, sid 56]. Detta definieras i ISO-standarden 9241 som 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 [9]. Detta överensstämmer med Allwoods [7, sid 57] definition av begreppet användarvänlig vilket innefattar aspekter som åtkomlighet, individualisering, hjälpresurser och förenligt med stöd för människans mentala funktionssätt. 3.4 Mobil teknik Mobila applikationer Enligt Nielsen och Budius så är mobila applikationer både effektivare och mer användarvänliga än mobila webbsidor. En mobilapplikation kan optimeras mer för ett specifikt ändamål än vad en mobilanpassad webbsida kan [20, sid 33-34]. Mobila webbsidor Syftet med utveckla webbsidor för mobil användning är att man ska kunna avlägsna innehåll som inte gör sig lika bra på en mobilenhet som på en stationär enhet. Detta inbegriper även de filer som laddas in, som då byts ut till filer av mindre storlek och upplösning. För att optimera sidan ytterligare så tas innehåll bort för att reducera antalet ord och sekundär information flyttas till andra sidor. Anpassning till den mindre skärmytan görs också genom att förstora upp interaktiva element enligt Fitts lag [14], för att användaren skall besparas från fat finger problemet [19, sid 20]. Utmaningen vid utveckling av mobila webbsidor ligger i att reducera innehållet utan att behöva begränsa samlingen av produkter. Det bör vara samma innehåll på den mobila webbsidan som det är på den konventionella webbsidan för att användaren skall få tillgång till samma produkter oavsett vilken plattform användaren nyttjar. Däremot bör en mobil webbsida ha mindre information om varje produkt och bistå med färre uppgifter om vad användaren kan göra med produkten. Detta är speciellt viktigt då det gäller innehåll på webbsidor som har e-handel [19, sid 2021]. 7

Mobila webbsidor tilldelas en egen url som skiljer sig ifrån sin stationära förlaga genom att mobilsidan läggs på en subdomän. Detta kännetecknas genom kontexten som deklarerar vilken typ av URL det är [2] kan ha namnet mobil. eller m. innan det ordinarie domännamnet. En mobil webbsida kan till exempel få en URL adress som http://www.mobil.teknikbutiken.se eller http://www.m.teknikbutiken.se. 3.5 Responsiv webbdesign Mobile browsing is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (and one of them is quite excellent). We re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we re faced with a greater number of devices, input modes, and browsers than ever before. [15] I en artikel från 2010 myntade Marcott [15] begreppet responsiv webbdesign. Han lade fram en samling tekniker och tillvägagångssätt för utveckling av en webbsida med den unika egenskapen att den anpassar sig efter sitt sammanhang. Responsiv webbdesign innebär att man optimerar en webbsidas layout efter skärmstorlek och skärmorientering. De olika elementen på webbsidan placeras i en flexibel form bestående av kolumner. I dessa kolumner placeras webbsidans rutnät som kan omformas efter skärmens dimension. När sidan skalas nedåt i plattformsdimensioner mätt, faller de kolumner som finns och bildar en enkel kolumn i mobilens webbläsare. Därför lämpar sig responsiv design för webbplatser där det innehåll som finns på den konventionella webbsidan även skall finnas med på mindre enheter men utan att det sparas in på användbarheten [20, sid 27-28]. 3.5.1 Media queries Media queries gör det möjligt att definiera vilken designstil som skall användas under speciella förhållanden. Tekniken tillåter utvecklaren att ställa frågor till webbläsaren om ett visst uttryck är sant eller falskt, sedan kan olika stilar skapas för att laddas in utifrån de svar man får tillbaks ifrån webbläsaren [10, sid 64]. Ett exempel är att om mediatypen screen används, så kommer webbläsaren att ladda den bestämda stil som är deklarerad för just den skärmstorlek som den projiceras på. Media queries inbegriper fyra stycken baskomponenter: Mediatyp - vilken mediatyp som skall specificeras för en enhet. Mediauttryck - testar mot en funktion om uttrycket är sant eller falskt. Logiska nyckelord - and, or, not eller Only som låter en skapa komplexa uttryck. Regler - som låter en justera skärmen för hur innehållet skall visas [10, sid 65]. Alla media queries måste innehålla en mediatyp, annars så sätts alla som standard, men deras beteenden varierar beroende på vilken webbläsare som används. Media queries styrka ligger i att det går att testa om en enhet 8

använder ett uttryck och om detta uttryck är sant eller falskt [10, sid 66]. Media queries kan ligga i en intern eller extern stilmall, vilken stilmall som skall användas väljs utefter vilken typ av designval som skall göras, de båda stilmallarna har både fördelar och nackdelar. Fördelarna med externa mediafrågor är att filerna blir mindre vilket resulterar i att de blir lättare att underhålla. En annan fördel är att de enheter som inte har stöd för mediafrågor ej behöver påverkas då en separat css-fil kan skapas för dem [10, sid 72-73]. 3.5.2 Layoutalternativ Fixed width Den vanligaste metoden för att implementera bredden på en layout på webben är att använda sig av en fixerad bredd som vi hädanefter benämner fixed width. Då en fixed width används ger det utvecklare möjlighet att skapa livliga grafiska webbsidor då man vet den exakta storleken som skall visas. Detta gör att innehållet kommer att se nästan identiskt ut på olika skärmstorlekar. Då man skall bestämma hur bred webbsidan skall vara så försöker man att använda sig av den dimension som flest antal besökare använder [10, sid 23]. Det största problemet då man använder sig av en fixed width är att man måste arbeta under många antaganden så som besökarens plattform, skärmstorlek och skärmupplösning. Många av dagens telefoner och surfplattor zoomar ut webbsidornas innehåll så att de får plats på enheternas skärmar vilket inte är så behagligt för användarna [10, sid 23]. Fluid layouts Ett annat alternativ är att använda sig av en rörlig layout där anpassning görs procentuellt och inte efter pixelstorlek. Med detta menas att webbsidans element justerar sig efter bredden på webbläsaren oavsett om det är en datorskärm, surfplatta eller telefon. Då en rörlig layout används så undviks många problem som den fixerade layouten för med sig. De problem som undviks är att den horisontella rullistan i webbläsaren försvinner och att det blir en bättre anpassning av det tomma utrymme utanför sidans innehåll som annars kan uppkomma vid användning av en fixerad storlek. Då en rörlig layout används är detta inte tillräckligt för att layouten skall visas på ett bra sätt oavsett om det visas på en tv eller smartphone [10, sid 25]. Elastic layout Är av samma typ som fluid layout med den skillnaden att anpassningen inte utgörs av pixelstorleken utan måttenheten em. En em är lika med den definierade textstorleken, detta kan exemplifieras med att om en text skulle vara av storlek 16 pixlar så skulle 1em vara lika med 16 pixlar. Då en elastic layout används så skalar denna av webbläsarens textstorlek till en standardstorlek som är 16 pixlar, vilket går att ändra i webbläsarens inställningar om användaren vill. När en elastisk layout används anpassar sig de webbsidorna som besöks efter användarnas bestämda inställningar som är gjorda i webbläsaren [10, sid 25]. 9

3.5.3 Användbara riktlinjer Då man designar för en responsiv mobilwebbsida så är det viktigt att samla ihop relevant text och flytta sådan text som inte är ytterst väsentlig för användaren och i så fall länka till en ny sida där det ges möjlighet att läsa resten av texten. Nielsen och Budiu understryker vikten av att skala av innehållet så att det lämpar sig till den enhet som innehållet skall visas på [20, sid 33]. Kadlec har sammanställt följande sex faktorer man bör ta i beaktning inför utveckling av en responsiv webbsida [10, sid 128-129]: Prestanda Är en integrerad del av användarens erfarenhet. Det som fungerar på en enhet kanske inte fungerar på en annan enhet. Sammanhang Användarens uppfattning av en webbsida beror på i vilket sammanhang den besöks. Olika enheter kan användas till olika ändamål och i olika miljöer. Val av innehåll Det är viktigt att omorganisera eller omstrukturera innehållet som skall visas för användaren så att det inte samlas under varandra i en kolumn, dvs om inte innehållet omstruktureras så kan hierarkin försvinna. Tidsinvestering Det tar längre tid att utveckla en webbsida med responsiv design. Innan utveckling kan börja så bör man kartlägga vad det finns för enheter, vilka enheter som webbsidan bör ha stöd för samt hur en användare med en viss enhet förväntar sig att webbsidan ska uppföra sig. Webbläsarstöd Många mobila enheter får problem då webbsidor skalas ner ifrån normal skärmstorlek till mobil storlek. Detta kan lösas genom att man utvecklar för den webbläsare med minst kompatibilitet först och sedan använder sig av media queries för att tillgodose de övriga webbläsare som innehar ett bättre stöd för moderna tekniker [10, sid 130-132]. 10

3.6 Navigationsmönster Ett designmönster är en beskrivning av ett problem och grunden till dess lösning skriver Sommerville [23, sid 189] och ordet mönster menar på något återkommande eller kan tillämpas flera gånger så som en mall. Ett navigationsmönster är således ett mönster som består av själva placeringen av en webbsidas navigationsmeny samt eventuell interaktion en användare måste göra för att få tillgång till denna. 3.6.1 Bottom Nav Layout Figur 1. Illustration över navigationens positionering i Bottom Nav Layout. Navigationsmenyn är placerad på botten av sidan när man besöker sidan med en smartphone. Användaren förflyttas dit vid tryck på menyknappen som återfinns i headern. Menyknappen länkar till ett ankare som är fäst vid menyn i botten vilket gör navigations-mönstret väldigt snabbt. Däremot så kan användaren bli desorienterad av förflyttningen mellan övre och nedre delen av sidan [4]. Menyn i sig är av dragspelskaraktär för att kunna rymma det tredimensionella navigationsdjupet. 3.6.2 Top Nav Layout Menyn är dold ovanför sidan och fälls ner likt en rullgardin genom tryck på meny knappen. Menyn fälls ner där användaren trycker på menyknappen vilket gör att menyns position ej är desorienterande för användaren [4]. Menyn måste stängas manuellt med tryck på menyknappen. Likt Bottom Nav så är menyn i sig av dragspels-karaktär. 11

3.6.3 Paneled Ett fliksystem utgör ett steg av navigationen och vardera flik inne-håller i sig ytterligare en meny med två navigationssteg. Utifrån använda-rtester på webbsidor så anser Krug att fliksystemet är så visuellt distinktivt att det är svårt att mista för något annat än navigation [12, sid 80]. Cooper m.fl. tycker att flikar är ett sätt att lösa navigationsproblem, så länge de ej är för många eller att användaren anser att de är felplacerade [1, loc 5284]. Nielsen anser att flikar endast bör användas för att växla mellan vyer inom samma kontext och ej för att navigera till andra sidor [19]. 3.6.4 Sidebar on Mobile Only Figur 2. Illustration över navigationens positionering i Top Nav Layout. Menyn är likt Top Nav dold utanför skärmen men fälls in från vänster sida. Likt Bottom Nav och Top Nav så är menyn i sig av dragspelskaraktär. Detta navigationssätt återfinns i smartphoneapplikationer och kan således redan vara bekant för användare [4]. Menyn måste stängas manuellt med ett tryck på meny-knappen. Figur 3. Illustration över navigationens positionering i Paneled. Figur 4. Illustration över navigationens positionering i Sidebar on Mobile Only. 12

3.7 Design Enligt Nielsen och Budiu [20, sid 24] bör man designa ett användargränssnitt genom att betona styrkan i tillgänglig input och output i de olika enheterna och arbeta för att minska deras svagheter. Musen som interaktionsverktyg och det mänskliga fingret som touchskärmens input har olika styrkor vilket är en anledning till att skapa olika användargränssnitt till konventionella webbsidor och mobilwebbsidor. De viktigast permanenta objekten i en applikation är huvudfönstrets titel och menyrad. Om det skulle ske oväntade förändringar i en applikations meny så skulle detta resultera i att användaren skulle tappa förtroendet för applikationen, detta gäller för menyobjekt såväl som individuella menyer. Om en applikation har ett verktygsfält så bör det också ha en symbol som användaren känner igen [1, loc 5406]. 3.7.1 Design för små skärmar Att skriva och interagera med en liten tryckkänslig skärm kan vara svårt, speciellt om målet som man skall trycka på är för litet. Ju mindre ett tryckkänsligt mål är, desto svårare och mer tidskrävande är det för en användare. Enligt Nielsen och Budiu [20, sid 78] så är idealet för tryckkänsliga mål 1cm x 1cm. De anser att bredden har en större betydelse än höjden. Vid mobil utveckling så är det av stor betydelse att minimera de kognitiva kostnaderna som antal klick, scrollningar och förflyttningar som användaren måste göra för att interagera med gränssnittet [20, sid 80]. 3.7.2 Navigationsdesign Ett användargränssnitt på en stationär dator bör alltid ha ett enkelt navigationsutrymme som undviker en djup hierarki för att underlätta för användaren. Det begränsade utrymmet som en mobilenhet tillhandahåller måste därför vara väldigt välstrukturerat för att förhindra desorientering. Nielsen och Budiu [20, sid 26] anser att navigationsmöjligheterna ska reduceras för att det ej är möjligt att visa all information på varje sida. 13

4.0 Empiri I följande avsnitt återges de empiriska resultat för vart och ett av de fyra navigationsmönster som testats samt en summering av testpersonernas åsikter om de samma. 4.1 Bottom Nav Layout Utförandet av de tilldelade uppgifterna tar testpersonerna från 54,8 sekunder och upp till 238,2 sekunder (Figur 5). Testperson ett genomförde uppgifterna snabbast, och testperson sex tog längst tid på sig. Hälften av användarna börjar med att scrolla till botten och upptäcker på så sätt navigationsmenyn. Figur 5. Totaltid för samtliga utförda uppgifter i Bottom Nav Layout. I Figur 6 kan man utläsa att två användare är missnöjda med menyns placering. Två användare anser att de ej har en adekvat översikt över vart de befinner sig i gränssnittet när de utför uppgifterna. En användare anser att navigationsmönstret utgör ett markant problem vid navigation. Sex personer hittar navigationsmenyn genom att scrolla nedåt på sidan. Fyra stycken testpersoner använde menyknappen för att komma till menyn. Menyknappen fungerade ej för en användare varpå han scrollade nedåt och fann menyn. Figur 6. Sammanställning av testpersonernas uppfattning av navigationsmönstret. 14

4.2 Top Nav Layout Det sammanställda resultatet för Top Nav Layout visar att en majoritet håller sig under 75 sekunder (Figur 7). Testperson ett blir färdig på 49 sekunder och testperson tre tar längst tid på sig med 238 sekunder. Figur 7. Totaltid för samtliga utförda uppgifter i Top Nav Layout. Fyra personer tycker ej om menyns placering (Figur 8). En av de tio tillfrågade testpersonerna anser att översikten är undermålig och tre personer tycker inte att navigationsmönstret är lämpligt för uppgifterna. Figur 8. Sammanställning av testpersonernas uppfattning av navigationsmönstret. 4.3 Paneled Testperson sju utförde de tilldelade uppgifterna på 56.4 sekunder, vilket är den snabbaste tiden för navigationsmönstret. Testperson två var färdig efter 127 sekunder (Figur 9) och det är således den långsammaste tiden. 15

Figur 9. Totaltid för samtliga utförda uppgifter i Paneled. Vad gäller sammanställningen (Figur 10) av frågorna så kan det uttydas att, två personer har invändningar mot menyns placering. Däremot anser samtliga att de har god översikt medan fyra personer anser att navigationsmönstret ej är till belåtenhet. Det fanns användare som visade på fat-finger problemet då de skulle navigera i Paneled, då de tryckte med sitt finger uppe i headern i stället för att trycka på länken i menyraden. Observationerna visade också att en del personer använde webbläsarens tillbakaknapp för att navigera. Figur 10. Sammanställning av testpersonernas uppfattning av navigationsmönstret. 4.4 Sidebar on Mobile Only Den snabbaste tiden för de utförda uppgifterna är 78 sekunder och det är än en gång testperson sju. 169,8 sekunder är den långsammaste tiden och det stod testperson sex för (Figur 11). 16

Figur 11. Totaltid för samtliga utförda uppgifter i Sidebar on Mobile Only Layout. Fyra personer anser att menyns placering ej når upp till nivån godkänd. Likt Paneled så tycker alla testpersonerna att de har en god överblick men nio av tio tycker inte att navigationsmönstret lämpar sig i det aktuella sammanhanget (Figur 12). Majoriteten av användarna upplevde problem då de tryckte på menyknappen i navigationsmönstret. Vissa användare ändrade läge på telefonen ifrån porträtt till landskap. En användare tryckte på menyknappen för att öppna samt stänga menyn. En del personer drog (swipe) med sitt finger ifrån höger till vänster. Vissa användare tryckte till höger om menyn efter att de gjort sitt val vilket inte ledde till något resultat, en del av användarna scrollade ner på sidan. Figur 12. Sammanställning av testpersonernas uppfattning av navigationsmönstret. 4.5 Summering Paneled visar på den kortaste uppmätta tiden av uppgifterna som utfördes (Figur 13). Näst kortast tid gav Top Nav Layout. Sidebar on Mobile Only är den näst långsammaste uppmätta tiden. Bottom Nav Layout visar den långsammaste tiden för utförda uppgifter. 4.5.1 Intervjuresultat Det slutgiltiga sammanställda resultatet av intervjuerna visade att i navigationsmönstret Bottom Nav Layout var det endast två av tio personer som ansåg att placering på denna meny ej var godkänd. Två personer 17

upplevde att de hade en dålig uppfattning om vilket steg i menyn de befann sig i under interaktionen. Det var en person som upplevde navigationen ej var godkänd. Figur 13. Totaltid för samtliga utförda uppgifter i de olika navigationsmönstren. Top Nav Layout resultaten visade att det var fyra personer som upplevde att menyn var felplacerad. En person tyckte att de fick en dålig uppfattning om i vilket menysteg de befann sig i medan tre stycken upplevde att de hade navigationsproblem. Paneled resultaten visade att två personer upplevde att det var en dålig placering på menyn. Ingen av användarna tyckte att de hade en dålig uppfattning om i vilket menysteg de befann sig i medan det var fyra stycken som upplevde problem med navigationen. Sidebar on Mobile Only upplevdes av fyra personer som att menyn inte hade en bra placering. Det var ingen som tyckte att de fick en dålig uppfattning om vart de befann sig i menyn men det var endast en användare som upplevde navigationsproblem. Figur 14. Sammanställning av testpersonernas uppfattning av de olika navigationsmönstren. 18

5.0 Analys Vi har valt att analysera och presentera de faktorer och data som vi har samlat in ifrån våra observationer och intervjuer som vi utfört. I analysen har vi försökt att hitta olika mönster och samband mellan de olika navigationsmönsterna samt hur dessa påverkar de olika navigationsresultaten. Resultaten har visat att det finns en koppling mellan de resultat vi har fått ifrån intervjufrågorna och de olika navigationsmönsterna som vi har undersökt. 5.1 Bottom Nav Layout Då detta navigationsmönstret har uppmätt längst tider så är det lätt att tro att påståendet om desorientering som Frost [4] skriver om stämmer. Detta falsifieras däremot om man ser till vad användarna själva tycker, då åtta testpersoner anser att översikten är godkänd. Och nio personer anser att navigationsmönstret är bruksdugligt för uppgifterna. Skärminspelningarna visade att endast fyra personer använde sig av menyknappen. Sex personer började med att scrolla nedåt på sidan vilket ledde dem till navigationsmenyn. Menyknappen fungerade ej för en användare varpå personen scrollade nedåt och fann på så sätt navigationsmenyn. Inspelningarna visade även att tre personer använde sig av webbläsarens tillbakaknapp för att navigera tillbaka ifrån tidigare menyval. Vår bedömning av detta beteende är att dessa personerna är vana vid äldre Android versioner, då de har en fysisk tillbakaknapp för just det ändamålet. 5.2 Top Nav Layout Navigationsmönstrets tider har uppmätts till att vara det näst kortaste. Ändå ansåg fyra testpersoner att menyns placeringen ej var godkänd. Vi håller med Frost [4] angående mönstrets orienterande position och tror att statistikens utfall beror snarare på åsikter om menyns navigationsdjup, än dess placering. En meny med ett mindre djup hade säkerligen gett ett annat resultat. Skärminspelningarna visade att det var fyra personer som började med att scrolla upp och ner på sidan, troligtvis för att de först skulle få en överblick över sidan, först därefter så tryckte de på menyknappen för att komma till menyn. 5.3 Paneled Navigationsmönstret visar kortast tider av de fyra som utvärderats. Samtliga användare anser dessutom att överblicken är godkänd vilket gör mönstret anmärkningsvärt. Däremot så såg vi att flikarna var för smala på bredden pga deras antal, vilket Cooper m.fl. tar upp [1, loc 5284]. Detta uppdagades då två användare, vad vi utgår ifrån är feltryck från deras sida, tryckte på headern 19

istället för en av flikarna vilket visar på fat-finger problemet [20, sid 20]. Däremot tycker vi inte att Nielsens [20, sid 20] ideala mått för tryckkänsliga mål är realistiska för omfattande navigation på en webbplats som besöks genom en mobiltelefon, då de skulle ta för mycket plats i anspråk. Då samtliga testpersoner anser att överblicken är godkänd så är det tydligt att Krug har rätt [12, sid 80]. Flikarna är svåra att misstolka däremot förvånar det oss att fyra testpersoner ej anser att detta navigationsmönster är lämpligt för ändamålet. Ett förslag på något som kan göras annorlunda, då vår prototyp har statiska flikar är att just göra flikarna dynamiska. Dynamiska i den mening att den rad de befinner sig på hade varit swipe -bar vilket hade tillåtit både större storlek på flikarna samt fler flikar. Precis som i Bottom Nav Layout så visade inspelningarna att det fanns personer som använde sig av webbläsarens tillbaka-knapp för att navigera tillbaka ifrån tidigare menyval. Även i denna bedömning så anser vi att personernas är vana vid äldre Android versioner, då de har en fysisk tillbakaknapp för just det ändamålet. 5.4 Sidebar on Mobile Only Menyns placering är överlag godkänd vilket nog hänvisas till tidigare erfarenhet [4]. Däremot så bidrar avsaknaden av en tydlig stängningsknapp till att nio av tio ej fann navigationsmönstret godkänt. Testpersonerna visade på intressanta interaktionsbeteenden innan de kom fram till hur de skulle göra för att manuellt stänga menyn och nå sitt mål. Sju av dessa swipade fram och tillbaka för att försöka fösa undan menyn och två användare vände mobiltelefonen i landskapsläge, den ene som ett snabbt experiment, den andre tämligen mer ihärdigt. Vi har kommit fram till tre sätt som man kan gå tillväga för att göra vår prototyp mer tillgänglig. En tydlig stängningsknapp ovanför menyn. Att texten på den befintliga menyknappen ändras när menyn är utfälld. Eller att javascript nyttjas för att fälla undan menyn när val är gjort. 6.0 Slutsatser Vi har i den här studien undersökt navigationsmönster som tilldelats en meny med ett navigationsdjup i tre nivåer. Detta är något som i skrivande stund, inte förekommer ofta på responsiva webbplatser, åtminstone inte när sidan skalats ned till mobil nivå. Majoriteten av de responsiva navigationsmönster som finns idag är inriktade på ett endimensionellt navigationsdjup. Vi tror att så är fallet för att det upplevs som lättare och mer underhållande för utvecklare att experimentera med. Att tillsätta ytterligare navigationsalternativ i underkategorier på en begränsad yta kan komma att kräva helt andra lösningar än de som finns tillgängliga. Problematiken ligger då i att det mobila webbsurfandet har ökat markant och fortsätter att öka och att Responsiv Design är ett hett ord som ligger i tiden. Fler företag vill tillämpa denna webbdesignstrend på sina egna hemsidor och då känns det naturligt att även e-handel och andra företag vars sidor kräver en djupare navigation kan komma att göra det. Därför fann vi det intressant att titta på några av de vanligt förekommande mönster och se om de kunde användas för en djupare 20

eller mer omfattande navigationsmeny än de som blott innehåller en nivå av länkar. Av våra resultat att döma så är det fliksystem som återfanns i vår Paneled - prototyp både tidseffektivast och mest överskådligt av de vi utvärderat. Däremot så ställer detta navigationsmönster krav på utformandet för att enligt litteraturen, kunna klassas som användarvänligt. Flikarna får inte vara för många till antalet på skärmen samtidigt, eftersom det påverkar både storleken på den tryckkänsliga ytan och läsbarheten. Vår prototyp fallerade i det anseendet då den innehöll fem stycken flikar varav texten i den sista av dessa inte riktigt fick plats. Trots detta gav majoriteten av testpersonerna prototypen godkänt. Navigationsmönstret "Paneled" var även det enda som tvingades dela upp menyn i fler delar, vilket i detta fallet var två delar. Kategori ett utgjorde flikarna och de i sin tur innehöll en dragspelsmeny som innehöll kategori två som hade underkategori tre. Resterande navigationsmönster innefattade en dragspelsmeny som huserade samtliga tre kategorier. Denna uppdelning kan mycket väl vara en bidragande orsak till testpersonernas känsla av att ha översikt över var dom befann sig. Huruvida detta navigationsmönster är bäst lämpat för e-handel eller inte är svårt att ge ett konkret svar på, då det som nämnts ovan kräver ytterligare arbete för att göras användarvänligt. Så det är ej optimalt att använda det befintliga mönstret rakt av i sitt projekt. Däremot så är det i sin nuvarande form, otvetydigt det navigationsmönster som gett mest positiva resultat i vår undersökning. En mer omfattande studie hade kunnat tittat på om de användbarhetslösningarna vi föreslagit till "Paneled"-mönstret gett den effekt vi förutspår. Vidare så hade en sådan studie även kunnat inkludera surfplattsformatet och de eventuella riktlinjer det finns att följa där vid webbutveckling. Då den här studien utgått ifrån användartester utförda på en Apple Iphone så är ett förslag ifrån vår sida för framtida forsknings att utföra en studie där en Android baserad smartphone används och se om avvikelser i beteende och uppfattningar kan uttydas. 21

7.0 Referenser [1] Cooper, Alan & Reiman, Robert & Cronin, David. (2007) About Face 3: The Essentials Of Interaction Design [Kindle edition]. Wiley. 3 edition. Canada. ISBN: 978-0-470-08411-3. [2] Coulouris, George, Dollimore, Jean, Kindberg, Tim & Blair, Gordon. (2011) Distributed Systems - Concepts and Design, 5th edition, Boston: Addison- Wesley. [3] DIBS (2012) E-handelsindex. http://news.cision.com/se/dibs-paymentservices/r/dibs-e-handelsindex-2012-visar-att-handel-via-mobiler-blivit-enviktig-del-av-e-handeln,c9310029 [Hämtad 2013-04-26]. [4] Frost, Brad. (2012) Responsive Navigation Patterns. http://bradfrostweb.com/blog/web/responsive-nav-patterns/ [Hämtad 2013-02-27]. [5] Frost, Brad. (2012) Complex Navigation Patterns for Responsive Design. http://bradfrostweb.com/blog/web/complex-navigation-patterns-forresponsive-design/ [Hämtad 2013-02-27]. [6] Garrett James Jesse. (2010) The Elements Of User Experience: User- Centered Design For The Webb And Beyond [Kindle edition]. New Riders. 2 edition. ISBN: 978-0-321-68368-7. [7] Gulliksen, Jan & Göransson, Bengt. (2011) Användarcentrerad systemdesign. Lund. Studentlitteratur. 1:8. ISBN 978-91-44-02029-7. [8] Ingre, Jorun (2012) Öresundskraft satsar på responsiv webbplats. http://capdesign.idg.se/2.990/1.469970/oresundskraft-satsar-pa-responsivwebbplats [Hämtad 2013-04-29]. [9] International Organization for Standardization.(1998) ISO 9241-11:1998 - Ergonomic requirements for office work with visual display terminals (VDTs) -- Part 11: Guidance on usability. http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm? csnumber=16883 [Hämtad 2012-04-17]. [10] Kadlec, Tim. (2012) Implementing Responsive Design: Building sites for an anywhere, everywhere web [Kindle edition]. United States Of America. New Riders. 1 edition. ISBN: 978-0-321-82168-3. [11] Koch, Peter-Paul, Rieger, Stephanie, Walton, Trent, Frost, Brad, Olsen, Dave, Kardys, Dennis, Clark, Josh (2012) The Mobile Book [e-book] Freiburg, Smashing Media GmbH. 22

[12] Krug, Steve. (2006). Don't Make Me Think: A Common Sense Approach To Web Usability. 2nd Edition, Berkeley: New Riders. [13] Lauesen, Soren. (2007) User Interface Design: A Software Engineering Perspective. Great Britain. Great Britain. Pearson Education Limited. 1:2. ISBN 978-0-321-18143-3. [14] MacKenzie, I. Scott. (2003). Motor behaviour models for humancomputer interaction. In J. M. Carroll (Ed.) HCI models, theories, and frameworks: Toward a multidisciplinary science, pp. 2754. San Francisco: Morgan Kaufmann. [15] Marcotte, Ethan (2010) Responsive Web Design http://alistapart.com/article/responsive-web-design [Hämtad 2013-05-13]. [16] Marklund, Mikael (2013) NA:s webbchef om starten med responsiv design. http://www.medievarlden.se/nyheter/2013/03/nas-webbchef-omfem-manader-med-responsiv-design [Hämtad 2013-04-29]. [17] Musil, Steven (2012) Mobile Internet traffic gaining fast on desktop Internet traffic. http://news.cnet.com/8301-1023_3-57556943-93/mobileinternet-traffic-gaining-fast-on-desktop-internet-traffic/ [Hämtad 2013-03- 04]. [18] Myrén, Karin (2012) Mobil shopping pressar utvecklarna. http://computersweden.idg.se/2.2683/1.465992/mobil-shopping-pressarutvecklarna [Hämtad 2013-03-04]. [19] Nielsen, Jakob. (2007) Tabs, Used Right. http://www.nngroup.com/articles/tabs-used-right/ [Hämtad 2013-02-26]. [20] Nielsen, Jakob & Budiu, Raluca. (2012) Mobile Usability [Kindle edition]. United States Of America. New Riders. 1 edition. ISBN: 0-321-88448-5. [21] Nielsen, Jakob. (2000) Why you Only need to test with 5 users. http://www.useit.com/alertbox/20000319.html [Hämtad 2012-05-04]. [22] Responsivelistan (2013) A till Ö. http://responsivelistan.se/category/ao/ [Hämtad 2013-04-29]. [23] Sommerville, Ian (2011) Software Engineering, 9th Edition, Boston: Pearson. [24] The U.S. Department of Health & Human Services.(2006) Research-Based Web Design & Usability Guidelines. http://www.usability.gov/pdfs/chapter18.pdf [Hämtad 2013-03-21]. 23

[25] Wrobleski, Luke. (2012) MultiDevice Layout Patterns. http://www.lukew.com/ff/entry.asp?1514 [Hämtad 2013-02-21]. [26] Wrobleski, Luke. (2012) Off Canvas MultiDevice Layouts. http://www.lukew.com/ff/entry.asp?1569 [Hämtad 2013-02-27]. [27] Zaphiris, P, Shneiderman, B, Norman, K (1999) Expandable Indexes Versus Sequential Menus for Searching Hierarchies on the World Wide Web. http://agrino.org/pzaphiri/papers/expandableindexes.pdf [Hämtad 2013-05- 10]. [28] Zurb. (2012) Off Canvas Layouts. http://www.zurb.com/playground/offcanvas-layouts [Hämtad 2013-02-25]. 24