BlackBox toolkit: intelligent assistance to UI design - RWTH Publications

h1

h2

h3

h4

h5
h6


001     845048
005     20241111150410.0
024 7 _ |a HT021377404
|2 HBZ
024 7 _ |a 41274
|2 Laufende Nummer
024 7 _ |a 10.18154/RWTH-2022-04371
|2 datacite_doi
037 _ _ |a RWTH-2022-04371
041 _ _ |a English
082 _ _ |a 004
100 1 _ |0 P:(DE-588)125829866X
|a Sermuga Pandian, Vinoth Pandian
|b 0
|u rwth
245 _ _ |a BlackBox toolkit: intelligent assistance to UI design
|c vorgelegt von Vinoth Pandian Sermuga Pandian, M.Sc.
|h online
260 _ _ |a Aachen
|b RWTH Aachen University
|c 2022
300 _ _ |a 1 Online-Ressource : Illustrationen, Diagramme
336 7 _ |0 2
|2 EndNote
|a Thesis
336 7 _ |0 PUB:(DE-HGF)11
|2 PUB:(DE-HGF)
|a Dissertation / PhD Thesis
|b phd
|m phd
336 7 _ |2 BibTeX
|a PHDTHESIS
336 7 _ |2 DRIVER
|a doctoralThesis
336 7 _ |2 DataCite
|a Output Types/Dissertation
336 7 _ |2 ORCID
|a DISSERTATION
500 _ _ |a Englische und deutsche Zusammenfassung. - Veröffentlicht auf dem Publikationsserver der RWTH Aachen University
502 _ _ |a Dissertation, RWTH Aachen University, 2022
|b Dissertation
|c RWTH Aachen University
|d 2022
|g Fak01
|o 2022-02-15
520 3 _ |a Das Design von Benutzeroberflächen (UI) ist ein iterativer Prozess, bei dem die Designer mehrere Prototyping-Fidelity durchlaufen, um eine ästhetische und benutzbare Oberfläche zu erstellen. Frühere Forschungen zur Integration von Künstlicher Intelligenz (KI) in den UI-Designprozess konzentrierten sich auf die Automatisierung des Prozesses, wobei die Autonomie der Designer auf der Strecke blieb. In dieser Dissertation führen wir eine systematische Forschung durch, die einen menschenzentrierten Ansatz verwendet, um KI-Unterstützung für UI-Designer vor, während und nach dem traditionellen LoFi-Prototyping-Prozess bereitzustellen. Diese Forschung zielt darauf ab, kohärente KI-Unterstützung während der sich wiederholenden und mühsamen LoFi-Prototyping-Aufgabe zu bieten, ohne die Autonomie der UI-Designer zu opfern. Zu diesem Zweck stellen wir das Blackbox Toolkit zur Verfügung. Dieses Toolkit unterstützt Designer durch die Erstellung von vier großen, vielfältigen, frei zugänglichen Benchmark-Datensätzen und drei KI-Tools, die UI-Designer während des gesamten LoFi-Prototyping-Prozess unterstützen.Das Blackbox-Toolkit steuert die folgenden Datensätze bei: UISketch-Datensatz, ~18K Skizzen von UI-Elementen; Syn & SynZ-Datensätze, ~300K synthetische LoFi-Skizzen; LoFi Sketch Datensatz, ~4.5K reale LoFi-Skizzen und Wired-Datensatz, ~2.7K semantisch annotiert UI-Screenshots. Jeder dieser Datensätze zielt auf eine der beiden Arten von LoFi-Prototypen ab: LoFi-Skizzen und LoFi-Wireframes. Die Datensätze gewährleisten eine große Vielfalt an Designern und Entwicklern durch die Datenerfassung aus einer Vielzahl von Ländern, Eingabemedien und Vorerfahrungen.Akin ist ein UI-Wireframe-Generator, der ein modifiziertes bedingtes SAGAN-Modell verwendet und UI-Designer vor dem LoFi-Prototyping unterstützt, indem er mehrere UI-Wireframes für ein bestimmtes UI-Designmuster erzeugt. Die Evaluierungsergebnisse zeigen, dass die Qualität der von Akin generierten UI-Wireframes angemessen war. Außerdem zeigt die Nutzerbewertung, dass UI/UX-Designer die von Akin generierten Wireframes für genauso gut halten wie die von Designern erstellten Wireframes. Außerdem identifizierten die Designer die von Akin generierten Wireframes in 50% der Fälle als vom Designer erstellt. RUITE ist ein UI-Wireframe-Refiner, der ein Transformer-Encoder-Modell verwendet und UI-Designer beim LoFi-Prototyping unterstützt, indem er UI-Elemente in einem bestimmten UI-Wireframe ausrichtet und gruppiert. Bei fast allen Bewertungsmetriken liefert es zufriedenstellende Ergebnisse. Das qualitative Feedback deutet darauf hin, dass die Designer die Verfeinerung des UI-Wireframes mit RUITE bevorzugen und ihr Interesse an dessen Einsatz bekundet haben. MetaMorph ist ein UI-Element-Detektor, der das RetinaNet-Objektdetektion Modell verwendet und UI-Designer nach dem LoFi-Prototyping unterstützt, indem er die konstituierenden UI-Elemente von LoFi-Skizzen sowie deren Position und Dimension erkennt. Es ermöglicht die Transformation von LoFi-Skizzen in eine höhere Fidelity Prototypen. Bei der Evaluierung mit handgezeichneten LoFi-Skizzen erreicht MetaMorph 47,8% mAP. Darüber hinaus zeigt das qualitative Feedback, dass MetaMorph den Aufwand der Designer bei der Umwandlung von LoFi-Prototypen in höhere Fidelitäten reduziert, indem es ihnen einen Vorsprung verschafft. Zusammenfassend lässt sich aus unserem qualitativen Feedback schließen, dass die Benutzeroberflächendesigner den Einsatz von KI für das Benutzeroberflächendesign als einen spannenden und praktischen Ansatz ansehen und sich sehr für den Einsatz solcher Tools interessieren. Darüber hinaus zeigen die Studien zur Benutzerzufriedenheit, die mithilfe von After Scenario Fragebögen durchgeführt wurden, eine überdurchschnittlich hohe Zufriedenheit der Designer mit allen drei KI-Tools. Ziel dieser Forschung ist es, die Auswirkungen von KI-Tools auf den Arbeitsablauf von UI-Designern zu verstehen und ihre Zufriedenheit mit dem Einsatz dieser KI-Tools zu bewerten. Darüber hinaus wird eine Grundlage für künftige Forschungen zur Erstellung, Verfeinerung und Transformation von UI-Wireframes geschaffen.
|l ger
520 _ _ |a User Interface (UI) design is an iterative process where designers iterate over multiple prototyping fidelities to finalise an aesthetic and usable interface. Prior research on adding Artificial Intelligence (AI) to the UI design process focused on automating the process while sacrificing the autonomy of designers. In this dissertation, we conduct systematic research using a human-centred approach to provide AI assistance to UI designers before, during, and after the traditional LoFi prototyping process. As a result, this research aims to provide coherent AI assistance throughout the repetitive and arduous LoFi prototyping task without sacrificing the autonomy of UI designers. In doing so, we contribute the BlackBox Toolkit. This toolkit assists designers by creating four large-scale, diverse, open-access benchmark datasets and three AI tools that assist UI designers throughout the LoFi prototyping process.Blackbox toolkit contributes the following datasets: UISketch dataset, ~18k UI element sketches; Syn & SynZ datasets, ~300k synthetic LoFi sketches; LoFi Sketch dataset, ~4.5k real-life LoFi sketches and Wired dataset, ~2.7k semantically annotated UI screenshots. Each of these datasets targets one of the two types of LoFi prototypes: LoFi sketches and LoFi wireframes. The datasets ensure ample diversity of designers and developers by data collection from a wide range of countries, input media, and prior experience.Moving on to the AI tools, Akin is a UI wireframe generator that uses a modified conditional SAGAN model and assists UI designers before LoFi prototyping by generating multiple UI wireframes for a given UI design pattern. Evaluation results show that the quality of Akin-generated UI wireframes was adequate. Further, the user evaluation shows that UI/UX designers considered Akin-generated wireframes as good as designer-made wireframes. Further, designers identified Akin-generated wireframes as designer-made 50% of the time.RUITE is a UI wireframe refiner that uses a Transformer-Encoder model and assists UI designers during LoFi prototyping by aligning and grouping UI elements in a given UI wireframe. On almost all evaluation metrics, it provides satisfactory results. The qualitative feedback indicates that designers prefer UI wireframe refinement using RUITE and expressed interest in using it.MetaMorph is a UI element detector that uses the RetinaNet object detection model and assists UI designers after LoFi prototyping by detecting the constituent UI elements of LoFi sketches and their location and dimension. It enables the transformation of LoFi sketches to higher-fidelities. Upon evaluation with hand-drawn LoFi sketches, MetaMorph provides 47.8% mAP. Further, the qualitative feedback shows that MetaMorph reduced designers’ effort in transforming LoFi prototype to higher fidelities by providing them with a head-start. In summary, from our qualitative feedback, the UI designers perceive utilising AI for UI design as an exciting and practical approach and expressed their eagerness to adopt such tools. Moreover, the user satisfaction studies conducted using After Scenario Questionnaires show an above-average designer satisfaction level upon using all three AI assistance tools. This research aims to understand the impact of AI tools in UI designer workflow and assess their satisfaction upon using these AI tools. Further, it sets a baseline for future research on UI wireframe generation, refinement and transformation.
|l eng
588 _ _ |a Dataset connected to Lobid/HBZ
591 _ _ |a Germany
653 _ 7 |a UI design patterns
653 _ 7 |a UI layout refinement
653 _ 7 |a UI sketch datasets
653 _ 7 |a UI wireframe generation
653 _ 7 |a UI wireframes
653 _ 7 |a artificial intelligence
653 _ 7 |a deep learning
653 _ 7 |a generative adversarial networks
653 _ 7 |a prototyping
653 _ 7 |a sketch recognition
700 1 _ |0 P:(DE-82)IDM00071
|a Jarke, Matthias
|b 1
|e Thesis advisor
|u rwth
700 1 _ |a Schröder, Ulrich J.
|b 2
|e Thesis advisor
856 4 _ |u https://publications.rwth-aachen.de/record/845048/files/845048.pdf
|y OpenAccess
856 4 _ |u https://publications.rwth-aachen.de/record/845048/files/845048_source.zip
|y Restricted
909 C O |o oai:publications.rwth-aachen.de:845048
|p openaire
|p open_access
|p VDB
|p driver
|p dnbdelivery
910 1 _ |0 I:(DE-588b)36225-6
|6 P:(DE-588)125829866X
|a RWTH Aachen
|b 0
|k RWTH
910 1 _ |0 I:(DE-588b)36225-6
|6 P:(DE-82)IDM00071
|a RWTH Aachen
|b 1
|k RWTH
914 1 _ |y 2022
915 _ _ |a OpenAccess
|0 StatID:(DE-HGF)0510
|2 StatID
920 1 _ |0 I:(DE-82)121810_20140620
|k 121810
|l Lehrstuhl für Informatik 5 (Informationssysteme und Datenbanken)
|x 0
920 1 _ |0 I:(DE-82)120000_20140620
|k 120000
|l Fachgruppe Informatik
|x 1
980 _ _ |a I:(DE-82)120000_20140620
980 _ _ |a I:(DE-82)121810_20140620
980 _ _ |a UNRESTRICTED
980 _ _ |a VDB
980 _ _ |a phd
980 1 _ |a FullTexts


LibraryCollectionCLSMajorCLSMinorLanguageAuthor
Marc 21