Interaktionsteknik 7.5 p 5DV132

UMEÅ UNIVERSITET Institutionen för Datavetenskap Rapport obligatorisk uppgift Interaktionsteknik 7.5 p 5DV132 Obligatorisk uppgift nr 3 Kristoffer Granberg Sheng Kuang Hou Dan Örjestad Alexander Andersson Alexander Sundell id15kgg dv16khg c16dod c13aan dv12alsu @cs.umu.se @cs.umu.se @cs.umu.se @cs.umu.se @cs.umu.se Datum 2017-05-13 Grupp # 21 Handledare Lena Palmquist, Jakob Lindqvist

Innehållsförteckning Inledning 3 Design av utvärdering 4 Utförande av utvärdering 5 Resultat av utvärdering 5 Vänhantering 6 Lämna röstkanal 8 Rollhantering 9 Allmänt 10 Slutsatser och diskussion 11 Designförslag 13 Vänhantering 13 Lämna kanal 14 Beskrivande kommentarer av Discords funktioner 15 Rollhantering 16 Logga ut 18 Referenser 20 Bilagor 20 1

Inledning Programmet som kommer undersökas är VOIP-tjänsten Discord. En populär tjänst som inriktad mot personer som spelar, och vill kommunicera via text eller röst i grupp oavsett spel. Tjänsten finns både som webbversion, och i formen där man laddar ner programmet 1 och installerar på ens dator. Vi valde att undersöka webbversionen eftersom det krävs inte nedladdning av programmet för att köra tjänsten utan det körs via webbläsaren (figur 1). Utvecklarna säger att det är ett bra alternativ till Skype och Teamspeak, och uppmanar 2 användare att byta. Deras starka reklam för tjänsten har fungerat väldigt bra, och Discord är nu en väldigt välkänd och populär tjänst. Trots detta så finns det många klagomål med användarupplevelsen. Det gjorde Discord till något som vi i gruppen ville undersöka för att se vad som går att ändra för att göra användarupplevelsen bättre. Det vi i gruppen fokuserar på i den här uppgiften är att undersöka om nya användare kan navigera sig runt i gränssnittet för att utföra diverse funktioner i tjänsten. Funktioner som vi i gruppen anser både administratörer och vanliga användare enkelt bör kunna komma åt utan mycket letande eller extern hjälp. Gruppens frågeställning är Hur kan Discord förbättras för användaren? 3 Figur 1. Gränsytan av Discord. 1 Discord 2017. 2 Ibid. 3 Ibid. 2

Design av utvärdering 4 Enligt Nielsen behövs inte mer än 5 testpersoner för att utföra ett test. Anledning är att om 5 testgruppen är större än fem blir sannolikheten att det som observeras jämlikt. Nielsen föreslår att 5 användare är tillräckligt för att utföra ett test som är kostnadseffektivt och ger en hög träffsäkerhet. Gruppen valde vilka funktioner som skulle testas, och sedan bestämdes det således att fem stycken testpersoner för att bibehålla en hög effektivitet av utvärderingen. Samtidigt som det av bekvämlighet låter samtliga medlemmar i gruppen dela på ansvaret med att tillhandahålla ett test var. För att kunna utföra en formativ utvärdering av Discord, vilket menas att bedöma framgången hos en färdig produkt har vi försökt att utforma vårt användbarhetstest i syfte 6 om att fastställa vilka behov som behöver förbättras. Till hjälp utfördes en pilotstudie med en av medlemmarna i gruppen som själv inte hade någon tidigare erfarenhet av tjänsten för att säkerställa att det nuvarande testprotokollet uppfattas som korrekt samt att den är 7 genomförbar. Testprotokollet innehåller 13 frågor tillsammans med en kort följdfråga på slutet för att få en djupare information vad användare tycker är svårast (se bilaga). De tester som utförs är bland annat se om användaren kan skapa en server, gå med en server, lägga till vänner och skriva meddelande, vilket var de basala funktionerna i programmet (mer om varje test finns i bilaga). Informationen från följdfrågan i slutet användes som ett komplement till observationen för att bättre förstå de områden i programmet som användarna tyckte var mindre användarvänliga. Designprinciper som analysen kommer basera utifrån är synlighet, återkoppling, konsekvens och affordans. Synlighet innebär hur synliga funktionerna är i programmet för att underlätta vad användaren ska göra för att hitta rätt. Återkoppling innebär att skicka tillbaka information om vilken handling som har utförts och vad som har skett till att personen kan fortsätta användande av programmet. Begränsningar innebär att dölja eller 4 Nielsen 2000. 5 Ibid. 6 Preece, Rogers och Sharp 2016, s. 564. 7 Ibid, s. 291. 3

