A study investigating how gamification features can be designed within a gym application, how they affect the user’s situated motivation and user engagement, and how these features could increase user loyalty to the product.

No description available.

Nowadays, smartphones are considered an essential part of our everyday lives. However, as the use of them increases so does their presence in vehicle environments. Prior studies have found that interacting with mobile devices while driving can cause cognitive, manual, and visual distractions. These distractions have a significant effect on driving performance and can result in serious accidents. As a solution to this, some applications, such as Spotify, has taken a different approach by developing a simplified version of their graphica linterface that is specifically designed for driving.The aim of this study is to examine what impacts simplified graphical interfaces has on the user experience for car drivers, focusing on Spotify and their car mode. In order to examine this, an online survey and a feature analysis was conducted. The result of this study shows that Spotify's car mode is missing a lot of features that are important to the users, causing them not to use it. These results highlight the challenge of providing all features that are expected by the users while creating a simpler interface.

Context: Flatbed applicators are machines made for laminating, primarily signs on an industrial level. These applicators are controlled manually, which exhibits potential for digitalization in order to enhance the user experience. Problem: The first challenge is to develop a user interface for a mobile app, created to provide an easy path for communication to customers, with user-friendliness as the focal point. The second challenge is being able to communicate with a flatbed applicator, through the aforementioned app. Method: This project started out with pre-studies about the required topics. The system prototype was then designed and implemented with a focus on adequate UI design guidelines for the mobile app and a suitable protocol to enable communication between the app and the applicator. Results: The app prototype was developed through the usage of J.J. Garrett’s model along with Material Design guidelines, in order to establish a customer-centric user interface. Communicating between the mobile app and a PLC using TwinCAT, MQTT and React Native appears to be a feasible solution.

Zeals är en mobil applikation där användaren tillåts att kollaborativt uppleva förväntan och erinran inför och efter en händelse. Genom att användaren bidrar med media som hon själv definerat som relevant för händelsen kan mobiltelefonen fungera som ett medium där kopplingar och relevans är upp till användaren. Parallellt har ett designverktyg för användarjämförelser tagits fram - Persona Activity Framework. PAF syftar till att genom ett scenario visa skillnader och likheter mellan tilltänkta användare. / This master thesis in interaction design deals with two major scopes. First, it will describe how a design concept regarding events is initiated. Second, and parallel, a practical tool for user representations will be formed and used to illustrate a foundation for design. By providing examples of projects related to how anticipation and recollection can be experienced we highlight our work area. In addition to this, we present tools that we consider beneficial regarding user insights. Out of these two fields we describe a process where a mobile phone application is created situated within industrial borders. The result of this process consequently consist of two parts each depending on the other. The application, Zeals, demonstrates both how anticipation and recollection can be experienced. The second part of the end result, PAF, demonstrates how we have represented users and concludes that it can be used in other projects as well. Hence, our final result needs to be interpreted depending on design approach and it’s nature.

This thesis presents the design and development of a web-based platform intended to streamline the public sector funding process for startups by employing a matching algorithm. The platform was developed as part of a Bachelor's program in Computer Engineering and aims to address the inefficiencies and complexities currently impeding startup access to vital funding sources. Utilizing the MERN technology stack (MongoDB, Express.js, React, and Node.js), the project integrates web-based technologies to enhance user experience and ensure robust security measures aligning with GDPR standards. The methodology adopted includes agile development practices to facilitate iterative testing and improvements. The system's use of data from public funding webpages, combined with API integration and web scraping techniques, ensures a rich database of funding opportunities tailored to startups' diverse needs. This thesis serves as a practical solution for startups striving to navigate the complex landscape of public sector funding. / Den här uppsatsen presenterar designen och utvecklingen av en webbaserad plattform avsedd att effektivisera processen för offentlig finansiering till startups genom att använda en matchningsalgoritm. Plattformen, som utvecklats är en del av ett högskoleingenjörsprogram inom datateknik och syftar till att adressera de ineffektiviteter och komplexiteter som för närvarande hindrar startups från att få tillgång till nödvändiga finansieringskällor. Genom att använda MERN-teknikstacken (MongoDB, Express.js, React och Node.js) integrerar projektet webbteknologier för att förbättra användarupplevelsen och säkerställa robusta säkerhetsåtgärder i linje med GDPR-standarder. Den antagna metoden inkluderar agila utvecklingspraxis för att underlätta iterativ testning och förbättringar. Systemets användning av data från offentliga finansieringswebbplatser, kombinerat med API-integration och webbskrapningstekniker, säkerställer en rik databas med finansieringsmöjligheter anpassade till startups mångfaldiga behov. Denna avhandling fungerar som en praktisk lösning för startups som strävar efter att navigera i det komplexa landskapet för offentlig sektorfinansiering.

