Studies in the field of interaction design and the human memory claim there can be positive effects on the memory when information is presented for the user as a graphical pattern rather than a series of numbers. This thesis aims to influence designers to choose graphical patterns as an interface for information display. Low-fi and hi-fi prototypes of graphical patterns were constructed and tested in a variety of configurations by two users. The users showed differences in the ability to memorize a sequence of digits depending on how this sequence was presented. This study suggests that users are more easily able to recall information presented via a graphical user interface than when the same information is only presented digitally.

<p>Idag finns det en stor mängd program för att underlätta vid design av ett grafiskt användargränssnitt. Många av dessa gör det enkelt att snabbt skapa en prototyp för att exempelvis illustrera en idé kring hur ett gränssnitt kan se ut. Vad som däremot ofta saknas är ett effektivt och intuitivt verktyg för att skapa funktionalitet i prototypen och göra gränssnittet levande utan att behöva kunskaper i programmering.</p><p>Den här rapporten studerar hur ett verktyg för att skapa funktionalitet i prototyper, och som inte kräver några kunskaper i programmering, skulle kunna fungera. Med hjälp av pappersprototyper och användarintervjuer vägs fördelar och nackdelar mot varandra, och resultatet blir ett nytt förslag på hur ett intuitivt men samtidigt kraftfullt verktyg skulle kunna se ut och fungera.</p>

Idag finns det en stor mängd program för att underlätta vid design av ett grafiskt användargränssnitt. Många av dessa gör det enkelt att snabbt skapa en prototyp för att exempelvis illustrera en idé kring hur ett gränssnitt kan se ut. Vad som däremot ofta saknas är ett effektivt och intuitivt verktyg för att skapa funktionalitet i prototypen och göra gränssnittet levande utan att behöva kunskaper i programmering. Den här rapporten studerar hur ett verktyg för att skapa funktionalitet i prototyper, och som inte kräver några kunskaper i programmering, skulle kunna fungera. Med hjälp av pappersprototyper och användarintervjuer vägs fördelar och nackdelar mot varandra, och resultatet blir ett nytt förslag på hur ett intuitivt men samtidigt kraftfullt verktyg skulle kunna se ut och fungera.

<p>Detta är ett 10-poängs examensarbete på C-nivå, som vi under vårterminen avlagt vid Karlstads universitet. Målet med vårt projekt var att skapa ett nytt grafiskt gränssnitt till en komprimeringsalgoritm vid namn PAZ. Nuförtiden finns en hel uppsjö av grafiska gränssnitt till komprimeringsalgoritmer, men inget av dem stöder möjligheten att plugga in en egenutvecklad algoritm. Därför var vi tvungna att skapa vårt eget gränssnitt, som förutom PAZ också skulle stödja ZIP, RAR och andra etablerade algoritmer. Vi har alltså skapat ett grafiskt gränssnitt, vilket är anpassat för en implementation av den nya PAZ-algoritmen.</p><p>Algoritmen har utvecklats av vår uppdragsgivare Martin Larsson. Gränssnittet har vi, i samarbete med Martin, valt att kalla för Winpaz. Vi började med att göra två prototyper, som vi bland annat delade ut till personer på universitetet för att få respons på användarvänligheten hos gränssnitten. Med utgångspunkt från resultaten av dessa tester, konstruerade vi sedan vårt slutgiltiga gränssnitt.</p><p>Kravet vi hade på oss var att skapa ett användarvänligt grafiskt gränssnitt, som skulle stödja de vanligaste algoritmerna. Vi nådde målet att implementera stöd för algoritmerna ZIP och TAR. Dock fick vi göra avkall på implementationen av algoritmerna PAZ och RAR på grund av tidsbrist, men anpassade gränssnittet så att en senare inpluggning av dessa algoritmer är möjlig.</p><p>Vi är nöjda med vår slutprodukt, men inser också att det troligen krävs en del ytterligare funktionalitet för att gränssnittet ska fungera exemplariskt. Under projektet har vi, förutom att vi stärkte våra kunskaper i C++-programmering, även lärt oss att använda utvecklingsverktyget wx-DevCpp. Utöver detta har vi lärt oss att programmera grafiska gränssnitt med hjälp av wxWidgets.</p> / <p>This is a bachelor´s project that we have been working on during a period of ten weeks, full time. The goal of our project was to design and implement a GUI for a new data compression algorithm called PAZ. At present, a vast array of compression/extraction GUIs is available, but none of them provide the possibility to incorporate a user developed algorithm. Thus, we had to create our own, with support for not only PAZ, but also ZIP, RAR, and other well known archiving algorithms. And so, we have created a GUI that is well suited for an implementation of the new PAZ algorithm.</p><p>The PAZ algorithm has been developed by Martin Larsson. We chose, in collaboration with Martin, to name the GUI application Winpaz. We began by implementing two separate prototypes, which we sent out to be tested by a closed group of beta testers. The reason for this test was to investigate how to design various parts of the application to be user friendly. Using the results from the testers, we then began the development of our final version of the GUI.</p><p>Our goals were to implement a user friendly GUI, that supported PAZ as well as the most widespread algorithms already in use. We achieved our first goal, to design a user friendly GUI, and we implemented support for both ZIP and TAR, but had to abandon our efforts in implementing RAR and PAZ support due to lack of time. The interface is however designed with the future incorporation of these algorithms in mind.</p><p>We are fairly pleased with our work, but we also recognize the need for added functionality in order to make the GUI a commercial grade product. During this project we have, apart from broadening our knowledge and skill in C++ programming, also learned to use the IDE wxDevCpp, a powerful open source tool for developing GUI applications based on the wxWidgets framework.</p>

