Navigationens betydelse för responsiva webbplatser

Teknik och samhälle Datavetenskap

Examensarbete 15 högskolepoäng, grundnivå

Navigationens betydelse för responsiva webbplatser

The importance of navigation for responsive websites

Hartsner, Adam

Mathisson, Oliver

Examen: Kandidatexamen 180 hp Huvudområde: Datavetenskap Program: Informationsarkitekt Datum för slutseminarium: (2015-06-0X)

Handledare: Hagert, Göran Andrabedömare: Allder, Kristina

Sammanfattning

Svenskar besöker allt större utsträckning webben via mobila enheter som smartphones och tablets. Shopping och sociala medier är två exempel på saker många svenskar gör dagligen. En aspekt som påverkar hur man upplever en webbplats och som påverkar huruvida vi är benägna att återbesöka webbplatsen är dess navigation. Vid en snabb genomgång av de hundra mest besökta sidorna på internet syns tydligt att navigationen mest frekvent placeras överst på sidan. Denna position har visat sig svår att nå då man är i rörelse och enbart kan undvara en hand för att navigera.

Denna studie syftar till att ta reda på ifall navigationen kan placeras i botten av webb-platsen för att tillåta eektivare navigation vid användning med en hand. Vi valde att placera navigation nummer två i botten på webbplatsen, i en av skärmens mest lättillgäng-liga zoner till skillnad från den övre positionen som benner sig i en mer otillgänglig zon. I vår studie deltog sammanlagt tretton deltagare vilka utförde ett test för varje navigation, sammanlagt 26 stycken test. Utöver att mäta tid för varje utfört test samlade vi in varje testpersons subjektiva åsikt om varje position samt deras tidigare vana av smartphones. Testerna utfördes på en enhet vars display utgör fem tum.

Resultatet av vår studie visar att navigationen placerad på webbplatsens botten var mest eektiv med avseende på tid. Vid sammanställning av testpersonernas åsikter framgår det även att en stor andel av deltagarna föredrog den nedre positionen. Vi förespråkar därför för den nedre positionen vid display-storlekar på fem tum eller större. Denna studie syftar till att ta reda på ifall navigationen kan placeras i botten av webbplatsen för att tillåta eektivare navigation vid användning med en hand.

Abstract

In Sweden we spend more and more time visiting the Web using mobile devices such as smartphones and tablets. Online shopping and using social media are just two examples of things many Swedes do on a daily basis. One aspect that aects how we perceive a website and that inuences whether we are inclined to revisit the site is its navigation. After a quick review of the hundred most visited pages on the Internet it is clearly visible that the navigation is most frequently positioned at the top of the page. This position has proved dicult to reach when we are in motion and can only spare one hand to navigate the website.

This study aims to nd out if the navigation can be positioned at the bottom of the page to allow ecient navigation for use with one hand. We chose to place the second positio at the bottom of the page, in one of the screen's most easily accessible zones unlike the upper position which is in a more inaccessible zone. Our study involved a total of thirteen participants who performed one test for each navigation, a total of 26 tests. In addition to measuring the time we collected each test person's subjective opinion about each position as well as their previous experience of smartphones.

The tests were performed on a device whose display is ve inches. The results of our study show that the navigation placed on the website's bottom was the most eective regar-ding time. In assembling the test subjects opinions, it also appears that a large proportion of participants preferred the lower position. With these results in mind we recommend considering the lower position of navigation when designing for units with displays larger than ve inches.

Innehåll

1 Inledning 1 1.1 Bakgrund . . . 1 1.2 Responsiv design . . . 5 1.3 Problemformulering . . . 5 1.4 Problemdiskussion . . . 5 1.5 Avgränsningar . . . 5 2 Metod 7 2.1 Skärmstorlek . . . 7 2.2 Pilottest . . . 7 2.3 Testpersoner . . . 8 2.4 Metodbeskrivning . . . 8 2.4.1 Premisser . . . 10 2.4.2 Utförande . . . 10 2.4.3 Enkät om testperson . . . 10 2.4.4 Enkät om testet . . . 11 3 Resultat 12 3.1 Tidsåtgång uppgift . . . 12 3.2 SUS resultat . . . 12 4 Analys 15 5 Diskussion 16 5.1 Metoddiskussion . . . 17

5.2 Slutsats och vidare forskning . . . 17

Referenser 19

1 Inledning

För fyra år sedan gjordes stora tekniska framsteg inom mobilteknik, vilka i kombination med skäliga avgifter innebar ett stort uppsving för internet i mobila enheter. Sverige var tidigt med att utveckla mobila telefonsystem, redan på 50-talet, men det var inte förrän under tidigt 2000-talet som Wireless Application Protocol introducerades. Detta medförde möjlighet att skicka och ta emot e-post i mobilen varpå utvecklingen har gått fort fram.

