• No results found

Researching navigation menus for Android 4.4

N/A
N/A
Protected

Academic year: 2021

Share "Researching navigation menus for Android 4.4"

Copied!
40
0
0

Loading.... (view fulltext now)

Full text

(1)

Examensarbete

15 högskolepoäng, grundnivå

Undersökning av navigationsmenyer i Android 4.4

Researching navigation menus for Android 4.4

Haavisto, Ville

Petersson, Emil

Kandidatexamen 180 hp

Andreas Göransson

Datavetenskap

Bengt J Nilsson

Systemutvecklare

2014-06-07

(2)

Abstract

In this study we compare two different navigation menus in the context of a news application. We develop two prototype application implementing two different navigation menus. User-tests are used to measure how effectively a user can perform a set of specified tasks. An exploratory study is performed where already existing news applications are studied. We analyze which navigation menus are actually used in popular news applications. Our study shows there are really only two options, namely what we choose to call a top-menu, and a drawer menu. The results from our tests shows that the difference in usability is not so big between the two menus. Although we do find some strengths and weaknesses in both navigation menus. The “top menu” results in a greater amount of clicks and errors, but the test is completed a bit faster compared to the drawer menu. The persons doing the tests on the top- menu seems more satisfied compared to those doing the same tests with the drawer menu. We notice that the drawer menu can be a bit difficult to use if the user is not accustomed to it. However, it can be used very effectively if the user knows how to use it correctly. The conclusion of this study is that the differences are quite small between the two navigation menus, but overall the users seem to be more satisfied with a top menu in the given context. However, there are advantages with using a drawer menu which shows that it is a very usable navigation menu if the application has a “broad” navigation structure.

Sammanfattning

I denna studie jämförs två olika navigationsmenyer i kontexten av en nyhetsapplikation. Vi utvecklar själva två olika prototyper där vi implementerar två olika navigationsmenyer, som sedan används för att utföra användartester där vi mäter hur effektivt en användare kan utföra ett antal specifika uppgifter. En förstudie genomförs där redan existerande nyhetsapplikationer studeras. Där undersöker vi vilka olika navigationsmenyer som faktiskt används i populära nyhetsapplikationer. Förstudien visar att det egentligen bara finns två alternativ, nämligen det vi väljer att kalla för toppmeny samt drawermeny. Resultatet från genomförda tester visar att skillnaden i användbarhet inte är särskilt stor mellan toppmeny och drawermeny, men vi upptäcker en del styrkor och svagheter hos de båda. Toppmeny resulterar i flera antal klick och felklick, men testerna utförs i regel lite snabbare med toppmeny jämfört med drawermeny. Testpersonerna som utförde testerna på toppmeny verkade lite nöjdare än de som fick utföra testerna med drawermeny. Vi upptäckte att drawermeny kan vara lite svår att använda om användaren inte är van vid den, men när användaren väl förstått hur den fungerar så kan den användas på ett mycket effektivt sätt. Slutsatsen av denna studie är att skillnaderna är små mellan de två navigationstyperna men överlag verkar användare nöjdare med en toppmeny i den givna kontexten. Dock ser vi flera fördelar med användandet av en drawermeny som talar för att det är en väldigt användbar navigationsmeny om en applikation har en “bred” navigationsstruktur.

(3)
(4)

Innehållsförteckning

1 Inledning ... 1 1.1 Syfte ... 1 1.2 Bakgrund ... 1 1.3 Frågeställning ... 1 1.4 Avgränsning ... 1

1.5 Termer och Begrepp ... 2

2 Tidigare forskning ... 3 3 Teori ... 5 3.1 Användbarhet ... 5 3.1.1 Definition av användbarhet ... 5 3.1.2 Mätning av användbarhet ... 5 3.2 Smartphone begränsningar ... 6 3.3 Utveckla för smartphones ... 6 3.4 Designmönster ... 6 3.4.1 Navigation ... 6 3.5 Navigationsmenyer ... 7 3.5.1 Action bar ... 7 3.5.2 Toppmeny ... 7 3.5.3 Drawermeny ... 9 4 Metod ... 11 4.1 Förstudie ... 11 4.2 Prototyp ... 11 4.4 Utvärderingsmetoder ... 11 4.4.1 Heuristisk utvärdering ... 11 4.4.2 Fokusgrupper ... 12 4.4.3 Användartest ... 12 4.5 Mätvärden ... 12 4.5.1 Definition av klick ... 12

4.5.2 Hur vi mäter användbarhet ... 12

4.5.3 Testpersoner ... 12

4.5.4 Testmiljö ... 13

(5)

5 Resultat ... 15

5.1 Testuppgifter ... 15

5.1.1 Tid ... 15

5.1.2 Antal klick ... 16

5.1.3 Antal felklick ... 16

5.1.3 Antal lösta uppgifter ... 17

5.2 Jämförelse av medelvärden ... 17

5.2.1 Medelvärde av tid ... 17

5.2.2 Medelvärde av antal klick ... 18

5.2.3 Medelvärde av antal felklick ... 18

5.3 Frågeformulär ... 19 5.3.1 Toppmeny ... 19 5.3.2 Drawer ... 20 5.3.3 Jämförelse av frågeformulär ... 20 6 Analys ... 21 6.1 Analys av Toppmeny-resultat ... 21 6.1.1 Toppmeny: Testuppgifter ... 21 6.1.2 Toppmeny: Frågeformulär ... 22 6.2 Analys av Drawer-resultat ... 23 6.2.1 Drawer: Testuppgifter ... 23 6.2.2 Drawer: Frågeformulär ... 25 6.3 Jämförelse ... 25 6.3.1 Tid ... 25

6.3.2 Antal klick och felklick ... 26

6.3.3 Frågeformulär ... 26 6.4 Toppmeny vs. Drawer ... 26 7 Slutsats ... 28 8 Vidare forskning ... 29 9 Referenser ... 30 BILAGA 1 ... 32 Förstudie ... 32 BILAGA 2 ... 34 Testuppgifter ... 34

(6)
(7)

1

1 Inledning

1.1 Syfte

Under de senaste åren så har smartphones blivit väldigt populära, och genom sina unika egenskaper så sätter de nya krav för användbarhet. Exempel på faktorer som bidrar till nya krav är att skärmytan är mer begränsad, jämfört med en PC eller surfplatta. Trots dessa begränsningar så förväntas en smartphone erbjuda samma funktionalitet som en PC eller surfplatta. Syftet med denna studie är att jämföra navigationsmenyn toppmeny mot drawermeny enligt ISO 9241-11 krav på användbarhet. Jämförelsen genomförs genom att vi utvecklar två nyhetsapplikationer som implementerar en navigationsmeny vardera.

Vi genomför denna studie för att den ska kunna användas som underlag för andra utvecklares val av navigationsmeny. För vår egen del så vill vi lära oss mer om de olika navigationstyperna,samt hur de presterar utifrån ISO 9241-11 definition av användbarhet. Detta tycker vi är intressant då vi själva har börjat utveckla för Android, samtidigt som navigation tillsammans med funktionalitet för sök och datainmatning utgör de tre mest väsentliga delarna för en lyckad användarupplevelse [14].

1.2 Bakgrund

Innan vi påbörjade detta arbete studerade vi forskning som redan utförts i samma ämnesområde, för att få en inblick hur en vetenskaplig studie inom ämnet kan genomföras på olika sätt. Till en början letade vi efter material som berörde användbarhetsstudier kring navigation i Android smartphones, med inriktning på hur olika design av menyer påverkar användaren. Men det finns ganska sparsamt med material kring detta specifika ämne. Därför fick vi istället söka efter material inom ett bredare omfång som handlade om användbarhet och meny-design i allmänhet. Det finns betydligt mer material som riktar sig till stationära persondatorer i detta ämne. Det material som vi studerat inför vår egen undersökning presenteras i nästa avsnitt, “Tidigare forskning”.

För att hitta en kontext att implementera och testa toppmeny och drawermeny i så undersöks vilka typer av applikationer som är populära, då vi vill använda oss av applikationer som personer faktiskt använder. De krav som finns är att applikationens omfattning matchar med hur mycket tid vi har för utveckling och att två prototyper med samma innehåll men med olika navigationsmenyer stöds i kontexten. Genom litteraturstudien hittar vi en artikel som skriver vilka de 18 populäraste applikationerna var 2011. Av dessa 18 applikationer så motsvarar nyhetsapplikationer våra krav bäst. Nyhetsapplikationer var den sjunde populäraste applikationstypen 2011 [16].

1.3 Frågeställning

Vilken navigationsmeny presterar bäst av toppmeny och drawermeny, i kontexten av en nyhetsapplikation?