Instruktionsfilmer är ett vanligt inslag i undervisningen. Somliga instruktionsfilmsproducenter gör en enkel skärminspelning medan andra lägger till grafiska element för att locka användarnas uppmärksamhet till specifika delar av skärmen. Idag saknas riktlinjer över hur en instruktionsfilm bör presenteras. Riktlinjer hade inte bara hjälpt videoproducenterna utan ännu viktigare, användarna. I denna studie analyserades två plattformar som använder instruktionsfilmer, LinkedIn Learning och SkillShare. Dessa analyserades för att samla in krav som tillsammans med en litteraturstudie låg till grund för den kravspecifikation som användes till utformningen av prototypen. Med hjälp av A/B-testning testades sedan prototypen på 14 studenter och granskades av en expert inom området människa-datorinteraktion (HCI).  Resultaten indikerar att grafiska element är en viktig del i instruktionsfilmer, detta då de hjälper användarna att fokusera på viktiga och relevanta element som instruktören nämner. Ett resultat från studien är en lista över instruktionsfilmsrekommendationer. / Video tutorials is common in teaching environments. Some tutorial producers record a simple screen recording while others add graphical elements to attract the user's attention to specific parts of the screen. Currently, no guidelines exist on how a video tutorial should be presented. Guidelines would not only help the producers but more importantly, the users.  In this study, two platforms using video tutorials were analysed; LinkedIn Learning and SkillShare. These platforms were analysed to collect requirements that, together with a literature study, specified the requirements later used for the design of the prototype. The prototype was examined by 14 students using the A/B-testing method, as well as being reviewed by an expert within human computer interaction (HCI). The result of this study indicates that graphical elements is an important part of video tutorials, as they help the users to focus on important and relevant elements explained by the instructor. A result from the study is a list of recommendations for video tutorials.

Detta är ett 10-poängs examensarbete på C-nivå, som vi under vårterminen avlagt vid Karlstads universitet. Målet med vårt projekt var att skapa ett nytt grafiskt gränssnitt till en komprimeringsalgoritm vid namn PAZ. Nuförtiden finns en hel uppsjö av grafiska gränssnitt till komprimeringsalgoritmer, men inget av dem stöder möjligheten att plugga in en egenutvecklad algoritm. Därför var vi tvungna att skapa vårt eget gränssnitt, som förutom PAZ också skulle stödja ZIP, RAR och andra etablerade algoritmer. Vi har alltså skapat ett grafiskt gränssnitt, vilket är anpassat för en implementation av den nya PAZ-algoritmen. Algoritmen har utvecklats av vår uppdragsgivare Martin Larsson. Gränssnittet har vi, i samarbete med Martin, valt att kalla för Winpaz. Vi började med att göra två prototyper, som vi bland annat delade ut till personer på universitetet för att få respons på användarvänligheten hos gränssnitten. Med utgångspunkt från resultaten av dessa tester, konstruerade vi sedan vårt slutgiltiga gränssnitt. Kravet vi hade på oss var att skapa ett användarvänligt grafiskt gränssnitt, som skulle stödja de vanligaste algoritmerna. Vi nådde målet att implementera stöd för algoritmerna ZIP och TAR. Dock fick vi göra avkall på implementationen av algoritmerna PAZ och RAR på grund av tidsbrist, men anpassade gränssnittet så att en senare inpluggning av dessa algoritmer är möjlig. Vi är nöjda med vår slutprodukt, men inser också att det troligen krävs en del ytterligare funktionalitet för att gränssnittet ska fungera exemplariskt. Under projektet har vi, förutom att vi stärkte våra kunskaper i C++-programmering, även lärt oss att använda utvecklingsverktyget wx-DevCpp. Utöver detta har vi lärt oss att programmera grafiska gränssnitt med hjälp av wxWidgets. / This is a bachelor´s project that we have been working on during a period of ten weeks, full time. The goal of our project was to design and implement a GUI for a new data compression algorithm called PAZ. At present, a vast array of compression/extraction GUIs is available, but none of them provide the possibility to incorporate a user developed algorithm. Thus, we had to create our own, with support for not only PAZ, but also ZIP, RAR, and other well known archiving algorithms. And so, we have created a GUI that is well suited for an implementation of the new PAZ algorithm. The PAZ algorithm has been developed by Martin Larsson. We chose, in collaboration with Martin, to name the GUI application Winpaz. We began by implementing two separate prototypes, which we sent out to be tested by a closed group of beta testers. The reason for this test was to investigate how to design various parts of the application to be user friendly. Using the results from the testers, we then began the development of our final version of the GUI. Our goals were to implement a user friendly GUI, that supported PAZ as well as the most widespread algorithms already in use. We achieved our first goal, to design a user friendly GUI, and we implemented support for both ZIP and TAR, but had to abandon our efforts in implementing RAR and PAZ support due to lack of time. The interface is however designed with the future incorporation of these algorithms in mind. We are fairly pleased with our work, but we also recognize the need for added functionality in order to make the GUI a commercial grade product. During this project we have, apart from broadening our knowledge and skill in C++ programming, also learned to use the IDE wxDevCpp, a powerful open source tool for developing GUI applications based on the wxWidgets framework.