Dagligt bruk av mobiltelefoner blev allt mer vanligt vilket var ett av era nya beteenden vilka företagen inte kunde förbise. 2011 genomgick en av fyra svenska webbplatser föränd-ringar av varierande omfattning för att bättre anpassas till mobila enheter. De största förändringarna syntes inom näthandeln då 45% av svenska företag räknade med att an-passa sina webbplatser till mobila enheter under årets gång.

Sedan dess har den mobila webben vuxit och visar inga tendenser att sluta växa. Vi använder våra mobiler oftare och nner ständigt nya användningsområden. Som en konsekvens av detta nner vi oss inte sällan i situationer då vi är i rörelse och enbart undvara en hand för att använda den mobila enheten. Samtidigt som enheterna blir allt större förblir våra händer dem samma. Därför har frågor om design för bättre interaktion, det vill säga eektivare, med mobila enheter varit aktuella bland utvecklare.

1.1 Bakgrund

Syftet är att ta reda på huruvida det nns goda alternativ, det vill säga minst lika eektiva, till den dominerande trenden att placera navigationen på webbplatsens överkant. Vi har valt att jämföra två positioner för att se vilken av dessa som tillåter mest eektiv interaktion på mobila webbplatser vid användande med enbart en hand.

Vi besöker i allt större utsträckning webben via mobila enheter. Vi shoppar, skriver mejl, gör bankärenden, kommunicerar och konsumerar nyheter och media. Vi nner oss ofta i situationer då vi bara kan undvara en hand för att navigera; exempelvis på bussen eller på väg hem från aären. Det man ser mest frekvent är att navigationen är placerad uppe i vänster eller höger hörn. Med tanke på enhetens avlånga display och hur man hanterar enheten kan det vara svårt att nå navigationen om man bara har en hand tillgänglig.

I en analys av 1333 observationer av smartphone-användare, fann Steven Hoober att cirka 72% av deltagarna är beroende av sin tumme vid ett tvåhandsgrepp och 49% var beroende av ett enhandsgrepp för att utföra uppgifter på telefonen [4]. Detta kan medföra problem på enheter som är fem tum eller större.

Karlson tillfrågade 228 stycken smartphone-användare för att hitta detaljerad infor-mation om användares mönster [5]. Det visade sig att 24% av användarna använde sig av en hand för de esta interaktioner jämfört med endast 19% som var tvåhandsgrepps-användare. 14% av användarna använde en hand för enklare uppgifter och 6% rapporterade att de använde två händer när det var det enda sättet att slutföra en uppgift. Resultaten visade att majoriteten av användarna endast ville använda sig av en hand. 66% uppgav att de främst föredrar enhandsinteraktion, 9% föredrog tvåhandsinteraktion och 23% hade inga preferenser. Detta tyder på att enhandsinteraktion är vanligt och att det föredras av majoriteten. Samtidigt som enheterna blir allt större förblir våra händer dem samma. Därför har frågor om design för eektivare interaktion för mobila enheter blivit alltmer utbrett.

Resultatet av en studie om hur smartphone-användare håller och brukar sina enheter utförd av Steven Hobber, visar att 49% av deltagarna enbart använde en hand för att använda sina mobiltelefoner [4]. 36% höll sina telefoner med två händer och använde pek-ngret för att scrolla. Resterande 15% höll telefonen med två händer och använde båda tummarna för att scrolla.

Perry och Hourcade baserade sitt arbete av Parhi et al. genom att undersöka enhandsin-teraktion med tummen vid stående och gående [?, 9]. Resultaten från deras studie visade att användarna var snabbare på att interagera med den föredragna handen. Användare föredrog att välja objekt som var placerade i centrum av telefonen som de tyckte var lät-tare men de hade större noggrannhet för objekt vid kanten av skärm, särskilt för de objekt som var nära handen. Trots detta fanns det inga signikanta skillnader i prestanda mellan stående och gående.

Luke Wroblewski säger att det är viktigt att tänka på var man placerar navigationen [15]. Vi måste förstå och titta på hur människor håller en smartphone. Se gur 1 hur en högerhänt användare håller i en smartphone. Genom att hålla en smartphone på det sättet gör att vissa områden av skärmen är lättåtkomliga medan andra är svåråtkomliga. Området vid botten av skärmen är lätt, medan de övre hörnen är svårare. Luke Wroblewski menar att den nedre delen av en smartphone är där vi vill sätta en applikations vanligaste och viktigaste interaktioner, till exempel en navigation, där de kan nås snabbt och enkelt. Logiken bakom att placera navigationen i botten på skärmen är att det blir fysiskt lättare för användaren att navigera vid ett område som är bekvämt och en kort räckvidd från sin tumme. Om man försöker nå toppen av telefonen med tummen, måste man justera vinkeln på handleden med dagens stora smartphones, och i vissa fall justera greppet för att nå navigationen.

Figur 1: Räckhåll för tummen (höger hand)