1.4 Avgränsning

Vi utför tester för Android 4.4, vilket måste tas till hänsyn vid granskning av studien. Enheten som testpersonerna använder är en LG G2 som har en skärmyta på 5.2”, vilket gör att våra resultat endast kan kopplas till denna storlek av smartphones. Användartesterna genomförs av personer som har erfarenhet av att använda smartphones som har Androids operativsystem. Testerna kommer att utföras på en prototyp som endast tillåter porträttvy. Detta gör vi dels för att vi har en begränsad tid för utveckling av prototypen, samt

(8)

2 att porträttvy är betydligt vanligare än landskapsvy bland de nyhetsapplikationer som analyserades i förstudien [se bil. 1].

1.5 Termer och Begrepp

Android - Operativsystem som används för smartphones och surfplattor.

Porträttvy - (på engelska Potrait view) - När det vertikala måttet överstiger det horisontella måttet på skärmen. Landskapsvy - (på engelska Landscape view) - När en smartphone läggs på sidan så att det horisontella måttet

överstiger det vertikala måttet på skärmen.

Applikation - Ett program som fyller ett direkt syfte mot en användare. Nyhetsapplikation - En applikation vars syfte är att publicera nyheter.

Google Play - En tjänst där användare kan ladda ner applikationer för smartphones som har Android

operativsystem.

(9)

3

2 Tidigare forskning

I detta avsnitt presenteras tidigare utförd forskning som vi använt som inspiration för denna studie.

Studien utförd av Ayse Gul Kara och Kursat Cagiltay [10] handlar om hur utformningen av en meny på webbsidor påverkar användares prestanda då de använder en webbsida på en stationär dator. De utför användartester på egenutvecklade prototyper, de har fyra olika versioner av en webbsida där varje version implementerar en särskild typ av meny. De testar användbarhet när en meny är horisontell eller vertikal, och om den innehåller “tabbar” eller “rullgardiner”. Under testerna mäts “effectivness” genom tidtagning på hur lång tid det tar att utföra ett antal uppgifter, “efficiency” genom att se hur många fel som görs, och “user satisfaction” genom ett frågeformulär. Med dessa mätvärden avgörs sedan vilken version som anses prestera bäst. Testet utförs på totalt 24 personer. Under testet får en testperson ett papper med ett antal specifika uppgifter som de ska läsa med hjälp av prototypen. Efter att de utfört uppgifterna så svarar de på ett formulär kring vad de själva tyckte om prototypen. Resultaten från denna studie visar att skillnaden på användbarhet är väldigt liten när man jämför menyer med “tabbar” eller “rullgardiner”. Däremot presterar testpersonerna bättre med en horisontellt placerad meny, än vad de gör med en vertikal.

En annan studie som vi tagit del av handlar om hur skärmstorleken på en enhet påverkar användandet av en applikation [15]. Författarna genomför tester på hur olika designer på ett gränssnitt passar olika bra till enheter med olika stora skärmar. Användartester utförs på en egenutvecklad prototyp av en webbsida, där testpersonerna använder en applikation först på en smartphone, och sedan på en surfplatta. Därefter jämförs resultaten från de två olika enheterna. Under testerna mäts den totala tiden som testpersonen behöver för att lösa några förspecificerade uppgifter, hur många fel de gör och de svarar på ett frågeformulär om vad de tyckte om webbsidan. Resultatet visar att skärmstorleken påverkar användarupplevelsen markant, en mindre skärm (smartphone t.ex.) kräver en helt annan design på användargränssnittet jämfört med om samma applikation används på en större skärm som en surfplatta, för att applikationen ska kunna användas lika effektivt.

I en studie utförd av Aaron Read, Alvin Tarrell och Ann Fruhling [17] visas hur avgörande en väl fungerande meny är. Användare förlitar sig helt på den för att navigera bland allt innehåll, och om den inte fungerar på ett tillfredsställande sätt riskerar användaren att känna sig vilse och osäker på hur de ska hitta vad de söker. Genom en bra designad meny blir det lättare för användaren att få en överblick och organisera allt innehåll mentalt. De tar även upp tidigare forskning som visar att det är bättre att ha en “bred” navigation, jämför med en “djup” navigation sett ur ett användbarhetsperspektiv. Med en “bred” navigation menas att det inte finns så många nivåer av kategorier, t.ex. huvudkategorier och deras underkategorier utgör två nivåer. Medan “djup” navigation innebär att det finns flera nivåer.

I denna studie undersöks hur två olika typer av navigationsmenyer påverkar användarens upplevelse genom användartester som utförs på en stationär dator. En av navigationsmenyerna som testades var en så kallad “expandable” meny, som expanderar då användare klickar på dem eller håller muspekaren på dem och därmed presenteras ny information för användaren. Den andra menyn är en mer klassisk meny som består av flikar/tabbar och all information är alltid synlig för användaren. För att mäta testpersonernas prestanda utgås från de mätvärden som specificeras av ISO 9241-11. Resultatet av testerna visar på att testpersonerna presterade bättre på den “klassiska” menyn. Anledningen till detta är att användaren får en bättre överblick på all funktionalitet och på information som finns i en applikation och som inte döljs.

(10)

4 Greg Foster och Terence Foxcroft genomförde en studie [7] där de testar en egenutvecklad navigationsmeny som heter “Barrel Menu”. För att utvärdera hur barrel menu presterar mot andra menyer så utgår Foster och Foxcroft från ISO 9241-11 definition av användbarhet där kraftfullhet (effectiveness), effektivitet (efficiency) och ändamålsenlighet (satisfaction) mäts. Mätvärden som togs är antal klick, tid för att utföra en uppgift och antal fel. För att samla in data så genomför Foster och Foxcroft användartester och efter att ett test är klart så fyller testpersonerna i ett frågeformulär. Foster och Foxcroft skriver att ISO 9241-11 är en allmänt erkänd definition av användbarhet, däremot så skriver de inte varför de valde ISO 9241-11 definition av användbarhet. Syftet med vår studie liknar Foster och Foxcroft’s, då en jämförelse mellan navigationsmenyer enligt ISO 9241-11 definition av användbarhet genomförs. Vi genomför användartest för att samla in antal klick, antal felklick och tid för att utföra testet. Ändamålsenlighet mäts genom att testpersonen fyller i ett frågeformulär när testet är klart.

(11)

5

3 Teori

I följande kapitel diskuteras väsentliga teorier utifrån litteratur och vetenskapliga tidskrifter som ligger till grund för uppsatsen.

3.1 Användbarhet

3.1.1 Definition av användbarhet

Ivår studie utgår vi ifrån ISO:s definition av användbarhet, som är utformad på följande sätt [21]:

“The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.”

ISO (International Organization for Standardization) är en organisation som fastställer internationella standarder av alla möjliga typer av produkter och tjänster. Syftet är att effektivisera industrin [8]. Deras definition av användbarhet är väldigt generell och berör i stort sett alla produkter, men därtill har ISO även fastställt riktlinjer för hur olika typer av produkters användbarhet kan mätas i olika sammanhang. En av dessa är ISO 9241-11 som berör mätvärden gällande användbarhet i system.

3.1.2 Mätning av användbarhet

Hur användbarheten av ett system faktiskt mäts kan givetvis se väldigt olika ut beroende på vilken typ av system det rör sig om, hur det är tänkt att användas samt vem som i slutändan ska använda den. Det finns alltså ingen universal lösning som alltid går att använda, utan själva utvecklingsprocessen av ett system måste skräddarsys efter dess egenskaper. Trots detta finns det i alla fall en del riktlinjer som man som utvecklare kan utgå ifrån då man strävar efter att skapa en produkt som ska anses inneha en hög grad av användbarhet enligt ISO:s definition. ISO 9241-11 är en riktlinje som förklarar hur man kan identifiera den information som är väsentlig för att utvärdera användbarhet, genom en användares prestation/utförande samt tillfredsställelse då de använder en produkt [20].

De mest väsentliga mätvärdena nämns i ovanstående definition nämligen “effectiveness, efficiency and satisfaction”. Var och en av dessa kan i sin tur utvärderas genom att besvara följande frågor [21]:

● Effectiveness - Kan användaren slutföra uppgifter, samt uppnå uppsatta mål med produkten? Kan användaren göra det de vill?

● Efficiency - Hur stor ansträngning kräver detta av användaren? (Mäts ofta i tid) ● Satisfaction - Testpersonens subjektiva uppfattning mot systemet.

Dessa blir i sin tur påverkade av följande faktorer:

● Användaren - Vem använder produkten? (Vilka kunskaper/färdigheter har de? Är de nybörjare eller erfarna användare?)

● Uppgifter/mål - Vad försöker användaren utföra med produkten? Stödjer produkten detta? ● Användarmiljön - Var och hur används produkten?

(12)

6

3.2 Smartphone begränsningar

För att utveckla smartphone-applikationer finns det ett antal egenskaper hos just smartphones som måste beaktas. I en studie utförd av Marta Rauch [16] så identifieras de egenskaper och begränsningar som är viktiga att hantera för att lyckas skapa en användarvänlig upplevelse för användaren. I denna studie hänvisar författaren till andra studier som genomförts av bl.a. Jacob Nielsen som handlar om just svårigheter vad gäller användbarhet på smartphones. I Rauch studie så jämförs smartphones egenskaper med hur det ser ut på PC:s, vilket resulterar i följande slutsatser vad gäller smartphones begränsningar:

● längre nedladdning/laddningstider ● begränsad skärmstorlek

● obekväm inmatningsteknik

Det faktum att dessa slutsatser dras då de jämför med PC:s påverkar inte direkt dess relevans till vår studie, eftersom det ofta är just PC:s som folk jämför sina mobila-enheter med. Folk förväntar sig ofta att deras smartphones ska erbjuda samma funktionalitet som en PC, och att det dessutom ska ske lika smidigt och effektivt [14, s. 390f]. Detta skapar en stor utmaning för applikationsutvecklare, då applikationer förväntas ha samma funktionalitet och effektivitet som en PC, trots förhållandevis begränsade resurser.

3.3 Utveckla för smartphones

För att lyckas med att utveckla en bra applikation till en smartphone måste man hantera de egenskaper och begränsningar som nämns ovan. I den här studien fokuserar vi inte på de “längre nedladdning/-laddningstider” av den anledningen att navigationsmenyn inte direkt har någon påverkan på detta. Det vi främst måste tänka på vid undersökningen av navigationsmenyer är just den begränsade skärmstorleken, som gör det svårt att presentera mycket information för användaren på ett tydligt sätt.Delvis måste vi besvara hur man kan utforma en applikation för att kunna erbjuda en stor mängd information till användaren på en relativt liten skärm, och hur mycket bättre eller sämre fungerar vissa vanliga sätt att hantera detta på. Den tredje begränsningen med smartphones som Rauch beskriver är den obekväma inmatningstekniken hos smartphones. Oftast bör man som utvecklare undvika att tvinga användaren att skriva in egen text i de fall det är möjligt, istället bör färdiga alternativ användas som användaren kan välja mellan, om kontexten tillåter detta [16].

3.4 Designmönster

I boken Android Design Patterns skriven av Greg Nudelman beskrivs flera välkända designmönster för Android smartphones. Ett designmönster är ett beprövat sätt att utforma designen av ett användargränssnitt [14, s. 25]. Inom ett designmönster infaller allt som har med gränssnittet att göra, t.ex. färger, bilder eller hur text presenteras för användaren, även navigation infaller under designmönster.

3.4.1 Navigation

Nudelman skriver att navigation tillsammans med sök-funktionalitet och datainmatningsteknikär de tre mest avgörande funktionernaför att skapa en bra användarupplevelse för en mobilapplikation [14, s. 377], av dessa tre är det alltså navigationsdelen som vi kommer att fokusera på i den här studien. Med navigation menas hur en användare kan utforska och använda all den information eller funktionalitet som erbjuds av en applikation. I applikationer som innehåller mer information än vad som får plats på en enda “vy” eller sida, krävs det någon form av meny som underlättar för användaren att navigera bland innehåll. Denna meny kan se ut på

(13)

7 många olika sätt, men genom en undersökning som vi själva utfört (där vi analyserat flera populära redan existerande nyhetsapplikationer) visar det sig att den vanligaste förekommande typen av meny är en så kallad toppmeny. I de fall en toppmeny inte fanns så var det vanligaste alternativet en drawermeny [se bil. 1]. Sett till resultaten av vår förstudie så ser vi att det inte finns några direkta alternativ till det som vi klassificerar som toppmeny och en drawermeny, alla applikationer som ingår i vår förstudie använder någon av dessa. Det andra alternativet som också upptäcktes var så kallad “swipe”. Men detta är snarare ett navigationsmönster som användes i kombination med andra navigationsmenyer, t.ex. toppmeny eller en drawermeny [se bil. 1]. Eftersom vi vill testa navigationsmenyer enskilt så väljer vi därför att inte inkludera “swipe”.

3.5 Navigationsmenyer

3.5.1 Action bar

En “action bar” är en meny som oftast används till att hjälpa användaren med att se var i applikationen de befinner sig och genvägar till funktioner som sök, inställningar eller liknande. För Android applikationer är det standard att ha en “action bar”, och den anses vara en av de viktigaste design elementen som bör implementeras i en applikation [2]. Typiskt innehåller den inte mycket text, utan ikoner används för att menyn inte ska ta onödigt mycket plats. En “action bar” används ofta också för att identifiera en applikation, med t.ex. en logotyp [14, s. 37f] [4]. Ofta läggs även sådan funktionalitet som inte används särskilt ofta, eller inte får plats någon annanstans, i en “dropdown” lista eller liknande i “action bar”. En “action bar” ska alltid vara synlig och i de allra flesta fallen så är den placerad längst upp på skärmen, oavsett var i applikationen användaren befinner sig [4].

Figur 1: Bildexempel på en typisk “action bar”

3.5.2 Toppmeny

En toppmeny kan implementeras som en självstående meny under ”action bar” eller inkluderad i den. Oavsett om menyn är självstående eller som en del av en “action bar” så klassificerar vi det som en toppmeny, då dess karakteriserande drag är i stort sett identiska oavsett om den är självstående eller inte. Det viktiga är alltså att användaren navigerar med hjälp av en meny som finns tillgänglig längst upp på skärmen. I vår egen prototyp väljer vi att implementera en toppmeny separerad från “action bar” eftersom detta var vanligast bland de nyhetsapplikationer som vi studerade i förstudien.

(14)

8

Figur 2 (v): Bilden visar ett exempel där alla genvägar tagits bort från “action bar” och placerats direkt under den. Figur 2 (h): Ett annat exempel där man valt att inkludera alla navigationsmöjligheter i “action bar”.

Trots skillnaderna mellan dessa två exempel så kategoriserar vi dem båda som exempel på användning av toppmeny.

Det som karakteriserar toppmeny är att navigationen på applikationen genomförs med hjälp av en horisontell meny som alltid finns tillgänglig längst upp på skärmen oavsett var i applikationen som användaren befinner sig. Menyn ska innehålla genvägar till utvalda funktioner eller information som applikationen innehåller [4]. I kontexten av en nyhetsapplikation skulle en sådan meny troligtvis innehålla genvägar till olika kategorier av nyheter, applikationsinställningar eller liknande.

I vår förstudie uppmärksammar vi att de nyhetsapplikationer som använder sig av en toppmeny är det vanligast att menyn alltid är synlig för användaren längst upp på skärmen. Men det förekommer även att menyn inte alltid är synlig, utan den är “fast” längst upp på sidan som användaren befinner sig på och när användaren scrollar neråt så försvinner menyn, användaren måste då scrolla upp igen för att komma åt den. Men detta är ovanligt, därför väljer vi att se det som ett karakteriserande drag för topp-meny att den följer med vid scroll och därmed alltid är synlig.

En begränsning med toppmeny är att den inte får ta så mycket plats, eftersom den alltid ska vara synlig och därmed konstant tar upp en del av den redan begränsade skärmytan på en smartphone. En vanlig åtgärd att lösa detta är med en rullgardinslista (eng. dropdown) i menyn som användaren kan välja att öppna (se figur 3), och därmed presenteras en vertikal lista för användaren som innehåller ytterligare alternativ/genvägar. Detta

(15)

9 leder till att menyn oftast endast innehåller de tre eller fyra populäraste alternativen, sedan läggs även en klickbar lista till som innehåller resterande alternativ. Ett resultat av detta som måste övervägas är att de alternativen som alltid är synliga i menyn blir mer lättillgängliga än de som endast finns i rullgardinlistan och därmed inte är direkt synliga för användaren. Det är därför viktigt att ha någon ikon som indikerar att det faktiskt finns en klickbar lista med ytterligare alternativ i menyn så att användaren enkelt kan hitta dem. Ett annat alternativ är att man gör det möjligt för användaren att scrolla i sidled på toppmenyn och därmed gör fler alternativ tillgängliga utan att behöva använda en lista.