minska synligheten för vissa funktioner för att förhindra användaren att trycka fel i en viss ögonblick. Konsekvens innebär att utformningen av gränssnitt som har liknande tillvägagångssätt använder sig av liknande element för att åstadkomma liknande uppgifter. Affordans innebär hur attributet hos ett objekt underlättar användaren att förstå dess 8 funktionalitet. Utförande av utvärdering Datainsamlingen har gjorts av direkt observation i kontrollerade miljöer med fem universitetsstudenter inom målgruppen 19-35 år. Definitionen av direkt observation innebär att observatören tillbringar tid med testpersonen och observerar en aktivitet medan 9 det pågår. För att säkerhetsställa att alla användare behandlas på samma sätt har gruppen vid ett tidigare skede diskuterat tillvägagångssätt. Detta innefattar bland annat hur vi bemöter användaren för första gången och förklarar studiens mål samt förtydligar att deras kön och exakta ålder kommer att presenteras 10 anonymt i utvärderingen. Detta vill tro ger undersökningens resultat en ökad trovärdighet. Den direkta observationen skedde individuellt i en tyst och trygg miljö där användaren, som förutsätts ha god datorvana men ingen tidigare erfarenhet av att använda Discord fick prova tjänsten med hjälp av webbversionen av Discord. Detta genomfördes med hjälp av en dator med operativsystemet Windows 10 och webbläsaren Google Chrome. Betoning låg på detaljer av vad testpersonerna gjorde, och de datadokumenteringsmetoder 11 som användes bestod mest av anteckning och röstinspelning. Tänka högt-metoden ( think aloud) tillämpades också för att undersöka deras problemstrategier och göra deras 12 tankeprocess mer externaliserad. Resultat av utvärdering Utifrån våra dokumenterade observationer av när våra testpersoner har genomfört vårt testprotokoll, kan vi se att de hade inga större problem med att skapa eller gå med en server. Att skicka meddelanden i en server var inte heller något problem för användarna. Det som var mest problematiskt för användarna var vänhantering, gå ur en kanal och hantera en serverroll. 8 Preece, Rogers och Sharp 2016, s. 50-55. 9 Ibid, s. 286. 10 Ibid, s. 295. 11 Ibid, s. 293 12 Ibid, s. 330-331 4

Vänhantering De test som handlade om vänhantering var test tre och fyra. Där man skulle lägga till en person som vän och sedan bjuda in denna vän som deltagare i servern. Det som användarna hade mest problem med var att hitta var man hittade sidan för vänhantering. När det väl hittade vart de skulle klicka för att komma till sidan var det inga problem. Fyra av våra fem användare hade stora problem med detta. Flera användare hade även problem med att bjuda in en vän till servern som de skapat. De hade inga problem att hitta igen var man skulle klicka för att bjuda in en - vän men vi observerade att de tyckte det var konstigt att det kom upp en länk som man skulle skicka till sin vän. De förstod att de skulle kopiera denna för att sedan hitta tillbaka till vänlistan och skicka länken till en vän. En användare kommenterade att det hade varit enklare om man bara fick välja vilka vänner man ville bjuda in. Se figur 2-3 för hur det ser ut när man ska lägga till vän, samt figur 4 för inbjudningslänk. 13 Figur 2: Visar var man ska klicka för att ta sig till vänhanteringssidan. 13 Discord 2017. 5

14 Figur 3: Visar var man ska klicka för att lägga till vän. 15 Figur 4: Visar hur dialogen för att bjuda in personer ser ut. 14 Discord 2017. 15 Ibid. 6

Lämna röstkanal Test sex handlade om hur man skulle lämna en röstkanal. Detta var något som våra användare hade stor problem med att göra. Problemet var att de hade svårt att hitta knappen som gjorde detta. De gick in på knappen redigera kanal och letade där (figur 5). Några användare valde att radera kanalen eller stänga av mikrofonen när de inte hittade rätt. Fyra av fem användare hade problem med detta. Se figur 6 för vart de skulle klicka för att lämna röst kanal. 16 Figur 5: Visar var användarna ville klicka för att lämna en röstkanal. 17 Figur 6: Visar var användarna skulle klicka för att lämna en röstkanal. 16 Discord 2017. 17 Ibid. 7