Josh Clark tycker att man ska designa för beröring vilket innebär design för tummen [3]. Med sin tumme kan användaren med lätthet hantera de två undre zonerna av skär-men, den övre zonen blir mer otillgänglig desto större enheten blir, se gur 1. Det är en viktig anledning till varför verktygsfält och navigering normalt ska placeras i nederkant av telefonen, motsatsen till vad vi är vana vid för traditionella webbplatser på en dator. Navigationen på en desktop-webbplats är traditionellt placerad i toppen på skärmen. De begränsningar som vår tumstorlek innebär gör att vi skulle kunna placera navigationen i botten på en smartphones för en enklare interaktion [3].

Det är viktigt att notera att den enhet vilka (Samsung Galaxy SIII = 4,7") nedan beskrivna experiment utförts på i stora drag liknar den enhet (Google Nexus 5 = 4,9") vi utfört våra egna experiment på. Det är även viktigt att notera att samtliga tretton deltagare är högerhänta. Figurerna 2, 3, 4 och 5 är en reproduktion av bilder från en undesökning av Stephen Brewster m. [7]. Figurerna 2, 3, 4 och 5 visar kvadraten innehållandes de mindre kvadraterna avser symbolisera enhetens skärm. De mindre kvadraterna symboliserar mål på skärmen. Ovalerna symboliserar var användaren träat målen.

I undersökningen utförd av Stephen Brewster m. om hur vi interagerar med våra smarta enheter i olika situationer, visar resultatet att interaktion med en hand och vid belastning (väska eller liknande) är minst eektiv[7]. Precisionen med vilken användaren når objekt på olika delar av skärmen är lägre än vid interaktion med två händer. I synnerhet objekt placerade i skärmens kant är svåra att nå till skillnaden från de objekt som benner sig mot skärmens mitt. I undersökningen jämför man interaktion vid belastning och utan belastning med tvåhandsinteraktion och enhandsinteraktion.

Figurerna 2 , 3 och 4 avser fri interaktion (utan belastning) (blå) och interaktion vid belastning (röd). Sirorna ovanför varje mål visar noggrannheten (%). Fri interaktion (till vänster) och interaktion vid belastning (höger).

Figur 2: Medelvärde och korrelation i x- och y-led för fel för varje mål vid tvåhandsinter-aktion med peknger. (Bilden visar en mobil skärm)

Figurerna visar att hantering med båda tummarna utan belastning förutsätter mest eektiv interaktion medan hantering med en hand och vid belastning föga förvånande förutsätter minst eektiv interaktion. Figuren nedan visar fördelning av felmarginal vid de olika metoderna för interaktion.

Se gur 5 på den vänstra bilden, tvåhandsinteraktion med peknger, ser vi störst sprid-ning i vänstermarginalen vilket tyder på något sämre precession jämfört med den högra bilden. Den mittersta bilden, enhandsinteraktion med tummen, tyder på svårigheter med att nå samtliga objekt längst med skärmens sidor inklusive den zon där navigationen tradi-tionellt är positionerad. Däremot är objekten i mitten och nederst i mitten lättillgängliga

Figur 3: Medelvärde och korrelation i x- och y-led för fel för varje mål vid enhandsinterak-tion med tummen. (Bilden visar en mobil skärm)

Figur 4: Medelvärde och korrelation för x- och y-led för fel för varje mål vid tvåhandsin-teraktion med båda tummarna. (Bilden visar en mobil skärm)

i förhållande till övriga objekt på skärmen. På den högra bilden ser vi ser tydligt att inter-aktion med båda tummarna förutsätter enkel interinter-aktion med samtliga objekt på skärmen. Med detta resultat i åtanke har vi valt att jämföra den position där navigationen tra-ditionellt är placerad (topp, centrerad) med den position som visat sig vara mer tillgänglig för enhandsinteraktion (botten, centrerad).

Figur 5: Figuren visar zoner där det är svårt att nå

1.2 Responsiv design

Responsiv webbdesign innebär att samma domän, samma innehåll och samma syntax an-vänds för att presentera en webbplats på olika så kallade viewports (det vill säga skärm-storlek och upplösning). Sidans innehåll manipuleras med hjälp av olika tekniker för att anpassa innehållet till relevant viewport för att i sin tur erbjuda användaren en god an-vändarupplevelse. Dessa viewports inkluderar bland annat stationära skärmar, bärbara datorer, tablets och mobila enheter som smartphones. Det nns exempel på underliggande tekniker som ligger som grund för responsiv webbdesign och som används för att anpassa en webbplats till användarens enhet. Några av dessa är exibla eller ytande rutnät, y-tande media och CSS media queries. Responsiv webbdesign är sällan en process i sig, utan snarare ett pågående arbete med att ständigt optimera webben för nya enheter och situa-tioner som innner sig på marknaden. Ett resultat av den fort framskridande utvecklingen av nya typer av enheter, skärmstorlekar och upplösningar, exempelvis smartwatch. Syftet med denna teknik är att erbjuda en estetiskt tilltalande användarupplevelse oavsett enhet [6].

