Geautomatiseerd raamwerk voor het prototypen van gebruikersinterfaces dat cognitieve en visuele ontwerpprincipes integreert om de bruikbaarheid en lay-outhelderheid te verbeteren

Samenvatting

Deze studie presenteert een geautomatiseerd framework voor het prototypen van gebruikersinterfaces, waarin cognitieve ontwerpprincipes, perceptuele kleuremodellering en deep learning zijn geïntegreerd. Het systeem verbetert de toegankelijkheid, de duidelijkheid van de lay-out, de kleurharmonie en de consistentie over verschillende schermen, wat resulteert in coherente, gebruikersgerichte interfaceontwerpen.

Samenvatting

Effectief ontwerp van gebruikersinterfaces (UI) vereist een harmonieuze balans tussen visuele aantrekkingskracht, cognitieve bruikbaarheid en consistentie in de lay-out. Huidige benaderingen voor automatische UI-generatie richten zich echter primair op het visuele uiterlijk of componentdetectie en missen een uniform raamwerk dat cognitieve principes, kleurintelligentie en structurele redenering integreert. Bovendien kampen bestaande methoden met beperkte generalisatie van lay-outs, een gebrekkige interpreteerbaarheid, statische kleurselectie en inconsistent gedrag over verschillende schermen heen. In deze context stelt dit werk een geautomatiseerd UI-prototypingraamwerk voor dat componentdetectie op basis van het Faster region-based convolutional neural network (Faster R-CNN) en perceptuele kleurmodellering aangestuurd door de CIECAM02 uniforme kleurruimte (CAM02-UCS) integreert, verrijkt met cognitieve en visuele ontwerpprincipes. Faster R-CNN wordt gebruikt om UI-componenten te identificeren en hiërarchische structuren af te leiden uit grootschalige interface-datasets. Een verbeterde kleurgeneratiemodule analyseert merk- of referentieafbeeldingen om met behulp van CAM02-UCS perceptueel uniforme, harmonieuze en gebruiksvriendelijke kleurthema's te waarborgen. Deze outputs worden verder geoptimaliseerd via cognitieve ontwerpregels, waaronder Gestalt-groepering, de wetten van Fitts en Hick, op aandacht gebaseerde spatiëring en visuele hiërarchie-modellering, om automatisch verfijnde, taakgerichte UI-lay-outs te genereren. Experimenten uitgevoerd op de RICO-, ENRICO- en Guo's UI Color Datasets laten zien dat het voorgestelde systeem een nauwkeurigheid van 92,4% bij de componentdetectie behaalt, de duidelijkheid van de lay-out en de nauwkeurigheid van de leesvolgorde met 18,7% verbetert en kleurenpaletten produceert die door ontwerpers 24,5% harmonieuzer worden beoordeeld in vergelijking met referentiemethoden. Gebruikersbeoordelingen wijzen daarnaast op een afname van 31% in de waargenomen cognitieve belasting en een toename van 28% in ontwerpconsistentie over schermen heen. Deze bevindingen tonen aan dat de combinatie van deep learning-gebaseerd structureel begrip met perceptueel gefundeerde kleurmodellering en cognitieve ontwerpprincipes UI-prototypes oplevert die zeer efficiënt, esthetisch coherent en gebruiksvriendelijk zijn. Dit raamwerk vestigt een nieuwe, end-to-end benadering voor intelligente en mensgerichte geautomatiseerde UI-prototyping.

Inleiding