Fördelen med den här typen av navigationsmeny är att den är väldigt lättillgänglig för användaren, eftersom den alltid är synlig och den tar inte upp särskilt mycket plats som skulle täcka över annan viktig information. Det är även ett mycket vanligt sätt att hantera navigationen bland hemsidor för både smartphones och PC, samt smartphone-applikationer, vilket gör att flera användare troligtvis är vana vid denna typ av navigationsmeny.

3.5.3 Drawermeny

Det som karakteriserar denna typ av meny är att den är från början helt dold för användaren, men genom att dra med fingret från ena kanten på skärmen kan man dra fram en navigeringsmeny som antingen täcker hela skärmen eller bara tar upp en del av skärmytan. Menyn dras in ovanpå den information som visats på skärmen, och kan sedan dras tillbaka åt sidan för att återigen visa den bakomliggande informationen. Menyn innehåller en vertikal lista på alla alternativ/genvägar (till nyhetskategorier etc.) som finns i applikationen [5].

(16)

10

Figur 3 (v): Bildexempel på en applikation som använder en drawermeny som navigationsmeny. Notera ikonen längst ut till vänster i “actionbar”, där tre horisontella linjer avslöjar att det finns en drawermeny tillgänglig.

Figur 3 (h): Bilden visar hur det ser ut då användaren drar ut menyn.

En nackdel med denna typ av navigeringsmeny är att den kan vara svår att hitta för ovana användare eftersom att den är dold tills användaren drar eller trycker fram den. Därför är det mycket viktigt att det finns någon typ av indikator som “lockar” användaren till att dra fram menyn från sidan av skärmen. Ytterligare en nackdel är att när användaren väl har dragit ut menyn så täcker den en stor del av skärmen vilket gör att användaren inte kan se både menyn och “sidans” innehåll samtidigt (se den gråmarkerade zonen på bilden i mitten ovan).

Det som talar för en drawermeny är att den inte tar upp någon plats på skärmen då den inte används, vilket är en klar fördel på en liten skärmyta. Vidare gör den att alla genvägar är samlade på samma ställe, inget är svårare att hitta än något annat, vilket också gör att alternativen inte heller måste vara organiserade efter popularitet eller liknande. Det är även en fördel att när en användare väl vet hur denna typ av meny används så är det väldigt enkelt att direkt få tillgång till alla genvägar i menyn genom bara ett enda drag med fingret. Det får plats med betydligt fler alternativ i en drawermeny som är direkt synliga för användaren när menyn visas, jämfört med en toppmeny.

(17)

11

4 Metod

I följande kapitel tar vi upp de metoder som används i denna studie. Även för- och nackdelar med valet av metod tas upp.

4.1 Förstudie

En förstudie genomförs för att analysera vilka navigationsmenyer som populära nyhetsapplikationer använder sig av. Nyhetsapplikationer som har minst 500’000 nerladdningar och är under kategorin populära laddas ner från Google Play för att analyseras. De nyhetsapplikationer som har mindre än 500’000 nerladdningar tas inte med för de anser vi inte är tillräckligt populära. Sammanlagt laddas 16 stycken olika nyhetsapplikationer ner för att analyseras. Med syfte att undersöka vilka navigationsmenyer som är vanligast förekommande i nyhetsapplikationer. Resultatet är att drawermeny och toppmeny är de vanligaste navigationsmenyerna [se bil. 1], och därmed bestämmer vi att det är dessa två som används i studien.

De nyhetsapplikationer som vi använder i vår förstudie är:

NBC News, NPR News, NY Times, The Hindu, Daily Mail, Washington Post, Huffington Post, Financial Times, ABC News, USA Today, Fox News, Aftonbladet, CNN, The Times of India, The Wall Street Journal.

4.2 Prototyp

Flera nyhetsapplikationer som vi analyserar blandar olika typer av menyer. För att jämföra toppmeny och drawermeny utvecklar vi två versioner av en applikation med samma innehåll (men de olika versionerna implementerar en av de menyerna som vi undersöker). Detta leder till att vi tvingar testpersonen att använda sig av endast en typ av meny. Detta görs för att testa toppmeny och drawer var för sig, vilket leder till att vi får ett resultat för varje meny.

Prototypen är utvecklad i programmeringsspråket Java med utvecklingsmiljön Eclipse Android Developer Tools. Utveckling av prototypen följer till stor del de riktlinjer som Androids officiella dokumentation rekommenderar [1]. Vi har även tagit hänsyn till den tidigare forskning som vi redogör för i avsnitt 2, Tidigare forskning.

Prototyperna är uppbyggda så att det är möjligt för användaren att lösa alla uppgifterna med exakt lika många klick med toppmeny och drawermeny.

4.3 Utvärderingsmetoder

4.3.1 Heuristisk utvärdering

Ett alternativ till användartest är att använda heuristisk utvärdering. En heuristisk utvärdering genomförs av experter inom området, till skillnad mot användbarhetstest som görs av representativa slutanvändare. Nielsen definierar 10 stycken heuristiker som kan användas när en heuristisk utvärdering utförs [13].

Att utföra en heuristisk utvärdering är svårt för oss då vi inte har tillgång till experter inom Android eller navigation. Det är inte heller självklart hur vi kan applicera heuristisk utvärdering för att mäta användbarhet enligt ISO 9241-11 definition av användbarhet.

(18)

12

4.3.2 Fokusgrupper

Att använda fokusgrupper är en annan metod för att samla in data. En fokusgrupp går ut på att en produkt eller ett koncept demonstreras för en grupp av personer som ger kritik. Data som huvudsakligen samlas in från fokusgrupper är personers uppfattning och attityd mot produkten eller konceptet [3, s.55].

Med fokusgrupper kan vi mäta ändamålsenlighet (satisfaction) enligt ISO 9241-11. Vi anser att ändamålsenligheten skiljer sig när den mäts genom att en produkt eller koncept demonstreras för en person och när personen själv får använda produkter eller konceptet. Det är också oklart hur Kraftfullhet (effectiveness) och effektivitet (efficiency) mäts med fokusgrupper.

4.3.3 Användartest

Användbarhetstest har sina rötter från den experimentella metodiken [18, s.55]. Metoden används för att utvärdera hur något presterar utifrån olika kriterier. Detta görs genom att testpersoner utför uppgifter som observeras. Vid genomförande av användartest bör en representativ användargrupp användas för att resultatet inte ska bli vilseledande. Användartest kan användas tillsammans med “tänka högt” metoden. När detta görs så berättar testpersonen för testansvarige vad han eller hon tänker medan testet utförs. Fördelen med “tänka högt” är att testansvarige får reda på data som möjligtvis inte skulle kommit fram [18, s.204]. Med användartester kan vi mäta kraftfullhet (effectiveness), effektivitet (efficiency) och ändamålsenlighet (satisfaction) enligt ISO 9241-11 definition av användbarhet. Vi har tid, material och kunskap som krävs för att använda användartest som utvärderingsmetod.

4.4 Mätvärden

4.4.1 Definition av klick

Vi väljer att inte räkna scrollningar som ett klick för det påverkas inte av vilken navigationsmeny som används. Vi antar att testpersoner har olika preferenser vid scrollande vilket leder till att om scroll skulle räknas som klick kan statistiken bli missvisande. Vi väljer därför att fokusera på de klick som kan kopplas med navigationen, vilket medför att draget som görs för att drawermeny ska visas räknas inte som ett klick då det är en horisontell scrollning som utförs. Detta medför att alla uppgifter kan lösas med lika många klick mellan prototyperna och vi anser att statistiken blir intressantare om samma grundförutsättningar finns vid jämförelse av effektivitet (efficiency). Vår definition av klick och scroll påverkar studiens resultat och analys, vilket läsaren måste ta hänsyn till.

4.4.2 Hur vi mäter användbarhet

För att mäta kraftfullhet (effectiveness) enligt ISO 9241-11 definition kommer vi att mäta hur många uppgifter som testpersonen klarade av att utföra. När vi mäter effektivitet (efficiency) enligt ISO 9241-11 så mäter vi tiden som hela testet tog att genomföra [4, s.74], antalet klick [4, s.55] och antalet felklick [4, s.81]. Efter att användartestet är klart så ska testpersonen svara på ett frågeformulär. Detta frågeformulär ligger som grund för att kunna mäta användarens attityd (satisfaction) mot systemet efter att användartestet är slutfört. Enkäten kommer att bestå av påståenden som testpersonen får kryssa i om hon eller han håller med fullständigt eller inte håller med alls [4, s.124].

4.4.3 Testpersoner