1.3 Problemformulering

Vilken av dem två navigationsposition är mest eektiv på den mobila webben? Vilken po-sition upplevs av användaren som bäst? Är den dominerande övre popo-sitionen mest eektiv eller är raka motsatsen ett lika bra alternativ.

1.4 Problemdiskussion

För att kunna besvara problemformuleringen har vi valt att mäta eektivitet i tid. Kortare tid tyder på högre eektivitet. Vi har samlat information om testpersonernas uppfattning av navigationens två olika positioner. Vi kan tolka skillnader mellan de två positionerna och på så vis bedöma navigationens eektivitet samt tolka testpersonernas uppfattning om varje position.

1.5 Avgränsningar

De två vanligaste navigationspositioner för smartphones är topp, botten. Vilket är varför vi enbart har valt att undersöka topp- och bottenpositionerna. Topppositionen är den mest

Figur 6: Position av navigation för iOS applikation

Figur 7: Vanligt position för navigation

dominerande, se gur 7, det nns dock exempel på webbplatser som har implementerat navigationen i botten exempelvis Facebook-applikationen för iOS se gur 6.

2 Metod

För att testa och jämföra de olika positionerna har vi konstruerat en testmiljö som i sin tur delats upp i två versioner. I den första implementerades navigationen centrerad i webb-platsens topp och den andra är centrerad i botten. Denna testmiljö, i form av en responsiv webbplats, baseras på ett tidigare projekt som vi har utvecklat till en egenföretagare.

Testmiljön har modierats lätt för vårt syftes skull och innehåller era olika element så som bilder, text, tabeller med mera för att skapa en levande, naturlig miljö. Vid en snabb genomgång av världens hundra mest besökta sidor är navigationen i stor utsträckning placerad i sidans överkant, ofta till vänster för att ge plats åt sökfunktion och logotyp [13]. Vår testmiljö har varken sökfunktion eller logotyp; Vi valde därför att placera naviga-tionen i mitten av skärmen för att motverkade omotiverat tomrum. Syftet med testmiljön är att låta användare av olika ålder, bakgrund och kön utföra uppgifter mätbara i tid. I vår undersökning undersöker vi främst en variabel, hur lång tid varje test tar att utfö-ra. Vi samlar också in subjektiva åsikter efter varje test, vi ställer exempelvis frågor om testpersonens vana och förväntningar om var navigationen ska vara placerad.

2.1 Skärmstorlek

Vi har undersökt de tio mest sålda mobiltelefonerna i världen i september 2014, se gur 8 [12]. Vi använde oss av telefonernas storlek och räknade ut medelstorleken för de telefo-nerna, vilket är 4,9 tum. Då medelstorleken är 4,9 tum valde vi att använda oss av Google Nexus 5 (vilken är 4,9 tum) i testerna för att representera medelstorleken. Alex Barredo har tagit 4906 mobiltelefoner som lanserades från jan 2007 till maj 2014. Han har räknat ut medelstorleken för mobiltelefoner och ck fram att maj 2014 var det 5 tum som var medelstorleken för mobiltelefoner som tillverkades [1].

Figur 8: Mest sålda mobiltelefoner i september 2014

2.2 Pilottest

En första användarstudie genomfördes med två deltagare med erfarenhet av att använda mobiltelefoner. Deltagarna ck tre stycken olika uppgifter för varje navigation. De ck även

samma formulär att svara på innan testet och samma formulär som skulle fyllas i efter varje navigationstest.

Vi kunde konstatera att båda testpersonerna som gjorde pilottesterna gav samma feed-back. Den största skillnaden mellan pilottestet och det skarpa testet som utfördes senare är uppgifterna; Vilka vi förenklade inför det skarpa testet. För att tvinga användaren att tänka och leta efter rätt svar valde vi att försvåra sökandet genom att använda synonymer för varje alternativ i menyn. På så vis var testpersonerna tvungna att läsa innehållet och klicka runt på sidan. Detta visade sig vara frustrerande och testpersonerna var inte säkra på ifall de funnit rätt svar eller inte. De kände att hela upplevelsen blev sämre när man ck koncentrera sig på att hitta svåra saker istället för att enbart klicka på huvudrubrikerna i navigationen.

Vi valde att låta varje testperson utföra fyra stycken uppgifter och varje uppgift utgöra av ett alternativ i navigationen. I kommande test kan testpersonerna istället fokusera på upplevelsen snarare än att frustreras över svåra uppgifter.

2.3 Testpersoner

Vårt mål var att utföra testerna på en så allmän målgrupp som möjligt. Vi försökte därför att inkludera personer med så spridning som möjlig vad gäller kön, ålder och tidigare vana av smartphones.

Sammanlagt deltog 13 stycken testpersoner. Enligt Jakob Nielsen är fem personer till-räckligt vid denna typ av undersökning, det vill säga utredande av ett systems användbar-het [8]. Han menar att stora, omfattande tester kan vara slöseri med tid och resurser då man ofta kan nna brister i systemet redan efter fem test.