Grafische gebruikersinterfaces (GUI's) dienen als een fundamenteel communicatiemiddel tussen mensen en computersystemen en beïnvloeden de bruikbaarheid, toegankelijkheid en de algehele gebruikerservaring (UX) aanzienlijk^1,2. Moderne softwaresystemen vertrouwen op intuïtieve en visueel aantrekkelijke interfaces om gebruikers aan te trekken en te behouden. Traditioneel omvat UI-ontwerp het creëren van grafische lay-outs die later door engineers worden vertaald naar front-endcode. Verschillen in platformspecifieke protocollen tussen besturingssystemen vereisen echter herhaaldelijke aanpassingen, wat de ontwikkelingscomplexiteit en de benodigde inspanning verhoogt. Geautomatiseerde UI-codegeneratie is daarom ontstaan als een belangrijke onderzoeksrichting om handmatige inspanningen te verminderen en de efficiëntie van de ontwikkeling te verbeteren.

Vroege benaderingen voor geautomatiseerde UI-generatie combineren traditionele beeldverwerkingstechnieken met deep learning-modellen voor regio-detectie en classificatie^3,4. Momenteel passen dominante strategieën voor GUI-codegeneratie computer vision-technieken toe om UI-afbeeldingen te analyseren en deze om te zetten in gestructureerde front-end representaties^5,6,7. Waar beeldverwerkingsmethoden vertrouwen op handmatig ontworpen kenmerken, extraheren deep learning-benaderingen hiërarchische representaties uit grootschalige datasets. Als gevolg hiervan hebben onderzoekers hybride benaderingen verkend die deep learning combineren met domeinspecifieke beeldverwerkingstechnieken om de robuustheid en nauwkeurigheid te verbeteren.

Kleur is een andere kritieke factor in UI-ontwerp, die de gebruikersperceptie, bruikbaarheid en esthetische aantrekkingskracht beïnvloedt¹. Het handhaven van consistentie tussen de beeldinhoud en UI-kleurenschema's wordt uitdagend wanneer visuele inputs variëren in tint en context^8,9,10. Bijgevolg heeft aanzienlijk onderzoek zich gericht op de automatische generatie van kleurenpaletten en perceptuele kleurmodellering. Bestaande methoden voor kleurgeneratie omvatten technieken gebaseerd op de CIELAB-kleurruimte¹¹. Andere benaderingen maken gebruik van clusteringalgoritmen, zoals k-means, om dominante kleuren uit beelden te extraheren¹². Als gevolg hiervan is er in recent werk in toenemende mate gekozen voor datagestuurde benaderingen op basis van machine learning voor kleurmodellering.

Parallel hiermee hebben deep learning-benaderingen de detectie van UI-componenten en het begrip van lay-outs aanzienlijk verbeterd. Neurale netwerken hebben een nauwkeurigere structurele parsing van mobiele interfaces mogelijk gemaakt¹³. Deze methoden richten zich echter primair op detectienauwkeurigheid en laten vaak aspecten op een hoger niveau over het hoofd, zoals cognitieve bruikbaarheid, lay-out-hiërarchie en interactie-efficiëntie. Generatieve modellen voor UI-lay-outsynthese zijn ook voorgesteld^14,15, maar zij kampen met uitdagingen bij het handhaven van consistentie tussen schermen en het bieden van interpreteerbare ontwerpbeslissingen¹⁶. Andere benaderingen richten zich op visuele gelijkenis of renderingskwaliteit, maar missen een uniform kader dat componentsemantiek, kleurharmonie en bruikbaarheidsbeperkingen combineert¹⁷. Tekstherkenning is evenyens belangrijk voor het begrijpen van UI-inhoud. Technieken zoals convolutionele recurrente neurale netwerken (CRNN's) maken nauwkeurige herkenning van complexe tekstpatronen in interfaceschermen mogelijk^18,19,20.

Verschillende systemen zijn voorgesteld om UI-code te genereren op basis van schetsen of afbeeldingen. Sketch2Code maakt gebruik van objectdetectie om schetsen om te zetten in coderepresentaties^21,22, maar is gevoelig voor de beeldkwaliteit. REDRAW biedt een geautomatiseerde pijplijn voor gegevensverzameling en modeltraining, waarbij convolutionele en recurrente neurale netwerken worden gecombineerd om gestructureerde UI-representaties te genereren^23,24. Latere studies hebben verbeterde evaluatiemetrieken geïntroduceerd om de kwaliteit van de gegenereerde UI te beoordelen²⁵. Recentere benaderingen omvatten diffusie-gebaseerde en transformer-gebaseerde modellen voor lay-outgeneratie, zoals diffusion layout transformers zonder autoencoder-methoden, GUI-lay-outgeneratie met behulp van transformer-gebaseerde GUI-ordeninggrafieken en UI-lay-outgeneratie gestuurd door grote taalmodellen^26,27,28. Een vergelijkend overzicht van deze benaderingen wordt gegeven in Tabel 1.

Referenties en belangrijkste methode(n)	Doelingesteldheid	Voordelen	Nadelen
Geautomatiseerde generatie van kleurthema's voor beeldgebaseerde gebruikersinterfaces: extractie van prominente kleuren + perceptuele kleuremodellering via CAM02-UCS¹	Automatisch genereren van UI-kleurthema's vanuit referentieafbeeldingen, waarbij harmonie en bruikbaarheid worden geoptimaliseerd.	Sterke perceptuele onderbouwing (CAM02-UCS); balanceert expliciet harmonie en bruikbaarheid (contrast en diversiteit); bevat een webgebaseerde implementatie en evaluatie door ontwerpers.	Uitsluitend gericht op kleur/thema (niet op lay-out of componentstructuur); regel- of heuristiekgebaseerde in plaats van end-to-end geleerde UI-synthese.
Het uniformeren van lay-outgeneratie met een ontkoppeld diffusiemodel (LDGM)²⁵	Een uniforme, flexibele lay-outgeneratie voor grafische scènes en gebruikersinterfaces.	Geavanceerde diversiteit en controleerbaarheid voor lay-outgeneratie; ondersteunt conditionele generatie en meerdere attribuuttypen.	Diffusiegebaseerde outputs kunnen uitlijnings- of gedetailleerde lay-outproblemen vertonen tenzij ze worden beperkt; hogere modelcomplexiteit en inferentiekosten.
Diffusion Layout Transformers zonder autoencoder-methoden: transformer + diffusie voor lay-outgeneratie (geen autoencoder)²⁶	Verbeter de getrouwheid en uitlijning voor benchmarks voor layoutgeneratie (FID-, uitlijnings- en overlapmetrieken).	Betere vastlegging van semantische correlaties tussen naburige objecten; sterke prestaties op FID- en uitlijningsmetrieken.	Richt zich primair op de geometrie van de lay-out (posities, formaten, categorieën) in plaats van op de UI-semantiek.
GUI-layoutgeneratie met Transformer-gebaseerde modellen vanuit GUI-arrangementsgrafen (GUI-AG's)²⁷	Creëer GUI-lay-outs op basis van positionele/graafbeperkingen om ontwerpers te ondersteunen.	Graafrepresentaties leggen relationele beperkingen vast; de transformer maakt flexibele, op beperkingen geconditioneerde generatie mogelijk.	Kan expliciete constraint-grafieken van ontwerpers vereisen; beperkte nadruk op kleur en bruikbaarheidsmetrieken.
Genereren van UI-layouts met LLM's onder leiding van UI-grammatica: Large Language Models (LLM's) + hiërarchische UI-grammatica²⁸	Onderzoek LLM's voor lay-outgeneratie en verbeter de uitlegbaarheid/controle via grammatica-representaties.	Hoge mate van controleerbaarheid en uitlegbaarheid; kan gebruikmaken van in-context learning van LLM's (GPT-type).	Werk in een vroeg stadium met beperkte empirische validatie; grammatontwerp en robuustheid over verschillende gebruikersinterfaces (UI's)

Tabel 1: Vergelijking van bestaande methoden voor UI-kleurmodellering en lay-outgeneratie. De tabel vat representatieve benaderingen voor gebruikersinterface-ontwerp samen, waaronder de generatie van kleurenschema's, diffusiegebaseerde lay-outgeneratie, transformer-gebaseerde methoden en lay-outgeneratie gestuurd door grote taalmodellen. Voor elke methode worden de onderliggende techniek, het doel, de voordelen en de beperkingen gepresenteerd, waarbij de verschillen in perceptuele modellering, lay-outgeneratievermogen, controleerbaarheid en bruikbaarheidsoverwegingen worden benadrukt.

Ondanks deze vooruitgang blijft er een belangrijke beperking: geen enkel bestaand systeem integreert componentdetectie, perceptuele kleuremodellering, cognitieve ontwerpprincipes en consistentie van multiscreen-layouts gezamenlijk binnen één enkel end-to-end framework¹. Huidige benaderingen optimaliseren doorgaans slechts één of twee aspecten — zoals detectie, layout of kleur — zonder rekening te houden met hun onderlinge afhankelijkheden. Deze fragmentatie benadrukt een kritische onderzoekskloof in de ontwikkeling van uniforme, mensgerichte geautomatiseerde UI-prototyping-systemen. In het bijzonder worden cognitieve ontwerpprincipes, zoals de Gestaltwetten, de wet van Fitts en de wet van Hick, vaak conceptueel behandeld in plaats van formeel te worden geïntegreerd in computationele modellen.

Om deze beperkingen aan te pakken, stelt deze studie een end-to-end geautomatiseerd UI-prototypingframework voor dat componentdetectie, perceptuele kleuremodellering en cognitieve ontwerpprincipes integreert binnen een uniform systeem. Het framework is ontworpen om de lay-outkwaliteit te verbeteren, de cognitieve belasting te verminderen, de kleurharmonie te verhogen en de algemene bruikbaarheid te vergroten. Deze verbeteringen worden gevalideerd via experimenten op de RICO-, ENRICO- en Guo's UI Color-datasets, waarmee de effectiviteit wordt aangetoond van het combineren van structurele, perceptuele en cognitieve aspecten binnen één enkele geautomatiseerde UI-prototypingpijplijn. Er wordt gehypothetiseerd dat de integratie van deep learning-gebaseerde componentdetectie, perceptuele kleuremodellering en cognitieve ontwerpprincipes binnen een uniform framework de kwaliteit van UI-prototypes aanzienlijk zal verbeteren in vergelijking met bestaande benaderingen. Specifiek stelt H1 dat het framework de lay-outkwaliteit verbetert, inclusief uitlijning, groepering en leesvolgorde. H2 stelt dat het framework de cognitieve belasting voor de gebruiker vermindert. H3 suggereert dat perceptuele kleuremodellering de kleurcoördinatie en visuele harmonie verbetert. H4 stelt dat de algemene bruikbaarheid en esthetische kwaliteit van UI-prototypes zijn verbeterd.

Protocol

Deze studie maakt gebruik van openbaar beschikbare datasets en houdt geen menselijke of dierlijke proefpersonen in.

Het voorgestelde geautomatiseerde framework voor UI-prototyping integreert deep learning-gebaseerd structureel begrip, perceptueel uniforme kleurmodellering en cognitieve ontwerpprincipes om coherente en gebruikersgerichte interfaceprototypes te genereren. De methodologie begint met een Faster R-CNN-architectuur die is getraind op de RICO- en ENRICO-datasets om UI-componenten te detecteren en hun hiërarchische relaties te extraheren, wat een nauwkeurige interpretatie van diverse schermlayouts mogelijk maakt. De gedetecteerde componenten worden vervolgens verwerkt door een kleurintelligentiemodule, die kleurindicaties op basis van het merk of afbeeldingen extraheert, perceptuele gelijkenis modelleert met behulp van CAM02-UCS en harmonieuze, contrastbewuste en toegankelijkheidsconforme kleurenpaletten genereert. Vervolgens worden cognitieve ontwerpprincipes — waaronder de Gestalt-groeperingswetten, de wet van Fitts, de wet van Hick, aandachtgebaseerde spatiëring en beperkingen voor visuele hiërarchie — toegepast via een cognitieve optimalisatie-engine om de ruimtelijke organisatie en de uitlijning van componenten te verfijnen. Tot slot integreert een layout-redeneringslaag structurele, perceptuele en cognitieve beperkingen om consistente UI-prototypes over meerdere schermen te genereren die een balans bieden tussen bruikbaarheid, esthetiek en functionele helderheid. Deze geïntegreerde pijplijn waarborgt de perceptuele coherentie, vermindert de cognitieve belasting en voldoet aan mensgerichte ontwerpprincipes. De volledige workflow van de voorgestelde methode is geïllustreerd in Figuur 1.

Figuur 1. Algemene architectuur van het voorgestelde geautomatiseerde framework voor het prototypen van gebruikersinterfaces. Het diagram illustreert de volledige pipeline, beginnend bij een input-UI-afbeelding. Componentdetectie wordt uitgevoerd met Faster R-CNN om interface-elementen te identificeren. De gedetecteerde componenten worden vervolgens verwerkt met behulp van perceptuele modellering op basis van CAM02-UCS voor de extractie van hiërarchie en lay-out. Vervolgens wordt cognitieve optimalisatie toegepast met behulp van Gestalt-principes, de wet van Fitts, de wet van Hick en aanpassingen op basis van aandacht. De pijlen geven de datastroom tussen de modules aan, wat resulteert in het uiteindelijke UI-prototype als output. Klik hier om een grotere versie van deze figuur te bekijken.

Overzicht van het raamwerk

Figuur 1 illustreert de volledige workflow van het voorgestelde geautomatiseerde UI-prototypingframework, dat een ruwe UI-screenshot transformeert in een cognitief verfijnd prototype. Het proces begint met de invoer van de UI-afbeelding, die wordt doorgegeven aan de componentdetectiemodule op basis van Faster R-CNN. Deze module identificeert interface-elementen zoals knoppen, iconen, tekstvelden en containers, en geeft de bijbehorende bounding boxes en class labels uit. De gedetecteerde componenten worden vervolgens verwerkt in de fase van hiërarchie- en lay-outextractie. Op basis van ruimtelijke relaties en structurele patronen construeert het systeem een hiërarchische lay-outboom die weerspiegelt hoe gebruikers de schermorganisatie van nature waarnemen. Deze representatie legt visuele groepering en structurele afhankelijkheden tussen UI-elementen vast. De geëxtraheerde lay-out wordt vervolgens verfijnd via cognitieve optimalisatie door mensgerichte ontwerpprincipes toe te passen. Deze omvatten Gestalt-groepering voor visuele clustering, de wet van Fitts voor het optimaliseren van de grootte en toegankelijkheid van aanraakdoelen, de wet van Hick voor het verminderen van beslissingscomplexiteit en op aandacht gebaseerde spatiëring voor het verbeteren van de visuele hiërarchie. Hierdoor wordt de lay-out intuïtiever, leesbaarder en efficiënter voor gebruikersinteractie. Ten slotte wordt de geoptimaliseerde lay-out gecombineerd met perceptuele kleurmodellering om een coherent UI-prototype te genereren. De resulterende interface is structureel nauwkeurig, visueel harmonieus en afgestemd op de verwachtingen met betrekking tot menselijke bruikbaarheid.

Het framework werd geïmplementeerd met PyTorch 2.0 op Ubuntu 22.04. De experimenten werden uitgevoerd op een systeem uitgerust met een NVIDIA RTX 4090 GPU (24 GB VRAM). Het Faster R-CNN-model maakte gebruik van een ResNet-50 backbone die vooraf was getraind op de ImageNet-dataset. De training werd uitgevoerd met de stochastic gradient descent (SGD)-optimizer met een learning rate van 0.001, een batch size van 16 en tot maximaal 60 epochs. Om overfitting te voorkomen, werd early stopping toegepast met gebruik van een validatieset bestaande uit 20% van de data. Hoewel de training voor maximaal 60 epochs werd uitgevoerd, werd convergentie doorgaans eerder bereikt via early stopping op basis van het validatieverlies. Momentum en weight decay werden respectievelijk ingesteld op 0.9 en 0.0005. Data-augmentatie omvatte normalisatie, willekeurige horizontale spiegeling, en willekeurig croppen en herschalen.

Voorbereiding van de dataset

Om het voorgestelde raamwerk voor geautomatiseerde UI-prototyping te ondersteunen, werden drie complementaire datasets gebruikt: ENRICO²⁹, RICO³⁰ en de UI Color Dataset van Guo¹. De RICO-dataset bevat 66.261 Android UI-schermen verzameld uit 9.700 applicaties, wat zorgt voor grootschalige diversiteit voor componentdetectie en hiërarchische lay-outextractie. ENRICO omvat 1.464 hoogwaardige UI-screenshots die handmatig zijn gecategoriseerd in 20 ontwerppatronen, wat een verbeterde generalisatie mogelijk maakt voor structurele redenering en modellering van lay-outconsistentie. De UI Color Dataset van Guo bestaat uit 128 gecureerde UI-afbeeldingen met geannoteerde kleurthema's, die worden gebruikt voor perceptuele kleurmodellering en palette-evaluatie. Vanwege de relatief kleine omvang kan deze dataset echter enige variabiliteit in lay-outkenmerken introduceren. Voor deze studie werd een gecombineerde dataset van 5.128 schermen voorbereid voor training en evaluatie. Specifiek werden ongeveer 4.000 afbeeldingen uit RICO gebruikt om het Faster R-CNN-model te trainen voor componentdetectie, 1.000 afbeeldingen uit ENRICO werden gebruikt voor het leren van lay-outpatronen en structurele consistentiemodellering, en 128 afbeeldingen uit de dataset van Guo werden gebruikt voor colorevaluatietaken. Alle afbeeldingen werden genormaliseerd naar een resolutie van 480 × 800 pixels, omgezet naar een uniforme sRGB-kleurruimte en opnieuw geannoteerd met gestandaardiseerde bounding boxes en hiërarchische metadata om compatibiliteit tussen de datasets te waarborgen. Een overzicht van de in deze studie gebruikte datasets wordt gegeven in Tabel 2. De RICO-dataset ondersteunt grootschalige detectie van UI-componenten en structurele analyse, terwijl ENRICO het vermogen van het model verbetert om lay-outpatronen te herkennen en consistentie tussen schermen af te dwingen. De UI Color Dataset van Guo speelt, ondanks de kleinere omvang, een cruciale rol bij het evalueren van perceptuele kleurharmonie en contrastmodellering. Samen bieden deze datasets een uitgebreide en goed gebalanceerde basis voor de training, validatie en evaluatie van het voorgestelde raamwerk voor geautomatiseerde UI-prototyping.

Dataset	Totaal beschikbare afbeeldingen	Afbeeldingen gebruikt in studie	Doel in voorgesteld raamwerk
RICO Dataset30	66.261	4.000	Detectie van UI-componenten, extractie van structurele lay-out
ENRICO Dataset29	1.464	1.000	Leren van ontwerppatronen, modellering van lay-outconsistentie
Guo’s UI Color Dataset1	128	128	Extractie van kleurthema's, perceptuele kleurevaluatie
Gecombineerd totaal	67.853	5.128	Uitgebreide dataset voor detectie, lay-out en kleurmodellering

Tabel 2: Overzicht van de datasets die zijn gebruikt in het voorgestelde framework. De tabel presenteert de datasets die zijn aangewend voor training en evaluatie, waaronder de RICO-, ENRICO- en Guo’s UI Color-datasets. Er wordt melding gemaakt van het totale aantal beschikbare afbeeldingen, het in deze studie gebruikte subset en de specifieke rol van elke dataset bij componentdetectie, lay-outmodellering en perceptuele kleuranalyse binnen het voorgestelde framework.

Er werd gebruikgemaakt van een gestratificeerde steekproefstrategie om de diversiteit in UI-componenten, lay-outstructuren en kleurdistributies over de RICO-, ENRICO- en Guo-datasets te behouden. De dataset werd met behulp van gestratificeerde steekproeven verdeeld in subsets voor training (70%), validatie (15%) en testen (15%). Afbeeldingen werden genormaliseerd met behulp van het gemiddelde (0,485, 0,456 en 0,406) en de standaarddeviatie (0,229, 0,224 en 0,225). Data-augmentatie bestond uit willekeurig horizontaal spiegelen (waarschijnlijkheid = 0,5) en willekeurig uitsnijden (schaalbereik: 0,8–1,0), gevolgd door herschalen naar 224 × 224 pixels, toegepast tijdens de training.

Annotatie en voorbewerking van componenten

De RICO-, ENRICO- en Guo's UI Color-datasets ondersteunen gezamenlijk de drie kernfunctionaliteiten van het voorgestelde geautomatiseerde raamwerk voor UI-prototyping: componentdetectie, lay-outmodellering en perceptuele kleuroptimalisatie. De RICO-dataset bevat een grootschalige collectie van meer dan 66.000 mobiele UI-schermen en wordt primair gebruikt voor het trainen van de module voor componentdetectie. De diversiteit ervan stelt het Faster R-CNN-model in staat om robuuste representaties te leren van veelvoorkomende UI-elementen, zoals knoppen, afbeeldingen en tekstvelden, over een breed scala aan applicaties. Dit waarborgt een nauwkeurige detectie en lokalisatie van UI-componenten onder uiteenlopende ontwerpcondities. De ENRICO-dataset biedt hoogwaardige, met patronen gelabelde UI-schermen voor het aanleren van structurele relaties en lay-outpatronen. Hierdoor kan het systeem inter-componentrelaties, hiërarchische organisatie en gangbare ontwerpsjablonen begrijpen. Deze dataset speelt een cruciale rol bij het modelleren van lay-outstructuren en het afdwingen van consistentie over meerdere schermen, waardoor het raamwerk lay-outs kan genereren die in overeenstemming zijn met vastgestelde ontwerpopvattingen. In tegenstelling hiermee wordt de UI Color Dataset van Guo specifiek gebruikt voor perceptuele en cognitieve kleurmodellering. In tegenstelling tot RICO en ENRICO, die zich richten op structurele aspecten, bevat deze dataset gecureerde UI-afbeeldingen met geannoteerde kleurthema's. Deze annotaties worden gebruikt om modules voor kleurextractie en harmonie-evaluatie te trainen. Door kleurrelaties in kaart te brengen in perceptuele kleurruimtes zoals CAM02-UCS, leert het raamwerk kleurenpaletten te genereren die een balans vinden tussen contrast, toegankelijkheid en esthetische coherentie. Samen vormen deze datasets een geïntegreerde pijplijn: RICO ondersteunt componentdetectie, ENRICO maakt het begrip van lay-outpatronen en structurele consistentie mogelijk, en de dataset van Guo faciliteert perceptuele kleuroptimalisatie. Deze integratie zorgt ervoor dat de gegenereerde UI-prototypes structureel accuraat, visueel harmonieus en cognitief geoptimaliseerd zijn.

Normalisatie werd uitgevoerd met een gemiddelde van [0.485, 0.456, 0.406] en een standaarddeviatie van [0.229, 0.224, 0.225]. Technieken voor data-augmentatie, waaronder random cropping, horizontale spiegeling en rotatie, werden toegepast om de generalisatie van het model te verbeteren. Daarnaast werden pixelwaarden geschaald naar het bereik [0, 1] en werden alle afbeeldingen aangepast naar een resolutie van 480 × 800 pixels om consistentie over de datasets te waarborgen. Afbeeldingen die zijn geschaald naar 224 × 224 pixels worden gebruikt voor augmentatie tijdens de training, terwijl de oorspronkelijke resolutie van 480 × 800 pixels behouden blijft voor de lay-outanalyse. Bounding boxes werden aangepast om irrelevante annotaties te filteren met behulp van vooraf gedefinieerde drempelwaarden. Om uniformiteit over de datasets te bereiken, werden alle UI-elementen handmatig geannoteerd met de annotatietool LabelImg. Voorafgaand aan de annotatie werd een vooraf gedefinieerd schema vastgesteld om UI-elementen te classificeren in categorieën zoals button, text, image, icon en container. Voor de representatie van bounding boxes werd een uniform coördinatensysteem toegepast, en hiërarchische informatie werd geconstrueerd op basis van ruimtelijke relaties tussen elementen en hun ouder-kindassociaties binnen de lay-outboom. Daarnaast werden richtlijnen opgesteld om consistente annotatie van elementen, correcte verwerking van overlappende componenten en de handhaving van minimale grootte-drempels over de RICO-, ENRICO- en Guo-datasets te garanderen.

Gedetailleerde wiskundige formuleringen voor de training van componentdetectie en de extractie van lay-outpatronen worden gegeven in Aanvullend Bestand 1.

Het Faster R-CNN-model werd getraind met SGD met een momentum van 0.9 en een weight decay van 0.0005. De initiële leercurve (learning rate) werd ingesteld op 0.001 en aangepast met een step decay-beleid op basis van de validatieprestaties. De training werd uitgevoerd gedurende maximaal 60 epochs met een batchgrootte van 16. Om overfitting te voorkomen, werd early stopping toegepast met een validatieset die bestond uit 20% van de trainingsgegevens.

De afbeeldingsfunctie f(.) gebruikt gedetecteerde UI-elementen als input en produceert een hiërarchische lay-outrepresentatie als output. Deze berekent nabijheidsrelaties tussen UI-elementen op basis van ruimtelijke afstand en uitlijningscriteria, en stelt een nabijheidsmatrix op om deze relaties weer te geven. Vervolgens wordt een clusteringalgoritme, zoals DBSCAN, toegepast om gerelateerde componenten te groeperen. Tot slot worden de geclusterde elementen georganiseerd in hiërarchische structuren op basis van ouder-kindrelaties, waardoor een gestructureerde lay-outrepresentatie ontstaat.

Gedetailleerde formuleringen voor de modellering van kleurharmonie en het uniforme optimalisatiedoel worden verstrekt in Aanvullend Bestand 1.

Deze doelfunctie formaliseert wiskundig de integratie van structurele detectie, lay-outredenering en perceptuele kleurmodellering, waardoor wordt gewaarborgd dat alle componenten van het framework gezamenlijk bijdragen aan het genereren van coherente en gebruikersgerichte UI-prototypes. Optimalisatie wordt op modulaire wijze uitgevoerd voor elk onderdeel van het framework. SGD wordt gebruikt voor het trainen van de componentdetectiemodule, terwijl de Adam-optimizer wordt gebruikt tijdens de gezamenlijke optimalisatie van de uniforme doelstelling. De gecombineerde doelstelling wordt gebruikt om de algehele systeemprestaties te sturen. Voor de fasen van gezamenlijke optimalisatie wordt de doelfunctie geminimaliseerd met behulp van de Adam-optimizer met een learning rate van 0,001 en een batch size van 16. De training wordt uitgevoerd gedurende maximaal 60 epochs, waarbij early stopping wordt toegepast wanneer de verandering in het validatieverlies minder dan 10⁻⁴ is gedurende vijf opeenvolgende epochs.

Componentdetectie met behulp van Faster R-CNN

Het voorgestelde raamwerk maakt gebruik van Faster R-CNN voor de automatische detectie van UI-componenten, waaronder knoppen, iconen, tekstvelden, afbeeldingen en containers. Faster R-CNN is zeer geschikt voor deze taak omdat het een hoge nauwkeurigheid bij objectdetectie combineert met efficiënte generatie van regio-voorstellen, wat essentieel is voor het verwerken van complexe UI-lay-outs met dicht opeengepakte elementen. Het model maakt gebruik van een ResNet-50 backbone, vooraf getraind op de ImageNet-dataset, om convolutionele feature maps uit elk UI-scherm te extraheren. Tijdens de training werden de vroege lagen bevroren om algemene visuele kenmerken te behouden, terwijl de hogere lagen (conv4_x en conv5_x) werden gefine-tuned voor de detectie van UI-specifieke componenten. Deze feature maps leggen visuele structuren, randen, texturen en componentgrenzen vast. Tijdens de detectie identificeert het region proposal network (RPN) kandidaatregio's (anchors) die waarschijnlijk UI-componenten bevatten. Anchors zijn gedefinieerd met meerdere schalen (128, 256 en 512) en aspectratio's (1:1, 1:2 en 2:1) om UI-elementen van verschillende grootten te accommoderen. Tijdens de training worden anchors met een intersection-over-union (IoU) groter dan 0,7 ten opzichte van de ground truth boxes als positief gelabeld, terwijl die met een IoU kleiner dan 0,3 als negatief worden gelabeld; anchors met tussenliggende IoU-waarden worden genegeerd. Aan elke anchor wordt een waarschijnlijkheid toegekend die de aanwezigheid van een component aangeeft. Vervolgens wordt non-maximum suppression (NMS) toegepast om redundante en overlappende voorstellen te verwijderen, wat zorgt voor een efficiënte lokalisatie van betekenisvolle UI-elementen, zelfs in overvolle interfaces. Zodra de kandidaatregio's zijn gegenereerd, wordt elk voorstel geclassificeerd in vooraf gedefinieerde componentcategorieën en worden de coördinaten van de bounding-box verfijnd. Een region of interest (ROI) Align-operatie extraheert feature-representaties van een vaste grootte voor elk voorstel, die vervolgens door volledig verbonden lagen worden verwerkt voor classificatie en regressie. De classificatiebranch geeft klaswaarschijnlijkheden uit, terwijl de regressiebranch precieze bounding-box-coördinaten voorspelt. Het volledige Faster R-CNN-model wordt end-to-end getraind door een gezamenlijke verliesfunctie te optimaliseren die het RPN-verlies combineert met het uiteindelijke detectieverlies. Dit stelt het systeem in staat om UI-componenten niet alleen nauwkeurig te herkennen, maar ze ook precies te lokaliseren over diverse interface-structuren. Een gedetailleerde beschrijving van de Faster R-CNN componentdetectie, inclusief de RPN-fase, ROI-classificatie, bounding-box-verfijning en het uiteindelijke optimalisatiedoel, wordt gegeven in Supplementary File 1.

Algoritme S1 biedt de gedetailleerde workflow voor componentdetectie en structurele extractie (Aanvullend bestand 1). Het beschrijft het volledige proces van automatische UI-componentdetectie en structurele extractie uit een ruwe schermafbeelding. De invoerafbeelding wordt eerst voorbewerkt en door een CNN-backbone geleid om diepe visuele kenmerken te extraheren. Deze kenmerken worden door de RPN gebruikt om kandidaat-bounding boxes te genereren, die vervolgens worden verfijnd via classificatie en regressie. NMS verwijdert redundante detecties om een nauwkeurige lokalisatie te garanderen. Na de detectie worden componenten gegroepeerd op basis van ruimtelijke nabijheid met behulp van density-based spatial clustering of applications with noise (DBSCAN). Deze clusteringstap maakt de constructie van een hiërarchische UI-boom mogelijk die ouder-kindrelaties en logische groeperingen tussen componenten vastlegt. Deze hiërarchische representatie vormt de basis voor de daaropvolgende lay-outanalyse en het begrip van de UI. Figuur 2 illustreert het Faster R-CNN componentdetectieproces op een mobiel UI-scherm. De invoerinterface (links) bevat UI-elementen zoals knoppen en tekstblokken, die automatisch worden omsloten door bounding boxes. Deze gedetecteerde regio's worden vervolgens geclassificeerd in componentcategorieën (bijv. Button en Text), zoals aangegeven door de gelabelde verbindingen. De Faster R-CNN detectiemodule (rechts) verfijnt de coördinaten van de bounding boxes, kent semantische labels toe en geeft gestructureerde informatie op componentniveau uit. Deze stap dient als een kritieke basis voor downstream-processen, waaronder lay-outextractie, cognitieve optimalisatie en de generatie van UI-prototypes, door nauwkeurige, semantisch betekenisvolle representaties van UI-componenten te leveren.

Figuur 2. Componentdetectie van gebruikersinterface-elementen met Faster R-CNN. De figuur illustreert de detectie van UI-componenten vanuit een screenshot van een inputinterface. Regio's van belang worden geïdentificeerd met behulp van bounding boxes, en elementen zoals knoppen en tekstvelden worden geclassificeerd met Faster R-CNN. Pijlen geven de mapping van gedetecteerde componenten naar hun bijbehorende semantische labels aan. Klik hier om een grotere versie van deze figuur te bekijken.

Extractie van lay-outpatronen en hiërarchische modellering

Na de detectie van componenten met Faster R-CNN wordt elk UI-element weergegeven door een bounding box. Deze bounding boxes alleen geven echter niet aan hoe elementen structureel binnen de interface zijn georganiseerd, bijvoorbeeld welke elementen behoren tot headers, navigatiebalken of gegroepeerde inhoudsregio's. Om deze beperking aan te pakken, worden de gedetecteerde componenten omgezet in een logische UI-boom, waarbij elk component als een knoop wordt beschouwd en functioneel of visueel gerelateerde componenten worden gegroepeerd onder gemeenschappelijke ouderknopen. Om betekenisvolle lay-outgroepen te identificeren, worden clusteringtechnieken zoals DBSCAN of hiërarchische agglomeratieve clustering toegepast. Deze methoden analyseren ruimtelijke nabijheid en uitlijningspatronen tussen componenten om relaties tussen UI-elementen te detecteren. Analoog aan menselijke ontwerppraktijken leert het systeem veelvoorkomende structurele patronen te herkennen, zoals headers, footers, grids en inhoudsblokken. Zodra de groepering is vastgesteld, worden aanvullende structurele eigenschappen — waaronder uitlijning, gridorganisatie en leesvolgorde — geanalyseerd om een uitgebreide lay-outrepresentatie te construeren. Componenten die zijn uitgelijnd in kolommen van gelijke breedte kunnen bijvoorbeeld wijzen op een card-based lay-out, terwijl verticaal gestapelde elementen kunnen wijzen op een formulier- of feed-gebaseerde interface. Door clustering, ruimtelijk redeneren en uitlijningsregels te integreren, construeert het framework een hiërarchische UI-boom die zowel visuele groepering als functionele relaties vastlegt. Deze hiërarchische representatie dient als basis voor daaropvolgende verfijning van de lay-out en modellering van consistentie over meerdere schermen, waardoor het systeem in staat is om gestructureerde, coherente en gebruikersgerichte interface-ontwerpen te genereren.

Gedetailleerde formules voor ruimtelijke afstand en uitlijningsgelijkenis zijn opgenomen in Aanvullend Bestand 1.

Clustering voor layout-groepering (DBSCAN)

Om lay-outgroepen te identificeren, wordt DBSCAN toegepast. DBSCAN maakt gebruik van twee parameters: (1) ε = maximale afstand tussen naburige componenten en (2) = het minimumaantal componenten dat nodig is om een cluster te vormen. Voor deze analyse werden de DBSCAN-parameters empirisch geselecteerd op basis van de genormaliseerde UI-resolutie (480 × 800 pixels). De parameter voor de buurtafstand werd ingesteld op ε = 50 pixels om de ruimtelijke nabijheid tussen aangrenzende UI-componenten vast te leggen. Het minimumaantal punten dat nodig is om een cluster te vormen, werd ingesteld op MinPts = 3 om de vorming van onbetekenende of spurieuze groepen UI-componenten te voorkomen.

De gedetailleerde formulering voor de constructie van de logische UI-boom is opgenomen in Aanvullend bestand 1.

Perceptuele kleurmodellering met CAM02-UCS

Perceptuele kleurmodellering waarborgt dat de kleuren die worden gebruikt in de gegenereerde gebruikersinterface (UI) harmonieus, leesbaar en cognitief efficiënt zijn. Dominante kleuren worden uit inputbronnen, zoals UI-afbeeldingen, geëxtraheerd met behulp van clusteringtechnieken. Specifiek wordt K-means clustering met K-means++ initialisatie toegepast gedurende 300 iteraties om representatieve kleurenpaletten te verkrijgen. De RGB-kleurruimte weerspiegelt echter de menselijke visuele perceptie niet nauwkeurig, wat betekent dat numeriek vergelijkbare kleuren perceptueel verschillend kunnen overkomen. Om deze beperking aan te pakken, worden alle geëxtraheerde kleuren getransformeerd naar CAM02-UCS, dat perceptueel uniform is. In deze ruimte komen gelijke afstanden overeen met gelijke waargenomen kleurverschillen, waardoor deze geschikt is voor het modelleren van kleurharmonie en contrast. Zodra ze in CAM02-UCS zijn geprojecteerd, worden perceptuele kleurverschillen berekend met behulp van de Euclidische afstand, waardoor het systeem contrast, harmonie en variatie tussen kleuren kan kwantificeren. Kleuren die te veel op elkaar lijken, worden gescheiden om de leesbaarheid te verbeteren, terwijl excessief contrasterende kleuren worden gematigd om visueel ongemak te voorkomen. Het gegenereerde palet voldoet daarnaast aan toegankelijkheidsnormen zoals WCAG AA en AAA, wat een voldoende contrast tussen voorgrond- en achtergrondelementen garandeert. Bovendien wordt kleurharmonie afgedwongen door paletrelaties te beperken tot complementaire, analoge of triadische schema's, afhankelijk van het beoogde UI-thema. Dit zorgt ervoor dat het resulterende kleurenpalet niet alleen visueel aantrekkelijk is, maar ook functioneel toegankelijk en cognitief geoptimaliseerd. Om het palet verder te verfijnen, wordt een optimalisatieproces toegepast onder restricties van perceptuele gelijkenis, contrast, harmonie en merkconsistentie. Er wordt een primaire kleur geselecteerd (bijv. vanuit de merkidentiteit) en secundaire kleuren worden aangepast wat betreft luminantie en chroma om de visuele hiërarchie te behouden. Een op regels gebaseerd evaluatiemechanisme beoordeelt kandidaat-paletten op basis van perceptuele afstanden en toegankelijkheidsmetrieken, waarbij de cognitieve belasting wordt geminimaliseerd terwijl de esthetische balans behouden blijft. Als resultaat produceert het raamwerk UI-kleurschema's die een coherentie, leesbaarheid en perceptuele consistentie op professioneel niveau vertonen.

Gedetailleerde wiskundige expressies voor perceptuele kleurmodellering op basis van CAM02-UCS worden verstrekt in Aanvullend bestand 1.

Algoritme S2 (Aanvullend bestand 1) beschrijft de workflow voor perceptuele kleurextractie en optimalisatie op basis van CAM02-UCS onder harmonie- en toegankelijkheidsbeperkingen. Aanvankelijk worden dominante kleuren uit de invoerafbeelding geëxtraheerd en getransformeerd naar CAM02-UCS om ervoor te zorgen dat kleurverschillen overeenkomen met de menselijke perceptie. Perceptuele afstanden tussen kleuren worden vervolgens berekend en beperkt binnen vooraf gedefinieerde grenzen om zowel helderheid als harmonie te behouden. Daarna wordt de toegankelijkheid afgedwongen door luminantiecontrastverhoudingen te evalueren volgens de WCAG-richtlijnen. Het uiteindelijke palet wordt verkregen door het optimaliseren van een gecombineerde doelfunctie die een balans vindt tussen perceptuele spreiding, contrastvereisten en harmoniebeperkingen voor kleuren. Dit garandeert dat de gegenereerde UI-kleurschema's niet alleen visueel aantrekkelijk zijn, maar ook leesbaar, toegankelijk en perceptueel consistent.

Cognitieve ontwerpoptimalisatie

Cognitieve ontwerpoptimalisatie zorgt ervoor dat de automatisch gegenereerde UI-prototypes niet alleen visueel consistent zijn, maar ook gemakkelijk te begrijpen en te gebruiken. Deze module integreert belangrijke cognitieve ontwerpprincipes, waaronder de Gestaltprincipes, de wet van Fitts en de wet van Hick, om de schikking, groepering en spatiëring van UI-componenten te sturen. Gedetailleerde wiskundige formuleringen voor cognitieve ontwerpoptimalisatie worden gegeven in Aanvullend Bestand 1.

Geïntegreerd doel voor cognitieve optimalisatie

De wiskundige expressie voor het geïntegreerde cognitieve optimalisatiedoel wordt gegeven in Aanvullend Bestand 1. Coëfficiënten die het belang van visuele groepering, interactie-efficiëntie en beslissingscomplexiteit vertegenwoordigen, worden respectievelijk aangeduid met alfa, bèta en gamma. In deze studie werden de waarden van alfa, bèta en gamma empirisch bepaald met behulp van de validatiedataset. Voor het huidige experiment werden de coëfficiënten als volgt ingesteld: α = 0.5, β = 0.3 en γ = 0.2. Deze configuratie biedt een effectieve balans tussen visuele groepering, interactie-efficiëntie en beslissingssimpliciteit.

Consistentie over meerdere schermen en UI-generatie

Consistentiemodellering voor meerdere schermen zorgt ervoor dat verschillende schermen binnen een applicatie een coherente visuele identiteit, structurele lay-out en interactiepatronen delen. Terwijl gebruikers door schermen navigeren, ontwikkelen zij verwachtingen met betrekking tot de plaatsing van elementen, typografie, spatiëring en visuele hiërarchie. Om aan deze verwachtingen te voldoen, analyseert het systeem patronen over schermen heen met behulp van sjablonen afgeleid van de RICO- en ENRICO-datasets. Deze sjablonen leggen veelvoorkomende UI-structuren vast, zoals home–detail-lay-outs, lijst–detail-patronen, meerstapsformulieren en dashboardflows. Door de plaatsing van componenten en het groeperingsgedrag te vergelijken, stelt het systeem een structureel profiel over schermen heen op, dat identificeert welke elementen consistent moeten blijven en welke mogen variëren. Zodra de structurele patronen zijn geïdentificeerd, dwingt het raamwerk consistentie af in typografische schalen, spatiëringsverhoudingen, gridlay-outs en navigatieankers. Zo behouden headerbalken een consistente hoogte, behouden primaire knoppen een uniforme grootte en uitlijning, en volgen inhoudsblokken een voorspelbare visuele volgorde. Dit wordt bereikt via een proces van lay-outregularisatie dat elk scherm toetst aan globale structurele beperkingen. Als een scherm afwijkt van de aangeleerde sjablonen — zoals inconsistente padding of verkeerd uitgelijnde titels — past het systeem de lay-out automatisch aan om de coherentie te herstellen. Deze correcties helpen een naadloze UX te waarborgen en verminderen de cognitieve schakelkosten tussen schermen. Het raamwerk analyseert verder de navigatiegraaf tussen schermen om consistentie in de interactieflow te behouden. Veelvoorkomende navigatiepatronen, waaronder voorwaartse/achterwaartse overgangen, tabbladnavigatie en meerstapsworkflows, worden geïdentificeerd en afgedwongen. Elke overgang wordt gevalideerd om uitlijning met het mentale model van de gebruiker te garanderen, waardoor de bruikbaarheid wordt verbeterd en verwarring wordt verminderd. Als gevolg hiervan minimaliseert het consistentiemodel voor meerdere schermen visuele ruis, vergroot het de familiariteit en bevordert het een uniforme interactie-ervaring.

Gedetailleerde wiskundige formuleringen voor multiscreen-consistentie en UI-generatie worden verstrekt in Aanvullend Bestand 1.

Ten slotte genereert de rendering-engine visuele output in formaten zoals SVG-wireframes, HTML/CSS-prototypes of pixelgebaseerde UI-mockups. De resulterende UI-schermen vertonen een correcte leesvolgorde, harmonieuze kleurrelaties, een precieze rasteruitlijning en een consistente visuele hiërarchie over meerdere schermen.

Algoritme S3 biedt de workflow voor de optimalisatie van de cognitief-visuele lay-out en consistentie over meerdere schermen (Aanvullend bestand 1). Algoritme S3 beschrijft het geïntegreerde cognitieve en structurele optimalisatieproces dat wordt gebruikt om gebruiksvriendelijke UI-lay-outs te genereren. Het combineert perceptuele groepering (Gestaltprincipes), interactie-efficiëntie (wet van Fitts) en beslissingssimpliciteit (wet van Hick) binnen een uniform optimalisatiekader. In eerste instantie worden de ruimtelijke relaties tussen componenten geëvalueerd om perceptuele groeperingen vast te stellen. Vervolgens wordt de interactie-efficiëntie geoptimaliseerd door de grootte en plaatsing van componenten aan te passen, terwijl de beslissingscomplexiteit wordt beheerst door het aantal keuzes dat aan gebruikers wordt gepresenteerd te beperken. Daarnaast handhaaft het algoritme de consistentie over meerdere schermen door elk scherm af te stemmen op aangeleerde lay-outtemplates, wat zorgt voor uniformiteit in typografie, spatiëring en structurele organisatie. Een multidoeloptimalisatiefunctie verfijnt vervolgens de lay-out door uitlijning, spatiëring en cognitieve kosten in balans te brengen, wat resulteert in een interface die zowel visueel coherent als cognitief efficiënt is. In het algemeen zorgt dit algoritme ervoor dat de gegenereerde lay-outs voor meerdere schermen een hoog niveau van visuele consistentie, bruikbaarheid en perceptuele helderheid behouden.

Resultaten

Het voorgestelde geautomatiseerde framework voor UI-prototyping werd beoordeeld met behulp van een geïntegreerde dataset van 5.128 UI-schermen uit drie bronnen: 4.000 RICO-afbeeldingen, 1.000 ENRICO-schermen en 128 kleurgeannoteerde UI-monsters uit de UI Color Dataset van Guo. Deze gecombineerde dataset biedt een goed gebalanceerde benchmark voor het evalueren van de nauwkeurigheid van componentdetectie, de structurele helderheid van de lay-out, de consistentie over meerdere schermen en de perceptuele kleurharmonie.

Experimentele resultaten tonen aan dat het detectiemodel op basis van Faster R-CNN een nauwkeurigheid van 92,4% bij componentdetectie behaalt en effectief generaliseert over diverse mobiele UI-stijlen. Bovendien verbetert de integratie van ENRICO-patroonannotaties de lay-outredenering, wat resulteert in een toename van 18,7% in lay-outhelderheid en een betere behoud van de leesvolgorde. In kleurevaluatie-experimenten genereert de door CAM02-UCS aangestuurde kleurmoduleringsmodule paletten die volgens beoordelingen van ontwerpers 24,5% harmonieuzer zijn, en behaalt deze een hogere perceptuele uniformiteit in vergelijking met traditionele methoden voor palettegeneratie op basis van RGB en LAB. Daarnaast realiseert multiscreen-consistentiemodellering een verbetering van 28% in cross-screen uitlijning en typografische consistentie. Gebruikersstudies met 30 deelnemers tonen een vermindering van 31% in de ervaren cognitieve belasting aan bij de interactie met prototypes die door het voorgestelde systeem zijn geproduceerd. Gezamenlijk wijzen deze resultaten erop dat de combinatie van componentdetectie, perceptuele kleurmodellering en cognitieve optimalisatie UI-prototypes oplevert die niet alleen structureel accuraat zijn, maar ook visueel coherent en cognitief efficiënt. Tabel 3 beschrijft de simulatieomgeving en de technische instellingen die zijn gebruikt om het voorgestelde UI-prototyping-framework te beoordelen. De computerintensieve trainingsprocedures van Faster R-CNN en de lay-outconsistentiemodules werden ondersteund door een high-performance NVIDIA RTX 4090 GPU. Alle experimenten werden uitgevoerd in een Ubuntu 22.04-omgeving met gebruik van PyTorch 2.0 voor de deep learning-implementatie.

Parameter	Configuratie
Hardware	NVIDIA RTX 4090 GPU (24 GB), Intel i9 Processor, 64 GB RAM
Besturingssysteem	Ubuntu 22.04 LTS
Deep Learning Framework	PyTorch 2.0
Faster R-CNN Backbone	ResNet-50 + FPN
Beeldresolutie	480 × 800 (genormaliseerd over alle datasets)
Batchgrootte training	8
Optimizer	AdamW (LR = 1e−4, Weight Decay = 0.01)
Epochs	40
Kleurmodelleringsruimte	CAM02-UCS
Clustering voor palette-extractie	K-means (k = 5)
Layout-clustering	DBSCAN (ε = 20, min_samples = 3)

Tabel 3: Implementatieparameters en experimentele configuratie van het voorgestelde framework. De tabel geeft een overzicht van de hardware- en softwareconfiguratie die is gebruikt voor de training en evaluatie van het model, inclusief computationele middelen, besturingssysteem, deep learning-framework, modelarchitectuur, beeldresolutie, trainingsparameters, optimalisatiestrategie, kleurmodellingsruimte en clusteringmethoden die zijn gebruikt voor paletextractie en lay-outgroepering.

De Faster R-CNN-architectuur maakt gebruik van een ResNet-50-backbone met een FPN om een breed scala aan fijnmazige UI-componenten te detecteren. Alle UI-afbeeldingen worden voorafgaand aan de verwerking uniform herschaald naar 480 × 800 pixels. De training wordt uitgevoerd over 60 epochs met behulp van de SGD-optimizer, met een batchgrootte van 16 om een stabiele convergentie te waarborgen. De kleurpaletgenerator maakt gebruik van CAM02-UCS met K-means-clustering, terwijl DBSCAN wordt gebruikt voor clustering van de structurele lay-out. Deze technische instellingen zorgen ervoor dat de gegenereerde UI-resultaten reproduceerbaar, stabiel en van hoge getrouwheid zijn. Om een uitgebreide beoordeling van het voorgestelde geautomatiseerde UI-prototyping-framework te verschaffen, worden vier categorieën evaluatiemetrieken gebruikt:

i) Prestaties van de componentdetectie, geanalyseerd met behulp van precisie, recall, F1-score, intersection-over-union (IoU) en mean average precision (mAP), waarmee de nauwkeurigheid van het Faster R-CNN-model bij het identificeren van UI-componenten in de RICO- en ENRICO-datasets wordt gekwantificeerd;

ii) Duidelijkheid van de lay-out en structurele consistentie, gemeten via uitlijningsfout (AE), groeperingsnauwkeurigheid, correctheid van de leesvolgorde en scores voor consistentie tussen schermen, afgeleid van ontwerppatroonbeperkingen;

iii) Perceptuele kleurkwaliteit, geëvalueerd met behulp van de CAM02-UCS perceptuele afstand (ΔE_UCS), WCAG 2.1 contrastratio's, diversiteitsindex en kleurharmoniescores geïnspireerd door het UI-kleurevaluatiekader van Guo;

