This thesis deals with the design and construction of a four-wheeled mobile robot designed for an interactive exhibit and educational purposes. This robot is capable of wireless image transmission and manipulation with objects. In addition, this thesis deals with the construction of a charging station and user interface for controlling the robot which contains elements of augmented reality and minigames.

This thesis explores the possibilities of abstraction of graphical user interface and automation of its design and development process at runtime. Emphasis is placed on possibility of remote control over computer network and accordingly on delegation of the interface creation on the human operated remote machine. The thesis analyzes contemporary approaches to and methods of interface generation. As a goal of the thesis a system for automatic user interface generation for remote applications was designed and implemented. The generation is based on specified data model.

This project is a master’s thesis in Industrial Design that has been conducted in the spring of 2022 at Luleå University of Technology. The project is a cooperation with the company Neava and is about improving their online tool Design Studio. The goal of the project is to improve the online tool from an environmentally friendly perspective, i.e., how information is presented regarding material’s impact on the environment and how energy efficient the house will be when all the choices have been made.  Today, there are two different interfaces of Design Studio. One that is based on specific requirements from a customer, and another that is designed for sellers. None of these interfaces provides the user with information about how the materials are affecting the environment. Today it is important to think about the materials and energy efficiency when new houses are being built to create a sustainable future.  The work has been conducted by the process Design Thinking, which is an iterative process that is performed in five different phases: empathize, define, ideate, prototype, and test. In the first phase, an understanding of the user was created, this was conducted through interviews and a survey. In the second phase, the user was identified, and user needs were established. In the third phase, different ideas and concepts were generated and then evaluated by users. In the fourth phase, a clickable prototype was created in the program Adobe XD. In the fifth phase, the prototype was tested on users and later improved based on the results.  The final result is a clickable prototype that informs the user about the available materials and how they are affecting the environment. The materials are categorized into three different groups: red, yellow, and green. If a material is in the red category, it indicates that the material is the worst for the environment. If a material is in the yellow category, it indicates that the material is okay for the environment. If a material is in the green category, it indicates that the material is the best for the environment. These three colors are connected to the environmental meter, the indicator shows the user how environmentally friendly materials the user has selected and how energy efficient the house will be.

This degree project is a design project that investigates digitization in the real estate industry and examines how far the real estate industry has come regarding the integration of new technology. The study highlights how companies work today and what problems and needs can be facilitated through digitization, more specifically the technology IoT (Internet Of Things). IoT makes it possible to connect different devices and sensors to the Internet in order to read information or control the functionality. The study is based on qualitative interviews which are analyzed through methods within User Experience (UX). The target group for the study is people who work with operation and maintenance of real estates. By creating personas and scenarios for the relevant target group, a greater understanding is created of how they work today along with what problems and needs they experience within their professional roles. Through methods within the User Interface (UI) a prototype is created which illustrates the information that is significant to the target group. The information from the properties is communicated via IoT devices. To enable communication between devices and prototype, the system Yggio is used, an API (Application Programming Interface) which is provided by the company Sensative. The study shows how a user-friendly interface can look, function and facilitate work in the real estate industry.