Därför valde vi att börja med fem stycken test och senare utöka undersökningen med er test i mån om tid. Efter de första fem testen kunde vi utläsa ett resultat som styrkte vår hypotes. Därefter utförde vi ytterligare åtta test för att vidare styrka vårt resultat.

2.4 Metodbeskrivning

1. Undersökningen startas genom att samla in information om testpersonen för att senare i analysen kunna dra slutsatser kring förhållande till resultatet se gur 10. De variabler som samlas in är:

• Kön • Ålder

• Storlek på deras nuvarande telefon

• Används telefonen dagligen för att söka information på internet

2. Nästa del av undersökningen är att testpersonen får fyra olika uppgifter för varje position som utförs i webbplatsen som laddas från en hemsida online. Vi observera-de testerna för att mäta tidsåtgång och eventuella kommentarer unobservera-der testet gång. Uppgifterna lästes för tydlighetens skull upp för testpersonen och de ck sedan läsa uppgifterna själv på ett papper. Detta för att testpersonen ska kunna få en tydlig bild av uppgifter som ska utföra. Vi har redan laddat klart webbplatsen och sedan satt på skärmlåset på telefonen. När testpersonen låser upp telefonen så visas webbplatsen

och då börjar tidsåtgången för testet. Då testpersonen har utfört sista uppgiften och sidan laddat klart, stoppas tidtagningen och testet är klart. Vi använder oss av ett stoppur för att mäta tiden.

3. När tester är genomfört får testpersonen svara på frågor om hur han/hon upplevde navigationen, till exempel skulle du vilja använda navigationen igen?. För att mäta användarens upplevelse har vi valt att använda oss av System Usability Scale (SUS). Den består av en enkät som innehåller tio frågor med fem svarsalternativ för respons; från Håller med till Håller inte med [11].

Navigationen innehåller åtta stycken klickbara alternativ; De har delats upp i två set av uppgifter med fyra i varje. Varje testperson testar båda navigationspositionerna. Varannan testperson började med toppnavigationen och varannan började med bottennavigationen. På så vis utesluter vi att testets ordning spelar in på resultatet.

Uppgift 1:

• Klicka på nyheter • Klicka på avelsloso • Klicka på våra hundar • Klicka på galleri Uppgift 2:

• Klicka på historik

• Klicka på om tysk jaktterier • Klicka på avel & valpar • Klicka på äga tysk Jaktterrier

Vi har implementerat navigationen i två olika positioner för att kunna jämföra dem. De två positionerna kommer att vara utformade på följande sätt:

• navigation i toppen på skärmen se gur 9a. • navigation i botten på skärmen se gur 9b.

De två navigationerna kommer att innehålla samma navigationsinnehåll och informa-tion, det som kommer att skilja testerna åt är positionen för navigationen.

Vid utförandet av testet ska testpersonerna använda sig utav sin huvudhand det vill säga höger eller vänster hand. Testpersonerna ska endast använda sig av sin tumme för att interagera med smartphonen. Om de klickar fel under testets gång får de inte använda sig av bakåt knappen, utan de måste använda sig av navigationen.

Vi kommer att observera när testpersonerna utför testet, så att de utför testerna kor-rekt.

(a) Navigation Topp (b) Navigation Botten

Figur 9: Bilder på de två navigationerna 2.4.1 Premisser

• Endast en hand får användas under testet

• Testet påbörjas när sidan har laddats och är klar att använda • Testpersonen skriver själv in adressen till hemsidan

• Varje testperson testar samtliga versioner 2.4.2 Utförande

• Genomgång av syfte och premisser • Enkät om vana och användande

• Utförande av första testet -> fyll i enkät • Övriga tankar

• Utförande av andra testet -> fyll i enkät • Övriga tankar

2.4.3 Enkät om testperson

Enkäten syftar till att samla in information om testpersonerna. Här kommer frågor om ålder, kön, storlek på deras nuvarande smartphone och om de använder sin smartphone dagligen för att söka efter information på internet. Syftet med detta är att nna eventuella skillnader mellan deltagarna.

Figur 10: Enkät om testperson 2.4.4 Enkät om testet

Denna enkät syftar till att samla testpersonernas tankar och intryck efter varje utfört test. Här vill vi ta reda på skillnaderna mellan de olika navigationerna med avseende på tillgänglighet och förväntningar. För att mäta användarupplevelser har vi valt att använda oss av System Usability Scale (SUS). Den består av en enkät med tio frågor med fem svarsalternativ för respons; från Håller med till Håller inte med [11].

3 Resultat

3.1 Tidsåtgång uppgift

