Skip to main content

LUP Student Papers

LUND UNIVERSITY LIBRARIES

UI Builder – an Interface Building Tool for Generating React Native Code for Mobile & Web

Havic, Edvin LU (2019) MAMM01 20191
Ergonomics and Aerosol Technology
Abstract (Swedish)
Detta examensarbete undersöker hur ett visuellt designverktyg för byggande av användargränssnitt till iOS, Android, och webben kan konstrueras. Även fast det finns en hel del verktyg för att designa och bygga mobil- och webbappar, så finns det i nuläget inga visuella designverktyg för att bygga en gemensam app för alla tre plattformar.

Utöver detta, så undersöker arbetet potentiella lösningar till problem relaterade till kodgenerering, mobil- och webbapputveckling samt tillgänglighetsstöd (eng. accessibility support) på flera plattformar – samtidigt som fokus ligger på användarupplevelsen av designverktyget. För att hitta lösningar till problemen inom de angivna områdena har ett visuellt designverktyg utvecklats med stöd för flera viktiga... (More)
Detta examensarbete undersöker hur ett visuellt designverktyg för byggande av användargränssnitt till iOS, Android, och webben kan konstrueras. Även fast det finns en hel del verktyg för att designa och bygga mobil- och webbappar, så finns det i nuläget inga visuella designverktyg för att bygga en gemensam app för alla tre plattformar.

Utöver detta, så undersöker arbetet potentiella lösningar till problem relaterade till kodgenerering, mobil- och webbapputveckling samt tillgänglighetsstöd (eng. accessibility support) på flera plattformar – samtidigt som fokus ligger på användarupplevelsen av designverktyget. För att hitta lösningar till problemen inom de angivna områdena har ett visuellt designverktyg utvecklats med stöd för flera viktiga funktioner – högkvalitativ kodgenerering, ett intuitivt sätt att visuellt bygga väl utformade och tillgängliga (eng. accessible) användargränssnitt, samt en gemensam kodbas för de tre målplattformarna.

En iterativ arbetsprocess har använts, och fokus har genomgående legat på användaren av systemet. Processen delades upp i flera faser, och flera typer av användbarhetsutvärderingar har använts – bl.a. heuristiska utvärderingar och användartestning.

Resultaten som presenterats i detta arbete visar hur ett visuellt designverktyg för flera plattformar kan se ut och fungera. Utöver detta så har även potentiella lösningar till hur högkvalitativ kodgenerering och tillgänglighetsstöd kan implementeras presenterats. (Less)
Abstract
This thesis investigates how a visual design tool for building cross-platform application interfaces for iOS, Android, and web can be constructed. While there are plenty of tools for building and designing mobile and web apps, there are currently no visual design tools for building cross-platform apps for all three platforms.

Beyond this, the thesis explores potential solutions for problems related to code generation, mobile and web app development, as well as accessibility support across multiple platforms – all while focusing on the user experience of the visual design tool. To find solutions to the problems within these areas, a visual design tool was developed with support for several key features: high quality code generation, an... (More)
This thesis investigates how a visual design tool for building cross-platform application interfaces for iOS, Android, and web can be constructed. While there are plenty of tools for building and designing mobile and web apps, there are currently no visual design tools for building cross-platform apps for all three platforms.

Beyond this, the thesis explores potential solutions for problems related to code generation, mobile and web app development, as well as accessibility support across multiple platforms – all while focusing on the user experience of the visual design tool. To find solutions to the problems within these areas, a visual design tool was developed with support for several key features: high quality code generation, an intuitive way to visually build well designed and accessible user interfaces, and a unified codebase for the three target platforms.

The work process was highly iterative and user-centered, and was split into multiple phases and utilizing several usability testing methods, such as heuristic evaluations and user testing.

The results found during this work shows how a visual design tool for cross-platform development can look and function, as well as giving potential solutions to how high quality code generation and accessibility support can be implemented, within in the context of cross-platform applications. (Less)
Please use this url to cite or link to this publication:
author
Havic, Edvin LU
supervisor
organization
course
MAMM01 20191
year
type
H2 - Master's Degree (Two Years)
subject
keywords
interface design tool, user-centered design, accessibility, react native, cross-platform development
language
English
id
8985989
date added to LUP
2019-06-24 12:45:44
date last changed
2019-10-02 10:47:44
@misc{8985989,
  abstract     = {{This thesis investigates how a visual design tool for building cross-platform application interfaces for iOS, Android, and web can be constructed. While there are plenty of tools for building and designing mobile and web apps, there are currently no visual design tools for building cross-platform apps for all three platforms.

Beyond this, the thesis explores potential solutions for problems related to code generation, mobile and web app development, as well as accessibility support across multiple platforms – all while focusing on the user experience of the visual design tool. To find solutions to the problems within these areas, a visual design tool was developed with support for several key features: high quality code generation, an intuitive way to visually build well designed and accessible user interfaces, and a unified codebase for the three target platforms.

The work process was highly iterative and user-centered, and was split into multiple phases and utilizing several usability testing methods, such as heuristic evaluations and user testing.

The results found during this work shows how a visual design tool for cross-platform development can look and function, as well as giving potential solutions to how high quality code generation and accessibility support can be implemented, within in the context of cross-platform applications.}},
  author       = {{Havic, Edvin}},
  language     = {{eng}},
  note         = {{Student Paper}},
  title        = {{UI Builder – an Interface Building Tool for Generating React Native Code for Mobile & Web}},
  year         = {{2019}},
}