Komposite Web-Mashups stellen durch die intelligente Verknüpfung von User-Interface-Services und anderen Web-Ressourcen einen Mehrwert für Anwendungsszenarien in verschiedenen Situationen des privaten und geschäftlichen Lebens bereit. Obwohl die Verwendung solcher Mashups bereits viele Nutzerzielgruppen erreicht und Anwendungsdomänen erschlossen hat, ist die bedarfsgerechte Auswahl von Anwendungsbausteinen und deren intelligente Komposition immer noch eine große Herausforderung. In dieser Arbeit werden deshalb Konzepte für die verbesserte Durchführung des Erstellungsprozesses und die Nutzung kompositer Web-Mashups entwickelt und vorgestellt. Kernidee ist dabei die Modellierung und Auswertung anpassbarer Qualitätsanforderungen. Erstmals wird es mit Hilfe eines speziell auf die Belange kompositer Web-Mashups zugeschnittenen Modells für Qualitätseigenschaften ermöglicht, solche Anforderungen passgenau für die Auswahl von Anwendungsbausteinen und die automatisierte Auswertung zu nutzen. Neben der Spezifikation von Bedingungen und Vergleichswerten für bestimmte Eigenschaften erlaubt es das ebenfalls hier vorgestellte Metamodell für Qualitätsanforderungen, die Rahmenbedingungen der Auswertung sowie zuzuordnende Aktionen festzulegen. Schwerpunkte der Arbeit sind außerdem der Prozess der qualitätsbewussten Komposition, die Nutzung der resultierenden Web-Mashups sowie die dazu gehörende Referenzarchitektur. Die betrachteten Anwendungsszenarien decken insbesondere die Teilprozesse der Auswahl von Kompositionsfragmenten, die Erweiterung in Betrieb befindlicher Anwendungen sowie die intelligente Adaption innerhalb der Laufzeitplattform ab. Neben Werkzeugen zur Modellierung und der automatisierten Auswertung von Qualitätsanforderungen setzt die Referenzarchitektur das kontextsensitive Monitoring von Qualitätseigenschaften um. Ein weiterer Fokus liegt auf der unscharfen Spezifikation anpassbarer Qualitätsanforderungen, da zur Zielgruppe insbesondere auch Menschen ohne Programmiererfahrung, jedoch mit guter Kenntnis in aktuellen Web-Technologien und in der jeweiligen fachlichen Domäne, zählen. Diese Ausrichtung wird sowohl bei der Modellierung mit Fuzzy-Mengen als auch in Form von Interaktionskonzepten berücksichtigt. Anhand typischer Anwendungsfälle und unter Zuhilfenahme einer implementierten Infrastruktur und Anwendungslandschaft werden die vorgestellten Konzepte validiert und optimiert. Dabei fließen sowohl die Meinungen von Nutzern und Experten als auch die Betrachtungen zur Komplexität ressourcenintensiver Vorgänge sowie die Ergebnisse von Performance-Analysen ein. Durch das Verwenden der Modelle, Konzepte, Prozesse und Architekturen dieser Arbeit wird somit eine verbesserte Erstellung, Verfeinerung und Nutzung bedarfsgerechter, situativer Mashup-Anwendungen mit Hilfe anpassbarer Qualitätsanforderungen ermöglicht.:Kapitel 1 Motivation und Zielstellung Abschnitt 1.1 Problemdefinition Abschnitt 1.2 Forschungsthesen Abschnitt 1.3 Forschungsziele Abschnitt 1.4 Abgrenzung Abschnitt 1.5 Aufbau der Arbeit Kapitel 2 Grundlagen der Entwicklung und Nutzung kompositer Web-Mashups Abschnitt 2.1 Charakteristika und Einordnung des Anwendungstyps Abschnitt 2.2 Entwicklungsmethoden und Anwendungsszenarien Abschnitt 2.3 Rollen im Entwicklungsprozess von Web-Mashups Abschnitt 2.4 Qualitätseigenschaften und -anforderungen im Kontext von Web-Mashups Kapitel 3 Stand der Forschung und Technik Abschnitt 3.1 Normen und Standards für Qualitätsmodelle bei Softwareprodukten Abschnitt 3.2 Strukturierung und Erstellung von Qualitätsmodellen Abschnitt 3.3 Anforderungsmodellierung mit Aufgaben und Fuzzy-Mengen Abschnitt 3.4 Bewertungskriterien und Übersicht der Cluster für existierende Arbeiten Abschnitt 3.5 Qualität in Web-Mashups Abschnitt 3.6 Qualitätsanforderungen im Web-Engineering Abschnitt 3.7 Qualitätseigenschaften und -anforderungen bei der Auswahl und Komposition von Web-Services Abschnitt 3.8 Qualitätsanforderungen in kompositen Softwaresystemen Abschnitt 3.9 Fazit zum Stand der Forschung und Technik Kapitel 4 Modellierung von Qualitätseigenschaften für Mashups Abschnitt 4.1 Modellüberblick und Abhängigkeiten Abschnitt 4.2 Anforderungen an das Eigenschaftsmodell Abschnitt 4.3 Metamodell zur Strukturierung von Qualitätseigenschaften Abschnitt 4.4 Unscharfe Eigenschaftswerte mit Fuzzy-Mengen Abschnitt 4.5 Nutzung von Qualitätseigenschaften in der Mashup-Plattform Abschnitt 4.6 Referenzmodell der für Mashups typischen Qualitätseigenschaften Abschnitt 4.7 Zusammenfassung und Bewertung des Modells für Qualitätseigenschaften Kapitel 5 Festlegen und Auswerten von Qualitätsanforderungen Abschnitt 5.1 Herausforderungen im Umgang mit Anforderungen Abschnitt 5.2 Qualitätsanforderungen in der Mashup-Architektur Abschnitt 5.3 Aufbau von Qualitätsanforderungen Abschnitt 5.4 Erzeugen und Bearbeiten von Qualitätsanforderungen Abschnitt 5.5 Auswertung von Qualitätsanforderungen Abschnitt 5.6 Zusammenfassung Kapitel 6 Qualitätsbewusster Entwicklungs- und Nutzungsprozess Abschnitt 6.1 Entwicklung und Nutzung von Web-Mashups mit Qualitätsanforderungen Abschnitt 6.2 Aktionen im Kontext von Qualitätsanforderungen Kapitel 7 Validierung und Implementierung Abschnitt 7.1 Validierungsmethodik Abschnitt 7.2 Überblick der implementierten Infrastruktur Abschnitt 7.3 Implementierung von Kompositionsfragmenten Abschnitt 7.4 Implementierung der Referenzarchitektur Abschnitt 7.5 Implementierung der Werkzeuge Abschnitt 7.6 Nutzerstudie zum Anforderungsassistenten Abschnitt 7.7 Validierungsergebnisse zu Performance und Awareness-Indikatoren Abschnitt 7.8 Diskussion zur Validierung und Implementierung Kapitel 8 Zusammenfassung, Diskussion, Bewertung und Ausblick Abschnitt 8.1 Zusammenfassung der Kapitel Abschnitt 8.2 Diskussion und Bewertung der Forschungsergebnisse Abschnitt 8.3 Ausblick auf aktuelle und künftige Arbeiten Anhang A Metamodelle und Schemata Anhang B Referenzmodelle Anhang C Komponentenimplementierungen Anhang D Werkzeuge Anhang E Dienste, Verwaltung und Tests