Undersöknings syfte var att närmare ta reda på hur ett grafiskt gränssnitt för en och samma webbplats lämpligt kan anpassas för att ge en likvärdigt god användarupplevelse oberoende användaren använder sig av en vanlig dator eller en tablet. För att undersöka problemlösande designmönster prövades en teorisyntes baserad på befästa användbarhetsläror, så som metoder för visibility, affordance, mapping, begränsningar och feedback samt tekniker för grafisk gränssnittsdesign och navigation mot en fallstudie. Fallstudien utgjorde en del av ett större projekt, att ta fram ett koncept för en webbplats avseende ett arkitekturmagasin, att vara kompatibel med såväl en desktop som en tablet avseende möjligheten att med gott resultat ta del av samma tjänstekoncept oberoende plattform. Fallstudien gjordes i flera steg genom att först skapa ett passande tjänstekoncept avseende webbplatsens syfte, för att sedan i iterationer skapa ett interaktions- och ett grafiskt ramverk. Under produktionen togs framför all två saker i beaktande; inputmöjligheter både för desktop med mus och tablet med hand eller finger samt konceptuell modeller vad gällande navigation från både tablet och desktopbruk. Iterationerna avslutades med användartester där fyra personer fick prova de framkomna koncepten. Resultatet och analysen av fallstudien pekar på att det finns riktlinjer vilka en designer kan och eventuellt bör följa för att få ett lyckat resultat. Bland dessa riktlinjer är finkänsligheten gällande input den klara skillnaden mellan en desktop med en mus och en tablet med pekskärm. Därför bör alla interaktiva objekt alltid utformas och placeras så att de är lätta att aktivera oberoende metod för input. För ökad läsbarhet bör inte för liten text användas och dessutom tillkommer avvägning för navigation där det är viktigt att inte fastna i gamla webbdesignkonventioner med djupa hierarkier, utan i stället sträva mot en informationsarkitektur som möjliggör för enkel översikt och navigering. Analysen visar även på att överdådig grafik bör undvikas för att inte försätta användaren i en situation där den behöver fundera över hur den ska göra något snarare än vad.

