Målet med detta projekt har varit att migrera och förnya webbplatsen visitfjallen.se. Sidan innehåller ett brett register av olika företag inom områden som upplevelser, boende och restauranger i Sveriges fjällkedjor. Den tidigare webbplatsen var omodern och byggd på ett kostsamt system som saknade flexibilitet. I detta arbete har webbplatsen flyttats till det flexiblare och mer lättskötta systemet WordPress. Sidan har också moderniserats ordentligt och fått en hel del förbättringar och nya funktioner. I stället för en par enkla textrader med information har varje företag nu fått en egen profilsida med plats för stora mängder av information. Bland de helt nya funktionerna finns exempelvis egna kontaktformulär och möjligheten för besökare att lämna recensioner för bolagen. Företagen har också fått en integrering av sociala medier med egna knappar för Facebook och Twitter. Flera företag som finns listade på Tripadvisor har även fått detta integrerat på sin sida. Inloggade besökare kan nu spara sina favoritföretag genom att markera dem som sin favorit. Eller lämna en recension för bolag de har åsikter om. De flesta av de nya funktionerna har erhållits med hjälp av tillägget Geodirectory till WordPress, vilket är ett utmärkt och heltäckande verktyg som specialiserat sig på webbplatser med omfattande företagsregister. En betydande del av arbetet bestod av att flytta den stora mängden bolag med tillhörande information till den nya webbplatsen. Registret var möjligt att överföra via en kalkylfil, men informationen i den den exporterade filen var rörig och innehöll 900 rader med data som behövde sorteras och struktureras upp rad för rad. För att dela upp arbetet gjordes därför filen i episoder om ungefär 200 bolag åt gången. En stor del av webbplatsen har byggts upp med hjälp av sidbyggar-verktyget Beaver Builder. Verktyget har varit användbart och påskyndade processen med att konstruera det stora antalet sidor som var nödvändigt för att bygga upp den nya Visitfjällen.se. Den färdiga webbplatsen uppfyllde de flesta av beställarens önskemål och det nya utseendet för visitfjällen blev i slutändan mycket uppskattat.

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.

Abstract: Typ-1 diabetes eller så kallad insulinberoende diabetes, drabbar vissa barn och tonåringar. De tvingas leva hela sina liv med att injicera insulin i sin kropp, eftersom deras egen kropp har slutat tillverka insulin på egen hand. Insulinpennan är typ-1 diabetikers medicinska redskap som de måste ha tillhands vid varje måltid. Syftet med denna studie är att utveckla och ta fram ett exempel på hur ett grafiskt gränssnitt med Mp3-spelare bör se ut i en insulindoserare som riktar sig till tonåringar. För att utreda hur gränssnitt ska utformas har kvalitativa intervjufrågor ställts till produktutvecklare, diabetessjuksköterskor och tonåringar. Vidare har också analyser gjorts på befintliga insulinpennor och Mp3-spelare. Resultatet av studien är en prototyp av en insulindoserare som simuleras i Shockwave. Prototypen har med hjälp av testerna, intervjuer och analyser resulterat i hur gränssnittet bör se ut hos en insulindoserare med Mp3-spelare. Insulindoseraren innehåller de grundläggande mekaniska funktionen som en insulinpenna besitter, nämligen dosering och injektion av insulin. Utöver detta har övriga funktioner implementerats vilka har framtagits i samband med de intervjuer som gjorts. Det är timer som talar om för patienten när det är lämpligt att ta ut nålen efter en injektion. Det finns dessutom ett minne där patienten kan se vilken tid och datum en angiven dos har injicerats. För att påminna patienten om att ta sitt insulin finns det upp till 5 programmerbara alarmtider. Mp3-spelaren i insulindoseraren tas fram genom att analysera tre Mp3-spelare. Där har strukturen på gränssnittet, funktionerna i Mp3-spelarna och styrenheten en betydande roll i utvecklingen. Det har i produktutvecklingen även tagits hänsyn till vad tonåringar anser är en tilltalande Mp3-spelare.

The purpose of this report has been to develop an administrative web interface. The web interface is to be used by the company Zidango and it is going to make it easier for them in their daily work of running a web portal. The interface had to be developed so it would fit in Zidangos web portal. This meant the work had to be done in the framwork Struts and mostly in JAVA. Thereforeis a shorter theory chapter included in the report that discusses frameworks. In addition to the theory chapter the report describes the development of the interface, the solution and thoughts around it.