Denna studie behandlar problemet med ojämn struktur och design hos lärplattformar, brist på struktur kan innebära svårigheter med att hitta information vilket kan ha negativ påverkan på studenters upplevelser. Därför blev forskningsfrågan: hur kan strukturen och designen på lärplattformar förbättras för att öka studenternas studieupplevelse? Syftet med studien är att belysa de problem och frustrationer som kan uppstå när universiteten använder sig av allt fler digitala verktyg samt sammanställa förbättringsförslag för framtida kurshemsidor. Studien är kvalitativ och använder sig av en design-baserad forsknings metodik där två tester utfördes. Det första testet utfördes på en befintlig kurshemsida och det andra testet utfördes på en prototyp. Den nya prototypen skapades för studien med en ökad grad av standardiserad struktur som sedan kom att testas av universitetsstudenter. Prototyputvecklingen var iterativ och för att utvärdera sidan användes användbarhetstester med CTA (Concurrent think aloud) och en uppföljande semistrukturerad intervju. Data samlades in och analyserades med hjälp av en tematisk analys. Urvalet bestod av 9 st IT-studenter från Stockholms Universitet med erfarenhet av iLearn och valdes ut med hjälp av ett strategiskt urval. Resultatet visade att studenter upplever att en ökad grad av standardiserad struktur och stilsättning leder till att kurshemsidorna blir enklare att navigera och att det är därför viktigt att ta hänsyn till dessa faktorer vid utvecklingen av nya kurshemsidor. På det första testet uppfattade studenter det som att kurshemsidan har en låg grad av standardisering och att det kan leda till bland annat att man missar viktig information vilket kan vara frustrerande och stressande. Det kom vidare fram att det finns problem när stilsättningen är inkonsekvent eftersom det skadar läsbarheten på sidan. Under det andra testet upplevdes de största problemen såsom ordningsföljden och stilen som lösta. Som resultat av studien upptäcktes ett flertal viktiga faktorer som kan innebära mindre stress och oro för studenter kopplat till kurshemsidans utformning. Av dessa faktorer upplever studenter att ordningsföljden av innehållet var mycket viktig. Innehållet bör ordnas efter 1) grad av generalitet 2) Hur viktig informationen är 3) I kronologisk ordning. Vidare upplever studenterna att stilsättningen även den är viktig. Fokus är där på att stilsättningen är konsekvent, att viktig information sticker ut och att innehållet av en rubrik eller länk har en tydlig beskrivning. En viktig slutsats som kan dras är att hur svårt det är att hitta information har en negativ påverkan på studenters studieupplevelse. Det visades vara viktigt att informationen kategoriseras på ett bra sätt där relaterat innehåll bör vara placerat på samma plats eftersom det annars finns en ökad risk att studenterna missar informationen. I övrigt upplevde studenter att en ny funktion med en samlad inlämningslåda är mycket positiv eftersom det skulle minska risken med att missa inlämningar när de är utspridda på flera sidor. Om utvecklare tar större hänsyn till dessa faktorer kan det leda till en förbättrad studieupplvelse för framtida studenter. / This study deals with the problem of the lack of structure and design of learning platforms. Lack of structure can mean difficulties in finding information which can have a negative impact on students' experiences. Therefore, the research question became: how can the structure and design of learning platforms be improved to increase the students' study experience? The purpose of the study is to shed light on the problems and frustrations that can arise when universities use more and more digital tools and to compile proposals for future course websites. The study is qualitative and uses a design-based research methodology where two tests were performed. The first test was performed on an existing course homepage and the second test was performed on a prototype. The new prototype was created with an increased degree of standardized structure which was then tested by university students. The prototype development was iterative, the prototype was evaluated with usability tests, CTA (Concurrent think aloud) and a follow-up semi-structured interview. Data were collected and analyzed using a thematic analysis. The sample consisted of 9 IT students from Stockholm University with experience of iLearn and were selected using a strategic selection. The results showed that students feel that an increased degree of standardized structure and style leads to course homepages becoming easier to navigate and that it is therefore important to take these factors into account when developing new course homepages. On the first test, students perceived that the course website has a low degree of standardization and that it can lead to, among other things, missing important information, which can be frustrating and stressful. It was further revealed that there are problems when the style setting is inconsistent because it damages the readability of the page. During the second test, the biggest problems such as order and style were perceived as solved. As a result of the study, a number of important factors were discovered that can lead to less stress and anxiety for students linked to the design of the course website. Of these factors, students felt that the order of the content was very important. The content should be arranged by 1) degree of generality 2) How important the information is 3) In chronological order. Furthermore, the students feel that style is also important. The focus is there on the style being consistent, that important information stands out and that the content of a heading or link has a clear description. An important conclusion that can be drawn is that how difficult it is to find information has a negative impact on students' study experience. It was therefore shown to be important that the information is categorized in a good way where related content should be placed in the same place because otherwise there is an increased risk of the students missing the information. Otherwise, students felt that a new feature with a consolidated submission box is very positive as it would reduce the risk of missing submissions when they are spread over several pages. If developers pay more attention to these factors, it can lead to an improved study experience for future students.

