Menyer på webbsidor: En jämförelse av olika menyer

Sammanfattning

Detta arbete innefattar hur användare uppfattar olika webbside-menyer beroende på bl.a.

menyns struktur och layout. Dessutom om denna uppfattning kan påverkas av hur mycket eller lite datorvana en användare har. Det som undersöks i detta arbete är ifall det är lättare att söka och hitta information i en meny med få undermenyer i jämförelse med en meny med många menyalternativ, samt om användarna föredrar en horisontell eller vertikal meny. För att kunna svara på detta mäts antal klick samt sekunder det tar för en användare att utföra uppgifter i olika slags menyer. Resultatet visar att det går snabbare för testpersonerna att utföra uppgifterna i de menyer med flest menyalternativ, räknat på både antal klick och antal sekunder. Dessutom svarade användarna i enkäten att de föredrar de menyer med många undermenyer, både vertikal och horisontell. Vid ett framtida arbete kan det vara intressant att undersöka menyanvändningen på exempelvis mobiltelefonen ellers surfplattan.

Nyckelord:​ Menydesign, Användarmedverkan, Användarupplevelse, JavaScript

Innehållsförteckning

1 Introduktion 4

2 Bakgrund 5

2.1 Navigering 5

2.2 Webbside-menyer 5

2.2.1 Horisontella och vertikala menyer 5

2.2.2 Hierarkiska menyer 6

2.3 Förankringspunkter i menyer 7

2.4 Reducering (av menyer) 8

2.4.1 Hicks lag 8

2.4.2 Selective Elision Transform 8

3 Problemformulering 10

4 Metod 12

4.1 Etiska aspekter 14

5 Genomförande 16

5.1 Litteraturstudie 16

5.2 Implementation 17

5.2.1 Menyer 17

5.2.2 Källkod 21

5.2.3 Designval 22

6 Progression 24

6.1 ID Attribut 24

6.2 Filformat/PHP 24

6.3 Bildtext 25

7 Pilotstudie 26

8 Utvärdering 31

8.1 Datainsamling 31

8.2 Presentation av undersökning 31

8.3 Resultat 32

8.4 Analys 41

8.5 Slutsatser 42

9 Avslutande diskussion 44

9.1 Diskussion 44

9.1.1 Etiska aspekter 44

9.1.2 Samhällelig nytta hos arbetet 45

Referenser 46

1 Introduktion

För att en webbsida ska fungera korrekt och vara lätt för användarna att använda, krävs en fungerande navigering. Enligt Dos Santos, De Lara, Watanabe, Filho och Fortes (2011) består navigeringen oftast och endast av en meny. Problemet med dessa webbside-menyer är att det tar för lång tid att hitta och söka information i exempelvis en drop-down meny. P.g.a. detta skapas det en frustration hos användarna eftersom de inte hittar det de letar efter i menyn (Nielsen 2007).

Metoden som används i detta arbete är ett experiment och en undersökning innehållande en enkät för insamling av data. Experimentet går ut på att testpersonerna besöker sex stycken menyer, i webbläsaren Google Chrome, med olika struktur och layout, där de genomför tre stycken uppgifter i varje meny. När användarna gör dessa uppgifter körs det ett skript i bakgrunden som räknar antalet klick användaren gör, samt hur lång tid det tar att utföra uppgifterna. Därefter sker undersökningen där testpersonerna får svara på frågor om menyerna i en enkät. Enkäterna baseras på likert-skalor med intervall mellan 1 och 7, där 1 är lite och 7 är mycket. Frågorna i enkäten baseras på Palmers frågeställningar (Palmer 2002). Testpersonerna är indelade i två olika grupper; de med mycket datorvana och de med mindre datorvana.

Menyerna är skapade i HTML, CSS och JavaScript och finns i sex olika varianter. Tre horisontella och tre vertikala med olika antal undermenyer i drop-downen. De designval som gjordes för de olika webbsidorna och dess menyer skedde med hjälp av (Material Design 2020) som är ett visuellt språk.

Resultatet visade på att testpersonerna utförde uppgifterna snabbast i en vertikal meny med många undermenyer, räknat på både antal sekunder och antal klick. Genomsnittet för denna meny var 29 sekunder samt 5 klick. På en andraplats kom Meny 2 som även den har många menyalternativ, men istället för vertikal är den horisontell. Den långsammaste menyn sett till antal sekunder var en meny med få undermenyer som fick en genomsnitt på 56 sekunder.

När det gäller antalet klick är det Meny 6 med inga menyalternativ alls som var långsammast, med ett medelvärde på 11,6 klick.

Utifrån enkäterna i undersökningen syns det att båda testgrupperna, d.v.s. de med lite datorvana och de med mycket datorvana, föredrar en vertikal meny med många menyalternativ (Meny 5). Denna meny fick väldigt höga poäng av samtliga testpersoner på alla frågor i enkäterna. De lägsta värdena gav testgrupperna till Meny 6, en vertikal meny utan undermenyer. Meny 6 fick låga poäng på framförallt frågorna om menyns översikt, framtida bruk av menyn samt hur uppgifterna var att lösa, men även på resterande frågor.

Eftersom detta arbete endast fokuserar på menyanvändningen på datorer kan det vara av intresse vid ett framtida arbete att även undersöka menyanvändningen på exempelvis surfplattor eller mobiltelefoner. Detta för att sedan kunna jämföra likheter och skillnader mellan enheterna. Det kan även vara intressant att testa olika webbläsare vid en längre undersökningsperiod, då olika webbläsare kan vara olika snabba. P.g.a. detta kan ex.

resultatet där antal sekunder mäts påverkas av valet av webbläsare. Vilket då kan vara intressant att undersöka för att se ifall det kan bli någon märkbar skillnad mellan de olika webbläsarna.

2 Bakgrund

2.1 Navigering

Användbarhet är någonting som varje webbplats strävar efter, samt att det är behövligt att ha en användbar, enkel navigering. Hur användarna interagerar med webbsidan beror på hur navigeringen ser ut. Innehållet på sidan blir oanvändbart om det inte finns en praktisk, fullt fungerande navigering. Att en meny ska vara enkel att navigera sig igenom bör prioriteras, enligt Burell och Sodan (2006). En lätt navigering ses till och med som någonting som måste finnas med. Enligt Burell och Sodan (2006) bör menyn då alltså vara tydlig, omfattande, intuitiv och lätt att hitta. Menyns prestanda beror även på färger, struktur, layout, m.m (Matsui & Yamada 2008). Det gäller således att ta i beaktande flera stycken olika aspekter vid skapandet av en meny.

2.2 Webbside-menyer

Enligt Dos Santos et al. (2011) är en meny ofta den enda och huvudsakliga navigeringen på en hemsida. Just därför är det viktigt att menyn utformas enligt användarens perception gällande enkel och effektiv navigering. Tidigare studier visar att vertikala menyer placerade till vänster samt horisontella menyer längst upp på sidan är två av de bättre alternativen (Dos Santos et al. 2011). Dock är det ofta som menyerna inte fungerar som de ska, på grund av att utvecklarna inte vet vad användarna behöver samt vad de har för strategier och mål.

En anledning till denna okunskap hos utvecklarna är att själva webbsidans design är skapad utefter organisationen eller företaget som äger sidan, istället för hur användarna kommer åt webbplatsen (Dos Santos et al. 2011).

2.2.1 Horisontella och vertikala menyer

I en studie av Dos Santos et al. (2011) skrev de att tidigare undersökningar har visat att horisontella och vertikala menyer är mest uppskattade av användarna. I deras egna studie har de implementerat åtta stycken horisontella menyer som sedan görs ett experiment på.

Detta experiment går ut på att användare ska utföra två stycken uppgifter för var och en av de åtta menyerna. Resultatet visade att det var två stycken traditionella horisontella menyer som var av mest intresse för testpersonerna i deras undersökning. Ett exempel på hur en vertikal samt horisontell meny kan se ut syns i figur 1 respektive figur 2 nedan.

Figur 1: Vertikal meny på en hemsida

Figur 2: Horisontell meny på en webbsida

De diskuterar begränsningar och svårigheter som uppkommit under arbetet, i ett eget kapitel. Dessutom dras det bra slutsatser utifrån resultaten. Det negativa är att diagrammen som presenteras inte använder sig av varken likadana skalor eller intervaller. Det finns heller ingen programkod att studera, vilket gör det svårt att återupprepa arbetet. Dock existerar det länkar till menyerna som användes i studien, men det är inte alla som fungerar. Endast en av länkarna fungerar korrekt.