Allteftersom tekniken för digitala spel har utvecklats och spelen blivit mer avancerade har mängden av information som spelaren kan få om sin avatar (digital representation av spelaren) ökat. Beroende på spelets upplägg och design är denna information mer eller mindre lättillgänglig. Den information som alltid tycks ha en mer eller mindre given plats i spelets HUD (statiska delar av det grafiska gränssnittet) är avatarens hälsotillstånd. Inom den litteratur som finns skriven om speldesign finns flera riktlinjer om hur denna information ska visualiseras men speldesigners utforskar hela tiden nya sätt att applicera detta på. För- och nackdelar med hur informationen implementeras diskuteras av spelare och speljournalister på flera forum. Ofta med fokus på spelupplevelse och utmaning.Forskning som tidigare berört avatarens hälsa har undersökt hur olika mekaniker bakom den grafiska visualiseringen påverkar spelupplevelsen. Det finns dock ett forskningsgap när det kommer till hur den grafiska visualiseringen av avatarens hälsa påverkar spelarens prestation.I detta arbete undersöks hur en spelares prestation påverkas av att få information om sin avatars hälsa genom det grafiska gränssnittet. Studien grundar sig i en pågående diskussion om hur mekaniken bakom avatarens hälsa och dess visualisering påverkar spelets utmaning.För arbetet har en litteraturstudie genomförts om ämnet speldesign med fokus på hur det grafiska gränssnittet för ett spel bör utformas. Efter detta utvecklades för studien en prototyp där litteraturstudien låg till grund för hur en grafisk representation av avatarens hälsa implementerades. I prototypen lades funktionalitet till för att helt utesluta den grafiska representationen av avatarens hälsa varannan gång spelet startar. Funktionalitet applicerades också i prototypen för att lagra data som samlats in under spelets gång, i en databas som satts upp för studien.Genom prototypens två lägen genomfördes en kvalitativ förstudie i form av 12 övervakade spelsessioner vilka följdes upp av semistrukturerade intervjuer. En komparativ studie utfördes genom att hälften av deltagarna fick spela med en synlig hälsomätare och hälften utan. Testpersonernas resonemang kring frågor som berör frågeställningen analyserades för att ge djupare förståelse för den kvantitativa data som sedan samlades in genom att prototypen gjordes tillgänglig via webben.Efter varje avslutat spel av prototypen registrerades resultat i poäng och om spelet hade en synlig hälsomätare eller inte tillsammans med annan information som avsåg att besvara frågeställningen för studien. Efter förstudien publicerades prototypen på webben, vilket resulterade i att data från 259 spelrundor lagrades i databasen. Efter urval enligt studiens avgränsningar har data från 62 spelrundor använts i det kvantitativa forskningsunderlaget för studien.Sammanfattningsvis skiljer sig resultaten mellan de kvalitativa och kvantitativa studierna. Under den kvalitativa studien noterades en skillnad i resonemanget mellan de som fått spela med en synlig hälsomätare och de som fått spela utan. Detta användes för att analysera och jämföra den insamlade datan från den webbaserade prototypen. Den insamlade kvantitativa datan kunde i en jämförelse mellan de som spelat med en synlig hälsomätare och de som spelat utan inte visa på en skillnad i prestation med någon statistisk säkerhet. / As digital gaming technology has evolved and the games has become more advanced, the amount of information that the player can get about their avatar (the player's digital representation) has increased. Depending on the layout and design of the game, this information is more or less readily available. The information that always seems to have a more or less evident place in HUD (static parts of the graphical interface) is the avatar's state of health. There are several guidelines on how to visualize this information, but game designers are constantly exploring new ways to apply it. Pros and cons of how the information is implemented is discussed by players and game journalists in several forums. Frequently focusing on what it does for the game's challenge and the gaming experience.Previous research that attended the avatar's health has investigated how different mechanics behind the graphic visualization affect the gaming experience. However, there is a research gap when it comes to how the graphic visualization of the avatar's health affects the player's performance.This study examines how a player's performance is influenced by obtaining information about the avatar's health through the graphical interface. The study is based on an ongoing discussion of how the mechanics of the avatar's health and its visualization affects the game's challenge.A literature study was conducted on the subject game design focusing on how the graphic interface of a game should be designed. After that, a game prototype was developed for the study in which the literature study formed the basis for how a graphic representation of the avatar's health was implemented. In the prototype, functionality was added to completely exclude the graphic representation of the avatar's health every other time the game started. Functionality was also applied in the prototype to collect data during the game. The data was saved in a database set up for the study.With use of the two game modes of the prototype, a qualitative preliminary study was conducted in the form of supervised game sessions with follow-up semi-structured interviews. A comparative study was conducted by letting half of the participants play with a visible health bar and the other half without. The participant's reasoning on issues related to the research question was analyzed to give a deeper understanding of the quantitative data that was collected by making the prototype available through the web.After each completed game of the prototype, it was registered alongside the score if the game had been played with a visible health bar or not. Other information intended to answer the research question for the study was also registered. After the preliminary study was conducted the prototype was published on the web, this resulted in data from 259 game rounds was collected and stored in the database. After selection according to study delimitations, data from 62 game rounds have been used for the for the study's quantitative research backing.To conclude, the results differ between the qualitative and the quantitative studies. During the qualitative study, a distinction was made in the reasoning between those who played with a visible health bar and those who had been playing without. This was used to analyze and compare the collected data from the web-based prototype. The collected quantitative data, however, does not show any statistically safe difference in performance between those who played with a visible health bar and those who played without one.

Denna kandidatuppsats presenterar design, implementation och testning av ett grafisktgränssnitt för CertCenter, en applikation för hantering av X.509-certifikat på Nordic MedtestAB. Vid starten av kandidatarbetet består CertCenter av ett Swagger-gränssnitt, som ärutvecklat med Python och FastAPI, med en MongoDB-databas för lagring. Det befintligaAPI:t och arbetssättet för certifikathantering på Nordic Medtest har visat vara otillräckligt ochmedför flera utmaningar för användarna, såsom komplexitet, bristande översikt ochspårbarhet av certifikatens livscykler samt bristande hantering av behörigheter. För attförenkla certifikathantering är syftet att utveckla ett grafiskt gränssnitt med hjälp av ReactJSoch komponenter från Ineras Designsystem. Metoder som användes inkluderarsemistrukturerade intervjuer och fokusgrupper med målgruppen för att identifiera behov ochmål, framtagning av kravspecifikation, prototyputveckling, implementering i ReactJS, ochslutligen utforskande test av gränssnittets funktionalitet och design. Resultatet visar att detutvecklade gränssnittet gör det möjligt för anställda på Nordic Medtest att söka eftercertifikat, ta del av certifikatsinformation, ladda ner certifikat, kopiera certifikatets PEM ochCSR i textformat, skapa nya samt uppdatera certifikat. Slutsatsen visar på att införandet av ettgrafiskt gränssnitt för CertCenter kan effektivisera skapandet, hanteringen och uppdateringenav X.509-certifikat jämfört med det nuvarande API:t. Ett grafiskt gränssnitt kan hjälpaanvändarna att förstå, tolka och använda CertCenter utan behovet att förstå eller undersökaAPI-svar i JSON-format. En tydlig uppdelning av funktioner och användargrupper gör dettydligt för användarna vilka funktioner de har behörighet att utföra till skillnad från API:t däralla anrop är tillgängliga för alla. Vidare betonas vikten av att involvera användarna idesignprocessen, iterativ testning av gränssnittet, användartester samt prioritering ochimplementering av kvarstående krav för att säkerställa att fortsatt utveckling av gränssnittetmöter användarnas behov och är användbart för dem.

When using graphical user interfaces (GUIs), the main problems that frustrates users are long response times and delays. These problems create a bad impression of the GUI, as well as of the company that created it.When providing a GUI to users it is important to provide intuition, ease of use and simplicity while still delivering good performance. However, some factors that play a major role regarding the performance aspect is outside the developers’ hands, namely the client’s internet connection and hardware. Since every client has a different combination of internet connection and hardware, it can be a hassle to satisfy everyone while still providing an intuitive and responsive GUI.The aim of this study is to find a way to monitor performance of a web GUI, where performance comprises response times and render times, and in doing so, enable the improvement of response times and render times by collecting data that can be analyzed.A framework that monitors the performance of a web GUI was developed as a proof of concept. The framework collects relevant data regarding performance of the web GUI and stores the data in a database. The stored data can then be manually analyzed by developers to find weak points in the system regarding performance. This is achieved without interfering with the GUI or impacting the user experience negatively. / När man använder grafiska gränssnitt upplevs lång responstid och fördröjning som de främsta problemen. Dessa problem är frustrerande och ger användare en negativ syn på både det grafiska gränssnittet och företaget som skapat det.Det är viktigt att grafiska gränssnitt är intuitiva, lättanvända och lättfattliga samtidigt som de levererar hög prestanda. Det finns faktorer som påverkar dessa egenskaper som är utanför programmerarnas händer, t.ex. användarens internetuppkoppling och hårdvara. Eftersom varje användare har olika kombinationer av internetuppkoppling och hårdvara är det svårt att tillfredsställa alla och samtidigt tillhandahålla ett intuitivt och responsivt gränssnitt.Målet med denna studie är att hitta ett sätt att övervaka prestandan av ett grafiskt gränssnitt där begreppet prestanda omfattar responsiviteten och hastigheten av den grafiska renderingen, och genom detta möjliggöra förbättring av responstider och renderingstider.Ett ramverk som övervakar prestandan av ett grafiskt gränssnitt utvecklades. Ramverket samlar in relevant prestandamässig data om det grafiska gränssnittet och sparar datan i en databas. Datan som sparats kan sedan bli manuellt analyserad av utvecklare för att hitta svagheter i systemets prestanda. Detta uppnås utan att störa det grafiska gränssnittet och utan att ha någon negativ påverkan på användarupplevelsen.