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 omvat geen menselijke of dierlijke proefpersonen.

Het voorgestelde raamwerk voor geautomatiseerde UI-prototyping integreert op deep learning gebaseerd structureel begrip, perceptueel uniforme kleurmodellering en cognitieve ontwerpprincipes om coherente en gebruikersgerichte interface-prototypes 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 schermlay-outs mogelijk maakt. De gedetecteerde componenten worden vervolgens verwerkt door een kleurintelligentiemodule, die merk- of afbeeldingsgebaseerde kleurindicaties extraheert, perceptuele gelijkenis modelleert met behulp van CAM02-UCS en harmonieuze, contrastbewuste en toegankelijkheid-conforme kleurenpaletten genereert. Vervolgens worden cognitieve ontwerpprincipes — waaronder de Gestalt-groeperingswetten, de wet van Fitts, de wet van Hick, op aandacht gebaseerde spatiëring en beperkingen voor visuele hiërarchie — toegepast via een cognitieve optimalisatie-engine om de ruimtelijke organisatie en componentuitlijning te verfijnen. Tot slot integreert een layout-redeneringslaag structurele, perceptuele en cognitieve beperkingen om consistente multiscreen UI-prototypes te genereren die een balans vinden tussen bruikbaarheid, esthetiek en functionele helderheid. Deze geïntegreerde pijplijn waarborgt perceptuele coherentie, vermindert de cognitieve belasting en houdt zich aan mensgerichte ontwerpprincipes. De volledige workflow van de voorgestelde methode wordt 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-afbeelding van de UI. Componentdetectie wordt uitgevoerd met Faster R-CNN om interface-elementen te identificeren. De gedetecteerde componenten worden vervolgens verwerkt met 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 de uiteindelijke output van het UI-prototype. 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-prototyping framework, dat een ruwe UI-screenshot omzet in een cognitief verfijnd prototype. Het proces begint met de input-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 klasselabels uit. De gedetecteerde componenten worden vervolgens verwerkt in de fase voor 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 de visuele groepering en structurele afhankelijkheden tussen UI-elementen vast. De geëxtraheerde lay-out wordt vervolgens verfijnd via cognitieve optimalisatie door het toepassen van mensgerichte ontwerpprincipes. 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 de 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. Tot slot wordt de geoptimaliseerde lay-out gecombineerd met perceptuele kleurmodellering om een coherent UI-prototype te genereren. De resulterende interface is structureel accuraat, visueel harmonieus en afgestemd op de menselijke verwachtingen op het gebied van bruikbaarheid.

Het raamwerk is geïmplementeerd met PyTorch 2.0 op Ubuntu 22.04. De experimenten zijn 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 was vooraf getraind op de ImageNet-dataset. De training werd uitgevoerd met de stochastic gradient descent (SGD)-optimizer met een leersnelheid van 0.001, een batchgrootte van 16 en maximaal 60 epochs. Om overfitting te voorkomen, is early stopping toegepast met 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 bijsnijden 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 bevat 1.464 hoogwaardige UI-screenshots die handmatig zijn gecategoriseerd in 20 ontwerppatronen, wat een verbeterde generalisatie mogelijk maakt voor structurele redenering en het modelleren 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 paletevaluatie. 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 voor het leren van lay-outpatronen en het modelleren van structurele consistentie, en 128 afbeeldingen uit de dataset van Guo voor kleurevaluatietaken. 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 aantal beschikbare afbeeldingen	In de studie gebruikte afbeeldingen	Doel in het voorgestelde kader
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-kleurendataset1	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 in het voorgestelde raamwerk zijn gebruikt. De tabel presenteert de datasets die zijn gebruikt 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 subset dat in deze studie is gebruikt en de specifieke rol van elke dataset bij componentdetectie, lay-outmodellering en perceptuele kleuranalyse binnen het voorgestelde raamwerk.