2.2.2 Hierarkiska menyer

Matsui och Yamada (2008) diskuterar även hierarkiska menyer och hur de är uppbyggda.

Figur 4 nedan visar hur en hierarkisk meny ser ut på en webbläsare, medan figur 3 visar hur trädstrukturen i en hierarkisk meny ser ut. I denna figur syns det att vissa menyalternativ har barn, d.v.s. undermenyer. Tiden det tar för användaren att hitta och klicka på det menyalternativ den är ute efter, är tiden det tar att färdas från rotnoden till “mål”noden.

Problemet är att minimera denna genomsnittliga färdtid, vilket är svårt på grund av följande begränsningar:

● Tiden det tar från en nod till sina barn är inte konstant, den varierar beroende på start-och slutnoderna.

● Menyalternativ tillhör vanligtvis grupper, och de har hierarkiska begränsningar (Matsui & Yamada 2008).

Figur 3: Trädstruktur för en hierarkisk meny

Figur 4: Exempel på en hierarkisk meny på en webbläsare

2.3 Förankringspunkter i menyer

Enligt Kandari och Jain (2015) är en förankringspunkt positionen av ett barn-menyalternativ som är taggat eller bundet med förälder-menyalternativet. En förankringspunkt fungerar som anslutningslänken mellan en förälder meny (nivå x) och en barnmeny (x + 1).

Förankringspunkten spelar en viktig roll i ett nästlat menyanvändargränssnitt eftersom det är denna punkt som barnmenyn öppnas från. Positionen för förankringspunkten bestämmer också avståndet som går till barnmenyn från föräldermenyn.

Följande figur visar en förankringspunkt där Menu Item 3 sitter ihop med Child Menu Item 1.

Figur 5: Exempel på en förankringspunkt i en meny

2.4 Reducering (av menyer)

2.4.1 Hicks lag

Hicks lag, även kallad Hick-Hymans lag, beskriver hur lång tid det tar för en människa att fatta ett beslut som en funktion av antalet valmöjligheter som denne har. En ökning av antalet valmöjligheter kommer att öka beslutstiden logaritmiskt. Hicks lag är alltså en människa–datorinteraktions modell (Hick 1952).

2.4.2 Selective Elision Transform

The selective elision transform är en transformation som försöker bevara tabellstrukturen på en webbsida så mycket som möjligt (Hwang, Kim & Seo 2003). Förutom tabellattribut såsom cellbredd, använder denna transformering syntaktiska attribut som exempelvis textstorlek för att avgöra om en tabellcell ska avlägsnas. Figur 6 nedan visar ett exempel på denna transformering. Transformeringens grupperingsfunktion väljer alla tabellceller vars bredd är större än en given “threshold” (figur 6a). När tabellcellerna är nästlade, undersöker funktionen de inre cellerna först (Hwang, Kim & Seo 2003).

Funktionen använder sig av en så kallad förminskningsfaktor och “information density” för att bestämma vilka undergrupper som ska avlägsnas. Hwang, Kim och Seo (2003) förklarar vad “information density” innebär: “​Information density refers to the amount of content accumulated in a Web component, indirectly representing the component’s importance ​^”.

(Hwang, Kim & Seo 2003, s. 17). Cellen i mitten i figur 6a har högre information density eftersom den är bredare än de andra, och är därför inte avlägsnad. Som synes i figur 6b, bevarar the selective elision transform den viktiga tabellstrukturen av den ursprungliga CNN webbsidan (Hwang, Kim & Seo 2003).

Figur 6: Ett exempel på the selective elision transform. (a) CNN:s hemsida (b) den transkodade CNN hemsidan efter tillämpning av the selective elision transform.

3 Problemformulering

Kandari och Jain (2015) skriver att tiden det tar för användarna att navigera sig fram i menystrukturen påverkas av hur menyn ser ut på webbplatsen. De resonerar också om att när menyalternativet är djupt nästlat i en hierarkisk meny, ökar söktiden för användaren.

Målet för en användare är att nå ett menyalternativ med så få klick som möjligt. Antalet klick beror på hur förälder- och barn menyalternativen är nästlade i menyn (Kandari och Jain 2015).

Dilemmat ligger i användandet av menyer på webbsidor, exempelvis drop-down menyer.

Problemet är då att det tar för lång tid att hitta och söka information i en drop-down meny (Matsui & Yamada 2008). Detta leder till en irritation hos användarna då deras upplevelse av hemsidan försämras (Nielsen 2007). Enligt Horsky, Phansalkar, Desai, Bell och Middleton (2013) ska det inte användas en drop-down meny om det är för många (mer än sex till tio) eller för få alternativ i den. Sådana menyer med för få eller för många alternativ ska helst undvikas helt då de är långsamma och kräver relativt mycket söktid.

Trots att det har gjorts omfattande forskning kring menyer, har det inte alls gjorts lika mycket arbete på att försöka förändra prestandan till det bättre genom att optimera menyns struktur, anser Matsui och Yamada (2008). I och med detta kan det vara intressant att undersöka vilka sorts strukturer på menyer som är snabbast att navigera sig igenom, samt vilka menyer som användarna uppfattar som tydliga och enkla.

Tsandilas och Schraefel (2007) antyder att användarens visuella sökning i en drop-down meny beror bland annat på ordningen av menyobjekten. Om objekten är sorterade, ex.

alfabetiskt, kan söktiden förutses av Hicks lag. Hicks lag säger att tiden för att lokalisera ett menyobjekt är en logaritmisk funktion av menystorleken, d.v.s. antal undermenyer. Med tanke på Hicks lag är det intressant att jämföra en meny med många undermenyer med en annan, reducerad meny, som har färre menyalternativ. Denna jämförelse är intressant för att kunna se ifall en reducerad meny minskar söktiden för användaren. Vilket i sin tur även minskar antal klick användaren gör i menyn. När menyerna däremot inte är alfabetiskt sorterade måste användarna istället skanna dem på ett linjärt sätt för att lokalisera ett objekt. Dock blir söktiden konstant om användarna har memorerat positionen av menyobjekten (Tsandilas & Schraefel 2007). Detta gör det intressant att även undersöka vilken menydesign som användarna upplever som snabbast att navigera sig igenom, med tanke på hur många undermenyer som finns. Samt att undersöka exempelvis om användarna upplever att antalet klick minskar med färre undermenyer, men även att översikten minskar.

Frågeställningar som kommer att besvaras i arbetet:

“Minskar antalet klick vid en reducerad meny?”

“Minskar tiden det tar att utföra uppgiften i en reducerad meny?”

För att kunna svara på dessa frågeställningar kommer antal klick att mätas. D.v.s. hur många klick det tar för användaren att utföra en viss uppgift i en meny. Det är även tiden det tar för en användare att utföra en uppgift som ska mätas. Först kommer menyn bestå av många undermenyer som är djupt nästlade. Sedan presenteras det en annan, reducerad meny och

till sist en meny utan undermenyer. Dessa tre menyer kommer att finnas i två varianter;

horisontell och vertikal, alltså blir det sex stycken menyer totalt. Detta för att kunna undersöka hur stor roll menyns placering har. I alla dessa menyer ska samma uppgifter utföras av användaren.

Hypoteser:

“En reducerad meny minskar antalet klick användaren gör i menyn, men på kostnad av översikten rapporterad av användarna i enkäten”

Denna hypotes baseras på Horsky et al. (2013) forskning om att menyer med för få eller för många alternativ är långsamma att navigera igenom och kräver mycket söktid. Därav hypotesen om att en reducerad meny har en snabbare navigering och därmed minskar antalet klick.

“​En horisontell meny föredras av användarna​”

Motiveringen till denna meny är Dos santos et al. (2011) studie där resultatet visade att användarna föredrog en horisontell meny mest.

4 Metod

En metod betyder ​hur man ska utföra sitt arbete och ​varför det görs på just det sättet​. Det finns fyra olika undersökningsmetoder; undersökning, experiment, quasi-experiment och fallstudie (Wohlin et al. 2012).

Det praktiska arbetet har 6 stycken delmål:

● Samla in lämplig data

● Bygga olika menyer