Rollhantering Den sista delen som våra användare hade problem med var hantering av roller i servern. Specifikt var det test 9,1 och 9,2 som handlade om att skapa en ny roll och att tilldela denna roll till en användare som var det svåra. Det som användarna hade störst problem med var att hitta vart de skulle gå för att skapa en ny roll. Detta tog ofta flera minuter för flera användare, och när de till slut hittade var de skulle skapa en ny roll så istället för att skapa en ny roll så ändrade de på en befintlig roll. Se figur 7-8, för hur de skulle klicka. Användarna hade liknande problem när de sedan skulle tilldela den nya roll, då skulle man navigera till en ny sida där alla medlemmarna syndes för att sedan tilldela rollen till en av dem. Detta var något som också tog flera minuter för användarna. En användare kommenterade även att: När man skapat en ny roll borde man få ett val att dela ut rollen på en gång. Se figur 9, för vart man ska tilldela roller. 18 Figur 7: Visar var man ska navigera för att hitta för att skapa en ny roll. 18 Discord 2017. 8

Figur 8: De röda markeringar visar var man ska navigera för att hitta att skapa en ny roll och de blå 19 visar var användarna klickade istället. 20 Figur 9: Visar var man skulle navigera för att tilldela en ny roll. Allmänt Utöver de problem som nämndes tidigare så var några allmänna problem att kunna se knappar och förstå vad de betydde, en användare kommenterade att det var väldigt låg kontrast på knapparna, vilket gjorde det svårt att se dom. 19 Discord 2017. 20 Ibid. 9

Ett test var att bannlysa en person och sedan förlåta bannlysningen. En av våra användare hade problem med att hitta vart personen tog vägen efter den blivit bannlyst för att sedan förlåta den. En användare vill logga ut när den var klar, detta var inte ett test men vi observerade att detta var väldigt svårt att lyckas med, och tog en många knapptryck innan de lyckades. Slutsatser och diskussion Baserat på en av designprinciperna för interaktionsdesign anser vi att gränssnittet för Discord faller ibland under kategorin för synlighet då förhållandet mellan funktionerna (vän- och rollhantering samt gå ur en kanal) och hur de har placerats gör det svårare för användare att veta vad de ska göra i nästa steg. Nära relaterat medför det även dålig återkoppling, som innebär att skicka tillbaka information om vilken handling som utförts 21 och vad som har åstadkommits så att personen kan fortsätta med aktiviteten. Detta har vi kunna observera tydlig då det ofta uppstod förvirring bland användaren vid denna del av testet huruvida de lyckats utföra det korrekt eller inte. Vi anser inte att några begränsningar av användarinteraktion behöver äga rum men däremot kan Discords gränssnitt dra nytta av att utformas mer konsekvent. Det första som uppmärksammades av användarna var inputaktiviteten bland olika typer av grafiska objekt i gränssnittet. Som tidigare nämnt så var knappar ibland svåra att tyda och hade låg kontrast. Det andra som användarna fann problematiskt var hur tidskrävande det ibland var att hitta önskad funktion och vi anser därför att en mer effektiv designlösning kan förbättra dessa funktioner. För majoriteten av testerna kan vi dock se att den skärmbaserade gränssnittet har bra affordans som associerar och inbjuder till rätt handling då dessa tog väldigt kort tid för användaren att utföra. I Discords nedre vänstra hörn bredvid ens användarnamn ligger tre knappar, två för att inaktivera din mikrofon och hörlurar, och en för att öppna programmets inställningar. Den sistnämnda knappen är lite konstigt placerad, de andra knapparna har precisa robusta funktioner som kan behöva användas varje körning av programmet. Knappen för att öppna inställningarna är däremot trolig att användas mer sällan, och kan argumenteras att hör hemma annanstans, till exempel uppe i högra hörnet där knappar som hjälp, fästa meddelanden och medlemslista finns. Denna grupp av knappar är mindre trolig att få användning varje körning av programmet och kan därför grupperas ihop. 21 Preece, Rogers och Sharp 2016, s. 51-55 10