Projektet startade på uppdrag av länsmuseet i Kalmar län. Målet var att utveckla en första prototyp av en interaktiv dykmodell i 3d av vrakplatsen för Regalskeppet Kronan. Syftet med denna modell var tvådelad; att skapa en nyanserad del av Kronan-utställningen och underlätta vid utgrävningarna av vrakplatsen för regalskeppet Kronan. Modellen skulle fungera som en nyanserad och modern del av länsmuseets webbsida och utställning där museibesökare kan vrida och vända på modellen i realtid och skapa sig en bild över hur det ser ut vid vrakplatsen. Projektets validitet i förhållande till länsmuseets verksamhet bekräftades genom en studie av länsmuseets verksamhetsberättelse. Det andra syftet med dykmodellen är att de dykare som genomför dykningarna vid vrakplatsen skall kunna distribuera modellen mellan varandra och redan på ett tidigt stadium kunna diskutera och planera utgrävningarna, vilket tidigare gjort med hjälp av inspelade översimningar vid vrakplatsen. Arbetet i projektet genomfördes i ett flertal steg. Först presenteras termen stakeholder, eller intressenter, som är ett led i att kunna ta fram rätt användare vid utvecklingen 3d-modellen. De intressenter som togs fram och ansågs vara mest lämpliga var museibesökare, i form av turister och skolungdomar, och dykare. Dessa var de två intressentgrupper som ansågs vara de som kommer vara direkta slutanvändare av 3d-modellen. För att ytterligare kunna ringa in rätt användare för 3d-modellen användes sedan en metod som kallas personas för att representera museibesökaren och skolungdomar och intervjuer för intressentgruppen dykare vid vrakplatsen. Som representant för dykare vid vrakplatsen av Kronan stod Lars Einarsson som är ansvarig för utgrävningarna. Produktionen av 3d-modellen gjordes genom ett första framtagande av konceptuella modeller och fotande av bilder från Kronan-utställningen, vilka låg till grund för de tekniker för modellering inom 3d Studio Max som användes. Dessa modeller fungerade också som förlaga vid själva modellerandet. Under produktionsfasen av 3d-modellen togs ett flertal saker i beaktande; modellering med så låg komplexitet som möjligt, en realism i 3d-modellen i form av rätt objekt utifrån vad som finns vid den fysiska vrakplatsen och ljussättning och skuggsättning. Som hjälp vid ljus- och skuggsättning användes även filmmaterial från en överdykning av vrakplatsen. Interaktionen med den 3d-modellen beslutades att skötas av en andrahandsprogramvara. För att tillse att den bästa programvaran användes för detta ändamål jämfördes Eon Raptor och Design Review 2008. Detta gjordes utifrån testning av programvaran inom projektgruppen och en jämförelse mellan de systemkrav som respektive programvara krävde. Det slutgiltiga valet föll på Design Review 2008 främst på basis av en större grad av användbarhet och teknisk tillgänglighet. Efter att modellen implementerats från 3D Studio Max till Design Review 2008 gjordes en heuristisk utvärdering för att tillse den grundläggande funktionen av programmet. De utvärderingsprinciper som användes var en modifierad version av Jacob Nielsens utvärderingsprinciper. Dessa togs fram genom att en jämförelse och syntes gjordes av Nielsens och Jef Raskins teorier för god interaktion. Den heuristiska utvärderingen ansågs falla väl ut och den slutgiltiga applikationen ansågs ha god användbarhet vad gäller interaktionen. / The project started by commission of the regional museum of Kalmar. The goal was to develop a first prototype of an interactive 3-dimensional diving model of the site of wreckage of the man-of-war Kronan. The aim of this model were two folded. First it was supposed to be a more modern part of the regional museums webpage and its physical exhibition where visitors of the museum can navigate and turn the model around in real time and get a picture of how it looks at the site of the wreackage. Part of the museum’s annual report states that their aim is to gain 20.000 more visitors during the year of 2008. A more modern way of exhibiting their objects in the museum could help with this. The validity of the project was confirmed by a study of the regional museums annual report. The second aim of the diving model was to facilitate the planning the excavation of the site of the wreckage for the divers by on an early stage of the planning being able to distribute and discuss the wreckage among each other. This was formely done by looking at and discussing video footage taken at the wreckage. The project was divided into several steps. First, the term stakeholder was introduced to get a better understanding of who the user for the development of the 3d-model was. The stakeholders that were put forward and were deemed the most suitable were visitors at the museum, in the form of “tourists and school children”, and “divers at the site of the wreckage”. These were the two stakeholder groups who were seen as those who would have the most direct influence of the interaction with the 3d model. To further encircle the users of the upcoming 3d model, the method personas was used to represent the visitors at the museum and schoolchildren. Interviews was used for the stakeholder group “divers at the wreckage”. Representing the divers was Lars Einarsson who is in charge of the excavation of the wreckage. The production of the 3d model was done by making of conceptual models and footage from the Kronan exhibition. These were the basis for the techniques for modeling that were used within 3d Studio Max. These models also worked as an original while modeling. During the production phase of the 3d model several things was taken into consideration; modeling with as low complexity as possible, a realism in the 3d model by adding objects that are actually in place at the wreckage and natural lighting of the scene. To aid with the lighting filmed footage from the site of the wreckage were used. The interaction with the 3d model was deemed to be made using a second hand application. To see to it that the best application for this was used, a comparison between Eon Raptor and Design Review 2008 was made. This was done on the basis of both internal testing and a comparison of the two programs system requirements. The final choice was Design Review 2008 mostly on the basis of a higher degree of usability and technical availability. After the model was implemented from 3d Studio Max to Design Review 2008 a heuristic evaluation was made to see to it that the basic functioning of the model was satisfying. The usability principles that were used were a modified version of Jacob Nielsens usability principles. These were produced by comparing and synthesizing Nielsens and Jef Raskins theories for good interaction. The result of the heuristic evaluation was deemed satisfying and the final application was considered having good usability concerning the interaction.