● Bygga reducerade menyer/reduceringsfunktion

● Skapa en enkät för insamling av data

● Hitta testpersoner för undersökningen

● Göra mätningar på menyerna

Med insamling av lämplig data menas exempelvis att få fram information om hemside-menyer. Både hur de ska byggas och vilka menyer som föredras av användarna.

Datan samlas in genom att granska tidigare forskning som gjorts på webbside-menyer samt att besöka flera programmeringssiter såsom (W3Schools 2020) för att få en uppfattning om hur menyerna ska byggas.

Det andra och tredje delmålet innebär att menyerna byggs m.h.a. den information som samlades in i det föregående delmålet. Totalt är det sex stycken menyer som skapas, varav tre stycken är vertikala och resterande hälft är horisontella. Att en meny är reducerad betyder att den har färre undermenyer än övriga menyer. Alla dessa menyer byggs från grunden, d.v.s. utan någon hjälp av verktyg eller program.

För att samla in data skapas det en enkät utefter Palmers frågeställningar (Palmer 2002).

Frågorna i enkäten ska vara utformade så att testpersonens användarupplevelse av menyerna kommer fram tydligt. För att göra detta används en likertskala där testpersonen ska ange ett tal mellan 1 till 7 på varje fråga, där 1 är lite och 7 är mycket (Palmer 2002).

Det näst sista delmålet innebär att det ska väljas testpersoner till undersökningen. För att få vara testperson finns det inte några speciella krav förutom att testpersonen bör ha någon form av datorvana samt vara mellan 15 och 65+ år.

Slutligen görs det mätningar på menyerna för att kunna fånga upp testpersonernas klick samt antal sekunder det tog för dem att utföra uppgifterna. Detta mäts genom att ha JavaScript som körs i bakgrunden när användarna utför uppgifterna.

Fallstudier är enligt Wohlin et al. (2012) lätta att planera och väldigt realistiska, men resultaten kan vara svåra att generalisera och tolka, dvs. det är möjligt att visa effekterna i en viss situation, men det kräver bl.a. mer analys för att generalisera till andra situationer.

Dessutom är det svårt att få exakta resultat, i och med att en fallstudie är en observationsstudie. Det innebär då att det inte är möjligt att ha full kontroll över en fallstudie, vilket är positivt eftersom att oförutsägbara förändringar säger mycket om de problem som studeras. Dessa oförutsägbara förändringar skapar osäkerhet pga förvirrande faktorer (Wohlin et al. 2012).

Med ett experiment däremot, är det lättare att få mer exakta resultat än i en fallstudie.

Anledningen till detta är att ett experiment är en kontrollerad studie, medan en fallstudie är en observationsstudie, menar Wohlin et al. (2012). Att använda ett experiment som metod är bra på så sätt att det kan undersöka i vilka situationer påståenden är sanna och de kan ge ett sammanhang där vissa standarder, metoder och verktyg rekommenderas för användning (Wohlin et al. 2012). Den största fördelen med ett experiment är att det säkerställer att mer allmänna slutsatser kan dras. Dessutom fås det ett så precist resultat som möjligt. Självklart finns det även nackdelar med ett experiment. Exempelvis kan det vara svårt att kontrollera alla variabler som påverkas, så att korrekt samband visas (Wohlin et al. 2012). Experiment kan även vara kostsamma och tidskrävande, och ytterligare en nackdel är att experiment kan ifrågasättas om den uppsatta situationen verkligen motsvarar situationer i det verkliga livet eller om experiment uppmuntrar konstgjord respons i konstgjord miljö (Denscombe 2014).

Även undersökningar har sina bra och dåliga sidor. Eftersom testpersonerna i en undersökning oftast har varierande erfarenheter och förmågor, är det svårt att få ett så rättvist resultat som möjligt (Wohlin et al. 2012). En fördel med att använda en undersökning är att den inte är lika kostsam som en fallstudie eller ett experiment. En undersökning mäter användarnas upplevelser, vilket är positivt då detta är komplicerat att testa maskinellt. Beroende på hur frågorna är formulerade i enkäten kan användarnas upplevelser även göras kvalitativa m.h.a. en undersökning (Wohlin et al. 2012). På grund av dessa fördelar med en undersökning är det lämpligt att komplettera experimentet med en enkätstudie. Metoden kommer då alltså även innehålla en undersökning med en enkät för insamling av data.

För att själva testningen ska vara enkel att genomföra anser Wohlin et al. (2012) att det bör finnas med faktorer och variabler i testet. Dessa variabler och faktorer ökar även kontrollen i testet. De variabler som kommer att mätas i det här arbetet är användarnas upplevelse och antal klick. Faktorn som varieras är menyns utseende, exempelvis att det är fyra olika utformningar på menyn.

Utförandet går ut på att ett antal testpersoner besöker ett antal olika menyer med varierande struktur, design och layout. Därefter får testpersonerna en enkät där de ska svara på frågor gällande deras användarupplevelse av menyerna, såsom navigering, utseende, enkelhet, m.m (Wohlin et al. 2012). Laugwitz, Held och Schrepp (2008) anser att frågorna i en enkät ska vara konstruerade så att användarupplevelsen av produkten eller tjänsten kommer fram tydligt. Detta för att kunna få fram så relevanta svar som möjligt. Enkätfrågorna kommer att

vara baserade på Palmers frågeställningar i hans studie om design och användbarhet (Palmer 2002). Exempel på frågeställningar Palmer använde: ”är webbsidan enkel att hantera, är mängden information på webbplatsen tillräcklig, är webbsidan lättillgänglig, underlättar webbsidans layout hanteringen av webbsidan samt skulle du återkomma till webbsidan”. Användaren ska ge ett tal mellan 1 till 7 på varje fråga, där 1 är lite och 7 är mycket, även kallat likertskala. Detta för att få en omfattande bild av användarupplevelsen (Palmer 2002). Exempel på hur frågorna ska utformas i enkäten syns i figur 7 nedan.

Figur 7: Exempelfrågor som kommer att finnas i enkäten

Att det är just en kvantitativ undersökning som har valts är för att då kan resultaten från testpersonerna generaliseras till en större grupp. Vilket i sin tur gör så att hypotesen kan motbevisas eller bevisas.

4.1 Etiska aspekter

Då det är människor involverade i undersökningen är aspekten etik oerhört viktig för detta arbete. Enligt Wohlin et al (2012) finns det fyra riktlinjer som bör följas vid en undersökning;

informerat samtycke, vetenskapligt värde, sekretess, samt nyttan. Därför kommer testpersonerna att informeras om syftet med forskningen, vad det kommer användas till, att det är helt frivilligt att delta samt att de deltagande kan dra sig ur när som helst. Wohlin et al (2012) säger också att man inte bör lagra känslig information såsom personnummer. Detta ligger till grund för valet att ​inte​ samla in personnummer i denna artefakt.

Det är även viktigt att tänka på att arbetet ska kunna vara replikerbart, så att samma resultat kan ges. Med anledning till detta kommer all programkod samt enkäten att utges i bilagor.

Programkoden kommer även att publiceras på GitHub.

Eftersom datorkonfiguration kan påverka uppfattningen av webbsidan kommer experimentet att ske på samma dator för varje testperson. På så sätt undviks problemet med att testpersonerna använder olika slags datorer med varierande webbläsare, uppkoppling, nätverk, o.s.v. D.v.s allting gällande datorkonfigurationen som kan påverka att testpersonernas förutsättningar blir olika, elimineras genom användandet av en och samma dator.

5 Genomförande

Innan planering och skapande av menyerna kunde påbörjas skedde det en sökning efter relaterad litteratur. Denna litteratur som har använts i arbetet kommer att listas, vilket förenklar processen för personer som i framtiden vill återupprepa detta experiment.

5.1 Litteraturstudie

Inför detta arbete har det gjorts en granskning på forskningen som finns gällande webbside-menyer och deras navigering samt användbarhet.

Artikeln Burell och Sodan (2006) är användbar för att få en grundlig förståelse för navigeringen på en hemsida samt hur viktigt det är med en praktisk navigering. För att få ytterligare insikt gällande navigering och hemside-menyer användes artikeln Dos Santos et al. (2011). De beskriver mer ingående betydelsen av en meny, exempelvis att menyns placering påverkar användarupplevelsen. Dokumentationen tar även upp vilka slags menyer som har fungerat mindre bra samt vilka som är mest uppskattade av användarna. Denna dokumentation var en viktig del i både planeringen och utvecklingen av menyerna då det gav inspiration till de design- och layoutval som gjordes.