Många av Discords knappar har en beskrivande text som kommer upp när musen förs över dem, detta saknas dock i knappen som skapar en ny server, knappen lyser upp men texten saknas. Detta är ett direkt brott mot programmets konsistens som saknar förklaring. Knappens ikon är ett stort plus, men för en ny användare är det ändå svårt att bestämma knappens exakta funktion. Flera av Discords knappar är dolda när de inte är relevanta, detta kan underlätta när en person söker efter en relevant knapp. Om personen däremot söker efter en knapp för att i framtiden veta var den är kan det förekomma problem. Ifall personen inte är med i en kanal som i figur 10, är knappen för att lämna en kanal dold vilket gör att det inte är möjligt att söka efter knappen förrän personen har gått in i en kanal. Projektplanen har till stor del följts med den förändringen att undersökningarna har utförts med endast en närvarande från gruppen till skillnad från samtliga som var planerat. Vår tidsplan har varit till stor hjälp både när det kommer till att ordna träffar och att bli klara i en bra takt med delar av uppgiften. Enkäten kunde haft en ytterligare följdfråga Vad tyckte du knappen borde ha varit? ifall svaret på Tycker du någon av uppgifterna var särskild svår? var att testpersonen hade svårt med test sex eller liknande där en särskild knapp söktes. Figur 10: Discords nedre vänstra hörn när användaren inte är i någon kanal. Knappen för att lämna en kanal som visas i figur 6 saknas. De två första knapparna är för att stänga av micken och 22 högtalarna och den tredje för att öppna Discords konfigurationer. 22 Discord 2017. 11

Designförslag Vänhantering Något som de flesta användare hade problem med var med vänhantering, mycket av problemet här var att hitta till var ens vänner finns. För att komma dit så trycker man på en knapp uppe i vänstra hörnet (figur 2). Vi har kunnat observera att användare for till den knappen men när de höll musen över den så står det Direct Messages eller Direkt Meddelande beroende på språkinställningar. När våra användare såg detta så trodde de att de var på fel väg och började söka en annan väg. Orsaken till att det står direkt meddelande där är för att det också är en sida för att skicka direktmeddelanden, men eftersom man endast kan skicka direktmeddelanden till ens vänner så vore det en bättre lösning att ändra terminologin här från direkt meddelande till vänlista eller vänner. Då skulle våra användare lättare hitta till vänhanteringssidan, se bilden för denna lösning (figur 11). Figur 11: Designförslag av vänhantering. Genom att koppla detta till designprinciperna ökar detta synligheten eftersom den vägleder användaren mer korrekt då det speglar ikonens syfte bättre jämfört med den tidigare texten när markören ställs på ikonen. Det ger även en bättre återkoppling till användaren för en fortsatt användning av programmet då användaren har blivit orienterad bättre. 12

Lämna kanal Att lämna en röstkanal var något som flera användare hade svårighet med. Problemet här var att hitta vart man skulle trycka för att göra det. De alla sökte efter knappen vid sektionen för röstkanaler som tycktes vara mest logiskt istället för ovanför användarinställningar nere i det vänstra hörnet. Att placera knappen på den kanal användaren har gått med i kan hjälpa undvika det här problemet (figur 12). Denna omplacering ger knappen för att lämna en kanal bättre synlighet och gör placeringen av kanal-knapparna mer konsekvent. Figur 12: Omplacering av lämna kanal. 13

Figur 13: Återkoppling efter att lämnat kanal. En sista detalj som uppmärksammades var avsaknaden av återkoppling då förvirring ofta uppstod huruvida användaren hade lyckats koppla ur röstkanalen eller inte. Figur 13 visar ett exempel på hur enkelt detta kan åtgärdas med att ens handling skrivs ut i chatten, endast synlig för användaren själv förstås. Beskrivande kommentarer av Discords funktioner De knappar som saknar beskrivande text synliggörs oftast då man pekar på ikonen. Detta är en regel som gäller för nästan alla knappar i gränsytan av programmet förutom skapandet av server och ett urval av funktioner som beskrivs i välkomstmeddelandet då man först startar upp Discord. Med tid så kommer användaren att känna igen dessa lätt, men eftersom välkomstmeddelandet är lätt att missa, och att användare av vana brukar ignorera dessa så anser vi att det enkelt skulle kunna åtgärdas. Dessa åtgärder förstärker inte enbart programmets konsekvens utan ger det också bättre affordans genom att knapparna själva förmedlar vad de gör, figur 14 visar ett exempel på hur denna åtgärd kan se ut. 14

