UI Builder – an Interface Building Tool for Generating React Native Code for Mobile & Web
(2019) MAMM01 20191Ergonomics 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:
http://lup.lub.lu.se/student-papers/record/8985989
- author
- Havic, Edvin LU
- supervisor
- organization
- course
- MAMM01 20191
- year
- 2019
- 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}}, }