iv) Gebruikergerichte metrieken voor cognitieve efficiëntie, waaronder cognitieve belasting gemeten met de NASA task load index (NASA-TLX), beoordelingen van esthetische coherentie en de efficiëntie van taakvoltooiing.

Deze metrieken maken het mogelijk om het raamwerk te evalueren, niet alleen op basis van detectienauwkeurigheid, maar ook op basis van perceptuele harmonie, gebruikskwaliteit en cognitieve ervaring.

Metrieken voor componentdetectie

Precisie beschrijft de nauwkeurigheid van het model bij het voorspellen van UI-componenten zonder fout-positieven te genereren. Een hoge precisie houdt in dat de meeste voorspelde bounding boxes corresponderen met geldige UI-elementen. Recall meet het vermogen van het model om alle relevante UI-componenten op een scherm te identificeren. Een hoge recall geeft aan dat het model de meeste ground-truth componenten succesvol detecteert. De F1-score, gedefinieerd als het harmonisch gemiddelde van precisie en recall, biedt een gebalanceerde evaluatie en is bijzonder nuttig wanneer UI-componenten ongelijkmatig over datasets zijn verdeeld.

De IoU-metriek meet in hoeverre het voorspelde begrenzingskader (bounding box) overlapt met het ground truth-begrenzingskader. Bij objectdetectie-taken worden IoU-drempelwaarden van 0.5 en 0.75 gewoonlijk gebruikt om respectievelijk matige en strikte evaluatievoorwaarden weer te geven. mAP vat de detectieprestaties samen over meerdere IoU-drempelwaarden. De mAP@0.5:0.95-metriek biedt een robuustere evaluatie door de precisie te middelen over drempelwaarden van 0.5 tot 0.95 in stappen van 0.05 en wordt daarom algemeen geaccepteerd als een standaardbenchmark voor objectdetectie.