För varje uppgift som testpersonerna utförde, mättes tiden med ett stoppur från det att si-dan visades till att tespersonen har utfört sista uppgiften och berättade att de var klar med uppgiften. Figur 9 visar den genomsnittliga tiden för alla åtta uppgifter som testpersoner-na ck genomföra för båda testen och för båda testpersoner-navigationertestpersoner-na. Det visar att testpersoner-navigationen som var placerad i toppen på telefonen hade en genomsnittstid på 44 sekunder, och navi-gationen som var placerad i botten på telefonen hade en genomsnittlig tid på 41 sekunder. Det visar att navigationen i botten är 3 sekunder snabbare i genomsnittlig tid per test se gur 11.

Figur 11: Genomsnittstid för navigationerna

3.2 SUS resultat

SUS är ett vanligt sätt att utvärdera användbarhet i ett system [11]. Med hjälp av SUS kan man räkna ut hur användbarhet ett system är. Medelvärdet för SUS-enkäter är 68, enligt som har analyserat 500 studier som använt sig av SUS-enkäter [11]. Vid analys av SUS-enkäten kan man utvärdera den testade produktens användbarhet.

Efter att testpersonerna hade slutfört sina fyra uppgifter för varje navigation ck de svara på frågor kring hur användbar, enkel och utseendemässigt de tycker att navigationen var. Enkäten bestod av tio stycken frågor och varje fråga hade en femgradig skala från Håller med till Håller inte med. Figur 12 visar genomsnittsvärde hur testpersonerna har svarat. Navigationen som var placerad i toppen på telefonen ck medelvärdet 69 och placeringen i botten ck medelvärdet 78,8. Av resultatet kan vi utläsa att navigationen som var placerad i botten på telefonen ck ett högre värde än navigationen som var placerad i toppen på telefonen, se gur 12. Se även hur testpersonerna har svarat på SUS-enkäten se gur 14.

För att beräkna summan av värdena i SUS testet, fyller man i värdet från varje fråga. Varje värde kommer att variera från 1 till 5. För frågorna 1,3,5,7 och 9 är skalposition minus 1. För frågorna 2,4,6,8 och 10 är skalpositionen minus 5. Multiplicera summan av värdena med 2,5 för att erhållande det totala värdet av SUS. SUS poäng har en räckvidd på 0 till 100 [2].

Exempel på en uträkning: ((5-1)+(5-1)+(5-5)+(5-2)+(5-1)+(5-3)+(4-1)+(5-1)+(4-1)+(5-1))*2,5 = 87,5

Figur 12: Genomsnittsvärde för SUS

4 Analys

Valet av enhet kan i vissa fall påverka det slutliga resultatet. De som är vana vid storleken, i detta fall 4,9 tum, kan ha fördel jämfört med de som är vana vid en annan storlek.

Testpersoner som har en nuvarande smartphone med storleken 4,9 tum kan vara mer bekväma med att hålla sin smartphone i handen jämfört med en testperson som har en smartphone med storleken 4 tum.

Vi valde använda samma smartphone för att alla ska ha lika långt avstånd till navi-gationen.Vi valde att utföra samtliga test på samma enhet (samma skärmstorlek) istället för att använda olika. På så vis utesluter vi att vissa deltagare drar fördel av den mindre skärmstorleken då avståndet till topp navigationen i så fall skulle vara kortare.

Resultatet från undersökningarna visar att navigationen som är placerad i botten på webbplatsen är bäst inom alla uppmätta variabler. Dock ck navigationen som var placerad i toppen av webbplatsen ett SUS värde som är över medel, vilket indikerar på att den placeringen också föredras av användarna.

5 Diskussion

Stephen Brewster m. utförde i sin undersökning liknande experiment där man lät varje deltagare utföra uppgifterna medan de gick, både med (vilket ofta är fallet då man är i rörelse) och utan belastning för att jämföra interaktion [7]. Detta sammanhang är mer realistiskt och skulle förhoppningsvis generera ett mer trovärdigt resultat. Vårt urval kan inte motsvara alla.

Vi utförde sammanlagt tretton stycken test. Vi kunde se tydliga skillnader i tid och uppfattning redan efter fem test. Vi valde att utföra ytterligare åtta test för att styrka vårt resultat samt utesluta att resultatet av de första fem testerna bara var en tillfällighet.

Resultatet av SUS-testen visar tillsammans med testpersonernas subjektiva åsikter att den nedre positionen var att föredra. Båda navigationerna ck över 68 i medelvärde. Enligt Je Sauro så är ett värde över 68 över medelvärde, det tyder på att båda navigationerna ck ett värde över medel. Bottennavigationen ck det bästa genomsnittsvärdet på 78, det är nära värdet 80,3 vilket är det stor chans att användare kommer att rekommendera produkten till en vän [11]. Toppnavigationen ck ett värde av 69, vilket är över medel och kan tolkas som en bra navigation, men ca 11 värden ifrån gränsen på 80,3.