Er is gebruikgemaakt van een gestratificeerde steekproefstrategie om de diversiteit in UI-componenten, lay-outstructuren en kleurverdelingen over de RICO-, ENRICO- en Guo-datasets te behouden. De dataset werd met behulp van gestratificeerde steekproeftrekking gesplitst in subsets voor training (70%), validatie (15%) en testen (15%). Afbeeldingen werden genormaliseerd met het gemiddelde (0.485, 0.456 en 0.406) en de standaarddeviatie (0.229, 0.224 en 0.225). Data-augmentatie omvatte willekeurige horizontale spiegeling (waarschijnlijkheid = 0.5) en willekeurige uitsnijding (schaalbereik: 0.8–1.0), gevolgd door schaling naar 224 × 224 pixels 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 raamwerk voor geautomatiseerde 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 leren 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 gevestigde ontwerptradities. In tegenstelling hiermee wordt Guo's UI Color Dataset 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 contrast, toegankelijkheid en esthetische coherentie in balans brengen. Samen vormen deze datasets een geïntegreerde pijplijn: RICO ondersteunt componentdetectie, ENRICO maakt 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 willekeurig bijsnijden, horizontaal spiegelen 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 aangepast 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 knop, tekst, afbeelding, icoon 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-kindrelaties binnen de lay-outboom. Daarnaast werden richtlijnen opgesteld om een consistente annotatie van elementen, een 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 verstrekt 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 learning rate werd ingesteld op 0.001 en aangepast met een step decay-beleid op basis van de validatieprestaties. De training werd uitgevoerd voor maximaal 60 epochs met een batch size van 16. Om overfitting te voorkomen, werd early stopping toegepast met een validatieset bestaande uit 20% van de trainingsdata.

De afbeeldingsfunctie f(.) neemt gedetecteerde UI-elementen als input en produceert een hiërarchische lay-outrepresentatie als output. Deze berekent nabuurschapsrelaties tussen UI-elementen op basis van ruimtelijke afstand en uitlijningscriteria, en stelt een nabuurschapsmatrix op om deze relaties weer te geven. Vervolgens wordt een clusteringalgoritme, zoals DBSCAN, toegepast om gerelateerde componenten te groeperen. Ten slotte 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 geünificeerde optimalisatiedoel worden gegeven in Aanvullend Bestand 1.

Deze doelfunctie formaliseert wiskundig de integratie van structurele detectie, lay-outredenering en perceptuele kleuremodellering, waardoor wordt gewaarborgd dat alle componenten van het raamwerk gezamenlijk bijdragen aan het genereren van coherente en gebruikersgerichte UI-prototypes. De optimalisatie wordt op modulaire wijze uitgevoerd voor elk onderdeel van het raamwerk. SGD wordt gebruikt voor het trainen van de componentdetectiemodule, terwijl de Adam-optimizer wordt gebruikt tijdens de gezamenlijke optimalisatie van de verenigde 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 voor 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 een 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 worden gedefinieerd met behulp van meerdere schalen (128, 256 en 512) en aspectratio's (1:1, 1:2 en 2:1) om UI-elementen van verschillende groottes te accommoderen. Tijdens de training worden anchors met een intersection-over-union (IoU) groter dan 0,7 ten opzichte van de ground truth boxes gelabeld als positief, terwijl anchors 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, waardoor een efficiënte lokalisatie van betekenisvolle UI-elementen wordt gewaarborgd, zelfs in overvolle interfaces. Zodra de kandidaatregio's zijn gegenereerd, wordt elk voorstel ingedeeld 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 fully connected layers worden verwerkt voor classificatie en regressie. De classificatiebranch geeft klaswaarschijnlijkheden uit, terwijl de regressiebranch de precieze coördinaten van de bounding-box 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 in 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 waarborgen. Na 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 mogelijk van een hiërarchische UI-boom 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. Knop en Tekst), zoals aangegeven door de gelabelde verbindingen. De Faster R-CNN detectiemodule (rechts) verfijnt de coördinaten van de bounding boxes, wijst 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 bieden.