De detectieresultaten over de drie datasets geven aan dat de voorgestelde module voor componentdetectie consistent goed presteert. De kwantitatieve resultaten worden gepresenteerd in Tabel 4. De RICO-dataset behaalt de hoogste prestaties, met een precisie van 0,91, een recall van 0,88 en een F1-score van 0,89, dankzij de grote, diverse set UI-componentannotaties. ENRICO vertoont iets lagere scores vanwege de meer vereenvoudigde structuur en minder geannoteerde componenttypes. De Guo-dataset registreert de laagste F1-score (0,81), waarschijnlijk door grotere visuele variatie en minder gestandaardiseerde lay-outpatronen, waardoor detectie uitdagender wordt. Over het algemeen bevestigen deze resultaten dat het model een robuuste prestatie bij componentdetectie behoudt over verschillende UI-ontwerpstijlen en datasetkenmerken.

Dataset	Precisie	Recall	F1-score
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

Tabel 4: Prestaties van componentdetectie over datasets heen. De tabel presenteert de precisie, recall en F1-score voor de detectie van UI-componenten over de RICO-, ENRICO- en Guo-datasets, wat de effectiviteit van het detectiemodel aantoont.

Figuur 3 toont de prestaties van het model over de RICO-, ENRICO- en Guo-datasets bij IoU-drempels van 0,5 en 0,75. Zoals verwacht zijn de mAP-waarden hoger bij IoU 0,5 vanwege de minder strikte overlapvereisten. RICO rapporteert consistent de hoogste mAP-waarden (0,89 bij IoU 0,5 en 0,78 bij IoU 0,75), wat de rijkdom en coherentie van de annotaties weerspiegelt. ENRICO vertoont iets lagere waarden, terwijl Guo de laagste scores rapporteert vanwege de grotere variatie in lay-outstijl en componentdichtheid. De dalende trend bij striktere IoU-drempels illustreert dat de complexiteit van de dataset direct van invloed is op de robuustheid van de detectie.