En annan bra källa som användes var Hick (1952) som beskriver hur en människas hjärna fungerar när denne ska bestämma sig för en viss sak, i detta fall vilket menyalternativ hen ska klicka på. Detta kallas även för Hicks lag och betyder mer ingående att tiden det tar för en människa att fatta ett beslut är en funktion av antalet valmöjligheter som denne har.

Hicks dokumentation är relevant för att den kan tillämpas i detta arbete på så sätt att tiden det tar att lokalisera ett menyobjekt är en logaritmisk funktion av menystorleken, d.v.s. antal undermenyer. För att få en uppfattning om hur många undermenyer det bör finnas i en meny användes artikeln Horsky et al. (2013). De anser att det inte ska vara mer än sex till tio alternativ och inte heller för få. Detta var en bra grund inför planeringen av menyernas layout.

För att bygga menyerna innehållande en drop-down krävdes det JavaScript kod för att få fram själva drop-downen. Källan som användes till detta är (W3Schools 2020a) och (W3Schools 2020b). W3Schools beskriver utförligt hur en drop-down kan skapas med hjälp av JavaScript. Dessutom finns det en “Try it Editor” där koden körs, vilket är väldigt användbart då det syns bättre hur koden fungerar. För att få fram dokumentationen om drop down menyer användes sökorden “drop down JavaScript” samt “vertical drop down” på W3Schools sökfunktion. I de menyer där ingen drop-down finns används istället en bild innehållande en länk för att komma vidare till de sidor som innan fanns i drop-downen.

Detta finns även med på alla de andra menyerna då det används för att komma vidare till en specifik hund. För att göra en bild till en klickbar länk läggs det en <a> tagg utanför <img>

taggen. Inspirationen till detta hämtades återigen från (W3Schools 2020c) och sökorden var

“image link”.

5.2 ​ Implementation

I följande kapitel redogörs det hur webbside-menyerna skapades samt hur de ser ut.

5.2.1 Menyer

Horsky et al. (2013) anser att det inte ska vara mer än sex till tio alternativ och inte heller för få alternativ i en meny. Baserat på detta valdes det att implementera tre olika typer av menyer; en meny med många undermenyer, en med få undermenyer samt en utan undermenyer. Var dessa menyer ska placeras på webbsidan bestämdes med hjälp av artikeln Dos Santos et al. (2011). Enligt deras undersökning är det den horisontella menyn som uppskattas mest av användarna. Därför är det lämpligt att ha både horisontella och vertikala menyer i detta arbete så att hypotesen “En horisontell meny föredras av användarna” kan bevisas eller motbevisas. De tre typerna av menyer kommer att implementeras både horisontellt och vertikalt, d.v.s. 3 x 2 = 6 stycken menyer. Utfallet blir följande:

● Meny 1: horisontell med få undermenyer

● Meny 2: horisontell med många undermenyer

● Meny 3: horisontell utan undermenyer

● Meny 4: vertikal med få undermenyer

● Meny 5: vertikal med många undermenyer

● Meny 6: vertikal utan undermenyer

I boken “Web Development Solutions” skriver Heilmann och Francis (2007) att en hemsidas användare bör veta var på webbplatsen de befinner sig för att de ska känna sig trygga.

Dessutom borde det finnas en knapp som tar användaren tillbaka till förstasidan (Heilmann och Francis 2007). På grund av detta togs beslutet att där användaren befinner sig på hemsidan just nu, ska tillhörande menyalternativ vara markerat i rosa färg istället för grön.

Se figur 8. Dessutom finns “Hem-knappen” på webbsidans alla sidor, för att enkelt kunna gå tillbaka till förstasidan var användaren än befinner sig.

Figur 8: Exempel på när ett menyalternativ ändrar bakgrundsfärg

I Meny 1 (figur 9) och Meny 4 (figur 10) är det tre respektive två undermenyer för menyalternativen “Våra hundar” och “Stöd oss”. När pekaren svävar över menyalternativen ändrar bakgrundsfärgen färg till rosa, detta gäller både för toppnavigeringen och undermenyerna. Detta implementerades i alla sex menyer. Det enda som skiljer mellan Meny 1 och Meny 4 utseendemässigt är att den ena är placerad horisontellt medan den andra är vertikal.

Figur 9: Hur Meny 1 ser ut på hemsidan

Figur 10: Hur Meny 4 ser ut på hemsidan

Meny 2 och meny 5 som syns i figur 11 respektive figur 12 nedan är de menyer med flest undermenyer; tolv stycken. Dessa menyer skiljer sig från de andra på så sätt att de inte har några kategorier för hundarna (Valpar, Fullvuxna, Seniorer), utan listar alla hundar direkt i menyn. Menyalternativet Stöd oss ser likadant ut som i Meny 1 och Meny 4.

Figur 11: Hur Meny 2 ser ut på hemsidan

Figur 12: Hur Meny 5 ser ut på hemsidan

De menyer som inte har några drop-downs alls är Meny 3 och Meny 6. Istället för att ha undermenyer presenteras hundarna istället i kategorier efter ett klick på alternativet Våra hundar. Hur detta ser ut demonstreras i den horisontella menyn i figur 14 nedan.

Figur 13: Hur Meny 6 ser ut på hemsidan

Figur 14: Meny 3 efter ett klick på Våra hundar

5.2.2 Källkod

Alla sex menyer är skapade i HTML, CSS och JavaScript. För att skapa drop-downen i de horisontella menyerna användes JavaScript och inspirationen till detta är hämtad från (W3Schools 2020a). Eftersom det är två stycken drop-downs i menyerna behövdes det två stycken “window.onclick”, en för varje drop-down. Dock går det endast att ha en

“window.onclick” åt gången, annars överskriver de varandra. Lösningen, som är hämtad från (StackOverflow 2020) är att istället använda “window.addEventListener” för den ena drop-downen. Se figur 15.

Figur 15: JavaScript kod för drop-down i de horisontella menyerna

För de vertikala menyerna användes en annan typ av JavaScript kod för att skapa drop-downs. Det är en for loop som loopar igenom alla drop-down knappar för att växla mellan att visa och dölja innehållet i drop-downen. Källkoden för Meny 4 och 6 är delvis hämtad från (W3Schools 2020b) och syns i figur 16. En annan skillnad mot de horisontella menyerna är stylingen eftersom menyn är till vänster på hemsidan istället för på toppen. Se figur 17 för CSS kod för de vertikala menyerna.

Figur 16: JavaScript kod för drop-down i de vertikala menyerna

Figur 17: CSS kod för de vertikala menyerna

5.2.3 Designval

Designvalen för de olika hemsidorna och dess menyer gjordes med hjälp av (Material Design 2020) som är ett visuellt språk. Angående färger på en webbsida säger Material Design att det bör finnas en primär färg och en sekundär färg. Den primära färgen är den som förekommer oftast medan den sekundära färgen används bl.a. för att betona element. Det rekommenderas också att använda dessa färger i både ljusa och mörka nyanser för att skapa ett djup på webbplatsen. För att underlätta dessa färgval erbjuder Material Design en så kallad Color Tool, där det visas hur en primär och sekundär färg kan se ut i en applikation.

En demonstration av detta syns i figur 18.

Figur 18: Ett exempel från användandet av Color Tool

6 Progression

6.1 ID Attribut

Allteftersom alla menyer och dess sidor började bli klara var det dags att börja med skriptet för mätningen. Dock kom det inte särskilt långt eftersom det upptäcktes att det fattades något i meny-koden; ID attribut. Det behövdes unika ID:n på varje intressant element för att kunna fånga upp vad användaren klickade på. Självklart kan detta göras utan att ha ID:n på elementen, men det är av intresse att veta exakt vart det klickades. Anledningen är att experimentet går ut på att ge användaren uppgifter att lösa i menyerna, och då ger detta en möjlighet till att se exempelvis felklick som användaren gjorde. Progressionen innebar då alltså att lägga till unika ID:n på alla intressanta element, d.v.s. alla element som användaren förväntas klicka på. Exempel på dessa element är alla alternativ i menyerna samt bilder som är klickbara. I figur 19 nedan syns ett exempel på ett ID som lades till på en knapp i Meny 1.