In hope of lessening the inequal division between the amount of women and men studying and working in technical fields a project to create an inspirational platform has been initiated by the organisation Pepp. By the end of the first stage of the project a webpage has been created with frontend programming. This webpage contains several imaginary person portraits of imaginary individuals studying or working in technical fields. JavaScript filter functions have been created in order to filter between these individuals. All the necessary data for the portraits are collected in a database in form of an array in JavaScript. User tests were conducted where seven separate subjects were allowed to test the finished person portrait webpage. In the future the website will be improved and expanded with several webpages. Portraits of real individuals will also be collected and replace the imaginary individuals on the webpage.

Cette recherche menée au sein du pôle de recherche et développement de la société Perfect Memory s'intéresse à l'accompagnement de la mémoire familiale via un dispositif technique, interrogé par le prisme des sciences de l'information et de la communication. Elle propose la construction d'une approche d'éditorialisation du document numérique permettant à chacun de s'approprier son patrimoine culturel au travers de l'utilisation du dispositif technique co-construit, l'application Web Famille TM. L'interrogation du milieu socio-économique de la préservation et la valorisation du patrimoine culturel du particulier, auquel Perfect Memory appartient, nous amène à nous interroger sur les enjeux d'un rapprochement entre les notions de « numérique » et de « mémoire ». Un cadre théorique est ainsi construit, le document numérique est appréhendé comme support d'un exercice de la mémoire, permis par la médiation du dispositif technique. L'éditorialisation, en tant qu'ensemble d'opérations réalisées sur le document numérique par l'intermédiaire du dispositif technique, est placée au cœur de notre problématique axée sur les modalités d'accompagnement des pratiques mémorielles via le service Famille TM. La construction de notre approche d'éditorialisation est séparée en deux moments. Dans un premier temps, un corpus de documents numériques - productions familiales préservées par différentes institutions patrimoniales - est interrogé par une méthodologie sémiotique afin d'extraire les éléments saillants invariants à leur interprétation, que nous rassemblons sous l'appellation de marqueurs de mémoire. Dans un second temps, les catégories de marqueurs construits sont transcrites en recommandations éditoriales et ergonomiques destinées au dispositif technique Famille TM. Articulé jusqu'ici autour d'un axe unique - la documentarisation de l'archive -, le dispositif est enrichi de deux nouveaux modes - cinématographique et privé -, constituant autant de points d'entrée supplémentaires dans le document versé par l'utilisateur sur le service. L'approche d'éditorialisation du document est ainsi décomposée en trois modes, comportant chacun différents scénarii, articulation de fonctionnalités et d'une expérience utilisateur spécifiques, construits pour le service Famille TM. / This research project was made at the R&D department at Perfect Memory and focus on how to support family memory via a technological artifact. We question the artifact through the prism of information and communication sciences. The project offers to build a new approach, that of the editorialization of digital documents, enabling each user to rediscover their cultural heritage. This can be done by means of Famille TM, a co-built Web app. Following a study of the cultural heritage market as applied to private individuals, to whom Perfect Memory belongs, we proceed to a cross analysis of two concepts : "Digital" and "Memory". Starting from these, we built a theoretical framework in which we consider digital documents as a base for memory training. The technological artifact allows such training through a mediation process. Editorialization, as a set of processes made on the digital document through a technological artifact, appears as central to our concern: to design ways to support memory habits through Famille TM. We divide the construction of an editorialization approach into two steps. First, we build a corpus of digital documents - home movies - from various cultural heritage organizations. Then we interrogate the corpus through a semiotic methodology in order to gather salient and invariant elements in each interpretation. We name them memory markers. In a second step, we transcribe the markers categorization into editorial and ergonomic recommendations for Famille TM. Until today, the technological artifact consisted in one single mode: the documentation of archives. We introduce two extra modes: the cinematographic experience and the private experience. Each mode provides the user with an original entry point into documents uploaded on the app. To summarize our editorialization approach, we implement three modes into Famille TM and for each of them we design several scenarios made up of specific features and user experiences.