Figuur 3. Gemiddelde gemiddelde precisie (mAP) bij intersection over union (IoU)-drempelwaarden van 0,5 en 0,75 over verschillende datasets. De lijngrafiek vergelijkt de prestaties van componentdetectie over de RICO-, ENRICO- en Guo-datasets. De x-as stelt de datasets voor en de y-as toont de mAP-waarden. Twee curven komen overeen met IoU-drempelwaarden van 0,5 en 0,75, wat de variatie in prestaties illustreert onder verschillende niveaus van detectiestrengheid. Klik hier om een grotere versie van deze figuur te bekijken.

Figuur 4 presenteert de mAP@IoU(0.5:0.95) voor elke dataset, wat een bredere evaluatie van de detectieprestaties over tien IoU-drempels biedt. De resultaten tonen een duidelijke dalende trend van RICO (0.61) naar ENRICO (0.57) en Guo (0.52), wat bevestigt dat het voorgestelde detectiemodel het best generaliseert op grotere en meer gestructureerde datasets. Deze strengere gemiddelde metriek benadrukt subtiele prestatieverminderingen die mogelijk niet duidelijk zijn bij evaluatie met een enkele drempelwaarde. Deze bevindingen geven aan dat, hoewel het model sterk presteert over alle datasets, een toegenomen lay-outdiversiteit en componentvariabiliteit extra uitdagingen introduceren bij een strikte evaluatie in COCO-stijl. De detectieresultaten worden gepresenteerd in Figuur 3 en 4, welke kwantitatieve vergelijkingen van de mAP over verschillende IoU-niveaus bieden.

Figuur 4. Gemiddelde gemiddelde precisie (mAP) gemiddeld over intersection over union (IoU) drempelwaarden van 0.5 tot 0.95 over verschillende datasets. De lijngrafiek toont de prestaties van componentdetectie in de RICO-, ENRICO- en Guo-datasets met behulp van de mAP-metriek, gemiddeld over IoU-drempelwaarden variërend van 0.5 tot 0.95. De x-as representeert de datasets en de y-as geeft de overeenkomstige mAP-waarden weer op een schaal van 0–1, wat de modelprestaties onder verschillende detectiedrempels weerspiegelt. Klik hier om een grotere versie van deze figuur te bekijken.

Kwaliteitsmetrieken voor de lay-out

De kwaliteit van de lay-out wordt geëvalueerd aan de hand van AE, groeperingsnauwkeurigheid (GA) en leesvolgorde-nauwkeurigheid (ROA), die gezamenlijk de structurele correctheid, perceptuele organisatie en cognitieve leesbaarheid van de gegenereerde UI-lay-outs beoordelen.

Uitlijningsfout.