Figur 19: Det unika ID:t “thedogs” för en knapp i Meny 1

6.2 Filformat/PHP

Ytterligare en förändring som skedde var att byta filformat på i princip alla filer. Från början var filerna sparade i HTML format, vilket fungerade bra då de endast innehöll HTML kod.

Men sedan var tanken att skapa skriptet för mätningarna i PHP kod och sedan lägga in det på alla sidor, d.v.s. alla .HTML-filer. Vilket då resulterade i ett filformatsbyte till PHP, d.v.s.

spara filerna som .PHP istället för .HTML för att PHP-koden ska kunna köras. Dock förändrades även utformningen av skriptet. Istället för att ha PHP kod i varenda .PHP fil, skapades det en ny PHP fil med namn othertake.php som sparades så att alla andra filer/mappar har åtkomst till den. Åtkomsten skapades genom att lägga in JavaScript kod som kollar var användaren klickar och sedan skickar detta till PHP filen nämnd ovan. Detta genom att använda metoden $.post som då skickar datan till othertake.php. Se figur 20.

Således behövde filerna egentligen inte vara i PHP format, men det bestämdes att ha kvar det formatet, ifall det i framtiden skulle mätas på laddningstider.

Figur 20: JavaScript kod som använder sig av metoden $.post

6.3 Bildtext

Vid en genomgång av experimentet och de fyra uppgifterna märktes det en svårighet i att utföra de uppgifter med att hitta hundarna. I de menyer som inte listar hundnamnen direkt i menyn, d.v.s. alla utom Meny 2 och Meny 5, tog det väldigt lång tid att hitta rätt.

Anledningen var att hundarnas namn inte visades vid respektive bild utan man var tvungen att klicka in på alla hundar tills man hittade rätt. Då togs beslutet att lägga till en bildtext på själva hundbilden för att förenkla processen. Se figur 21.

Figur 21: Bild av de fullvuxna hundarna efter bildtext lades till

7 Pilotstudie

En pilotstudie genomfördes för att kunna göra en utvärdering gällande genomförbarheten av experimentet. Men även för att identifiera och åtgärda eventuella felaktigheter.

Pilotstudien bestod av en testperson som besökte sex olika menyer och utförde samma fyra uppgifter på varje meny:

1. Gå till sidan där det finns en bild och beskrivning av hunden Pandora 2. Gå till sidan där det finns en bild och beskrivning av hunden Enzo 3. Gå till sidan där man kan bli medlem i Hundjouren

4. Gå till sidan där det finns en bild och beskrivning av hunden Zelda

Figur 22: Exempel på en hundsida med en bild och beskrivning av hunden

Därefter svarade testpersonen på respektive enkät för varje gång en meny besökts.

Enkäterna baseras på likert-skalor med intervall mellan värden 1 och 7 och frågorna baseras på Palmers frågeställningar i (Palmer 2002). Se figur 23 för frågorna i enkäten. Pilotstudiens syfte är att få fram testpersonens åsikt om de sex olika menyerna samt frågorna i enkäten.

Figur 23: Bild av frågorna i enkäten

Resultatet från pilotstudien, vilket syns i figur ​24​, visar att Meny 1 har högst poäng, medan Meny 3 fick lägst. Att Meny 3 fick så låga poäng berodde på att det inte fanns någon bra översikt i menyn, nämner testpersonen i en återkoppling. Denna brist på översikt gjorde det svårt för testpersonen att lösa uppgifterna då hen inte visste vart hen skulle klicka, utan fick testa sig fram. Meny 1 däremot, uppskattades mycket mer av testpersonen eftersom den har undermenyer vilket då ger en bra översikt samt att det var enkelt att navigera i menyn.

Testpersonens feedback på Meny 2 och Meny 5 är att översikten är väldigt bra vilket gör det lätt att utföra uppgifterna eftersom alla hundarna listas direkt i drop-downen. Det negativa med dessa menyer är dock att de är röriga. Det blir för mycket med tolv alternativ i en drop-down, särskilt eftersom de inte är i bokstavsordning.

Figur 24: Diagram som visar resultatet från enkäterna

Resultatet från mätningen i pilotstudien presenteras i figur 25 nedan, där det syns hur många klick det tog för testpersonen att utföra de 4 uppgifterna i respektive meny. I figuren syns det att Meny 1 har flest antal klick, 25 st och Meny 2 har lägst antal klick, 9 st.

Anledningen till att klicken var så många i den första menyn är att testpersonen hade problem med att utföra uppgift nr 3; ​Gå till sidan där man kan bli medlem i Hundjouren. Det var svårt att förstå att “Medlemskap” skulle finnas under fliken “Stöd oss”. Se figur 26 för referens. När testpersonen sedan hittade “Medlemskap” var det enklare att utföra den uppgiften i de resterande fem menyerna, vilket då resulterade i den stora skillnaden på antal klick mellan Meny 1 och de andra fem menyerna.

Figur 25: Diagram som visar resultatet från mätningarna av antal klick

Figur 26: Meny 1 som visar undermenyerna till Stöd oss

8 Utvärdering

I detta kapitel presenteras resultatet från undersökningens enkäter samt mätresultaten av antal klick och antal sekunder. Enkätresultatens grafer är uppdelade utefter testgruppernas datorvana; de med lite och de med mycket datorvana.

8.1 Datainsamling

22 personer har utfört experimentet samt svarat på enkäten. Dessa testpersoner är indelade i två olika grupper: de som har mycket datorvana och de med mindre datorvana. För att få en bredd i resultatet är åldern bland testpersonerna varierande, allt från 15 år till 65+, samt att könsfördelningen är någorlunda jämn. Att tillägga är att de med mindre datorvana oftast tillhörde den äldre ålderskategorin. Tiden det tar för användarna att utföra uppgifterna beräknas med hjälp av JavaScript som körs i bakgrunden. JavaScriptet räknar även antal klick användarna gör.

8.2 Presentation av undersökning

Undersökningarna utfördes på samma enhet vid alla testtillfällen; en HP Pavilion laptop 14-ce0851no. Webbläsaren som användes vid varje tillfälle var Google Chrome. Samtliga testpersoner har utfört samma uppgifter på de sex olika webbsidorna. Dock skedde det en förändring i utformningen av uppgifterna. Istället för att ha exakt samma uppgifter för varje meny, som i pilotstudien, är det olika uppgifter för varje meny. Dessutom skalades uppgifterna ner till tre stycken istället för fyra, samt att ordningen på uppgifterna ändrades.

Anledningen till detta är Response Bias (James, Demaree & Wolf 1984), exempelvis att det inte bör vara för många uppgifter så att användaren tröttnar och heller inte ha samma ordning på uppgifterna så att användaren lär sig vart “svaren” finns i menyerna. Den nya utformningen av uppgifterna är följande:

Meny 1

1. Gå till sidan där det finns en bild och beskrivning av hunden Pandora 2. Gå till sidan där det finns en bild och beskrivning av hunden Enzo 3. Gå till sidan där man kan kontakta Hundjouren

Meny 2

1. Gå till sidan där det finns en bild och beskrivning av hunden Zelda 2. Gå till sidan där man kan bli medlem i Hundjouren

3. Gå till sidan där det finns en bild och beskrivning av hunden Viggo

Meny 3

1. Gå till sidan där man kan läsa om villkoren för att adoptera en hund 2. Gå till sidan där det finns en bild och beskrivning av hunden Enzo 3. Gå till sidan där det finns en bild och beskrivning av hunden Isor

Meny 4

1. Gå till sidan där det finns en bild och beskrivning av hunden Zelda

2. Gå till sidan där man kan ge en donation till Hundjouren

3. Gå till sidan där det finns en bild och beskrivning av hunden Allie

Meny 5

1. Gå till sidan där man kan kontakta Hundjouren

2. Gå till sidan där det finns en bild och beskrivning av hunden Pandora 3. Gå till sidan där det finns en bild och beskrivning av hunden Pepper

Meny 6

1. Gå till sidan där det finns en bild och beskrivning av hunden Atlaz 2. Gå till sidan där man kan bli medlem i Hundjouren

3. Gå till sidan där det finns en bild och beskrivning av hunden Viggo