Användartesten genomföras av personer som anser att de har erfarenhet av att använda smartphones med Android OS. En testperson testar endast toppmeny eller drawermeny med vår prototyp, inte båda. Detta gör

(19)

13 vi för att en testperson inte ska ha fördel inför det andra användbarhetstestet genom att veta vilka kategorier som finns och vilka uppgifterna är.

4.4.4 Testmiljö

Alla användartest genomförs på en LG G2 som tillhandhålls av testansvarige. Med hjälp av applikationen Recordable Free [9] så spelas alla användartest för att analyseras. Användartesten genomförs i en miljö där testpersonen i så liten utsträckning som möjligt påverkas av yttre omständigheter som kan leda till stress eller fokus på annat än användartestet, då detta kan påverka resultatet. För att åstadkomma detta så genomför vi användartesten i ett avskilt rum med testpersonen.

4.5 Metoddiskussion

Eftersom vi har begränsade resurser har vi valt att endast utföra användartesterna på en LG G2. Detta medför att vi inte vet om resultatet blir likvärdigt om samma metoder skulle användas för att utföra användbarhetstesten på en enhet med större eller mindre skärmyta än vad LG G2 har. Ett problem med användartest är att det är svårt att skapa en helt naturlig användningsmiljö [19] eftersom personen som genomför användartestet vet om att deras prestation observeras och mäts vilket leder till att de bli stressade, som i sin tur med andra yttre omständigheter kan ha en stor påverkan på resultatet. För att minska påverkan av yttre omständigheter så genomförs användartesten i en så identisk testmiljö som möjligt för alla testpersonerna.

Användartester kan se ut på väldigt olika sätt. Vi väljer att dela upp testpersonerna i två grupper där en grupp testar toppmeny och den andra testar drawermeny, sedan jämförs gruppernas resultat med varandra. Det enda kravet vi har på testpersonerna är att de ska ha ägt en Android smartphone. Detta medför att testpersoners varierande kunskapsnivå kan påverka deras resultat helt oberoende av navigationsmenyn. Därmed är det orättvist att jämföra enskilda testfall mot varandra. Därför väljer vi att jämföra grupperna med varandra, då vi anser att de är jämlika.

Vi anser att det endast är en testpersons första test som är intressant i detta fall. Med tanke på att vår prototyp är relativt simpel så kommer en testperson som utför ett test en andra gång på kort tid lösa samtliga uppgifter så enkelt att det inte representerar en “naturlig” situation eftersom de redan vet precis hur de ska göra för att lösa uppgifterna. Om testpersonen som utför testet redan vet vilka kategorier och underkategorier som finns, samt vad de innehåller, så försvinner utmaningen i navigationen. Användaren har redan orienterat sig och memorerat var specifikt innehåll finns, och detta beror inte alls på den navigationsmenyn som testas, utan på det föregående testet. Tiden var för begränsad under vår studie för att vi skulle hinna ändra innehållet i applikationen för att sedan utföra samma tester igen på samma testpersoner, därför valde vi att helt avstå från att göra flera tester på varje testperson.

Den observation som vi utför under testerna bidrar till att hitta sådant som sticker ut och kan kopplas till faktorer som påverkar användbarhet. Enskilda testfall har stor påverkan på medelvärden av olika mätvärden på grund av det begränsade antalet testpersoner. Därför letar vi efter tydliga skillnader i den statistiska undersökningen med mätvärden samt sådant som återupprepas flera gånger under testerna och som kan kopplas till användbarhet och navigationsmenyn.

Genom att använda en prototyp och genomföra användartester så involveras flera personer än bara oss själva. Fördelen med detta är att vi får en bredare inblick av navigationstyperna, vilket gör att vi kan ta åt oss av information som vi inte tänkte på själva. Med hänsyn till hur mycket resurser som måste användas för att

(20)

14 utföra användartester så anses denna metod vara effektiv, då metoden kan genomföras med fem personer som testar en specifik sak [12].

Vi tar hänsyn till att de navigationsmenyer som vi implementerar i prototypen kan se ut på väldigt många olika sätt. Beroende på hur man som utvecklare själv väljer att designa dem kan det göra stora skillnader vad gäller användbarhet. I denna studie har vi till stora delar använt oss av Androids officiella dokumentation för hur man implementerar toppmeny och drawermeny.

(21)

15

5 Resultat

I följande kapitel sammanställs resultaten av de tester som utfördes på de två olika versionerna av en nyhetsapplikation som vi själva utvecklat för denna studie.

5.1 Testuppgifter

5.1.1 Tid

Total tid det tog att utföra alla uppgifter, angivet i sekunder per testperson. Notera att det är olika personer som utfört testerna på toppmeny och drawermeny. Testet består av nio stycken uppgifter där testpersonen ska hitta specifika artiklar [se bil. 2].

Toppmeny Drawermeny 129 170 154 171 172 198 180 200 208 203 231 205 237 270 270 271 Medelvärde: 197,6 Medelvärde: 211 Differens: -13,4 Differens: +13,4

(22)

16

5.1.2 Antal klick

Toppmeny Drawermeny 25 22 26 24 29 25 30 25 31 25 33 27 36 27 38 28 Medelvärde: 31,0 Medelvärde: 25,3 Differens: +5,7 Differens: -5,7

5.1.3 Antal felklick

Toppmeny Drawermeny 1 0 2 0 3 1 3 2 4 2 4 2 5 3 7 3 Medelvärde: 3,6 Medelvärde: 1,6 Differens: +2 Differens: -2

(23)

17

5.1.4 Antal lösta uppgifter

Det är endast en testperson som inte klarade av att utföra en ut av uppgifterna. Detta beror inte på navigationen, utan på att testpersonen inte förstod uppgiften. Efter att vi förklarade uppgiften för testpersonen så lyckades testpersonen att utföra uppgiften.

5.2 Jämförelse av medelvärden

5.2.1 Medelvärde av tid

(24)

18

5.2.2 Medelvärde av antal klick

(25)

19

5.3 Frågeformulär

Samtliga frågor besvarades med en skala på 1 till 6, där värdet 1 står för “stämmer inte alls”, och värdet 6 står för “stämmer helt”.

5.3.1 Toppmeny

Jag anser att det var enkelt att lösa uppgifterna

1. Jag förstod direkt hur jag

skulle använda

applikationen för att lösa uppgifterna

Jag kände aldrig att jag blev frustrerad då jag använde applikationen Testperson 1 4 5 6 Testperson 2 6 5 6 Testperson 3 6 6 6 Testperson 4 4 3 4 Testperson 5 6 5 6 Testperson 6 6 6 6 Testperson 7 5 6 6 Testperson 8 6 6 5 Medelvärde 5,4 5,3 5,6

(26)

20

5.3.2 Drawermeny

Jag anser att det var enkelt att lösa uppgifterna

1. Jag förstod direkt hur jag

skulle använda

applikationen för att lösa uppgifterna

Jag kände aldrig att jag blev frustrerad då jag använde applikationen Testperson 9 5 3 2 Testperson 10 5 6 6 Testperson 11 5 4 5 Testperson 12 6 5 6 Testperson 13 4 6 5 Testperson 14 6 6 4 Testperson 15 5 5 6 Testperson 16 5 3 4 Medelvärde: 5 4,8 4,8

5.3.3 Jämförelse av frågeformulär

(27)

21

6 Analys

I följande kapitel analyseras toppmenyn och drawermenyn först var för sig utifrån de resultat som de fick och sedan jämförs de mot varandra utifrån resultaten.

6.1 Analys av Toppmeny-resultat

6.1.1 Toppmeny: Testuppgifter

Applikationen som implementerar toppmeny har en horisontell rad med flikar, där varje flik innehåller en huvudkategori. Vid klick på en ut av flikarna så visas ytterligare en horisontell rad med flikar innehållande underkategorier. Det som överraskade oss är att när en testperson trycker på en huvudkategori så börjar de ofta att leta efter en artikel inom senaste nytt, istället för att välja den underkategori som förknippas med artikeln som de ska hitta. Både senaste nytt och en huvudkategoris underkategorier visas direkt när en huvudkategori klickas på. Senaste nytt sidan visas tills en underkategori valts. Detta gör att dessa två dynamiska genererade händelser konkurrerar om testpersonens uppmärksamhet.

Figur 4(v): Bilden visar hur en vy ser ut när en kategori (Ekonomi) är vald, men ingen underkategori är vald. Figur 4(h): Bilden visar hur en vy ser ut när en kategori (Ekonomi) och underkategori (utrikes) är vald.

(28)