Figur 14: Tillägg av beskrivande text. Rollhantering Rollhantering är en mer avancerad del av discords funktioner, det är inte en funktion man kommer använder särskilt ofta, därför bör den inte ha en tydlig knapp på serverns startsida. Men den bör ha en tydligare sökväg än den har nu då det är en viktig och användbar funktion om ens server blir större. För att förbättra synligheten för denna funktion så kan man flytta ut roll hanteringen från där den är under serverinställningarna till en egen flik (figur 15). 15

Figur 15: Designförslag för underlättad synlighet av rollhantering Sedan för att förhindra så att man inte gör fel när man vill skapa en ny roll, så kan knappen för att skapa en ny roll ändras från ett plus till en liten knapp där det står Skapa roll. Detta skulle öka synligheten och återkopplingen för att skapa en ny roll (figur 16). Figur 16: Designförslag för underlättad synlighet av att skapa en ny roll. 16

Efter man sedan skapat en ny roll skulle man kunna få en förfrågan om man vill tilldela den nya rollen till någon. En roll skapas ju för att användas så denna förfrågan bör inte ses som störande utan snarare underlättande och skulle öka återkopplingen på när man skapar en roll, samt öka synligheten för att tilldela en roll. Logga ut En av användarna anmärkte att det fanns svårigheter att logga ut från Discord. Nuvarande sätt att logga ut ur Discord är att först klicka på Inställningar som är kugghjulet bredvid ens användarnamn och användarens bildikon (figur 17). Sedan klickar man på en logga ut knappen nere i fönstret (figur 18). Figur 17: Knappen för inställningar i Discord 23 Figur 18: Nuvarande logga ut knapp i Discord 24 23 Discord 2017. 24 Ibid. 17

Designförslagen för logga ut knappen är att placera knappen i gränsytan av programmet vilket gör att knappen blir mer synlig (figur 19). Genom att koppla detta till designprinciperna ger detta en bättre synlighet för användaren jämfört med den tidigare knappen som var väldigt dolt. En textbeskrivning av knappen har gjorts under knappen vilket medför till en ökad synlighet. För en förbättrad återkoppling kan vara att implementera en ljud av utloggning En bättre affordans har medförts eftersom knappen ger ett tydlig intryck vad den ska göra vilket den inte gjorde tidigare eftersom det stod ingen text till knappen samt att knappen smälte in i bakgrundsfärgen som var gråvit. En god konsekvens bibehålls då inga förändringar har gjorts i tillvägagångssättet jämfört hur alla andra knappar fungerar i programmet. Figur 19: Designförslag av logga ut knappen i Discord. 18

Referenser Discord. Discord - Free Voice and Text Chat for Gamers. 2017. https://discordapp.com/ (Hämtad 2017-04-05) Nielsen, Jakob. Why You Only Need to Test with 5 Users. Nielsen Norman Group. 2000. https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ (Hämtad 2017-04-19) Preece, Jennifer, Rogers, Yvonne och Sharp, Helen Interaktionsdesign: bortom människa-dator-interaktion. Lund: Studentlitteratur, 2016 Bilagor Testprotokoll Vårt testprotokoll för våra observationsstudier, våra användare gör ett antal test, under dessa tester så observerar vi deras arbete och noterar ifall de verkar fastna på något moment. Sedan ställer i en följd fråga efter de gjort alla tester. De saker vi sedan kommer att titta efter i vår utvärdering är synlighet, återkoppling, begränsningar, konsekvent och affordans. Saker som vi måste fixa innan testning: Skapa en Discord server som användaren sedan kan gå med. Skapa en test användare som sedan kan läggas till under våra tester. Viktigt att säga till användare innan testning: Alla tester är frivilligt, användaren får avbryta testet närsomhelst under arbetets gång. Det är systemet som ska testas inte användaren, kan inte göra fel. Allt som görs kommer att vara helt anonymt, inga uppgifter kommer att tas av användaren annat än hur de löser uppgifterna. Förklara kort vad Discord är för program 19

Uppgifter för användare: Test 1. Skapa en Discord server Test 2. Gå med en Discord server Test 3. Lägg till en vän Test 4. Bjud in en vän till servern Test 5. Skapa en kanal Test 6. Gå ur en kanal Test 7. Skriva meddelande till personliga vänner Test 8. Skriva meddelande i text kanal: Test 9. Hantera användare i servern Test 9.1. Skapa nya serverroller. Test 9.2. Ge någon en roll, t.ex. admin. Test 9.3. Sparka ut användare ur kanal Test 9.4. Banna och förlåta en användare från och till hela servern Följdfråga: Tycker du någon av uppgifterna var särskilt svårt? 20