Navigationen i botten ck bäst genomsnittlig tid vid utförande av testen, den var 3 sekunder snabbare jämfört med den övre positionen. Vi uppmätte skillnader mellan de som svarade ja och nej på frågan använder du din smartphone dagligen för att söka information på internet?. De som svarade ja på frågan utförde i genomsnitt testet 11 sekunder snabbare i den övre positionen än de som svarade nej. De som svarade ja på frågan utförde i genomsnitt testet 15 sekunder snabbare i den nedre positionen än de som svarade nej.

Det skiljer i genomsnitt 5 sekunder mellan topp- och botten navigationen för de som svarade ja på frågan använder du din smartphone dagligen för att söka information på internet?. Det var ingen skillnad för de som svarade nej på frågan använder du din smartp-hone dagligen för att söka information på internet? i genomsnittstid mellan navigationerna. Det tenderar att de som söker information dagligen utför testet snabbare än de som inte söker information dagligen.

Enligt Dan Saer kan ett så kallat trendbrott eller avsteg från standarder endast mo-tiveras ifall det nns goda skäl för att göra så [10]. Med tanke på resultatet kan ett sådant trendbrott motiveras i vårt fall. Resultatet visar på att bottenpositionen tillåtit mer eek-tiv interaktion mätt i tid, än toppositionen. Med detta i åtanke kan det vara av stor vikt att analysera hur smartphone-marknaden ser ut när man gör val som berör navigationens position på skärmen. Resultatet visar inte bara att bottennavigationen är eektivare vid användning med en hand, den visar också att en stor andel testpersonerna ser den som ett bra alternativ till toppnavigationen som vi ofta ser implementerad på populära webb-platser. Denna undersökning skulle kunna fungera som underlag för att motivera denna navigationsposition för mobila webbplatser anpassade för enheter på minst fem tum.

Det är möjligt att testpersonernas handstorlek är avgörande för hur snabbt uppgifterna utförs. Man kan tala för att en person med stora händer lättare kan nå toppnavigationen jämfört med personer med mindre händer. I vår undersökning har vi emellertid försökt utföra testen på en så varierad testpublik som möjligt och därför inte haft handens storlek som en variabel i testet.

5.1 Metoddiskussion

I den här undersökningen har vi utfört ett experiment för att ta reda på deltagarnas uppfattning om navigationspositioner på en mobilanpassad webbplats. För att göra detta har vi använt oss av SUS, System usability scale. SUS är en metod som enligt Je Sauro lämpar sig väl för att mäta subjektiva upplevelser på ett snabbt och enkelt sätt [11]. SUS är standard och används ofta för att utvärdera användbarheten i ett system. Enligt en undersökning där man jämfört olika typer av användbarhetstester är SUS med sitt enkla upplägg, den mest pålitliga metoden. Resultatet av undersökningen indikerar även att minst 12 deltagare krävs för att resultatet ska vara någorlunda tillförlitligt vid användandet av SUS [14].

Vi valde att mäta tiden det tog att utföra alla fyra uppgifter, för att sedan analysera vilken navigationsposition som ck den snabbaste tiden. Man skulle även kunna samla in och analysera antal klick och felklick för att mäta eektivitet. Vi valde emellertid att koncentrera oss på tid och istället förlita oss på tidigare forskning inom området klick och felklick.

Genom att mäta tiden manuellt med ett stoppur och att testdeltagaren skulle säga stopp när den var klar med uppgiften, kan göra att testet inte blir rättvist. Eftersom testen inte utfördes på samma nätverk utan på olika så kan hastigheten på bredbandet också spela roll att vissa testpersoner ck ett snabbare resultat. Hur lång tid ett test tar spelar ingen roll i resultatet, det som är viktigt är vilken av positionerna har den snabbaste tiden för testpersonen som är det viktiga.

I formuläret Enkät om testperson ställde vi frågor om deltagarna. Här fanns möjlighet att ställa ett stort antal frågor för att samla in information om varje deltagare för att sedan analysera och dra slutsatser. Vi ställde bland annat frågor om kön och ålder. Men med tanke på att endast 13 personer deltog och att fördelningen mellan män och kvinnor var ojämn, gick det inte att dra riktiga slutsatser eller generalisera utifrån resultatet.

Antalet deltagare är tretton stycken, vilket kan vara ett lågt antal. Det nns en möj-lighet att resultatet skulle se annorlunda ut vid exempelvis 20 eller 30 deltagare. Vi gjorde först fem test och för att styrka resultatet gjorde vi fem till och sedan tre till. Alla tester visar samma tendens. Enligt Thomas S. Tullis m. räcker 12 stycken deltagare för att med SUS få ett tillförlitligt resultat och enligt Nielsen är fem stycken deltagare tillräckligt för att påvisa skillnader och nna kritiska fel [14, 8]. Vi ansåg därför att 13 stycken deltagare var tillräckligt.