22 Ett exempel på detta är fråga 6 “Hitta nyhet som berör golfstjärnan Tiger Woods” så klickar flera testpersoner på huvudkategorin sport, sedan så letar de efter artikeln i senaste nytt under sport. När testpersonen sedan märker att artikeln inte finns under senaste nytt så klickar de på underkategorin golf för att fortsätta leta efter artikeln. En teori till varför flera testpersoner väljer detta tillvägagångssättet kan kopplas till vad Steve Krug skriver om hur personer läser av innehåll på webbsidor. Krug [11, s 22] menar att personer nöjer sig med innehåll som delvis är relevant för att vi ska använda oss ut av det. När en testperson väljer sport och sedan letar igenom senaste nytt för att t.ex. hitta nyheter om Tiger Woods (fråga 6) så nöjer de sig, då de antar att de kan hitta artikeln under senaste nytt. När de senare märker att artikeln om Tiger Woods inte finns under senaste nytt så börjar sökandet igen, vilket leder till att underkategorin golf oftast blir mest intressant för testpersonen.

Vi noterade att testpersonerna använde sig av telefonens bakåtknapp vid flera tillfällen där det inte behövdes, utan det leder endast till ett onödigt extra klick. Det tydligaste exemplet på detta är när testpersonen går in på en artikel ur listan och sedan trycker på bakåtknappen fastän toppmenyn visas. Vi kan inte svara på vad detta beror på utan måste spekulera. Det kan bero på att testpersonen kände ett behov av att lämna artikeln innan de kan fortsätta navigera med toppmenyn och sedan genom att använda bakåtknappen så visas föregående vy.

6.1.2 Toppmeny: Frågeformulär

Toppmenyn fick överlag väldigt höga betyg. Det enda som stack ut från resultaten var för påståendet “Jag

förstod direkt hur jag skulle använda applikationen för att lösa uppgifterna”, där en av testpersonerna gav betyget 3,

vilket var det lägsta betyget som toppmenyn fick. För att förstå varför testpersonen gav betyget 3 så jämförde vi testpersonens genomförande mot de andra testpersonernas genomförande för att hitta något som stack ut. Vi upptäckte att för testpersonen som gav betyget 3 så tog det betydligt längre tid gentemot de andra testpersonerna för att förstå att man kan använda sig av en toppmeny för att navigera. Testpersonen spenderade ca 80 sekunder med att leta igenom artiklarna på startsidan (första som visas när applikationen startar) innan testpersonen började använda sig av toppmenyn.

(29)

23 Figur 5: Bilden visar hur det ser ut när man klickat på en specifik artikel.

6.2 Analys av Drawermeny-resultat

6.2.1 Drawermeny Testuppgifter

I de testerna som utförts på den prototypen som implementerade en drawermeny så uppmärksammas att i flera fall är det inte helt självklart för användaren hur de ska navigera i applikationen. Detta beror säkerligen på att det i applikationens startläge inte finns någon självklar indikator på om det överhuvudtaget finns en meny. I prototypen implementeras drawermenyn enligt Androids officiella dokumentation, som säger att en ikon ska finnas uppe i toppmenyn (se bildexempel) som indikerar att en drawermeny finns tillgänglig i applikationen.

(30)

24

Figur 6(v): Figuren visar hur startsidan ser ut på drawermeny är stängd. Notera ikonen (tre horisontella linjer) bredvid Android maskoten som indikerar att en drawermeny finns.

Figur 6(h): Figuren visar hur startsidan ser ut på drawermeny är öppen och en kategori (Teknik) har klickats.

Vi märker dock under testerna att det inte alltid är tillräckligt för att användaren direkt ska förstå hur de kommer åt menyn. Användare har en tendens att istället för att direkt kunna specificera vad de letar efter i menyn dröjer sig kvar på startskärmen och bläddra runt bland det innehåll som finns tillgängligt där, innan de förstår att det måste finnas ett sätt att komma åt mer innehåll.

Detta problem är inte direkt oväntat eller förvånande. Frågan vi ställer oss är snarare hur stort detta problem egentligen är. Våra tester visar på att detta problem inte nödvändigtvis är så stort. Samtliga testpersoner hittade menyn utan någon hjälp, men i ett av fallen tog det ungefär 60 sekunder för testpersonen att upptäcka navigeringsmenyn på första uppgiften. I detta fall spenderade testpersonen tid på startsidan och bläddrade bland startsidans artiklar för att de inte visste att det fanns andra kategorier att välja mellan, vilket gjorde att testpersonen blev lite frustrerad. Men så fort personen upptäckte menyn så gick resterande uppgifter mycket snabbt att lösa och utan några fel.

Sex av åtta testpersoner började med att leta igenom de artiklar som visades på startsidan innan de gick till menyn, men i alla förutom ett fall så var det inga problem att hitta menyn när de väl upptäckte att de måste finnas fler artiklar någonstans. Anledningen är egentligen ganska självklar till varför majoriteten av testpersonerna inte direkt gick till menyn, eftersom den inte är synlig. All fokus från användaren riktas på artiklarna, dessutom vet inte användaren om artikeln kan finnas på startsidan så de vill försäkra sig om detta

(31)

25 innan de tar sig vidare. Givetvis har det stor betydelse för resultatet att vi väljer att utföra testerna på vana Androidanvändare. Om vi inte bestämt oss för att rikta in oss på endast erfarna Androidanvändare så hade detta problem säkert varit mycket mer påträngande och tydligt visats i resultatet.

Värt att uppmärksamma är även att problemet med att hitta menyn egentligen endast påverkar den första (av 9) uppgiften som användaren ska utföra. Därefter när användaren väl har bekantat sig med hur menyn fungerar så löser de resterande uppgifter väldigt enkelt. I de testfallen där testpersonen direkt förstod hur navigeringsmenyn fungerade så presterade de väldigt bra med ytterst få fel eller komplikationer

När användaren väl får fram själva menyn så väljer de oftast rätt alternativ, sett till de uppgifter som de ska lösa under testet. Det enklaste sättet att lösa varje uppgift är att noga observera de underkategorier som finns tillgängliga och därifrån navigera sig till rätt “plats” för att hitta de artiklar som eftertraktas. Detta lyckades alla testpersonerna bra med, med undantag på den första uppgiften där ett par personer till en början tog lite tid på sig att hitta menyn.

6.2.2 Drawermeny: Frågeformulär

Frågorna som testpersoner fick svara på efter att de utfört uppgifterna visar på att majoriteten av testpersonerna var nöjda med applikationen. De testfallen som resulterade i avvikande omdömen vad gäller frågorna gjorde detta på grund av att de var osäkra på hur de skulle använda applikationen till en början. De uppmätta omdömena visar på att om användaren har erfarenhet av att använda drawermeny så har de inte heller några problem med att lösa uppgifterna och de blev inte heller frustrerade. Medan i de fall då användaren var osäker till en början så kunde detta leda till lite frustration, vilket vi märkte dels genom direkt feedback från testpersonerna och i svaren som angavs i frågeformuläret.

6.3 Jämförelse

6.3.1 Tid

Sett till den totala tiden som mättes under testerna så ser vi att medelvärdet är lägre på de testerna som utfördes på toppmenyn. Skillnaden på medelvärdet är 13,4 sekunder, vilket i detta sammanhang inte kan ses som särskilt mycket, eftersom det är ett så begränsat antal tester som utförts, och därmed påverkas sammanlagda värden mycket av extremfall eller avvikande resultat. Vi kan avläsa på resultatet att de två absolut snabbaste testerna utfördes på toppmenyn, 129 och 154 sekunder. De två snabbaste testerna på drawermenyn utfördes på 170 respektive 171 sekunder. Vi har tre tester som sticker ut för att de tog betydligt längre tid att genomföra. Två av dessa test tog 270 respektive 271 sekunder att genomföra på drawermenyn, medan ett test tog 270 sekunder att genomföra på toppmenyn. Tidsmässigt ser vi att testerna ser överlag något bättre ut på toppmenyn, dock med en rätt liten marginal.

Den största anledningen till denna skillnad beror på två saker. Dels att det tar lite tid för en användare att bekanta sig med drawermenyn, första gången man använder applikationen så vet man inte nödvändigtvis om det finns en meny och hur man får fram den om man inte är van vid att använda drawermeny. Däremot är toppmenyn direkt synlig för användaren och kräver inte särskilt mycket förkunskaper från användaren för att förstå. Troligtvis beror det på att toppmeny är ett mer traditionellt sätt att navigera på och som påminner mer om hur det oftast ser ut på de flesta webbläsare och webbsidor.

(32)

26

6.3.2 Antal klick och felklick