Det bakomliggande syftet med uppgifterna är att testpersonen ska navigera sig igenom hela menyn, inte bara delar av den, och på så vis få en bättre uppfattning om menyns översikt, struktur, navigering, m.m. Anledningen till att uppgifterna är olika för varje meny är även här att testpersonen ska navigera i hela menyn samt att det måste finnas olika uppgifter för att kunna göra en jämförelse i resultatet. Att testpersonerna måste ha uppgifter att utföra beror på att de aldrig har besökt webbsidan förut. Till skillnad från Palmer’s (2002) studie där användarna vistades på en sida de redan hade besökt förut behövdes inga uppgifter eftersom användarna kände igen sig på hemsidan. Detta är ej relevant i detta arbete eftersom det var en helt ny webbsida för testpersonerna och därmed behövdes det delas ut uppgifter att utföra i menyerna.

8.3 Resultat

Figur 27 nedan visar att antalet klick i Meny 2 och Meny 5 inte skiljer sig särskilt mycket mellan testpersonerna, baserat på deras datorvana. Meny 1, 4 och 6 däremot har högre antal klick ju lägre ner på likertskalan man kommer, d.v.s. de testpersoner med mindre datorvana.

Figur 27: Visar totalt antal klick testpersonerna gjort för att utföra uppgifterna i menyerna

Figur 28 visar också på att de med mindre datorvana tar lite längre tid på sig att utföra uppgifterna, framförallt i Meny 1 och Meny 6, nu räknat i antal sekunder. Även här syns det att uppgifterna i Meny 2 och Meny 5 tar ungefär lika lång tid för alla testpersoner att utföra.

Figur 28: Visar totalt antal sekunder det tagit för testpersonerna att utföra uppgifterna i menyerna

I figur 29 syns det att Meny 5 har lägst antal klick i genomsnitt av alla menyer, tätt följd av Meny 2. Den meny som har högst antal klick i genomsnitt är Meny 6 och strax därefter ligger Meny 1.

Figur 29: Visar medelvärdet för antal klick i menyerna

Figur 30 visar att Meny 5 går snabbast (räknat i sekunder) att utföra i genomsnitt av de sex menyerna. Meny 1 är långsammast i genomsnitt.

Figur 30: Visar medelvärdet för antal sekunder i menyerna

I figur 31 syns det att testpersonerna med mindre datorvana har gett Meny 1 relativt höga poäng. Frågan om menyns översikt har dock lägre poäng.

Figur 31: Visar resultaten från enkäten om Meny 1 för personer med en datorvana mellan 1 och 3

Figur 32 visar att Meny 1 även fått höga poäng från gruppen med mycket datorvana. Det är också samma fråga som i figur 31 som drar ner betyget, den om översikten.

Figur 32: Visar resultaten från enkäten om Meny 1 för personer med en datorvana mellan 4 och 7

Meny 2 har fått ännu högre poäng än Meny 1 av testpersonerna med lite datorvana, visar Figur 33. Frågan om ordningen på menyalternativen skiljer sig något mot de övriga då den oftast har fått lägre poäng.

Figur 33: Visar resultaten från enkäten om Meny 2 för personer med en datorvana mellan 1 och 3

Figur 34 visar att de med mer datorvana givit höga värden för Meny 2, förutom frågan om ordningen på menyalternativen som även fått en del lite lägre poäng.

Figur 34: Visar resultaten från enkäten om Meny 2 för personer med en datorvana mellan 4 och 7

Figur 35 visar att Meny 3 fått relativt många låga poäng av testanvändarna med mindre datorvana. Frågorna om menyns översikt, lösning av uppgifter samt framtida bruk av menyn har i överlag fått lägre värden i jämförelse med övriga frågor.

Figur 35: Visar resultaten från enkäten om Meny 3 för personer med en datorvana mellan 1 och 3

Figur 36 visar att Meny 3 delvis fått låga poäng även av den andra gruppen som har mer datorvana. De låga värdena har främst getts till frågan om menyns översikt, men även till resterande frågor, förutom frågan om ordningen på menyalternativen.

Figur 36: Visar resultaten från enkäten om Meny 3 för personer med en datorvana mellan 4 och 7

Figur 37 nedan visar att Meny 4 har fått medelhöga poäng av gruppen med mindre datorvana. Frågan om ordningen på menyalternativen har dock fått något högre värden än de övriga frågorna.

Figur 37: Visar resultaten från enkäten om Meny 4 för personer med en datorvana mellan 1 och 3

I figur 38 syns det att testpersonerna med mycket datorvana gav Meny 4 relativt höga poäng.

De frågor som fick något lägre värden är de om översikten samt framtida bruk av menyn.

Figur 38: Visar resultaten från enkäten om Meny 4 för personer med en datorvana mellan 4 och 7

Figur 39 visar att testgruppen med lite datorvana tycker mycket om Meny 5 då den fick väldigt höga värden på alla frågor.

Figur 39: Visar resultaten från enkäten om Meny 5 för personer med en datorvana mellan 1 och 3

I figur 40 syns det att även testgruppen med mycket datorvana tycker bra om Meny 5. Alla frågor om menyn har fått mycket höga poäng.

Figur 40: Visar resultaten från enkäten om Meny 5 för personer med en datorvana mellan 4 och 7

Figur 41 visar att Meny 6 har fått både höga och medelhöga poäng av testpersonerna med lite datorvana. Det är framförallt frågan om menyns översikt som fått de lägre poängen.

Figur 41: Visar resultaten från enkäten om Meny 6 för personer med en datorvana mellan 1 och 3

I figur 42 syns det att gruppen med mycket datorvana har gett Meny 6 blandade poäng.

Frågan om ordningen på menyalternativen har fått överlag väldigt höga värden medan frågan om menyns översikt har fått lägre poäng.

Figur 42: Visar resultaten från enkäten om Meny 6 för personer med en datorvana mellan 4 och 7

8.4 Analys

Undersökningen visar att testpersonerna med mindre datorvana föredrar Meny 5, d.v.s. en vertikal meny med många undermenyer. Gruppen med mer datorvana tycker även den bäst om Meny 5. Tätt efter på en andraplats kommer Meny 2, den vertikala med många menyalternativ. Detta gäller för båda testgrupperna. Både Meny 2 och 5 har totalt tolv stycken undermenyer. Den stora skillnaden är att den vertikala menyn, den som fick bäst betyg, har menyalternativen sorterade alfabetiskt, medan Meny 2 inte har någon speciell ordning på alternativen. Detta kan vara en anledning till att Meny 5 fick höga betyg av testpersonerna, att det var lättare att hitta information i menyn när den var alfabetisk sorterad. En annan orsak kan vara att denna meny ger en bra översikt, till skillnad från de andra menyerna med få eller inga undermenyer. Detta i sin tur bidrar också till att det går enklare att hitta i menyn. Vilket också kan vara skälet till att Meny 3 och Meny 6 fick de lägsta värdena av båda testgrupperna, då de inte har några undermenyer alls. Vilken i sin tur leder till minskad översikt i menyn samt svårare att utföra uppgifterna, rapporterat av testpersonerna i enkäten.

Om testpersonerna föredrar en horisontell eller vertikal meny bäst är svårt att svara på eftersom det är väldigt jämt mellan menyerna i resultatet. Utifrån svaren i enkäterna om de horisontella menyerna ligger medelvärdet på 5,9 (likertskala 1-7) för samtliga testpersoner i undersökningen. För de vertikala menyerna är det genomsnittliga värdet 5,8. Vid en jämförelse mellan de olika testgruppernas medelvärden, syns det heller inte någon markant skillnad. Från svaren i enkäterna fick gruppen med mindre datorvana ett medelvärde på 5,9 gällande de horisontella menyerna, medan gruppen med mer datorvana fick ett värde på 5,8.

För de vertikala menyerna har testpersonerna med lite datorvana ett genomsnitt på 5,7 och de med mycket datorvana har medelvärdet 5,9.