Many different autonomously driving mobile robots are used for industrial transports of materials or  oods in the context of internal logistic processes because of different use cases. The problem for the users that need to monitor the robots is that each manufacturer provides its own graphical user interface (GUI) wi th different operating modes and visual designs, which requires different trainings and constant swi tching between software. Therefore, this paper shows the design and development process of a graphical user interface in the form of a web application for the monitoring process of a fleet of automated guided vehicles from different manufacturers and answers the following question: "What are the main criteria when designing a graphical user interface with high usability for the monitoring process of manufacturer-independent automa ted guided vehicle f leets?” To answer the question, existing graphical user interfaces from different manufacturers were analyzed and interviews with developers and end-users of the GUIs were conducted. Requirements were then derived, on whose basis sketching, wireframing and high-fidelity prototyping have been performed. Usability testing and a heuristic evaluation were chosen to improve the application and its usability continually. As a result, the following six main criteria could be derived that summarize the most essential points to consider when designing such a GUI: administrabi lity, adaptiveness, observability, analyzability, robot and job awareness, and intervention. / Många olika autonomt körande mobila robotar används för industriell transport av material eller varor i samband med interna logistiska processer till följd av olika användningsfall. Problemet för de användare som behöver övervaka robotarna är att varje tillverkare tillhandahåller sitt eget grafiska användargränssnitt (GUI) med olika driftsätt och visuella utformningar, vilket kräver olika  utbildningar och ständig växling mellan mjukvara. Denna uppsats visar därför design- och utvecklingsprocessen för ett grafiskt användargränssnitt i form av en webbapplikation för övervakningsprocessen för en samling av automatiserade guidade fordon från olika tillverkare, och svarar på följande fråga: "Vilka är de viktigaste kriterierna vid utformningen av ett grafiskt användargränssnitt med hög användbarhet för övervakningsprocessen av automatiserade guidade  fordonsamlingar, oboeroande av tillverkare?” För att svara på frågan analyserades befintliga grafiska användargränssnitt från olika tillverkare, samt intervjuer med utvecklare och slutanvändare av GUI:erna utfördes. Krav härleddes sedan, baserat på vilka skisser, wireframing och hifi -prototyper som har utförts. Användbarhetstest och en heuristisk utvärdering valdes för att kontinuerligt förbättra applikationen och dess användbarhet. Som ett resultat kan följande sex huvudkriterier härledas, de sammanfattar de viktigaste punkterna att tänka på när man utformar ett sådant GUI: förmåga att administrera, anpassningsförmåga, observerbarhet, analyserbarhet, robot- och jobbmedvetenhet och intervention.