AE (pixelgebaseerde afwijking) geeft aan in hoeverre UI-elementen zijn uitgelijnd met ideale uitlijningslijnen, zoals linker-, rechter-, boven- of basislijngidsen. Een lagere AE geeft aan dat elementen consistent zijn gerangschikt met minimale visuele vervorming, wat de leesbaarheid en de algemene helderheid van het ontwerp verbetert. Deze metriek is bijzonder belangrijk voor het evalueren van de verfijning van de cognitieve lay-out, aangezien een gebrekkige uitlijning de visuele stroom verstoort en de waargenomen complexiteit verhoogt. Figuur 5 illustreert de AE over de RICO-, ENRICO- en Guo-datasets, gemeten als de gemiddelde pixelafwijking ten opzichte van ideale uitlijningslijnen. De resultaten laten zien dat RICO de laagste AE behaalt (4,2 px), wat aangeeft dat de UI-componenten in deze dataset consistentere structurele patronen vertonen, waardoor uitlijning voor het model eenvoudiger is. ENRICO volgt met een matige uitlijningsafwijking van 6,1 px, wat een combinatie weerspiegelt van goed gestructureerde en gevarieerde schermlay-outs. De Guo-dataset registreert de hoogste AE (7,4 px), als gevolg van de hogere diversiteit in componentplaatsing en niet-standaard lay-outstructuren, die uitlijningsgebaseerde verfijning bemoeilijken. Over het algemeen tonen deze resultaten aan dat het model een sterke uitlijningsnauwkeurigheid behoudt over de verschillende datasets, ondanks de toenemende complexiteit van de lay-out.

Figuur 5. Uitlijningsfout over verschillende datasets. De figuur toont de uitlijningsfout over verschillende datasets; lagere waarden duiden op een betere uitlijning. Klik hier om een grotere versie van deze figuur te bekijken.

Groeperingsnauwkeurigheid (GA).

GA kwantificeert hoe effectief het model gerelateerde UI-componenten groepeert, bijvoorbeeld op basis van Gestaltprincipes zoals nabijheid, gelijkenis en continuïteit. Een hogere groeperingsnauwkeurigheid geeft aan dat het model de beoogde structuur van UI-elementen behoudt, waardoor gebruikers de interface natuurlijker kunnen interpreteren. Deze metriek is bijzonder nuttig om te evalueren of de module voor lay-outverfijning de inhoud succesvol organiseert in betekenisvolle visuele groepen. Figuur 6 presenteert de distributie van de GA die door het voorgestelde framework over de drie datasets is behaald. De ENRICO-dataset vertoont de hoogste mediane GA en het kleinste interkwartielbereik, wat duidt op een stabiele en consistente groeperingsprestatie dankzij de goed gedefinieerde, patroon-gelabelde lay-outs. De RICO-dataset vertoont een matige groeperingsnauwkeurigheid met een hogere variabiliteit, waarschijnlijk als gevolg van de grotere diversiteit en complexiteit van de lay-out. De Guo UI Color-dataset registreert een lagere groeperingsnauwkeurigheid, aangezien de monsters visueel heterogeen zijn en minder gericht op de structurele lay-out. Over het algemeen geven de resultaten aan dat de cognitieve module voor lay-outverfijning betrouwbaar presteert over verschillende datasets, waarbij de beste groeperingsprestaties worden behaald bij structureel consistente gegevens.

Figuur 6. Verdeling van de groeperingsnauwkeurigheid over de datasets. De boxplot toont de groeperingsnauwkeurigheid op basis van Gestaltprincipes over de RICO-, ENRICO- en Guo’s UI Color-datasets. De boxen vertegenwoordigen het interkwartielbereik, de centrale lijn geeft de mediaan aan en de whiskers geven het bereik van de waarden aan. De x-as representeert de datasets en de y-as toont de scores voor groeperingsnauwkeurigheid. De steekproefomvang is n=5128 gebruikersinterface-schermen (RICO: 4000, ENRICO: 1000 en Guo: 128). Klik hier om een grotere versie van deze figuur te bekijken.

Nauwkeurigheid van de leesvolgorde (ROA).

De nauwkeurigheid van de leesvolgorde (reading order accuracy, ROA) meet hoe nauwkeurig het model de natuurlijke leesstroom van een UI-scherm voorspelt, wat doorgaans een patroon van boven naar beneden en van links naar rechts volgt. Het handhaven van de juiste leesvolgorde is essentieel voor de bruikbaarheid, de duidelijkheid van de navigatie en de consistentie met vastgestelde ontwerpconventies. Een hogere ROA geeft aan dat het systeem de verwachte cognitieve scanpatronen behoudt. Figuur 7 toont de ROA over verschillende evaluatiefases voor de RICO-, ENRICO- en Guo-datasets. ENRICO behaalt consistent de hoogste ROA vanwege de regelmatige en patroengeoriënteerde lay-outstructuur, wat een nauwkeurigere voorspelling van menselijke leessequenties mogelijk maakt. RICO vertoont gemiddelde prestaties met een lichte variabiliteit, wat de grotere diversiteit en complexiteit uit de echte wereld weerspiegelt. De Guo-dataset vertoont de laagste ROA, aangezien veel van de schermen visueel rijk zijn maar geen duidelijk gedefinieerde leeshiërarchieën hebben. Over het algemeen geven deze resultaten aan dat de voorgestelde module voor cognitieve lay-outverfijning het meest betrouwbaar presteert op gestructureerde datasets, terwijl stabiele voorspellingen van de leesvolgorde worden behouden over diverse UI-ontwerpen.

Figuur 7. Nauwkeurigheid van de leesvolgorde over verschillende evaluatiefasen voor meerdere datasets. De lijngrafiek toont de nauwkeurigheid van de leesvolgorde tijdens de evaluatiestappen voor de RICO-, ENRICO- en Guo's UI Color-datasets. De x-as representeert de evaluatiefase en de y-as geeft de nauwkeurigheid van de leesvolgorde aan. Elke curve correspondeert met een dataset en illustreert de veranderingen in het behoud van de visuele flow over opeenvolgende evaluatiefasen. De evaluatiefase is een weergave van de progressieve verfijningsfasen van het voorgestelde raamwerk. Klik hier om een grotere versie van deze figuur te bekijken.

Consistentiescore van de lay-out (LCS)

De layoutconsistentiescore (LCS) meet hoe consistent de gegenereerde UI-layouts worden gehandhaafd over meerdere schermen binnen dezelfde applicatie. Dit omvat consistentie in spatiëring, uitlijningsregels, typografische regio's en groeperingspatronen. Een hogere score duidt op een verbeterde coherentie tussen schermen, wat resulteert in een meer uniforme en intuïtieve UX. Figuur 8 presenteert de LCS gemeten over meerdere evaluatiefasen voor de RICO-, ENRICO- en Guo's UI Color-datasets. De ENRICO-dataset behaalt consistent de hoogste LCS-waarden dankzij de met patronen gelabelde en structureel uniforme UI-schermen, wat een stabieler leerproces van consistentie tussen schermen faciliteert. In tegenstelling hiermee vertoont de RICO-dataset een matige maar gestaag verbeterende consistentie, wat toe te schrijven is aan het vermogen van het model om te generaliseren over zeer diverse UI-layouts. Zoals verwacht registreert de Guo-dataset de laagste LCS-waarden, aangezien deze primair is gericht op kleurkenmerken in plaats van structurele layout, waardoor consistentie over meerdere schermen uitdagender is. Over het algemeen geven deze resultaten aan dat de voorgestelde module voor consistentie tussen schermen het meest effectief presteert op patroongeoriënteerde datasets, terwijl deze nog steeds meetbare verbeteringen biedt over alle datasets heen.

Figuur 8. Layoutconsistentiescore over evaluatiefasen voor meerdere datasets. De lijngrafiek toont de layoutconsistentiescores over de evaluatiefasen voor de RICO-, ENRICO- en Guo's UI Color-datasets. De x-as representeert de evaluatiefase en de y-as geeft de layoutconsistentiescores aan. Elke curve komt overeen met een dataset en illustreert de verbetering in de structurele coherentie van de gegenereerde interfaces over opeenvolgende evaluatiefasen. Klik hier om een grotere versie van deze figuur te bekijken.

Kleurkwaliteitsmetrieken

De gegenereerde UI-kleurthema's worden geëvalueerd met behulp van vijf perceptueel gefundeerde metrieken afgeleid van CAM02-UCS: ΔE (perceptueel kleurverschil), dat de perceptuele uniformiteit tussen palettekleuren kwantificeert; contrastverhouding (gebaseerd op WCAG 2.1), die de leesbaarheid tussen voorgrond- en achtergrondelementen beoordeelt; kleurharmonie-index (CHI), die de esthetische compatibiliteit tussen tinten meet; kleurdiversiteitsscore (CDS), die de variatie binnen de perceptuele kleurruimte weerspiegelt; en kleurprominentiescore (CPS), die de balans en dominantie van kleuren binnen het palette evalueert. Samen bieden deze metrieken een uitgebreide beoordeling van zowel de esthetische kwaliteit als de op bruikbaarheid gerichte kleurprestaties. De resultaten tonen aan dat de voorgestelde methode een lagere ΔE-waarde van 4.12 behaalt, wat duidt op een verbeterde perceptuele uniformiteit tussen de kleuren. Een contrastverhouding van 6.21 bevestigt de naleving van toegankelijkheidsnormen, wat een verbeterde leesbaarheid garandeert. Tabel 5 presenteert een kwantitatieve vergelijking tussen de voorgestelde kleurmoduleringsmodule en baseline-methoden. De CHI stijgt van 0.61 naar 0.83, wat wijst op een verbeterde esthetische cohesie in kleurovergangen. Daarnaast stijgt de CDS met meer dan 50%, wat aantoont dat de gegenereerde palettes een rijkere variatie behouden zonder visuele rommel te introduceren. Hogere CPS-waarden duiden op een gebalanceerde verdeling van dominante kleuren, waardoor oververzadiging door een enkele tint wordt voorkomen. Over het algemeen bevestigen deze resultaten de effectiviteit van de op CAM02-UCS gebaseerde kleurmoduleringsmodule bij het genereren van harmonieuze, leesbare en perceptueel geoptimaliseerde UI-kleurschema's.

Metriek	Definitie	Voorgestelde Methode	Baseline1	Verbetering (%)
ΔE (CAM02-UCS)	Perceptueel kleurverschil	4.12	7.85	47.5% lager
Contrastverhouding (WCAG)	Leesbaarheid van voorgrond–achtergrond-paren	6.21	4.38	41.80%
CHI (Color Harmony Index)	Kleurtoon- & chroma-harmonie	0.83	0.61	36.10%
CDS (Color Diversity Score)	Variantie in J′a′b′-ruimte	18.70	12.40	50.80%
CPS (Color Prominence Score)	Stabiliteit van dominante kleuren	0.72	0.55	30.90%

Tabel 5: Kwantitatieve vergelijking van kleurkwaliteitsmetrieken tussen de voorgestelde en de basismethoden. De tabel presenteert evaluatiemetrieken voor kleurkwaliteit, waaronder het perceptuele kleurverschil (ΔE in CAM02-UCS), de contrastverhouding (WCAG), de kleurharmonie-index (CHI), de kleurdiversiteitsscore (CDS) en de kleurprominentiescore (CPS). De resultaten van de voorgestelde methode worden vergeleken met basiswaarden, samen met de procentuele verbeteringen.

Demografische gegevens van de deelnemers en studieontwerp

In totaal namen 30 deelnemers deel aan het evaluatieproces. De deelnemers waren tussen de 20 en 35 jaar oud (gemiddelde leeftijd: 26,4 ± 3,2 jaar). De cohort bestond uit personen met diverse achtergronden, waaronder software engineers, studenten en UI/UX-designers. Op basis van zelfgerapporteerde computervaardigheden werden 40% van de deelnemers geclassificeerd als gemiddelde gebruikers, 35% als gevorderde gebruikers en 25% als beginners. Ongeveer de helft van de deelnemers had eerdere ervaring met UI/UX-design of aanverwante vakgebieden, terwijl de overige deelnemers dit niet hadden. Deze diversiteit zorgde voor een gebalanceerde evaluatie over verschillende niveaus van technische expertise en bekendheid met design.

