The use of no-code editors makes developing web applications more accessible since they are based on Graphical User Interface elements instead of conventional programming languages. This allows users without previous programming experience to design web-application interfaces. However, designing web applications with no-code editors can be a daunting process for beginners without design experience. This study therefore investigates which aspects of no-code editors can support novice designers when designing aesthetically pleasing web-application layouts. A usability analysis of three state-of-the-art no-code editors was conducted using the Cognitive Dimensions of Notations framework. The main aspect that impacted usability in the no-code editors was a difficulty aligning and positioning elements due to hidden dependencies and unforeseen actions. Based on this finding, a prototype was developed to address these issues. The prototype introduced the concept of a "Golden Ratio Guide", a visual guide intended to support the alignment and positioning of elements. A user study was conducted with inexperienced designers (n=5) to test if the Golden Ratio Guide helps with designing aesthetic web-application layouts. Contrary to expectations, a survey with users of such web-applications (n=36) showed that the web-layouts designed without the Golden Ratio Guide were preferred. / Att använda sig av programmeringsfria redigeringsprogram för att utveckla webbapplikationer bidrar till en större tillgänglighet då de är baserade på grafiska användargränssnittselement istället för konventionella programmeringsspråk. Detta tillåter användare utan tidigare programmeringserfarenhet att designa webbapplikationsgränssnitt. Men att designa webbapplikationer i ett programmeringsfritt redigeringsprogram kan vara en skrämmande process för nybörjare utan designerfarenhet. Denna studie undersöker därför vilka aspekter av programmeringsfria redigeringsprogram som stödjer nybörjare med att designa estetiskt tilltalande layouter för webbapplikationer. En användbarhetsanalys av tre programmeringsfria redigeringsprogram relevanta inom fältet genomfördes med hjälp av ramverket Cognitive Dimensions of Notations. Den huvudsakliga aspekten som påverkade användbarheten i programmeringsfria redigeringsprogram var svårigheten att anpassa och placera element på grund av dolda beroenden och oförutsedda händelser. Baserat på denna upptäckt utvecklades en prototyp för att lösa dessa problem. Prototypen introducerade konceptet med en "Gyllene Snittet Guide", en visuell guide avsedd att stödja anpassning och positionering. En användarstudie genomfördes med oerfarna designers (n=5) för att testa om guiden baserad på det Gyllene Snittet hjälper med att designa estetiska layouter för webbapplikationer. Tvärtemot förväntningarna visade en undersökning med användare av dessa webbapplikationer (n=36) att webblayouterna som designats utan guiden baserad på det Gyllene Snittet föredrogs.

Currently there are not a lot of code editors specifically designed to teach introductory programming via collaborative programming. In this paper we create MarveCode which is a collaborative coding editor written in javascript using Marvejs. Marvejs is a DUI framework which allows for the distribution of dom elements between several clients. MarveCode is meant to aid in introductory coding classes making it easy for groups of students to work on a problem together. The other purpose of this thesis is to investigate any problems with Marvejs and to see if any improvements can be made. In order to figure out what improvements can be made to Marvejs we will stress test our implementation of MarveCode by simulating users joining and writing code. We will then investigate network traffic and general performance issues in MarveCode and in turn Marvejs.

This project investigated the touchscreen text-based code editor in OmniCore FlexPendant to improve its usability and user experience. This is a powerful but complex application used to program industrial robots. The objective is to redesign the user interface and interactions to make them more userfriendly and intuitive, with the goal of improving efficiency. The principles for designing complex applications and touchscreen products are generated as an outcome. From an academic standpoint, the research aims to fill the gap in text-based code editors for robot controller design and inspire touchscreen code editor design in other fields. Design thinking served as the framework for the design process, which encompassed seven steps that ranged from exploration to conceptualization and user testing. Guidance for improvement is ideated by ’become a user,’ competitive analysis, and user studies. In the design phase, a high-fidelity prototype is built upon the original design with completely new interfaces, structures, and interactions. The user experience and usability are evaluated during user testing by counting task completion time, applying two standard user experience measurements, and conducting a brief interview. The results indicate that the new design achieved better completion efficiency in tasks, better user experience and usability scores, and received positive feedback from participants. The new solution meets the objectives and is considered a good reference for the design of industrial robot programming solutions. / Denna studie undersökte den pekskärm- och textbaserade kodeditorn i OmniCore FlexPendant, för att förbättra dess användbarhet och användarupplevelse. Det är en kraftfull men komplex applikation som används för att programmera industrirobotar. Målet är en omarbetning av användargränssnittet och interaktionerna för att göra dem mer användarvänliga och intuitiva, med målet att förbättra effektiviteten. Principerna för att utforma komplexa applikationer och pekskärmsprodukter genereras som ett resultat. Ur ett akademiskt perspektiv syftar forskningen till att fylla luckan gällande design av textbaserade kodeditor för robotkontroller, och inspirera vid designen av pekskärmsbaserade kodeditorer inom andra fält. ”Design thinking” tjänade som ramverk för designprocessen, vilken omfattade sju steg som sträckte sig från utforskning till konceptualisering och användartestning. Vägledning för förbättringar tas fram genom ”att vara en användare”, konkurrensanalys och användarstudier. I designfasen byggs en högupplöst prototyp baserat på den ursprungliga designen med helt nya gränssnitt, struktur och interaktioner. Användarupplevelsen och användbarheten utvärderas under användartestning genom att räkna tid, tillämpa två standardmått för användarupplevelse och genomföra en kort intervju. Resultaten visar att den nya designen uppnådde högre effektivitet i uppgifter, bättre användarupplevelse och högre användbarhetspoäng samt fick positiv feedback från deltagarna. Den nya lösningen uppfyller målen och anses vara en bra referens för design av lösningar för programmering av industrirobotar.