Meny 5 har visat sig vara snabbast i genomsnitt av alla sex menyer, räknat både till antal sekunder och antal klick. Medelvärdet för att utföra de tre uppgifterna i menyn ligger på 29 sekunder samt 5 klick. Att Meny 5 var snabbast kan bero på att alla menyalternativ listas direkt i en och samma drop-down, vilket sparar både klick och tid då användarna inte behöver leta och klicka sig vidare i menyn. Det kan också bero på att menyns undermenyer är alfabetiskt sorterade vilket kan vara lättare för användaren att söka igenom. Vid flera testtillfällen påstod testpersoner att Meny 5 har en bra överblick i menyn som gör det lätt att hitta hundarna. Vid en jämförelse av de två testgrupperna syns ingen tydlig skillnad då de flesta ligger på ett resultat mellan 25 och 35 sekunder. Gällande klicken hade alla testpersoner 5 klick, förutom två stycken ur gruppen med lite datorvana som istället hade 7 klick. För Meny 5 verkar alltså datorvanan inte spela någon roll med tanke på den minimala skillnad som visade sig mellan de två testgruppernas resultat.

Näst snabbast var Meny 2 med ett medelvärde på 34 sekunder och 6,5 klick. Meny 2 har i princip samma struktur och design som Meny 5, skillnaden är att Meny 2 är horisontell och inte har de tolv alternativen i drop-downen alfabetiskt sorterade. Det sistnämnda kan vara anledningen till att Meny 2 inte är lika snabb som Meny 5. Användarens visuella sökning i en

drop-down meny beror bland annat på ordningen av menyobjekten (Tsandilas & Schraefel 2007).

Den långsammaste menyn är nummer 1 med ett medelvärde på ungefär 56 sekunder.

Anledningen till att Meny 1 fick ett så högt värde kan vara att hundarnas namn inte listas direkt i drop-downen utan användaren måste klicka sig vidare till en viss kategori för att hitta den rätta hunden. Exempelvis kan det vara så att testpersonen inte hittat rätt kategori till en början och måste fortsätta leta, vilket då leder till att tiden ökar för att utföra uppgifterna. De testpersoner med mindre datorvana tog oftast längre tid på sig att utföra uppgifterna än de med mycket datorvana. Detta kan bero på att de kanske inte är vana vid en sådan sorts meny eftersom de inte har tillbringat jättemycket tid på webben. Strax efter Meny 1 kommer Meny 6 med ett medelvärde på 54,5 sekunder. Anledningen kan vara samma som för Meny 1 då denna meny heller inte listar alla menyalternativ direkt i drop-downen. Det tar längre tid att leta efter rätt hund, speciellt om testpersonen inte klickar in på rätt kategori från början.

Räknat på antal klick är det Meny 6 som är långsammast med ett genomsnitt på ca 11,6 klick.

Eftersom Meny 6 inte har några undermenyer alls kan det vara p.g.a. detta som testpersonerna hade så många klick, eftersom de först måste klicka i menyn, sedan på rätt kategori och till sist rätt hund. Vid en jämförelse mellan de två testgrupperna har gruppen med en datorvana mellan 1 och 3 något högre antal klick än den andra gruppen med en datorvana mellan 4 och 7. Medelvärdet för grupperna är 13 respektive 10 klick. Menyn med näst flest klick är Meny 4 med ett genomsnitt på 11,3 klick. Därefter kommer Meny 1 och Meny 3 med ett genomsnitt på 11 respektive 10,5 klick. Vad dessa menyer har gemensamt är att de har tre eller inga undermenyer, vilket skiljer sig från Meny 5 och 2 som har tolv undermenyer och fick lägst antal klick.

8.5 Slutsatser

Utifrån analysering kan experimentet styrka att hypotes 1 till viss del stämmer; “En reducerad meny minskar antalet klick användaren gör i menyn, men på kostnad av översikten rapporterad av användarna i enkäten”. Testpersonerna svarade i enkäten att de inte tyckte att de reducerade menyerna (Meny 1 och Meny 4) hade bra översikt. Den frågan fick låga värden på båda menyerna. Dock minskade inte antalet klick användaren gjorde i de reducerade menyerna. Figur 29 från rubrik 8.3 Resultat, visar att Meny 1 hade i genomsnitt 11 klick och Meny 4 i genomsnitt ungefär 11,3 klick. Istället var det de menyer med flest undermenyer som hade lägst antal klick; Meny 2 med ett genomsnitt på 6,5 klick samt Meny 5 med ett genomsnitt på 5 klick. Att detta blev resultatet kan bero på att Meny 2 och 5 listade alla hundarna direkt i menyn, medan i de reducerade menyerna var användarna tvungna att klicka sig fram till nästa kategori för att sedan hitta rätt hund. Det blir alltså en större risk för felklick i och med att användaren måste välja rätt kategori, istället för att kunna klicka på hunden direkt i menyns drop-down.

Den andra hypotesen; “En horisontell meny föredras av användarna”, stämmer till viss del.

Anledningen till att hypotesen inte stämmer till 100% är att det skiljer så pass lite mellan

testpersonernas åsikter om de horisontella och vertikala menyerna. Utifrån testpersonernas svar i enkäterna syns det att de vertikala och horisontella menyerna fick liknande betyg. De horisontella menyerna fick ett genomsnitt på 5,9 av alla frågor i enkäten, räknat utifrån enkätens likertskala 1-7. Medelvärdet för de vertikala menyerna ligger på 5,8. Vid en jämförelse mellan de två testgruppernas svar framkommer det heller ingen markant skillnad på menyerna. Testpersonerna med lite datorvana gav de horisontella menyerna ett medelvärde på 5,9 och de vertikala 5,7. De vertikala menyerna fick ett genomsnitt på 5,9 av gruppen med mer datorvana, medan de horisontella menyerna fick medelvärdet 5,8. P.g.a.

detta resultat är det osäkert att konstatera att hypotesen om att användarna föredrar en horisontell meny stämmer eftersom skillnaden mellan de horisontella och vertikala menyerna är liten. Troligtvis hade det behövts ytterligare forskning för att kunna svara på den hypotesen korrekt, exempelvis där man fokuserar mer på menyns placering istället för antal undermenyer.

För att svara på arbetets första frågeställning; “Minskar antalet klick vid en reducerad meny?”, har resultaten från de reducerade menyerna jämförts med övriga menyers resultat, vilket visas i figur 29 från rubrik 8.3 Resultat. I den figuren syns det att de reducerade menyerna (Meny 1 och meny 4) hade fler klick än de menyer med många undermenyer.

Genomsnittet för antal klick i de reducerade menyerna var 11 klick samt ca 11,3 klick. Medan menyerna med många undermenyer fick ett medelvärde på 5 och 6,5 klick. Svaret på frågeställningen blir alltså nej, då en reducerad meny inte minskade antalet klick i detta experiment.

Svaret på den andra frågeställningen; “Minskar tiden det tar att utföra uppgiften i en reducerad meny?”, blir även här negativt. De reducerade menyerna fick några av de högsta medelvärderna av totalt alla sex menyer. Genomsnittet för utföra uppgifterna i de reducerade menyerna är 56 sekunder (Meny 1 ) och 45,6 sekunder för Meny 4. De lägsta värdena fick Meny 5 och 2 som har många undermenyer. Deras genomsnitt ligger på 29 respektive 34 sekunder. Således går det inte snabbare att utföra uppgifterna i de reducerade menyerna.

9 Avslutande diskussion

I följande kapitel presenteras en diskussion av undersökningen för att klarlägga arbetet.

Diskussionen tar upp bl.a. etiska aspekter som berörts och framtida arbeten diskuteras för att på en djupare nivå beskriva förbättringsmöjligheter.

9.1 Diskussion

Dos Santos et al. (2011) studie om att de horisontella menyerna föredras av de flesta användare kan inte styrkas då detta experiment visade att testpersonerna inte föredrog de horisontella menyerna framför de vertikala. Resultatet visade istället på att personerna inte föredrog den ena navigeringen framför den andra, eftersom menyerna fick ungefär samma resultat. Horsky et al. (2013) forskning om att det inte bör vara mer än sex till tio eller för få alternativ i en drop-down stämmer delvis överens med resultatet i detta arbete.

Testpersonerna hade bäst resultat och föredrog de menyer med flest menyalternativ. Medan de menyer med få eller inga undermenyer var långsammast, med tanke på framförallt antalet klick, men även antal sekunder. Att de reducerade menyerna och de utan undermenyer fick sämst resultat stämmer överens med Horsky et al. (2013) studie om att en drop-down inte ska ha för få alternativ. Dock går det inte att styrka att en drop-down meny inte ska ha många alternativ, då de menyer med flest (tolv st) undermenyer fick bäst värden i experimentet samt föredrogs mest av användarna, rapporterat i enkäten.