Figuur 2. Componentdetectie van gebruikersinterface-elementen met behulp van Faster R-CNN. De figuur illustreert de detectie van UI-componenten vanuit een screenshot van een invoerinterface. 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 componentdetectie met behulp van 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 tot headers, navigatiebalken of gegroepeerde inhoudsregio's behoren. Om deze beperking aan te pakken, worden de gedetecteerde componenten getransformeerd naar een logische UI-boom, waarbij elke component wordt beschouwd als een knoop en functioneel of visueel gerelateerde componenten worden gegroepeerd onder gemeenschappelijke bovenliggende knopen. 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. Op een wijze die analoog is aan menselijke ontwerppraktijken, leert het systeem veelvoorkomende structurele patronen te herkennen, zoals headers, footers, rasters en inhoudsblokken. Zodra de groepering is vastgesteld, worden aanvullende structurele eigenschappen — waaronder uitlijning, rasterorganisatie en leesvolgorde — geanalyseerd om een uitgebreide lay-outrepresentatie te construeren. Componenten die zijn uitgelijnd in kolommen van gelijke breedte kunnen bijvoorbeeld duiden op een kaartgebaseerde lay-out, terwijl verticaal gestapelde elementen kunnen wijzen op een formulier- of feedgebaseerde interface. Door clustering, ruimtelijke redenering 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 lay-outverfijning en consistentiemodellering voor meerdere schermen, waardoor het systeem in staat is om gestructureerde, coherente en gebruikersgerichte interface-ontwerpen te genereren.

Gedetailleerde formuleringen voor ruimtelijke afstand en uitlijningsgelijkenis worden verstrekt in Aanvullend Bestand 1.

Clustering voor lay-outgroepering (DBSCAN)

Om lay-outgroepen te identificeren, wordt DBSCAN toegepast. DBSCAN maakt gebruik van twee parameters: (1) ε = maximale afstand tussen naburige componenten en (2) = minimaal aantal componenten dat vereist 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 minimale aantal punten dat vereist is om een cluster te vormen, werd ingesteld op MinPts = 3 om de vorming van onbeduidende 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 zorgt ervoor dat de kleuren 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 het 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 overmatig contrasterende kleuren worden gematigd om visueel ongemak te voorkomen. Het gegenereerde palet voldoet daarnaast aan toegankelijkheidsnormen zoals WCAG AA en AAA, wat 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 randvoorwaarden van perceptuele gelijkenis, contrast, harmonie en merkconsistentie. Er wordt een primaire kleur gekozen (bijv. uit de merkidentiteit), en secundaire kleuren worden aangepast in termen van 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, waardoor de cognitieve belasting wordt geminimaliseerd terwijl de esthetische balans behouden blijft. Als resultaat produceert het raamwerk UI-kleurschema's die een professionele coherentie, leesbaarheid en perceptuele consistentie vertonen.

Gedetailleerde wiskundige uitdrukkingen 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. Vervolgens 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 zorgt ervoor 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 verstrekt in Aanvullend Bestand 1.

Geïntegreerd doel voor cognitieve optimalisatie

De wiskundige uitdrukking 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 alpha, beta en gamma. In deze studie werden de waarden van alpha, beta 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 generatie van de gebruikersinterface

