BlackBox toolkit: intelligent assistance to UI design

Sermuga Pandian, Vinoth Pandian; Jarke, Matthias (Thesis advisor); Schröder, Ulrich J. (Thesis advisor)

Aachen : RWTH Aachen University (2022)
Doktorarbeit

Dissertation, RWTH Aachen University, 2022

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.

Einrichtungen

• Fachgruppe Informatik [120000]
• Lehrstuhl für Informatik 5 (Informationssysteme und Datenbanken) [121810]