Metrieken van de gebruikersstudie

Gebruikersgerichte evaluatie werd uitgevoerd met behulp van meerdere metrieken, waaronder NASA-TLX, de system usability scale (SUS), de aesthetic harmony score (AHS), de search efficiency time (SET) en de cross-screen consistency rating (CSCR), om de cognitieve belasting, bruikbaarheid, visuele aantrekkingskracht, efficiëntie en consistentie te beoordelen.

De NASA-TLX-metriek kwantificeert de mentale werklast door factoren te meten zoals mentale vraag, inspanning en frustratie. Lagere scores duiden op een verminderde cognitieve belasting en een verbeterde gebruiksgemak bij de interactie. Het voorgestelde raamwerk resulteerde consistent in lagere NASA-TLX-scores over alle datasets, wat wijst op een verminderde mentale inspanning. Deze verbetering kan worden toegeschreven aan de integratie van cognitieve ontwerpprincipes, waaronder Gestalt-groepering, geoptimaliseerde spatiëring en een verbeterde visuele hiërarchie, die gezamenlijk zorgen voor een intuïtievere navigatie. De SUS-metriek biedt een gestandaardiseerde bruikbaarheidsscore variërend van 0 tot 100, waarbij hogere waarden duiden op een verbeterde bruikbaarheid en helderheid. Het voorgestelde raamwerk behaalde hogere SUS-scores in vergelijking met de referentiemethoden, wat wijst op verbeteringen in zowel de structurele lay-out als de kleurhelderheid. Verbeterde uitlijning, spatiëring en navigatiestroom droegen bij aan interfaces die door gebruikers als intuïtiever en functioneel coherenter werden ervaren. AHS, gemeten op een 7-punts Likert-schaal, evalueert de waargenomen visuele aantrekkingskracht en kleurharmonie. Interfaces die zijn gegenereerd met de op CAM02-UCS gebaseerde kleurmoduleringsmodule behaalden hogere AHS-waarden, wat duidt op vloeiendere kleurovergangen en visueel meer gebalanceerde paletten. Deelnemers gaven consistent de voorkeur aan deze interfaces vanwege verbeterd contrast, tintcoherentie en verminderde visuele ruis, wat het belang van perceptuele kleurmodellering in UI-ontwerp benadrukt. SET meet de tijd die gebruikers nodig hebben om doelelementen in de UI te lokaliseren tijdens visuele zoektaken. Lagere SET-waarden duiden op een verbeterde visuele organisatie en hiërarchie. Het voorgestelde raamwerk verminderde de SET aanzienlijk over alle datasets, wat aantoont dat de integratie van Gestalt-groepering, door aandacht gestuurde spatiëring en verfijnde lay-outstructuren snellere en efficiëntere interactie mogelijk maakt. De CSCR-metriek evalueert de consistentie van het UI-ontwerp over meerdere schermen. Hogere scores duiden op een betere continuïteit in lay-out, kleur en structurele organisatie. Het voorgestelde raamwerk behaalde hogere CSCR-waarden, wat de effectiviteit weerspiegelt van de module voor consistentie over meerdere schermen bij het handhaven van stabiele kleurschema's, spatiëring en hiërarchische structuren over de interfaces heen.

Figuur 9 presenteert de resultaten van de vergelijkende gebruikersstudie voor alle metrieken (NASA-TLX, SUS, AHS, SET en CSCR) over de RICO-, ENRICO- en Guo-datasets. Over het algemeen worden consistente verbeteringen waargenomen over alle evaluatiemetrieken. Opmerkelijk is dat de Guo-dataset een superieure prestatie vertoont over de gebruikersgerichte metrieken, inclusief een lagere cognitieve belasting (NASA-TLX), een hogere bruikbaarheid (SUS), een verbeterde esthetische harmonie (AHS), een kortere zoektijd (SET) en een verbeterde consistentie tussen schermen (CSCR). Deze resultaten vereisen echter een zorgvuldige interpretatie. De verbeterde UX-metrieken die voor de Guo-dataset zijn waargenomen, worden primair toegeschreven aan de sterke kleurconsistentie en de relatief eenvoudigere visuele compositie, in plaats van aan een superieure kwaliteit van de structurele lay-out. Hoewel gebruikers deze interfaces als visueel harmonieuzer en cognitief minder belastend ervaren, tonen eerdere resultaten aan dat de Guo-dataset slecht presteert op het gebied van uitlijning, groepering en leesvolgorde. Dit benadrukt een belangrijk onderscheid tussen perceptuele en structurele factoren in UI-design. Hoewel perceptuele eigenschappen, zoals kleurharmonie, de UX aanzienlijk verbeteren, blijven structurele nauwkeurigheid en lay-outconsistentie cruciaal voor functionele bruikbaarheid. Daarom vereist een optimaal UI-design een balans tussen perceptuele harmonie en structurele correctheid.

Figuur 9. Vergelijking van gebruikersonderzoekmetrieken over datasets heen. Het gegroepeerde staafdiagram vergelijkt gebruikersonderzoekmetrieken voor de RICO-, ENRICO- en UI Color Datasets van Guo. De x-as representeert evaluatiemetrieken, waaronder de NASA Task Load Index (NASA-TLX), system usability scale (SUS), aesthetic harmony score (AHS), structural efficiency time (SET) en cross-screen consistency rate (CSCR), terwijl de y-as de overeenkomstige scores aangeeft. De staven representeren de prestaties voor elke dataset, wat verschillen in bruikbaarheid, cognitieve belasting, esthetische kwaliteit en interfaceconsistentie illustreert. NASA-TLX (0–100, lager is beter), SUS (0–100, hoger is beter), AHS (1–7 Likert), SET (s, lager is beter) en CSCR (0–1, hoger is beter). Klik hier om een grotere versie van deze figuur te bekijken.

Statistische validatie van hypothesen

Om de voorgestelde hypothesen (H1–H4) verder te valideren, werd een toetsing van de statistische significantie uitgevoerd op belangrijke evaluatiemetrieken, waaronder layoutkwaliteit, cognitieve belasting, kleurharmonie en bruikbaarheidsmaten (Tabel 6). De resultaten worden gerapporteerd als gemiddelde ± standaarddeviatie, en de statistische significantie werd geëvalueerd met gepaarde t-toetsen met een betrouwbaarheidsinterval van 95% (p < 0,05). De resultaten geven aan dat het voorgestelde raamwerk statistisch significante verbeteringen behaalt ten opzichte van de baseline-benaderingen over meerdere metrieken, waaronder uitlijningsnauwkeurigheid, groeperingsnauwkeurigheid, leesvolgorde, cognitieve belasting (NASA-TLX) en kleurharmoniematen. Opvallend is dat de afname in cognitieve belasting en de verbeteringen in de bruikbaarheidsmetrieken zeer significante verschillen vertonen (p < 0,01). Deze bevindingen bevestigen dat de integratie van cognitieve ontwerpprincipes en perceptuele kleurmodellering leidt tot meetbare, statistisch significante verbeteringen in de UI-kwaliteit, wat daarmee de hypothesen H1–H4 ondersteunt.

Metriek	Uitgangswaarde (Gemiddelde ± SD)	Voorgesteld (gemiddelde ± SD)	Verbetering (%)	p-waarde	Betekenis
Uitlijningsfout (↓)	7.8 ± 1.2	4.2 ± 0.9	46.10%	0.003	Significant
Groeperingsnauwkeurigheid (↑)	0.68 ± 0.05	0.82 ± 0.04	20.50%	0.001	Significant
Nauwkeurigheid van de leesvolgorde (↑)	0.72 ± 0.06	0.87 ± 0.03	20.80%	0.002	Significant
NASA-TLX (↓)	68.5 ± 5.4	47.2 ± 4.8	31.10%	0.0005	Zeer significant
SUS-score (↑)	71.3 ± 6.2	88.9 ± 4.5	24.70%	0.0008	Zeer significant
Kleurharmonie-index (↑)	0.61 ± 0.07	0.83 ± 0.05	36.00%	0.001	Significant
Contrastratio (↑)	4.1 ± 0.6	6.2 ± 0.5	51.20%	0.002	Significant

Tabel 6: Statistische vergelijking van prestatiemetrieken tussen de baseline en de voorgestelde methoden. De tabel presenteert het gemiddelde en de standaarddeviatie (gemiddelde ± SD) voor belangrijke prestatiemetrieken, waaronder uitlijningsfout, groeperingsnauwkeurigheid, leesvolgorde-nauwkeurigheid, NASA Task Load Index (NASA-TLX), system usability scale (SUS), kleurharmonie-index en contrastverhouding. Percentage verbeteringen, p-waarden en statistische significantieniveaus worden gerapporteerd. (↑) geeft aan dat hogere waarden beter zijn, en (↓) geeft aan dat lagere waarden beter zijn. Statistische significantie werd geëvalueerd bij p < 0,05.

Dataset-specifieke observaties

De relatief lagere prestaties die werden waargenomen bij de structurele metrieken op de Guo-dataset kunnen worden toegeschreven aan de inherente kenmerken ervan. De Guo-dataset is kleiner dan RICO en ENRICO en richt zich primair op perceptuele kleureigenschappen in plaats van gestructureerde lay-outannotaties. Als gevolg hiervan vertoont deze een hogere variabiliteit in de plaatsing van componenten, een zwakkere hiërarchische organisatie en minder consistente lay-outstructuren over verschillende schermen heen. Deze eigenschappen maken structureel leren en lay-outoptimalisatie uitdagender, wat de lagere prestaties bij metrieken voor uitlijning, groepering en leesvolgorde verklaart, ondanks sterke prestaties bij perceptuele en gebruikersgerichte evaluaties.

Ablatiestudie

De ablatiestudie evalueert de bijdrage van elke module binnen het voorgestelde raamwerk door systematisch individuele componenten te verwijderen en hun impact op de lay-outkwaliteit, kleurmodellering en detectieprestaties te analyseren. De lay-outkwaliteit wordt beoordeeld met behulp van AE, GA, ROA en LCS. AE weerspiegelt de positionele afwijking van UI-elementen, waarbij hogere waarden duiden op een zwakkere ruimtelijke structuur. GA evalueert hoe effectief componenten zijn georganiseerd volgens de Gestaltprincipes. ROA meet het behoud van de logische visuele stroom, terwijl LCS de structurele consistentie tussen schermen kwantificeert op het gebied van uitlijning, spatiëring en lay-outorganisatie. De degradatie van de kleurkwaliteit wordt geëvalueerd met behulp van ΔE (perceptueel kleurverschil), CHI en CDS, die gezamenlijk de perceptuele uniformiteit, esthetische coherentie en palletrijkdom beoordelen. De detectieprestaties worden geëvalueerd met mAP, precisie en recall, die de impact kwantificeren van het vervangen van de Faster R-CNN-module door een eenvoudiger detectiemodel. Samen bieden deze metrieken een uitgebreide evaluatie van hoe elke module bijdraagt aan de algehele systeemprestaties.

Tabel 7 vat de bijdrage van elke module samen en vergelijkt het voorgestelde framework met bestaande benaderingen voor UI-generatie. Het volledige model behaalt de beste prestaties over alle metrieken voor lay-outkwaliteit, kleurmodellering en detectie, wat aantoont dat cognitief ontwerp, perceptuele kleurmodellering en diep visueel begrip een synergetisch effect hebben. Wanneer de kleurmoduleringsmodule wordt verwijderd, neemt ΔE aanzienlijk toe, terwijl CHI en CDS substantieel afnemen, wat wijst op een verlies van perceptuele uniformiteit en kleurharmonie. Dit bevestigt het belang van modellering op basis van CAM02-UCS voor het behoud van esthetische en perceptuele kwaliteit. Het verwijderen van de cognitieve lay-outmodule resulteert in een significante toename van AE en merkbare afnames in GA en ROA, wat aantoont dat cognitieve ontwerpprincipes essentieel zijn voor het produceren van structureel coherente en leesbare lay-outs. De verwijdering van de module voor multiscreen-consistentie leidt tot een vermindering van LCS, wat de rol ervan bevestigt bij het handhaven van consistente lay-outpatronen over meerdere schermen. Het vervangen van de Faster R-CNN-detector door een eenvoudiger CNN resulteert in een scherpe daling van mAP, precisie en recall, wat het kritieke belang van robuuste componentdetectie in de totale pipeline onderstreept. In vergelijking met baseline-methoden, waaronder pix2code, REDRAW en LDGM, presteert het voorgestelde framework consistent beter dan alle benaderingen wat betreft lay-outnauwkeurigheid, visuele coherentie en perceptuele kleurkwaliteit.

