BlackBox toolkit: intelligent assistance to UI design

Sermuga Pandian, Vinoth Pandian; Jarke, Matthias; Schröder, Ulrich J.

doi:41274

BlackBox toolkit: intelligent assistance to UI design

Sermuga Pandian, Vinoth Pandian^RWTH*

2022

Verantwortlichkeitsangabevorgelegt von Vinoth Pandian Sermuga Pandian, M.Sc.

ImpressumAachen : RWTH Aachen University 2022

Umfang1 Online-Ressource : Illustrationen, Diagramme

Dissertation, RWTH Aachen University, 2022

Englische und deutsche Zusammenfassung. - Veröffentlicht auf dem Publikationsserver der RWTH Aachen University

Genehmigende Fakultät
Fak01

Hauptberichter/Gutachter
Jarke, Matthias (Thesis advisor)^RWTH* ; Schröder, Ulrich J. (Thesis advisor)

Tag der mündlichen Prüfung/Habilitation
2022-02-15

Online
DOI: 10.18154/RWTH-2022-04371
URL: https://publications.rwth-aachen.de/record/845048/files/845048.pdf

Einrichtungen

Inhaltliche Beschreibung (Schlagwörter)
UI design patterns (frei) ; UI layout refinement (frei) ; UI sketch datasets (frei) ; UI wireframe generation (frei) ; UI wireframes (frei) ; artificial intelligence (frei) ; deep learning (frei) ; generative adversarial networks (frei) ; prototyping (frei) ; sketch recognition (frei)

Thematische Einordnung (Klassifikation)
DDC: 004

Kurzfassung
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.

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.

OpenAccess:
Download fulltext PDF
(additional files)