Resultaten visar även på skillnader mellan de två applikationerna när det kommer till det totala antalet klick som krävdes av användaren för att genomföra testerna. De tester som utfördes på drawermenyn resulterade överlag i färre klick från användaren. I genomsnitt krävdes det nästan 6 klick mer från testpersonerna som löste uppgifterna med toppmeny. Ser vi på enskilda testfall så märker vi även att fem av åtta testpersoner behövde 30 klick eller mer (30-38) för att lösa uppgifterna med toppmeny, medan det testet med flest antal klick på drawermenyn hade 28 klick totalt. Värt att notera är även att det test med lägst antal klick gjordes på drawermeny med 22 stycken, medan det lägsta på toppmenyn ligger på 25. Applikationerna är uppbyggda så att det är möjligt för användaren att lösa alla uppgifter med exakt lika många klick med toppmeny och drawermeny.

Anledningen till att resultaten skiljer sig på detta sätt beror troligtvis på att med en toppmeny är det enkelt för användaren att snabbt klicka sig vidare i menyn om de inte direkt finner vad de söker, eftersom menyn alltid är synlig och tar användarens fokus ifrån innehållet. Med en drawermeny fokuserar användaren istället på innehållet som de läser eller på menyn, men inte både och. Användarens fokus är fördelat när de använder en toppmeny, om de känner att de inte direkt hittar vad de letar efter och sedan upptäcker något som kan vara relevant i menyn så kan de klicka sig vidare utan att vara helt säker. Men om de använder en drawermeny som täcker allt annat innehåll när den väl är framme så tänker användaren oftast lite längre på vilka alternativ det finns och vad som verkar vara bästa alternativet för dem. Detta leder även till att antalet felklick blir lägre med en drawermeny än med en toppmeny.

6.3.3 Frågeformulär

Överlag var användarna nöjda med applikationerna och gav positiv feedback efter att de utfört testerna. Detta märks också på de svaren som vi samlade in med frågeformulären som varje testperson fick svara på. Jämför vi svaren mellan toppmenyn och drawermeny är skillnaderna inte väldigt stora, men det finns ändå ett par detaljer som bör uppmärksammas. Det är egentligen bara en testperson som angivit lite lägre omdöme om toppmenyn i formuläret, resterande omdömen har varit nästintill uteslutande femmor eller sexor på samtliga frågor. Detta stärker uppfattningen att folk är mer vana vid att använda sig av toppmeny och känner sig bekväma med att använda den.

Ser vi på omdömena för drawermeny så ser även de positiva ut. Det är två personer som ger lite avvikande omdömen som är något lägre än de andra. Detta beror främst på att de testpersoner som hade problem med att hitta drawermeny blev frustrerade med applikationen vilket naturligtvis bidrar till att användarupplevelsen försämras. Samtliga frågor fick ett något lägre medelvärde hos drawermeny jämfört med toppmenyn, vilket troligtvis beror på att flera användare har mindre erfarenhet av att använda drawermeny.

6.4 Toppmeny vs. Drawermeny

Utifrån medelvärdet för alla testerna så fick drawermeny lägre totalt antal klick och felklick, medan toppmenyn fick lägre total tid det tar att genomföra testet. Att bedöma från frågeformuläret så fick toppmenyn marginellt högre omdöme.

Fastän att toppmenyn i genomsnitt hade flera klick och felklick så visar medelvärdet att det gick snabbare att utföra testen på toppmenyn. Detta gör att vi inte kan koppla antal klick eller felklick till hur lång tid det tar att utföra testet. Utifrån medelvärdena från testerna så har toppmenyn mätvärdet tid till sin fördel. Detta pekar på att den viktigaste faktorn för att ge ett högt omdöme på frågeformuläret var att testet gick fort att genomföra. En faktor som ger fördel till toppmenyn är att den har varit implementerad längre tid i Android

(33)

27 än vad drawermeny har, vilket gör att Android-användare har fått längre tid på sig att vänja sig vid toppmenyn än vad de har med drawermeny.

De utförda testerna visar på att användare utför saker i olika ordning beroende på om de använder en toppmeny eller drawermeny. Detta beror på att användaren fokuserar på olika saker beroende på vilken navigationsmeny som används. Med en toppmeny där användarens fokus växlar snabbt mellan menyn och själva innehållet som användaren letar efter så ser vi att det vanligaste tillvägagångssättet för en användare är följande:

1. Kontrollera de artiklar som är synliga för att se om någon av dem stämmer med det som efterfrågas av uppgiften som ska lösas.

2. Om rätt artikel inte hittas byter användaren huvudkategori till något som tros innehålla den eftersökta artikeln.

3. Kontrollera återigen de nya artiklarna som blivit synliga vid byte av kategori.

4. Om rätt artikel fortfarande inte hittas går användaren vidare med att välja en underkategori tillhörande den aktuella kategorin.

I underkategorin hittar sedan användaren rätt artikel. Detta kan jämföras med hur användaren går tillväga då de använder sig av en drawermeny:

1. Kontrollera de artiklar som finns tillgängliga på startsidan.

2. När rätt artikel inte hittas går användaren till menyn där de väljer en huvudkategori, vid detta val presenteras automatiskt även kategorins tillhörande underkategorier vilket användaren observerar och väljer därmed direkt en underkategori där de tror att rätt artikel finns.

3. Efter att ha Kontrollera t det nya innehållet som presenteras hittar de rätt artikel.

Skillnaden är alltså att användaren av en toppmeny börjar med att välja en huvudkategori men observera oftast inte att det finns underkategorier att välja mellan förrän efter att de letat igenom alla artiklar och uppmärksammat att de inte hamnat rätt. Detta beror på att användarens fokus läggs på de nya artiklarna som dyker upp när de byter kategori, och missar därmed att menyn också uppdateras. Detta problem uppstår inte alls med en drawermeny där användarens fokus alltid ligger på antingen menyn eller artiklarna. Men även om toppmeny-användare ofta gör ett extra “steg” i sitt genomförande så ser vi även på resultatet att de ändå oftast utför sitt test snabbare än de som gör samma test med drawermeny. Anledningen till detta är att drawermeny användarna tar lite länge tid på sig att tänka efter vilka alternativ som finns i menyn vilket även leder till färre antal klick och felklick.

(34)

28

7 Slutsats

Utifrån denna studie kan vi nu besvara den frågeställningen som studien utgått ifrån, nämligen “Vilken

navigationsmeny presterar bäst av toppmeny och drawermeny, i kontexten av en nyhetsapplikation?”. Resultatet visar inte

några stora skillnader i mätvärden, men vi upptäckte att testpersonerna överlag utförde testerna något snabbare med toppmeny. Det som talar för drawermeny är att användare behövde inte göra lika många klick för att slutföra uppgifterna. Det skedde även färre antal felklick med drawermeny.

Anledningen till att testpersoner inte behövde utföra lika många klick beror på att de egenskaper som en drawermeny har, nämligen att den dras ut och täcker själva innehållet på applikationen, så att all fokus ligger på själva menyn. Detta leder till att användaren tänker efter mer och ser över vilka alternativ som finns tillgängliga i menyn. Men samtidigt blir menyn något mer svårtillgänglig då den inte alltid är direkt synlig för användaren utan måste “dras” fram. Medan om man använder toppmeny så sker en konflikt där både menyn och själva innehållet på applikationen visas samtidigt och drar användarens fokus till sig när de uppdateras. Detta leder till att användaren ofta inte är helt observant på vilken information som visas och vilka alternativ som finns tillgängliga i menyn. Detta i sin tur resulterar i fler antal klick och felklick.

Det är även tydligt att drawermeny har en lite högre inlärningskurva, vilket kan göra att när en person använder en applikation för första gången så kan de stöta på en del problem. Detta märktes i våra tester, där testpersoner som fick testa toppmeny verkar vara lite mer nöjda, även om skillnaden var väldigt liten sett till våra mätvärden. Vi tror dock att en drawermeny kan användas mycket effektivt av användare som är vana vid hur den fungerar. Den lämpar sig mycket väl för applikationer som har mycket innehåll och där det är viktigt för användaren att få en bra överblick av allt det innehåll som finns tillgängligt i applikationen. Om en applikation måste kunna presentera väldigt mycket innehåll, i form av flera olika kategorier och tillhörande underkategorier anser vi att drawermeny är ett bättre val än toppmeny, även om den kräver lite förkunskaper från användaren för att användas optimalt.