Vi valde att inte undersöka ifall testpersonerna föredrar enhands- eller tvåhandsinter-kation i undersökningen, då vårt fokus var att när man bara kan undvara en hand, vilken navigationsposition är bäst lämpad?. Det kan vara så att det spelar in i resultatet att ifall personer som föredrar enhandsinteraktion utför uppgifterna snabbare, men de kommer att utföra båda testerna med samma hastighet och i undersökningen så tar vi bara i åtanke vilken navigationsposition som utförts snabbast och inte huruvida en testperson gjorde toppnavigationen exempelvis 10 sekunder snabbare än den andra testpersonen.

5.2 Slutsats och vidare forskning

Resultatet visar att navigationen placerad i botten av skärmen inte bara var eektivast vid enhandsinteraktion utan även föredrogs av testpersonerna. Detta beror på att navigationen är placerad i skärmens mest tillgängliga zon jämfört med toppnavigationen. Det visade sig

att användarnas förväntningar inte spelade någon roll för huruvida de upplevde naviga-tionen som positiv eller negativ. På frågan om förväntad placering av bottennaviganaviga-tionen gav de esta låga betyg, vilket tyder på att de inte var riktigt vana vid denna position. Däremot svarade de högt på frågorna Lätt att nå? och logiskt placerad?, vilket tyder på att förväntningarna inte spelar någon roll för varken eektivitet eller slutligt resultat.

Vid desginbeslut av navigationen för en webbplats ska man tänka på hur sin målgrupp använder sig av webbplatsen. Då denna artikel endast omfattar enhandsinteraktion ska man ha i åtanke att det nns scenarion som inte alls motsvarar de vi beskriver i analysen. Det nns situationer då användaren exempelvis sitter ned med två händer fria för interaktion med enheten. I sådana fall spelar navigationens position mindre roll då hela skärmen blir lättillgänglig.

Vid vidare undersökning och jämförelse av navigationerna bör testen utformas för att vara utförbara i realistiska situationer eller miljöer. Att exempelvis låta testpersonerna stå upp eller gå under testets gång skulle sätta testpersonen i ett mer realistiskt sammanhang än om testet utförs i sittande ställning vid ett bord. Med denna metod skulle vi kunna utesluta att testpersonerna brukar enheterna på ett vis de aldrig skulle göra i ovan nämnda situation. I retrospektiv erinrar vi oss att somliga testpersoner placerat enheten mitt i handen vilket kan ha spelat in på det slutliga resultatet.

Referenser

[1] Barredo, A. A comprehensive look into the future of smartphone screen sizes. Tillgänglig http://gizmodo.com/ a-comprehensive-look-into-the-future-of-smartphone-scre-1583303782 (Hämtad 2015-02-11).

[2] Brooke, J. Sus-a quick and dirty usability scale. Usability evaluation in industry 189, 194 (1996), 47.

[3] Clark, J. Designing for touch. Tillgänglig http://www.creativebloq.com/design/ designing-touch-2123037 (Hämtad 2015-02-12).

[4] Hoober, S. How do users really hold mobile devices? Tillgänglig http://www.uxmatters.com/mt/archives/2013/02/ how-do-users-really-hold-mobile-devices.php (Hämtad 2015-02-11).

[5] Karlson, A. K., Bederson, B. B., and Contreras-Vidal, J. Understanding one handed use of mobile devices. Handbook of research on user interface design and evaluation for mobile technology (2008), 86101.

[6] Marcotte, E. Responsive web design. Editions Eyrolles, 2011.

[7] Ng, A., Brewster, S. A., and Williamson, J. H. Investigating the eects of encumbrance on one-and two-handed interactions with mobile devices. In Proceedings of the 32nd annual ACM conference on Human factors in computing systems (2014), ACM, pp. 19811990.

[8] Nielsen, J. Why you only need to test with 5 users. Tillgänglig http:// www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ (Häm-tad 2015-02-10).

[9] Parhi, P., Karlson, A. K., and Bederson, B. B. Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of the 8th confe-rence on Human-computer interaction with mobile devices and services (2006), ACM, pp. 203210.

[10] Saffer, D. Designing for interaction: creating innovative applications and devices. [11] Sauro, J. Measuring usability with the system usability scale (sus). Tillgänglig

http://www.measuringu.com/sus.php(H{ä}mtad2015-02-10).

[12] Tom. Top 10 smartphones sold globally during sep 2014. Tillgänglig http://www. counterpointresearch.com/top10sep2014 (Hämtad 2015-02-10).

[13] top 500, T. The top 500 sites on the web). Tillgänglig http://www.alexa.com/ topsites (Hämtad 2015-02-13).

[14] Tullis, T. S., and Stetson, J. N. A comparison of questionnaires for assessing website usability. In Usability Professional Association Conference (2004), pp. 112.

[15] Wroblewski, L. Responsive navigation: Optimizing for touch across devices. Till-gänglig http://www.lukew.com/ff/entry.asp?1649 (Hämtad 2015-02-10).

A Bilaga

(a) Bottennavigation (b) Bottennavigation aktive-rad

Figur 16: Bilder på testmiljön (botten)

(a) Toppnavigation (b) Toppnavigation aktiverad