En faktor som kan påverka resultatets trovärdighet är enkäterna. Eftersom testpersonerna svarar på exakt samma frågor efter varje meny kan det hända att de tröttnar på frågorna innan de gjort alla sex enkäter (James, Demaree & Wolf 1984). Exempelvis kanske testpersonerna inte läser frågorna lika noga och inte tänker sig för när de kryssar i siffrorna.

Det bör också tas hänsyn till att även för de mest oerfarna testpersonerna med lite datorvana blev testet lättare att utföra för varje gång. Detta kan göra att den första menyn som testet utförs på hamnar i ett sämre läge vid utvärderingen. Ytterligare en faktor som kan påverka är antalet testpersoner. I detta arbete är det endast 22 testpersoner vilket ger ett något osäkert resultat. Med fler testpersoner ges det ett bredare resultat då variationen på testpersonerna ökar, exempelvis ålder och dator- och mobiltelefonvana. Ju fler testpersoner desto säkrare resultat.

9.1.1 Etiska aspekter

Studiens etiska aspekter, som nämns under rubrik 4.1 Etiska aspekter, beskriver de fyra riktlinjer som bör följas vid en undersökning; informerat samtycke, vetenskapligt värde, sekretess, samt nyttan (Wohlin et al. 2012). Dessa riktlinjer har säkerställts genom att muntligt informera testpersonerna om dessa punkter: att deltagandet i forskningen är helt frivilligt samt att de när som helst under experimentets gång kan avbryta deras medverkan, att deltagandet är anonymt där inga personuppgifter såsom personnummer samlas in, syftet med arbetet och vad det kommer användas till och slutligen vad för metoder som används samt vad som kommer att ske med forskningsresultatet. För att ta hänsyn till Wohlin et al.

(2012) rekommendationer kommer källkoden som gjorts i detta arbete att vara tillgänglig i Github för att studien ska vara replikerbar.

9.1.2 Samhällelig nytta hos arbetet

Detta arbete bidrar till samhällsnytta på så sätt att det är användbart att veta hur webbside-menyer bör se ut, vilka som föredras av användarna samt vilka som inte bör användas. Detta kan vara nyttigt för exempelvis olika institutioner att ta del av då de allra flesta institutioner har en hemsida idag. Dessutom kan de som som har en stor bredd på sina användare ha nytta av den här undersökningen. Framförallt gällande bredd av åldersgrupper samt användarnas datoranvändning.

9.2 Framtida arbete

Då detta arbete endast fokuserar på användandet av webbside-menyer på datorer, skulle det vara intressant i ett framtida arbete att undersöka menyanvändningen på andra typer av enheter. Exempel på en enhet som vore intressant att granska är mobiltelefonen då de allra flesta äger en, samt att användandet av webbsidor på mobilen bara ökar och ökar i och med teknikens utveckling. Dessutom är det allt fler företag som skaffar sig hemsidor istället för att endast använda sig av sociala plattformar såsom Facebook. För att bredda studien ytterligare (vid en framtida längre undersökningsperiod) kan det även vara av intresse att undersöka vilka menyer som lämpar sig bäst på en surfplatta. Det kan vara intressant att se hur resultatet skiljer mellan menyanvändningen på dessa tre enheter.

I och med en längre undersökningsperiod hade det även varit lämpligt att utöka antalet testpersoner i experimentet. I detta arbete är antalet endast 22 personer vilket ger ett något osäkert resultat. Dessutom bör arbetets fokus ligga mer på navigeringens placering istället för menyalternativen och då förhoppningsvis få fram ett säkrare resultat om användarna föredrar en horisontell eller vertikal meny.

Ytterligare en relevant aspekt kan vara att testa olika webbläsare, för att se ifall det blir någon märkbar skillnad på exempelvis resultatet där antal sekunder mäts. Olika webbläsare kan vara olika snabba, samt att deras inställningar även kan påverka resultatet. Därutöver kan även tillägg, cacheminnet och cpu- och minnesanvändning påverka resultatet.

Referenser

Burrell, A. & Sodan, A. C. (2006). Web interface navigation design: Which style of navigation-link menus do users prefer? I ICDEW'06, ​22nd International Conference on Data Engineering Workshops​. Atlanta, GA, USA 3-7 april 2006, ss.42.

Denscombe, M. (2014). The Good Research Guide: For Small-scale Research Projects. 5.

uppl., Maidenhead, Berkshire: McGraw-Hill Education.

Dos Santos, E.P.B., De Lara, S.M.A., Watanabe, W.M., Filho, M.C.A. & Fortes, R.P.M. (2011).

Usability Evaluation of Horizontal Navigation Bar with Drop-down Menus by Middle Aged Adults. I SIGDOC’11, ​Proceedings of the 29th ACM international conference on Design of communication​. Pisa, Italien 3-5 oktober 2011, ss.145-150.

Heilmann, C. & Francis, M.N. (2007) Web Development Solutions. Springer Verlag, 2007, New York.

Hick, W.E. (1952). On the rate of gain of information. ​Quarterly Journal of experimental psychology, ​4:1, ss.11-26.

Horsky, J., Phansalkar, S., Desai, A., Bell, D. & Middleton, B. (2013). Design of decision support interventions for medication prescribing. ​International Journal of Medical Informatics​, 82(6), ss.492-503.

Hwang, Y., Kim, J. & Seo, E. (2003). Structure-Aware Web Transcoding for Mobile Devices.

IEEE Internet Computing, vol. 7, no. 5, ss. 14-21.

James, L., Demaree, R. & Wolf, G. (1984). Estimating within-group interrater reliability with and without response bias. ​Journal of Applied Psychology​, vol. 69, no. 1, ss. 85-98.

Kandari, P. & Jain, A. (2015). An Empirical Study to Evaluate the Best Anchoring Positions in Nested Menus for Optimized Access Time.​ACM SIGSOFT Software Engineering Notes​^, 40(4), ss.1-8.

Laugwitz, B., Held, T. & Schrepp, M. (2008). Construction and evaluation of a user experience questionnaire. I USAB 2008, Proceedings of the 4th Usability Symposium of the Human-Computer Interaction and Usability Engineering Workgroup of the Austrian Computer Society​. Graz, Österrike 20-21 november 2008, ss.63-76.

Material Design (2020) ​Resources​^. ​https://material.io/resources/​ [2020-03-17].

Matsui, S. & Yamada, S. (2008). Optimizing Hierarchical Menus by Genetic Algorithm and Simulated Annealing. I GECCO’08, Proceedings of the 10th annual conference on Genetic and evolutionary computation​. Atlanta, GA, USA 12–16 juli 2008, ss.1587-1594.

Nielsen, J. (2007). ​Does User Annoyance Matter?.​ Nielsen Norman Group.

https://www.nngroup.com/articles/does-user-annoyance-matter/​ [2020-02-03].

Palmer, J., W. (2002). Website Usability, Design and Performance Metrics. ​Information Systems Research​, volym 13, juni 2002, ss.151-167.

StackOverflow (2020). ​Multiple window onclick event in one page​^.

https://stackoverflow.com/questions/48148070/multiple-window-onclick-event-in-one-pag e​ [2020-03-12].

Tsandilas, T. & schraefel, m.c. (2007). Bubbling menus: A selective mechanism for accessing hierarchical drop-down menus. I CHI '07, ​Proceedings of the SIGCHI Conference on Human Factors in Computing Systems​. San Jose, CA, USA 28 april- 3 maj 2007, ss.1195–1204.

Wohlin, C., Runeson, P., Höst, M., Ohlsson, M.C, Regnell, B. & Wesslén, A. (2012).

Experimentation in software engineering. New York: Springer-Verlag New York.

Wu, X., Wu, C., Wei, D. & Xiao, Y. (2019). Alternative computer mouse trigger designs in computerized physician order entry (CPOE) system to reduce clinicians’ drop-down menu selection errors.​ International Journal of Industrial Ergonomics​, 71, ss.14-19.

W3Schools (2020a). ​How TO - Clickable Dropdown​^.

https://www.w3schools.com/howto/howto_js_dropdown.asp [2020-03-12].

W3Schools (2020b). ​How TO - Dropdown Sidebar​^.

https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp​ [2020-03-26].

W3Schools (2020c). ​HTML Links​^.

https://www.w3schools.com/html/html_links.asp​ [2020-03-16].