Benutzungsschnittstellen (UIs) dienen in der Domäne der industriellen Automatisierungstechnik der Bedienung und Beobachtung technischer Prozesse. Das sogenannte Model-based User Interface Development (MBUID) stellt ein vielversprechendes Konzept zur automatischen Erzeugung solcher UIs dar. Allerdings erfordert die Umsetzung dieses Konzeptes für einen spezifischen Anwendungsfall jeweils die Entwicklung einer oder mehrerer Modell-zu-Modell-Transformationen (M2M). Hierbei handelt es sich unter Verwendung aktueller Ansätze für Transformations-Frameworks um einen aufwändigen, fehleranfälligen und daher kostenintensiven Prozess. Dies gilt vor allem für Entwickler ohne tiefgreifendes Wissen über modellbasierte Technologien und kann unter Umständen sogar die durch die MBUID propagierten Vorteile aufwiegen. Zur Erleichterung des Prozesses der Entwicklung von Modelltransformationen schlägt diese Arbeit eine spezielle Methodik sowie deren prototypische Implementierung in Form des PAMTraM-Frameworks vor. Die Methodik greift dabei die speziellen Rahmenbedingungen bei der UI-Entwicklung in der Domäne der industriellen Automatisierungstechnik auf und basiert auf drei Hauptkonzepten: Die Basis stellt die Konfiguration von M2M-Transformationen in mehrdeutigen, bedingten Abbildungsmodellen dar. Diese Abbildungsmodelle beschreiben dabei lediglich Zuordnungen zwischen Elementen der Quell- und Ziel-UI-Beschreibungssprache einer durchzuführenden Transformation. Im Gegensatz zu existierenden Ansätzen erlaubt die entwickelte Methodik die explizite Berücksichtigung mehrdeutiger Abbildungen, die in der Domäne der UI-Entwicklung häufig auftreten. Darüber hinaus können explizite Kontextbedingungen formuliert werden, die die Notwendigkeit der Anpassung bzw. Neu-Erstellung eines Abbildungsmodells bei Vorliegen eines geänderten Nutzungskontextes (z.B. einer neuen Hardware-Plattform) verhindern. Konkrete Transformationen für ein oder mehrere Quell- und Kontextmodelle können anschließend auf Basis eines konfigurierten Abbildungsmodells durchgeführt werden. Hierzu wird ein spezieller generischer Transformations-Algorithmus vorgestellt. Dieser ist in der Lage, basierend auf einer selbstständigen Analyse der Ziel-UI-Beschreibungssprache auch unvollständige Abbildungsmodelle auszuführen. Hierdurch muss der Entwickler eines Abbildungsmodells weniger Informationen in dieses integrieren. Allerdings führt dieses Vorgehen auch dazu, dass im Rahmen der Durchführung einer Transformation an verschiedenen Stellen Mehrdeutigkeiten auftreten können. Zur Auflösung dieser Mehrdeutigkeiten stellt diese Arbeit unterschiedliche Strategien wie z.B. die Konsultation des Nutzers vor. Das dritte Hauptkonzept wird durch zwei Ansätze für sog. Higher-Order Transformations gebildet. Diese ermöglichen die teilweise semi-automatische Erstellung bzw. Vervollständigung von Abbildungsmodellen u.a. im Rahmen iterativer Entwicklungsprozesse. Dadurch wird die Entwicklung von Abbildungsmodellen weiter vereinfacht und die während einer Transformation auftretenden Mehrdeutigkeiten können schrittweise soweit notwendig reduziert werden. Ein Nachweis über die Funktionalität der entwickelten Methodik sowie deren prototypischer Implementierung erfolgt zum einen anhand repräsentativer Fallstudien aus der betrachteten Domäne und zum anderen auf Basis einer Analyse hinsichtlich allgemeiner Kriterien zur Bewertung von Transformations-Frameworks. Eine abschließende Bewertung zeigt, dass die entwickelte Methodik die speziellen Anforderungen in Bezug auf die UI-Entwicklung in der Domäne der industriellen Automatisierungstechnik erfüllt und zur Vereinfachung der Entwicklung von Modelltransformationen geeignet ist. / User Interfaces (UIs) in the domain of industrial automation serve the operation and monitoring of technical processes. The Model-based User Interface Development (MBUID) represents a promising concept for the automatic generation of such UIs. However, the realization of this concept for a specific use case requires the development of one or multiple model-to-model (M2M) transformations. Using existing transformation frameworks, this represents a complex, error-prone, and thus costly task. This applies especially to developers without deep knowledge of model-based technologies and can in some circumstances even cancel out the advantages promised by MBUID. In order to simplify the process of developing model transformations, this thesis proposes a specific methodology as well as its prototypic implementation by means of the PAMTraM framework. This methodology addresses the special underlying conditions of UI development in the domain of industrial automation and is based on three main concepts: The basis is formed by the configuration of M2M transformations in ambiguous, conditional mapping models. These only capture mappings between elements of the source and the target UI modeling language of a transformation. In contrast to existing approaches, the developed methodology explicitly takes into account the possibility for ambiguous mappings that are common in the domain of UI development. Furthermore, developers can specify explicit context conditions that prevent the necessity of a modification or redevelopment of a mapping model in case of a changed context of use (e.g. a new hardware platform). Individual transformations for one or multiple source and context models can be executed based on a configured mapping model. Therefore, a special generic transformation algorithm is presented. By autonomously analyzing the target UI modeling language, this algorithm is even capable of executing incomplete mapping models. As a result of this, the developer has to integrate less information in the mapping model. However, due to this approach, ambiguities may occur at various points during the course of a transformation. In order to be able to resolve these ambiguities, various strategies like the consultation of the user are presented in this thesis. The third main concept is formed by two approaches for higher-order transformations that allow the partial semi-automatic generation resp. completion of mapping models among others in the context of iterative development processes. This further simplifies the development of mapping models and allows for the step-wise reduction of occurring ambiguities as far as necessary. Representative case studies from the considered domain as well as an analysis with regard to general criteria for the assessment of transformation frameworks prove the functionality of the proposed methodology and its prototypical implementation. A concluding evaluation shows that the developed methodology satisfies the specific requirements concerning UI development in the domain of industrial automation and is suited to simplify the development of model transformations.