Med tanke på hur små skillnader det är i de uppmätta mätvärdena är det svårt att ge ett definitivt svar på vilken navigationsmeny som presterar bäst. Svaren i frågeformuläret visar att de testpersoner som använder toppmeny är överlag nöjdare även om de gör fler fel och det krävs fler antal klick för att slutföra testet. Detta tyder på att den avgörande faktorn ur en användares perspektiv är att kunna slutföra en uppgift så snabbt som möjligt. Detta prioriteras framför antal klick och felklick, så länge de inte sker allt för ofta. Sett ur detta perspektiv kan vi dra slutsatsen att toppmenyn presterar marginellt bättre i den givna kontexten.

(35)

29

8 Vidare forskning

Vid fortsatt forskning i detta ämne hade det varit intressant att utföra en mer omfattande studie med fler testpersoner. De olika navigationsmenyerna bör testas på enheter med varierande skärmstorlek för att se hur resultatet påverkas. Med mer tid tillgodo bör ett test utföras där samma användare får utföra test på både en toppmeny och en drawermeny, där sedan resultaten jämförs för att fastställa hur mycket användbarheten skiljer sig mellan de två menyerna. Detta kräver mer tid eftersom vi inte vill att testpersonen ska ha en klar fördel under ett av testen där de redan bekantat sig med applikationens innehåll, därför måste man låta en del tid passera innan nästa test utförs på samma testperson. Detta garanterar dock fortfarande inte att testpersonen inte kommer att finna att det andra testet är betydligt enklare att genomföra.

I denna studie har vi även behandlat toppmeny som ett väldigt brett begrepp, men en toppmeny kan se ut på väldigt många olika sätt. Därför hade det även varit intressant att forska vidare kring olika sätt som en toppmeny ska utformas ur ett användbarhetsperspektiv. Detta gäller naturligtvis även drawermeny som kan utformas på flera olika sätt.

(36)

30

9 Referenser

[1] Android. Android Developer. Tillgänglig: http://developer.android.com/index.html (Hämtad: 2014-05-13)

[2] Abran A, Khelifi A, Suryn W, Seffah A. Usability Meanings and Interpretations in ISO Standards. Software Quality Journal 2003 11;11(4):325-338

[3] Albert B, Tullis T. Measuring the User Experience Collecting, Analyzing, and Presenting Usability Metrics. 2nd ed. Burlington, MA, USA. Morgan Kaufmann; 2013 [E-bok] Tillgänglig:

https://www.dawsonera.com.proxy.mah.se/readonline/9780080558264 [4] “Action Bar”, Android Developers. Tillgänglig:

https://developer.android.com/design/patterns/actionbar.html. (Hämtad: 2014-03-14) [5] “Navigation Drawer”, Android Developers. Tillgänglig:

https://developer.android.com/design/patterns/navigation-drawer.html. (Hämtad: 2014-03-14)

[6] “Patterns“, Android Developers. Tillgänglig: https://developer.android.com/design/patterns/index.html. (Hämtad: 2014-03-14)

[7] Foster G, Foxcroft T. Barrel menu: a new mobile phone menu for feature rich devices. In Proceedings of the South African Institute of Computer Scientists and Information Technologists Conference on

Knowledge, Innovation and Leadership in a Diverse, Multidisciplinary Environment (SAICSIT '11).2011;:97-106

[8] “About ISO”, International Organization of Standardization. Tillgänglig: http://www.iso.org/iso/home/about.htm. (Hämtad: 2014-03-13) [9] “Recordable Free” , Invisibility Ltd. Tillgänglig:

https://play.google.com/store/apps/details?id=uk.org.invisibility.recordablefree&hl=sv. (Hämtad: 2014-03-21)

[10] Kara, A.G. Cagiltay, K. A Comparison of Cascading Horizontal and Vertical Menus with Overlapping and Traditional Designs in Terms of Effectiveness, Error Rate and user Satisfaction. Indoor and Mobile Radio

Communications, 2007. PIMRC 2007. IEEE 18th International Symposium.2007;():1-4

[11]Krug S. Dont Make Me Think, A common sense approach to web usability. Berkeley. New Riders Publishing; 2006

[12] 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/

(37)

31 [13] Nielsen J. 10 Usability Heuristics for User Interface Design. Tillgänglig:

http://www.nngroup.com/articles/ten-usability-heuristics/ (Hämtad: 2014-03-13)

[14] Nudelman G. Android Design Patterns: Interaction Design Solutions for Developers. Indianapolis. John Wiley & Sons; 2013

[15] Raneburger, D.; Popp, R.; Alonso-Rios, D. Kaind, H. Falb, J.. A User Study with GUIs Tailored for Smartphones and Tablet PCs. Systems, Man, and Cybernetics (SMC), 2013 IEEE International Conference on.2013;3727(3732):13-16

[16] Rauch M. Mobile documentation: Usability guidelines, and considerations for providing documentation on Kindle, tablets, and smartphones. Professional Communication Conference (IPCC), 2011 IEEE

International.2011;1(13):17-19

[17] Read, A. Tarrell, A. Fruhling, A. Exploring User Preference for the Dashboard Menu Design. System Sciences, 2009. HICSS '09. 42nd Hawaii International Conference.2009;1(10):5-8

[18]Rubin J. Handbook of usability testing: How to plan, design, and conduct effective tests. Indianapolis, IN: Wiley Pub; 2008

[19] Sommerville I. Software Engineering. Boston,MA. Addison-Wesley; 2009 [20] UsabilityNet. International Standards for HCI and Usability. Tillgänglig: http://www.usabilitynet.org/tools/r_international.htm (Hämtad: 2014-03-13)

[21] UsabilityNet. What is Usability?. Tillgänglig; http://www.usabilitynet.org/management/b_what.htm (Hämtad: 2014-03-13)

(38)

32

BILAGA 1

Förstudie

I förstudien uppmärksammades tre olika navigationsmönster som används bland nyhetsapplikationer. Dessa är toppmeny, drawermeny och swipe. Som tabellen nedan visar så var det vanligt att applikationer kombinerade flera navigationsmönster för att strukturera sitt innehåll. I vår studie så var vi tvungna att endast använda oss utav ett navigationsmönster på en applikation för att kunna koppla resultaten till ett särskilt navigationsmönster. Detta ledde till att vi utvecklade två versioner av samma nyhetsapplikation, en med toppmeny och en med drawermeny.

Även om swipe var rätt vanligt så har vi inte inkluderat den i våra tester i denna studie, då det är ett navigationsmönster som inte kan användas helt självständigt, utan det måste kombineras med något annat navigationsmönster för att vara användbart. I tabellen nedan ser man att ingen applikation använder endast swipe. Anledningen till detta är säkert att swipe som självstående navigationsmönster inte har någon meny, vilket gör att användaren inte får någon överblick över vilken information som finns i applikationen. Swipe erbjuder endast ett unikt sätt för användaren att bläddra bland sidor. Eftersom vi väljer att testa navigationsmönster separat så avstår vi från att testa swipe.

(39)

33

Applikationsnamn Toppmeny Drawermeny Swipe

NBC News X NPR News X NY Times X The Hindu X Dayli Mail X X Washington Post X Huffington post X X Financial Times X X ABC News X X X USA Today X Fox News X Aftonbladet X X CNN X X

The Times of India X

The Wall Street J. X X

Figure

Figur 2 (h): Ett annat exempel där man valt att inkludera alla navigationsmöjligheter i “action bar”
Figur  3  (v):  Bildexempel  på  en  applikation  som  använder  en  drawermeny  som  navigationsmeny

References

Related documents

Tiderna har förändrats och det som gällde för 50 år sedan behöver inte alls vara normen idag, eller det som ansågs vara en definitivt val tidigare kan vara något som idag

§ Välj kapsling så tidigt som möjligt, att hitta rätt kapsling när alla parametrar är satta slutar oftast med en för stor och dyr kapsling!. § Våra profilkapslingar är

Gör noggrann efterforskning och hitta den värmepump som passar bäst för din användning med denna

Med hjälp av vår policy och nyckelorden respekt, omtanke, ärlighet och ansvar kan vi genomföra rätt beslut, ge våra kunder flexibel service och leverera rätt resultat varje

I upphandlingsrättelsekravet krävs i första hand att Prominent Finland Oy:s offert skall förkastas, eftersom den inte uppfyller behörighetskraven i anbudsförfrågningen. I andra

Eleverna har lektioner som vanligt från kl.8.15 och åker till från skolan kl.9.10 för att hinna till. Eriksdalsbadet och simskolan som

Om ett parti inte fått fasta mandat i alla valkretsar används partiets röstetal som jämförelsetal i de valkretsar där partiet ännu inte fått mandat, när utjämnings

Stämman beslutade att godkänna styrelsens förslag på utgifts- och inkomststat som anger de budgeterade kostnaderna för 2009 till 1 572 589 kronor och de budgeterade inkomsterna till