Consistentiemodellering over 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 cross-screen patronen met behulp van templates afgeleid van de RICO- en ENRICO-datasets. Deze templates 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 cross-screen structureel profiel op dat identificeert welke elementen consistent moeten blijven en welke mogen variëren. Zodra de structurele patronen zijn geïdentificeerd, dwingt het framework consistentie af in typografische schalen, spatiëringsverhoudingen, gridlay-outs en navigatieankers. Zo behouden headerbars 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 templates — 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 framework 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 afstemming met het mentale model van de gebruiker te garanderen, waardoor de bruikbaarheid wordt verbeterd en verwarring wordt verminderd. Als resultaat minimaliseert het model voor consistentie over meerdere schermen de visuele ruis, vergroot het de bekendheid 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 render-engine visuele outputs in formaten zoals SVG-wireframes, HTML/CSS-prototypes of pixelgebaseerde UI-mockups. De resulterende UI-schermen vertonen een correcte leesvolgorde, harmonieuze kleurrelaties, een nauwkeurige 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 (de wet van Fitts) en beslissingsvereenvoudiging (de wet van Hick) binnen een uniform optimalisatiesysteem. Aanvankelijk worden de ruimtelijke relaties tussen componenten geëvalueerd om perceptuele groeperingen vast te stellen. De interactie-efficiëntie wordt vervolgens geoptimaliseerd door de grootte en plaatsing van componenten aan te passen, terwijl de complexiteit van de besluitvorming 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-outsjablonen, waardoor uniformiteit in typografie, spatiëring en structurele organisatie wordt gewaarborgd. Een multiobjectieve optimalisatiefunctie verfijnt vervolgens de lay-out door uitlijning, spatiëring en cognitieve kosten in evenwicht te brengen, wat resulteert in een interface die zowel visueel coherent als cognitief efficiënt is. Over 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 framework voor geautomatiseerde 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 kleur-geannoteerde 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 bij componentdetectie van 92,4% behaalt en effectief generaliseert over diverse mobiele UI-stijlen. Bovendien verbetert de integratie van ENRICO-patroonannotaties de redenering over de lay-out, wat resulteert in een toename van 18,7% in lay-outhelderheid en een betere behoud van de leesvolgorde. In experimenten ter evaluatie van kleur genereert de op CAM02-UCS gebaseerde kleurmoduleringsmodule paletten die, volgens beoordelingen van ontwerpers, 24,5% harmonieuzer zijn en een hogere perceptuele uniformiteit bereiken in vergelijking met traditionele methoden voor paletgeneratie op basis van RGB en LAB. Daarnaast behaalt de modellering van consistentie over meerdere schermen een verbetering van 28% in cross-screen uitlijning en typografische consistentie. Gebruikersstudies met 30 deelnemers tonen een afname van 31% in de waargenomen cognitieve belasting aan bij interactie met prototypes die door het voorgestelde systeem zijn geproduceerd. Samen geven deze resultaten aan 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 belicht de simulatieomgeving en de technische instellingen die zijn gebruikt om het voorgestelde UI-prototypingraamwerk te beoordelen. De rekenintensieve trainingsprocedures van Faster R-CNN en de modules voor lay-outconsistentie 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 implementatie van deep learning.

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)
Trainingsbatchgrootte	8
Optimalisator	AdamW (LR = 1e−4, weight decay = 0,01)
Epochs	40
Kleursymboolruimte	CAM02-UCS
Clustering voor paletextractie	K-means (k = 5)
Layoutclustering	DBSCAN (ε = 20, min_samples = 3)

Tabel 3: Implementatieparameters en experimentele configuratie van het voorgestelde raamwerk. De tabel vat de hardware- en software-opstelling samen die is gebruikt voor modeltraining en evaluatie, 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 vóór de verwerking uniform geschaald naar 480 × 800 pixels. De training wordt uitgevoerd over 60 epochs met gebruik 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 de 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-prototypingframework te bieden, worden vier categorieën evaluatiemetrieken gebruikt:

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

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

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

iv) Gebruikergerichte metrieken voor cognitieve efficiëntie, inclusief 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.

Meetwaarden voor componentdetectie

Precisie beschrijft de nauwkeurigheid van het model bij het voorspellen van UI-componenten zonder fout-positieven te genereren. Een hoge precisie impliceert dat de meeste voorspelde bounding boxes overeenkomen 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 hoe goed de voorspelde bounding box overlapt met de ground truth bounding box. 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 over meerdere IoU-drempelwaarden samen. 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 standaard benchmark voor objectdetectie.