Jag har arbetat med framtagningen av ett nytt pressinfosystem till SVT. Framförallt har jag undersökt hur man kan gå till väga när man arbetar arbetarcentrerat med interaktionsdesign. Processen har gått igenom flera steg, från att identifiera användargrupper och följa deras väg över webbplatsen till att identifiera nyckelfunktioner och kritiska sidor. Därefter har en design för sidan tagits fram, testats och delvis implementerats. Processen har gjort att jag har fått en tydligare bild av några best practices och testmetoder samt en fördjupad förståelse för hur arbetet med att ta fram interaktiva produkter kan se ut.

This thesis project is based on a business idea where users can design their own t-shirt online. The project shows the first step in the development process where a prototype for a user interface is created and evaluated. The purpose of this thesis project is to answer the following question: How does one develop a user interface for t-shirt design with consideration to interaction design theories? In order to answer this question the design process began with scheduling the work at hand. The first step was to build a conceptual model based on specifications made prior to this project. This conceptual model became the foundation for the physical design. A high fidelity prototype was created using Macromedia Flash and Actionscript 2.0. The prototype was used to evaluate usability and user friendliness of the user interface. This was done through user testing and field studies which included user observations and a paper based survey. The evaluation results showed some problems in the user interface that affected usability and user friendliness. These problems were broken down to a problem ranking list which can be used as a base for future development and evaluation of the user interface.

I aktuellt arbete undersöks nya metoder och tekniker som kan användas för att skapa användarvänlig design i mobila enheter. Det har efterfrågas metoder och verktyg för att kunna skapa användarvänlig design i mobila gränssnitt, då det finns ett behov inom detta unga område som binder samman mobila gränssnitt, användarvänlighet och design. Därför har teorier studerats som behandlar områden inom interaktionsdesign och exempelvis innehållande användarvänlighet, skrivna av inflytelserika interaktionsdesigners som Alan Cooper . En sammanställning av designprinciper och användarvänlighetsprinciper baserades på en omfattande litteraturstudie, och har härefter lätt fram till en operationalisering som i undersökningen bildar, agerar och definieras som ett designverktyg. Detta verktyg har funktionaliteten att utgå från ett webbaserat gränssnitt och med hjälp av verktyget kan designern få hjälp att omforma detta till ett gränssnitt för mobila enheter. Designverktygets funktionalitet och pålitlighet har sedan genom en fallstudie test körts och genererat goda resultat. Arbetet har således visat att genom att sammanställa teori från området interaktionsdesign till en operationalisering så har ett välfungerande och pålitligt designverktyg för mobil design skapats. Detta designverktyg kan härefter användas av designern att omforma och anpassa design för mobila gränssnitt. Undersökningen bidrog också till en ökad förståelse för användarens deltagande i designprocessen. Med hjälp av verktyget genererades genom en fallstudie för en mobilwebbapplikation dessutom ett designförslag till en design för ett mobiltgränssnitt, denna fallstudie styrker hur väl fungerande designverktyget faktiskt är.

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.