Master of Science / Department of Computing and Information Sciences / Robby / This report is a case study of applying Model-Based testing approach using SpecExplorer, which is a model-based testing tool developed by Microsoft, to test a component of Microsoft Network Monitor. The system under test is the UI of the Network Monitor feature, Parser Profiles Management. Model-Based testing is a methodology for automated testing which not only automates the test execution, but the test design and generation. This approach starts by expressing an abstract model of the system which is a smaller subset of the product behavior, but retains essential elements which form the focus of the testing problem. A model-based testing tool creates a finite state machine from the model which is traversed to produce test cases. Thus, it provides more efficient coverage and flexibility in developing and maintaining test cases.

A Graphical User Interface (GUI) is defined by its appearance and its behavior. A GUI’s behavior determines how it reacts to user and system events such as mouse, keyboard, or touchscreen presses, or changes to an underlying data model. Although many tools are effective in enabling designers to specify a GUI’s appearance, defining a custom behavior is difficult and error-prone. Many of the difficulties developers face in defining GUI behaviors are the result of their reactive nature. The order in which GUI code is executed depends upon the order in which it receives external inputs. Most widely used user interface programming frameworks use an event-callback model, where developers define GUI behavior by defining callbacks—sequences of low-level actions—to take in reaction to events. However, the event-callback model for user-interface development has several problems, many of which have been identified long before I started work on this dissertation. First, it is disorganized: the location and order of event-callback code often has little correspondence with the order in which it will be executed. Second, it divides GUI code in a way that requires writing interdependent code to keep the interface in a consistent state. This is because maintaining a consistent state requires referencing and modifying the same state variables across multiple different callbacks, which are often distributed throughout the code. In this dissertation, I will introduce a new framework for defining GUI behavior, called the stateconstraint framework. This framework combines constraints—which allow developers to define relationships among interface elements that are automatically maintained by the system—and state machines—which track the status of an interface. In the state-constraint framework, developers write GUI behavior by defining constraints that are enforced when the interface is in specific states. This framework allows developers to specify more nuanced constraints and allows the GUI’s appearance and behavior to vary by state. I created two tools using the state-constraint framework: a library for Web developers (ConstraintJS) and an interactive graphical language (InterState). ConstraintJS provides constraints that can be used both to control content and control display, and integrates these constraints with the three Web languages—HTML, CSS, and JavaScript. ConstraintJS is designed to take advantage of the declarative syntaxes of HTML and CSS: It allows the majority of an interactive behavior to be expressed concisely in HTML and CSS, rather than requiring the programmer to write large amounts of JavaScript. InterState introduces a visual notation and live editor to clearly represent how states and constraints combine to define GUI behavior. An evaluation of InterState showed that its computational model, visual notation, and editor were effective in allowing developers to define GUI behavior compared to conventional event-callback code. InterState also introduces extensions to the state-constraint framework to allow developers to easily re-use behaviors and primitives for authoring multi-touch gestures.