De detectieresultaten over de drie datasets geven aan dat de voorgestelde componentdetectiemodule 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 annotaties van UI-componenten. ENRICO vertoont iets lagere scores vanwege de meer vereenvoudigde structuur en minder geannoteerde componenttypen. De Guo-dataset registreert de laagste F1-score (0,81), waarschijnlijk door grotere visuele variatie en minder gestandaardiseerde lay-outpatronen, wat detectie uitdagender maakt. Over het algemeen bevestigen deze resultaten dat het model een robuuste prestatie voor componentdetectie behoudt over verschillende UI-ontwerpstijlen en datasetkenmerken.

Dataset	Precisie	Herinnering	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 de componentdetectie over verschillende datasets. 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 overlapvereiste. 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 de robuustheid van de detectie direct beïnvloedt.

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 bij verschillende niveaus van detectiestrengheid illustreert. 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 beste generaliseert op grotere en meer gestructureerde datasets. Deze striktere gemiddelde metriek brengt subtiele prestatieverslechteringen aan het licht die mogelijk niet zichtbaar 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 vormen bij een strikte evaluatie volgens de COCO-stijl. De detectieresultaten worden gepresenteerd in Figuren 3 en 4die kwantitatieve vergelijkingen van de mAP leveren over verschillende IoU-niveaus.

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 de 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 vertegenwoordigt de datasets en de y-as geeft de bijbehorende mAP-waarden weer op een schaal van 0–1, wat de modelprestaties weerspiegelt onder variërende detectiedrempels. 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 met behulp van AE, groeperingsnauwkeurigheid (GA) en leesvolgordenauwkeurigheid (ROA), die gezamenlijk de structurele correctheid, perceptuele organisatie en cognitieve leesbaarheid van de gegenereerde UI-lay-outs beoordelen.

Uitlijningsfout.

AE (pixelgebaseerde afwijking) geeft aan hoe goed UI-elementen zijn uitgelijnd met ideale uitlijningslijnen, zoals gidsen voor links, rechts, boven of de basislijn. 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 cognitieve verfijning van de lay-out, aangezien een gebrekkige uitlijning de visuele flow verstoort en de ervaren complexiteit verhoogt. Figuur 5 illustreert de AE over de RICO-, ENRICO- en Guo-datasets, gemeten als de gemiddelde pixelafwijking 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), vanwege de grotere 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 verschillende datasets, ondanks de toenemende complexiteit van de lay-out.

Figuur 5. Uitlijningsfout over datasets heen. De figuur toont de uitlijningsfout over 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 Gestalt-principes 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 raamwerk over de drie datasets is behaald. De ENRICO-dataset vertoont de hoogste mediane GA en het kleinste interkwartielbereik, wat duidt op stabiele en consistente groeperingsprestaties dankzij de goed gedefinieerde, patroonge Labelde lay-outs. De RICO-dataset vertoont een matige groeperingsnauwkeurigheid met een hogere variabiliteit, waarschijnlijk door 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 datasets. De boxplot toont de groeperingsnauwkeurigheid op basis van Gestalt-principes over de RICO-, ENRICO- en Guo 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 vertegenwoordigt de datasets en de y-as toont de scores voor groeperingsnauwkeurigheid. De steekproefomvang is n=5128 user interface-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 gevestigde ontwerpconventies. Een hogere ROA geeft aan dat het systeem de verwachte cognitieve scanpatronen behoudt. Figuur 7 toont de ROA over verschillende evaluatiefasen voor de RICO-, ENRICO- en Guo-datasets. ENRICO behaalt consistent de hoogste ROA vanwege de regelmatige en patroongeoriënteerde lay-outstructuur, wat een nauwkeurigere voorspelling van menselijke leesvolgordes mogelijk maakt. RICO vertoont gemiddelde prestaties met een lichte variabiliteit, wat de grotere diversiteit en real-world complexiteit weerspiegelt. De Guo-dataset vertoont de laagste ROA, aangezien veel van de schermen visueel rijk zijn maar geen duidelijk gedefinieerde leeshierarchieë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 gehandhaafd over diverse UI-ontwerpen.