Purpose – The purpose of this report is to find out which frameworks and methods are most popular and most widely used, as well as web developers' views on the hamburgermenu. Method – In order to answer the questions in our report we used the methods quantitative statistical processing, quantitative analysis of data collected via survey and qualitative interviews with web developers. The study was conducted to find out which frameworks and methods are most popular and used most, as well as how web developers look at the hamburgermenu. This was done by analyzing the popularity and usage of different frameworks as well as interviewing web developers who work with it daily. Findings – The results of the report are based on the data collected through the processing of the statistics, the analysis of the survey, and the interviews performed. The result shows which frameworks are most popular and those that are most used. The following list shows the ranking: Most popular: Bootstrap Semantic UI Materialize Material Design Lite Foundation Most used: Bootstrap Foundation Materialize Material Design Lite Semantic UI The results of the interviews showed that most of the web developers interviewed used a framework when they created a website, either an existing or one of their own. It was also a practice to use the same framework in the company, although the way it was used was different from developer to developer. All developers had a mobile-first thought in mind, although it was not always a priority. It was also found in the study that everyone had a basic idea behind the choice of framework, but only one who had performed a study on which one would suit them best. All web developers interviewed thought that the hamburger menu was boring and bad from a user experience perspective. But everyone also agreed that because it is so widely used and has been for a couple of years, users have learned what it means and therefore fulfills its purpose. Implications – The use of the results is primarily linked to individuals or companies that work with web development, but can also be used by private individuals. For the report's primary target group, the results will give an increased understanding of the most used framework and an increased understanding of why these are used. Private individuals can use the result in the same way. Limitations – The limitations we receive in this study are that we cannot make any conclusions about companies and web developers in other parts of the country using the same framework or methods as the local ones we interviewed. Nor can we make any conclusions about why Bootstrap is the most popular and most widely used framework. We can only speculate why with the empirical we gathered through the interviews. A major limitation is also the lack of interviews when we only got answers from 6 of the 10 companies we contacted, of whom 4 would like to participate in the interview. More general conclusions could have been drawn if more companies had been interviewed. Keywords – Framework, Web Development, Responsive Web Design, Interaction Design, User Experience, Bootstrap, Foundation, Materialize, Material Design Lite, Semantic UI / Syfte – Syftet med denna rapport är att ta reda på vilka ramverk och metoder som är populärast och mest använda, samt webbutvecklares syn på hamburgermenyn. Metod – För att besvara frågeställningarna används metoderna kvantitativ bearbetning av statistik, kvantitativ analys av data insamlad via survey samt kvalitativa intervjuer med webbutvecklare. Studien genomfördes för att ta reda på vilka ramverk och metoder som är populärast och används mest, samt hur webbutvecklare ser på hamburgermenyn. Detta gjordes genom att analysera olika ramverks popularitet och användande samt att intervjua webbutvecklare som arbetar med det dagligen. Resultat – Rapportens resultat är baserat på den data som samlats in genom bearbetningen av statistiken, analysen av survey, samt de intervjuer som utfördes. Resultatet visar vilka ramverk som är populärast samt vilka som används mest. Följande lista visar rangordningen: Populärast: Bootstrap Semantic UI Materialize Material Design Lite Foundation Mest använt: Bootstrap Foundation Materialize Material Design Lite Semantic UI Resultatet av intervjuerna visade att majoriteten av de webbutvecklare som intervjuades använde ett ramverk när de skapade en hemsida, antingen ett existerande eller ett eget skapat. Det var också praxis att använda samma ramverk i företaget, även om sättet man arbetade med det kunde skilja sig från utvecklare till utvecklare. Samtliga utvecklare hade ett mobile-first tänk i åtanke, även om det inte alltid prioriterades. Det framgick även i studien att samtliga hade en grundtanke bakom valet av ramverk, men det var endast en som faktiskt hade utfört en undersökning om vilket som skulle passa dem bäst. Samtliga webbutvecklare som intervjuades tyckte att hamburgermenyn var tråkig och dålig ur ett användarupplevelseperspektiv. Men samtliga tyckte även att eftersom den används så brett och har gjort i ett par år så har användare lärt sig vad den innebär och fyller därför sitt syfte. Implikationer – Resultatets användningsområden är främst kopplade till personer eller företag som arbetar med webbutveckling men kommer även att kunna användas av privatpersoner. För rapportens primära målgrupp kommer resultatet att ge en ökad förståelse för vilka ramverk som används mest samt en ökad förståelse för varför dessa används. Privatpersoner kan använda resultatet på samma sätt. Begränsningar – Begränsningarna som vi får i denna studie är att vi inte kan dra några slutsatser om företag och webbutvecklare i andra delar av landet använder sig av samma ramverk eller metoder som de lokala vi intervjuat. Vi kan heller inte dra några slutsatser om varför Bootstrap är det mest populära och mest använda ramverket. Vi kan endast spekulera om varför med hjälp av den empiri vi samlat in via intervjuerna. En stor begränsning är även bristen av intervjuer då vi endast fick kontakt med 6 av de 10 företag som vi kontaktade, varav 4 stycken ville ställa upp på att delta i intervju. Fler generella slutsatser hade kunnat dras om fler företag hade ställt upp på intervjuer. Nyckelord – Ramverk, Webbutveckling, Responsiv webbdesign, Interaktionsdesign, Användarupplevelse, Bootstrap, Foundation, Materialize, Material Design Lite, Semantic UI