Methode / Module	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
Kleurmodule verwijderd	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
Cognitieve layoutmodule verwijderd	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
Consistentie over meerdere schermen verwijderd	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Faster R-CNN vervangen door eenvoudige CNN	0.16	0.85	0.91	0.85	4.15	0.82	18.1	0.74
Pix2Code	0.25	0.61	0.65	0.51	10.2	0.48	9.6	0.65
REDRAW	0.21	0.66	0.72	0.56	8.7	0.52	11.4	0.72
LDGM (Layout Diffusion)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
Voorgesteld volledig model	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

Tabel 7: Ablatiestudie en vergelijkende prestatieanalyse van het voorgestelde raamwerk en de basismethoden.De tabel evalueert de impact van individuele componenten door het volledige voorgestelde model te vergelijken met varianten waarin specifieke modules zijn verwijderd (kleurmodule, cognitieve lay-outmodule, multiscreen-consistentie en Faster R-CNN vervangen door een eenvoudige CNN), evenals basismethoden (pix2code, REDRAW en LDGM). De prestaties worden beoordeeld op basis van uitlijningsfout (AE), groeperingsnauwkeurigheid (GA), leesvolgordeenauwkeurigheid (ROA), lay-outconsistentiescore (LCS), perceptueel kleurverschil (ΔE), kleurharmonie-index (CHI), kleurdiversiteitsscore (CDS) en gemiddelde gemiddelde precisie (mAP). (↑) geeft aan dat hogere waarden beter zijn, en (↓) geeft aan dat lagere waarden beter zijn.

DATAbeschikbaarheid:

De datasets die in deze studie zijn gebruikt, zijn beschikbaar via de volgende links: RICO-dataset: https://interactionmining.org/rico; ENRICO-dataset: https://github.com/luileito/enrico; Guo’s UI Color Dataset: https://github.com/guozhongke/UI-Color-Dataset.

Aanvullend bestand 1. Mathematische formuleringen en uitgebreide implementatiedetails.Dit bestand bevat de gedetailleerde mathematische formuleringen en algoritmische workflows ter ondersteuning van het voorgestelde raamwerk voor geautomatiseerde UI-prototyping. Het omvat training voor componentdetectie, extractie van lay-outpatronen, modellering van kleurharmonie, het uniforme UI-prototypingdoel, details over Faster R-CNN-detectie, berekeningen van ruimtelijke afstand en uitlijningsovereenkomst, constructie van de logische UI-boom, perceptuele kleurmodellering op basis van CAM02-UCS, cognitieve ontwerpoptimalisatie, modellering van consistentie over meerdere schermen en Algoritmen S1–S3.Klik hier om dit bestand te downloaden.

Discussie

De resultaten tonen statistisch significante verbeteringen in bruikbaarheid, structurele organisatie en perceptuele kwaliteit (p < 0,05), waarmee de effectiviteit van het integreren van cognitieve ontwerpprincipes in geautomatiseerde UI-prototyping wordt bevestigd. In tegenstelling tot traditionele UI-generatiesystemen die primair vertrouwen op visuele detectie of regelgebaseerde heuristieken, integreert het voorgestelde framework Gestalt-groepering, hiërarchie-modellering, spatiëringsbeperkingen en perceptuele leesbaarheid gedurende het gehele proces van UI-reconstructie. Verbeteringen waargenomen in NASA-TLX, SUS en SET bevestigen verder een statistisch significante vermindering van de cognitieve werklast (NASA-TLX, p.< 0,01). Deze resultaten geven aan dat geautomatiseerde UI-generatie verder moet gaan dan visuele reconstructienauwkeurigheid en mensgerichte ontwerpkennis moet bevatten om praktische bruikbaarheid te bereiken. Daarnaast worden alle geformuleerde hypothesen (H1–H4) empirisch ondersteund door de experimentele resultaten.

Naast verbeteringen in de lay-out resulteert de integratie van perceptuele kleurmodellering op basis van CAM02-UCS in statistisch significante winst in kleurharmonie, toegankelijkheid en perceptuele stabiliteit (p < 0,05), zoals weerspiegeld door verbeteringen in ΔE, CHI, CDS en het contrastratio. In vergelijking met eerder werk, zoals geautomatiseerde op afbeeldingen gebaseerde generatie van UI-kleurthema's, waarbij de focus primair ligt op kleuroptimalisatie, integreert het voorgestelde raamwerk zowel kleur- als lay-outverfijning binnen een uniforme pijplijn. Bovendien pakt de inclusie van een module voor consistentie over meerdere schermen een belangrijke beperking aan van eerdere benaderingen die zich uitsluitend richten op UI-generatie voor een enkel scherm. Een vergelijking met bestaande methoden, waaronder pix2code³¹, REDRAW^23,24 en LDGM³², laat zien dat deze benaderingen primair de nadruk leggen op structurele reconstructie of generatieve modellering zonder cognitieve principes, perceptuele kleurharmonisatie of redenering over meerdere schermen te incorporeren. Het voorgestelde raamwerk vertoont statistisch significante verbeteringen ten opzichte van deze methoden (p < 0,05) over lay-out-nauwkeurigheidsmetrieken (AE, GA en ROA), perceptuele metrieken (CHI en ΔE) en bruikbaarheidsmaten (SUS en CSCR). Deze bevindingen benadrukken het voordeel van het combineren van cognitieve ontwerpprincipes, perceptuele kleurmodellering en deep learning binnen een geïntegreerd systeem.

Een belangrijke observatie uit de resultaten is het onderscheid tussen structurele en perceptuele factoren die de UX beïnvloeden. Structurele optimalisatie verbetert de functionele correctheid en de duidelijkheid van de lay-out, terwijl perceptuele optimalisatie—met name kleurharmonie—een aanzienlijke invloed heeft op de gebruikersperceptie en de cognitieve belasting. De bevindingen wijzen erop dat een optimaal UI-ontwerp een balans vereist tussen structurele nauwkeurigheid en perceptuele coherentie. Ondanks de aangetoonde verbeteringen blijven er bepaalde beperkingen bestaan. Zo zijn de prestaties op kleinere en meer perceptueel georiënteerde datasets, zoals de Guo UI Color-dataset, lager in structurele metrieken vanwege variabiliteit in de organisatie van de lay-out en beperkte structurele annotaties. Deze kenmerken zorgen voor uitdagingen bij het aanleren van consistente lay-outpatronen en hiërarchische relaties. Toekomstig werk zal zich richten op het verbeteren van de robuustheid over dergelijke datasets.

Vanuit een theoretisch perspectief demonstreert dit onderzoek dat UI-generatie aanzienlijk kan worden verbeterd door cognitieve en perceptuele principes direct in deep learning-workflows te integreren. De studie stelt de conventionele visie ter discussie dat UI-generatie uitsluitend een probleem van computer vision of code-generatie is. In plaats daarvan benadrukt het de belangrijkheid van het opnemen van perceptuele uniformiteit (via CAM02-UCS), de vermindering van de cognitieve belasting (via Gestaltprincipes en hiërarchische modellering) en coherentie in multiscreen-ontwerp als kerncomponenten van geautomatiseerde UI-systemen. Dit werk draagt bij aan een verschuiving naar mensgerichte computationele modellen, waarbij UI-generatie niet alleen rekening houdt met structurele correctheid, maar ook met psychologische en perceptuele factoren. Bijgevolg zet het een nieuwe theoretische richting uit voor geautomatiseerde ontwerpintelligentie.

Vanuit een praktisch standpunt biedt het voorgestelde raamwerk een implementeerbare oplossing voor UI-ontwerpers, productteams en prototypingtools. Door de cognitieve belasting te verminderen en de zoekefficiëntie te verbeteren, genereert het systeem UI-lay-outs die minder handmatige verfijning vereisen om te voldoen aan professionele ontwerpnormen. Het gebruik van perceptueel geoptimaliseerde kleurthema's waarborgt naleving van toegankelijkheidsrichtlijnen zoals WCAG 2.1, waardoor directe bruikbaarheid in praktijktoepassingen mogelijk wordt. Daarnaast vergemakkelijkt de module voor consistentie over meerdere schermen een snellere ontwikkeling van applicaties met meerdere pagina's door consistente lay-out- en ontwerppatronen te handhaven zonder dat handmatige aanpassingen nodig zijn. Over het algemeen heeft het raamwerk het potentieel om de UI-ontwikkelingstijd aanzienlijk te verkorten, terwijl zowel de kwaliteit als de bruikbaarheid van de gegenereerde ontwerpen wordt verbeterd.

Het voorgestelde raamwerk introduceert een mensgerichte benadering voor geautomatiseerde UI-prototyping door cognitieve ontwerpprincipes, perceptuele kleurmodellering (CAM02-UCS) en consistentie in multiscreen-indelingen te integreren in een uniforme computationele pijplijn. In tegenstelling tot eerdere benaderingen die zich primair richtten op structurele reconstructie of visuele detectie, modelleert dit raamwerk expliciet Gestalt-groepering, hiërarchie, contrastoptimalisatie en perceptuele uniformiteit. Experimentele resultaten tonen significante verbeteringen aan in bruikbaarheid (SUS en NASA-TLX), visuele harmonie (AHS, CHI en ΔE) en structurele prestaties (GA, ROA, LCS en mAP), wat bevestigt dat cognitieve en perceptuele modellering de UI-kwaliteit en UX verbeteren. Toekomstig werk zal de integratie van transformer-gebaseerde vision-language-modellen verkennen om het semantisch begrip en de structurele redenering te verbeteren. Daarnaast kan de incorporatie van adaptieve personalisatie, device-responsive indelingen en menselijke verfijning in de lus (human-in-the-loop) de praktische toepasbaarheid van het systeem verder verhogen. Over het algemeen biedt dit werk een basis voor AI-gestuurde UI-ontwerpsystemen van de volgende generatie die niet alleen visueel accuraat zijn, maar ook cognitief efficiënt, perceptueel harmonieus en praktisch implementeerbaar.

Materialen

Lijst van materialen gebruikt in dit artikel

Naam	Bedrijf	Catalogusnummer	Opmerkingen
CPU (processor)	AMD Ryzen 9 7950X (16-core, 32-thread, 4.5–5.7 GHz)	Advanced Micro Devices (AMD), USA	Ryzen 9 7950X
CUDA Toolkit	Versie 11.8	NVIDIA Corporation, USA	CUDA Toolkit 11.8
cuDNN	Versie 8.9	NVIDIA Corporation, USA	cuDNN v8.9
Faster R-CNN	Model voor objectdetectie (met Region Proposal Network)	Meta AI Research / Detectron2	Detectron2-framework
Matplotlib	Versie 3.7	Matplotlib Development Team	v3.7.0
NVIDIA RTX 4090 GPU	24 GB GDDR6X videokaart	NVIDIA Corporation, Santa Clara, CA, USA	RTX 4090
NumPy	Versie 1.24	NumPy Developers	v1.24.0
OpenCV	Versie 4.8	OpenCV Foundation	v4.8.0
PyTorch	Versie 2.0	PyTorch Foundation (Meta AI)	v2.0.0
ResNet-50 met FPN	Backbone CNN met Feature Pyramid Network	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	Versie 1.3	Scikit-learn Developers	v1.3.0
SciPy	Versie 1.10	SciPy Community	v1.10.0
Systeemgeheugen (RAM)	64 GB DDR5	Corsair / Kingston (of equivalent)	DDR5 64GB Kit
Besturingssysteem Ubuntu	Versie 22.04 LTS	Canonical Ltd., UK	Ubuntu 22.04 LTS