Figuur 7. Nauwkeurigheid van de leesvolgorde over verschillende evaluatiefasen voor meerdere datasets. De lijngrafiek toont de nauwkeurigheid van de leesvolgorde over de evaluatiestappen voor de RICO-, ENRICO- en Guo's UI Color-datasets. De x-as vertegenwoordigt 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 framework. 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 wijst op een verbeterde coherentie tussen schermen, wat resulteert in een meer uniforme en intuïtieve UX. Figuur 8 presenteert de LCS gemeten over meerdere evaluatiefases 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 contrast 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 gericht is op kleurkenmerken in plaats van op de 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 er nog steeds meetbare verbeteringen worden gerealiseerd over alle datasets.

Figuur 8. Layout-consistentiescore over evaluatiefasen voor meerdere datasets. De lijngrafiek toont de layout-consistentiescores over evaluatiefasen voor de RICO-, ENRICO- en Guo's UI Color-datasets. De x-as stelt de evaluatiefase voor en de y-as geeft de layout-consistentiescores aan. Elke curve correspondeert met een dataset en illustreert de verbetering in de structurele coherentie van 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 paletkleuren kwantificeert; de contrastratio (gebaseerd op WCAG 2.1), die de leesbaarheid tussen voorgrond- en achtergrondelementen beoordeelt; de kleurharmonie-index (CHI), die de esthetische compatibiliteit tussen tinten meet; de kleurdiversiteitsscore (CDS), die de variatie binnen de perceptuele kleurruimte weerspiegelt; en de kleurprominentiescore (CPS), die de balans en dominantie van kleuren binnen het palet 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 contrastratio 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 neemt de CDS met meer dan 50% toe, wat aantoont dat de gegenereerde paletten een rijkere variatie behouden zonder visuele ruis te introduceren. Hogere CPS-waarden duiden op een gebalanceerde distributie 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	Basislijn1	Verbetering (%)
ΔE (CAM02-UCS)	Perceptueel kleurverschil	4.12	7.85	47.5% lager
Contrastverhouding (WCAG)	Leesbaarheid van voorgrond-achtergrondparen	6.21	4.38	41.80%
CHI (Color Harmony Index)	Hue & 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 referentiemethoden. 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 de referentiewaarden, samen met de procentuele verbeteringen.

Demografie 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 individuen met uiteenlopende achtergronden, waaronder software engineers, studenten en UI/UX-designers. Op basis van zelfgerapporteerde computerbekwaamheid 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 in UI/UX-design of aanverwante vakgebieden, terwijl de overige deelnemers dat niet hadden. Deze diversiteit zorgde voor een gebalanceerde evaluatie over verschillende niveaus van technische expertise en bekendheid met design.

Metrieken van de gebruikersstudie

Een gebruikersgerichte evaluatie werd uitgevoerd met behulp van meerdere metrieken, waaronder NASA-TLX, de system usability scale (SUS), aesthetic harmony score (AHS), 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 zoals mentale eisen, inspanning en frustratie te meten. Lagere scores duiden op een verminderde cognitieve belasting en een verbeterde interactiegemak. 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 vergeleken met de referentiemethoden, wat wijst op verbeteringen in zowel de structurele indeling 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 het verbeterde contrast, de tintcoherentie en de verminderde visuele ruis, wat het belang van perceptuele kleurmodellering in UI-ontwerp onderstreept. SET meet de tijd die gebruikers nodig hebben om doelelementen van 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, aandachtgestuurde 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 van de module voor consistentie over meerdere schermen weerspiegelt bij het handhaven van stabiele kleurenschema'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 superieure prestaties vertoont op gebruikersgerichte metrieken, waaronder 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, zijn primair toe te schrijven aan de sterke kleurconsistentie en de relatief eenvoudigere visuele compositie, in plaats van een superieure kwaliteit van de structurele lay-out. Hoewel gebruikers deze interfaces als visueel harmonieuzer en minder cognitief 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-ontwerp. Hoewel perceptuele kenmerken, zoals kleurharmonie, de UX aanzienlijk verbeteren, blijven structurele nauwkeurigheid en lay-outconsistentie cruciaal voor de functionele bruikbaarheid. Daarom vereist een optimaal UI-ontwerp een balans tussen perceptuele harmonie en structurele correctheid.