För att brandmännen på flygplatser ska känna sig trygga när olyckan är framme är det viktigt att de får den information som krävs för att veta hur de ska agera när en flygfarkost kraschar. Utöver att vara ett stöd vid skarpa lägen ska Brand- och räddningsinstruktionen, BRI, vara ett läromedel i brandmännens utbildning och ett komplement under resten av deras yrkesliv. Dagens BRI uppfattas av användarna som en tråkig hemsida som inte är anpassad för dem, därför handlar detta examensarbete om hur BRI bör utformas för att vara användbar, samt bidra till lärande och en god användarupplevelse. Detta arbete har varit en iterativ användarcentrerad designprocess. Arbetet började med en kontextuell undersökning hos användaren för att fastställa deras behov. Utifrån dessa behov resulterade arbetet i ett förslag på ett grafiskt användargränssnitt som följer Saabs grafiska profil och som genom tester visar sig uppfylla användarnas centrala behov. Det visualiserades med en interaktiv prototyp. Genom att strukturera visualiseringarna med tillhörande text, se till att ingen information är dold och tillämpa en konsekvent navigeringsstruktur påverkas användarupplevelsen positivt. Denna studie har identifierat vikten av samspelet mellan information och visualisering för att främja användbarhet och inlärning. / When accidents happen it’s important that the airport's fire fighters feel safe with the knowledge that they have. This is why it’s important that they receive the information that is needed so that they know how to act when an aircraft crashes. In addition to being an aid during critical situations the Fire and Rescue Instruction, FRI, is a digital data bank, which is used to educate new fire fighters, and also to keep fully trained fire fighters up to date. Users perceive the FRI as a boring website which isn't designed for them. Which is why this master thesis will investigate how the FRI should be designed to improve the user experience and increase the learning effect. The process, which has been implemented during this thesis, is an iterative user-centered design process. The work began with a contextual inquiry to determine the users' needs. Their needs were then used to develop a user interface concept that followed Saab's graphic profile. The users’ then evaluated the concept to make sure that it met the users' key requirements. The concept was visualized with an interactive prototype. A positive user experience can be accomplished by structuring the visualizations with its corresponding text, you should also ensure that no information is concealed and apply a consistent navigation structure. This study has identified the importance of the interaction between information and visualizations to promote the learning effect and usability.