Figuur 9. Vergelijking van gebruikersstudie-metrieken over verschillende datasets. Het gegroepeerde staafdiagram vergelijkt gebruikersstudie-metrieken over de RICO-, ENRICO- en Guo's UI Color Datasets. 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 bijbehorende scores aangeeft. De staven representeren de prestaties voor elke dataset, wat de 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 lay-outkwaliteit, 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 baseline-benaderingen over meerdere metrieken, waaronder uitlijningsnauwkeurigheid, groeperingsnauwkeurigheid, leesvolgorde, cognitieve belasting (NASA-TLX) en kleurharmoniematen. Opvallend is dat de verminderingen in cognitieve belasting en de verbeteringen in 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, waarmee de hypothesen H1–H4 worden ondersteund.

Metriek	Baseline (Gemiddelde ± SD)	Voorgesteld (Gemiddelde ± SD)	Verbetering (%)	p-waarde	Significantie
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 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	Hoogst significant
SUS-score (↑)	71.3 ± 6.2	88.9 ± 4.5	24.70%	0.0008	Hoogst significant
Kleurharmonie-index (↑)	0.61 ± 0.07	0.83 ± 0.05	36.00%	0.001	Significant
Contrastverhouding (↑)	4.1 ± 0.6	6.2 ± 0.5	51.20%	0.002	Significant

Tabel 6: Statistische vergelijking van prestatiemetrieken tussen de basislijn en de voorgestelde methoden. De tabel presenteert het gemiddelde en de standaarddeviatie (gemiddelde ± SD) voor belangrijke prestatiemetrieken, waaronder uitlijningsfout, groeperingsnauwkeurigheid, nauwkeurigheid van de leesvolgorde, 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 in de structurele metrieken van 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 kleurkenmerken in plaats van op gestructureerde layout-annotaties. Als gevolg hiervan vertoont deze een hogere variabiliteit in de plaatsing van componenten, een zwakkere hiërarchische organisatie en minder consistente layout-structuren over verschillende schermen heen. Deze eigenschappen maken structureel leren en layout-optimalisatie uitdagender, wat de lagere prestaties in metrieken voor uitlijning, groepering en leesvolgorde verklaart, ondanks de sterke prestaties in perceptuele en gebruikersgerichte evaluaties.

Ablatiestudie

De ablatiestudie evalueert de bijdrage van elke module binnen het voorgestelde framework 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 flow, terwijl LCS de structurele consistentie tussen schermen kwantificeert in termen van uitlijning, spatiëring en lay-outorganisatie. De degradatie van de kleurkwaliteit wordt geëvalueerd met Δ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 raamwerk met bestaande benaderingen voor UI-generatie. Het volledige model behaalt de beste prestaties op 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 module voor kleurmodellering wordt verwijderd, neemt ΔE significant toe, terwijl CHI en CDS aanzienlijk 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 opvallende afnames van 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 afname 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 benadrukt van robuuste componentdetectie in de algehele pijplijn. In vergelijking met basismethoden, waaronder pix2code, REDRAW en LDGM, presteert het voorgestelde raamwerk consistent beter dan alle benaderingen op het gebied van 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 lay-outmodule 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 framework 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). Prestaties worden beoordeeld op basis van alignment error (AE), grouping accuracy (GA), reading order accuracy (ROA), layout consistency score (LCS), perceptual color difference (ΔE), color harmony index (CHI), color diversity score (CDS) en mean average precision (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 die ten grondslag liggen aan het voorgestelde geautomatiseerde UI-prototypingraamwerk. 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 uitlijningsgelijkenis, 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