🤖 AI

ControlGUI: Guiding Generative GUI Exploration through Perceptual Visual Flow

Dit paper introduceert ControlGUI, een op diffusie gebaseerde methode die ontwerpers helpt om tijdens de vroege ontwerpfase snel en met minimale inspanning diverse low-fidelity interface-schetsen te genereren door flexibele invoer te combineren van prompts, wireframes en visuele flows.

Oorspronkelijke auteurs: Aryan Garg, Yue Jiang, Antti Oulasvirta

Gepubliceerd 2026-03-31

📖 4 min leestijd☕ Koffiepauze-leesvoer

CC BY 4.0

Oorspronkelijke auteurs: Aryan Garg, Yue Jiang, Antti Oulasvirta

Oorspronkelijk artikel gelicentieerd onder CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). ✨ Dit is een AI-gegenereerde uitleg van het onderstaande artikel. Het is niet geschreven of goedgekeurd door de auteurs. Raadpleeg het oorspronkelijke artikel voor technische nauwkeurigheid. Lees de volledige disclaimer

Stel je voor dat je een architect bent die een nieuw huis ontwerpt. Vroeger moest je eerst elke steen, elk raam en elke deur op papier tekenen voordat je ook maar iets kon bouwen. Dat kostte veel tijd en energie. Als je halverwege dacht: "Eigenlijk wil ik de keuken hier hebben in plaats van daar," moest je alles opnieuw tekenen.

ControlGUI is als een magische, slimme assistent die je helpt om in een paar seconden tientallen verschillende huisontwerpen te schetsen, zonder dat je alles perfect hoeft te specificeren.

Hier is hoe het werkt, vertaald in simpele taal:

1. Het Probleem: De "Vage Idee" Dilemma

Wanneer ontwerpers beginnen met een nieuwe app of website, hebben ze vaak nog geen duidelijk plan. Ze hebben misschien een vaag idee ("Ik wil een cocktailbar-website") of een ruwe schets van waar de knoppen moeten zitten. Bestaande tools zijn vaak te streng: ofwel vragen ze om perfecte tekeningen (wat je nog niet hebt), ofwel laten ze je alleen tekst typen, wat vaak resulteert in saaie of verkeerde ontwerpen.

2. De Oplossing: Een "Twee-in-Één" Magische Stempel

De onderzoekers hebben ControlGUI bedacht. Dit is een slim computerprogramma dat werkt als een kunstenaar met twee speciale brillen:

Bril 1 (De Bouwmeester): Deze kijkt naar je schets (wireframe). Als je tekent "hier een foto, daar een knop", zorgt deze bril ervoor dat de computer precies die plekken in het ontwerp gebruikt. Het houdt de structuur vast.
Bril 2 (De Regisseur): Deze kijkt naar de visuele stroom (visual flow). Dit is een beetje als een regisseur die zegt: "Kijk eerst naar de grote foto, dan naar de tekst, en pas daarna naar de knop." De computer zorgt ervoor dat het ontwerp zo is opgebouwd dat het oog van de bezoeker op die manier over het scherm glijdt.

Je kunt deze brillen alleen gebruiken, of allebei tegelijk. Je kunt ook gewoon tekst typen ("Maak een feestelijke cocktailsite") en de computer doet de rest.

3. Hoe het in de praktijk werkt

Stel je voor dat je een cocktailbar wilt promoten:

Alleen tekst: De computer maakt 10 verschillende, kleurrijke ontwerpen. Ze lijken allemaal op een cocktailbar, maar ze zien er heel anders uit.
Tekst + Schets: Je tekent een ruwe lijn waar de foto moet komen. De computer maakt nu 10 ontwerpen die precies die indeling volgen, maar met verschillende kleuren en stijlen.
Tekst + Schets + Stroom: Je geeft ook aan: "Kijk eerst naar de foto, dan naar de prijs, dan naar de knop." De computer maakt ontwerpen die niet alleen er goed uitzien, maar ook precies in die volgorde je aandacht trekken.

Het programma kan in minder dan twee minuten 100 verschillende ideeën genereren. Het is alsof je in plaats van één tekening te maken, een heel album vol met schetsen krijgt om uit te kiezen.

4. Waarom is dit zo cool?

Het is flexibel: Je bent niet verplicht om alles perfect te tekenen. Je kunt beginnen met een kladje en het programma vult de rest in.
Het is creatief: Mensen die het hebben getest, zeiden dat ze verrassende ideeën kregen die ze zelf nooit hadden bedacht. Het helpt om vastzittende gedachten te doorbreken.
Het is snel: In plaats van uren te tekenen, krijg je direct een galerij van opties om uit te kiezen.

5. De "Kleine Gebreken" (De Eerlijke Waarheid)

Het programma is nog niet perfect. Omdat het zo snel werkt, zijn de teksten in de ontwerpen soms onleesbaar (als een soort "lopende tekst" die eruitziet als onzin) en zijn de afbeeldingen soms wat wazig. De onderzoekers hebben een extra trucje bedacht (een "tekst-reparatietool") om de teksten later te verbeteren, maar voor nu is het vooral bedoeld om ideeën te verkennen, niet om direct een kant-en-klare website te maken.

Samenvattend

ControlGUI is als een super-snelle, creatieve partner die je helpt om in de vroege fase van een ontwerp te dromen. Je geeft het een paar aanwijzingen (een woordje, een schetsje, of een volgorde), en het schiet je een regenboog van verschillende ideeën tegemoet. Het helpt ontwerpers om niet vast te zitten in één idee, maar om snel te zien wat er allemaal mogelijk is.

Probleemstelling

In de vroege fasen van het ontwerpen van grafische gebruikersinterfaces (GUI) is het voor ontwerpers essentieel om een groot aantal alternatieven te verkennen om creatieve oplossingen te vinden en trade-offs te evalueren. Huidige tools voor dit doel hebben echter twee belangrijke tekortkomingen:

Beperkte creativiteit of over-specificatie: Bestaande systemen dwingen ontwerpers vaak om te vast te zitten aan initiële schetsen of vereisen gedetailleerde specificaties die in het vroege stadium nog niet beschikbaar zijn.
Gebrek aan multimodale controle: Bestaande generatieve AI-systemen vertrouwen bijna uitsluitend op tekstprompts. Dit slaat vaak de plank mis omdat ontwerpers ideeën vaak in gemengde modaliteiten denken (tekst, ruwe schetsen/wireframes, en visuele stromen van aandacht). Bovendien negeren deze systemen vaak de "visuele flow" (de volgorde waarin gebruikers elementen bekijken), wat cruciaal is voor de gebruikservaring, maar moeilijk te specificeren is zonder kostbare eye-tracking studies.

Er is dus een behoefte aan een systeem dat snel diverse, laagwaardige (low-fidelity) GUI-concepten kan genereren op basis van flexibele, gedeeltelijke inputs, waarbij zowel de structuur als de perceptuele aandacht van de gebruiker wordt meegenomen.

Methodologie

De auteurs stellen ControlGUI voor, een gecontroleerd diffusiemodel dat is gebouwd op Stable Diffusion. Het kernidee is het gebruik van een dual-adapter architectuur om zowel lokale structurele eigenschappen als globale perceptieve doelen tegelijkertijd te controleren.

1. Dataset:
Om dit model te trainen, hebben de auteurs een nieuw, grootschalig multimodaal dataset samengesteld van 72.500 GUI's (mobiele apps en webpagina's). Dit dataset bevat voor elke GUI:

Screenshots.
Wireframes met gelabelde GUI-elementen (bijv. knoppen, tekst, afbeeldingen).
Tekstuele beschrijvingen (gegenereerd door LLaVA-Next).
Voorspelde scanpaths (visuele flow) gegenereerd met EyeFormer, een state-of-the-art model voor oogbewegingsvoorspelling.

2. Architectuur (Dual-Adapter):
Het model gebruikt twee gespecialiseerde adapters die zijn gekoppeld aan de backbone van Stable Diffusion:

Wireframe Adapter (Lokale Controle): Gebaseerd op ControlNet. Deze adapter leert de plaatsing en het type van elementen te controleren op basis van input wireframes. Het zorgt ervoor dat de gegenereerde lay-out strikt overeenkomt met de gespecificeerde structuur.
Flow Adapter (Globale Controle): Deze adapter gebruikt cross-attention lagen om visuele flow (scanpaths) te integreren. Het encodeert de beoogde volgorde van aandacht (bijv. eerst knop A, dan tekst B) en stuurt het denoising-proces zo dat de gegenereerde interface de gebruiker in die specifieke volgorde leidt.

3. Training en Loss Functies:

Het model wordt getraind met Classifier-Free Guidance (CFG) om een balans te vinden tussen het volgen van de input en het behouden van diversiteit.
Voor de Flow Adapter wordt een extra Flow Consistency Loss ( $L_{flow}$ ) gebruikt. Omdat er geen echte ground-truth scanpaths zijn voor gegenereerde beelden, gebruikt het model EyeFormer om een "pseudo-ground truth" te genereren voor het gegenereerde beeld en vergelijkt dit met de invoer-flow via soft-DTW (een differentieerbare versie van Dynamic Time Warping).
De training verloopt in drie fasen: eerst de wireframe adapter, dan de flow adapter, en tot slot een gezamenlijke fijne afstemming (fine-tuning) met alle inputs.

4. Tekstverbetering:
Om het veelvoorkomende probleem van onleesbare tekst in gegenereerde GUI's op te lossen, implementeren de auteurs een pipeline die Vision-Language Models (LLaVA-Next) gebruikt om illegibele tekst te detecteren en te vervangen door contextueel passende tekst.

Belangrijkste Bijdragen

Multimodale Controle: ControlGUI is het eerste systeem dat tekst, wireframes en visuele flow (aandachtsvolgorde) flexibel combineert als input voor GUI-generatie.
Dual-Adapter Architectuur: Een innovatieve aanpak die lokale structuur (via wireframes) en globale perceptie (via flow) simultaan regelt binnen één diffusiemodel.
Grootschalig Dataset: De publicatie van een dataset van 72.500 GUI's met gealigneerde screenshots, wireframes, beschrijvingen en scanpaths, wat een belangrijke basis legt voor toekomstig onderzoek.
Systeem voor Vroege Ideatie: Een tool die ontwerpers in staat stelt om binnen minuten galerijen van diverse concepten te genereren zonder volledige specificaties.

Resultaten

De evaluatie omvatte kwantitatieve metingen, kwalitatieve vergelijkingen en een gebruikersstudie.

Kwantitatieve Vergelijking: ControlGUI presteerde significant beter dan baselines (ControlNet, IP-Adapter, Stitch, GPT-5) op perceptuele kwaliteit (ManIQA, MUSIQ) en semantische alignering met de prompt (CLIP-IQA). Het was het enige model dat ook flow-alignement kon meten en optimaliseren (via Soft-DTW).
Kwalitatieve Analyse: Het model produceerde realistische, visueel rijke GUI's die zowel de structuur van wireframes als de betekenis van tekstprompts respecteerden, terwijl het ook de beoogde visuele flow volgde. Baselines produceerden vaak abstracte blokken, te stijve templates of onrealistische lay-outs.
Gebruikersstudie: Een studie met 18 ontwerpers toonde aan dat:
- Diversiteit: De gegenereerde variaties werden als significant diverser ervaren dan bij tekst-only input.
- Controle & Alignering: Ontwerpers voelden meer controle en vonden dat de output beter aansloot bij hun intentie wanneer wireframes en flow werden gebruikt.
- Creativiteit: De Creative Support Index (CSI) was significant hoger, wat aangeeft dat het systeem als katalysator voor creativiteit werkt en helpt bij het verkennen van onverwachte richtingen.

Betekenis en Conclusie

ControlGUI markeert een belangrijke stap in het gebruik van generatieve AI voor het vroege ontwerpproces. Het lost het probleem op dat ontwerpers vaak vastlopen in te specifieke instructies of te vage prompts. Door multimodale input (tekst + schets + aandachtspatroon) te combineren, stelt het systeem ontwerpers in staat om snel een breed spectrum aan concepten te verkennen.

Hoewel er nog beperkingen zijn (zoals de resolutie van 256x256 en soms onleesbare tekst zonder de correctie-pipeline), bewijst het paper dat zelfs "onvolmaakte" low-fidelity generaties waardevol zijn voor divergent denken en het valideren van ideeën. De integratie van visuele flow als een controleerbare parameter is een uniek en cruciaal aspect, aangezien dit een menselijk perceptief aspect is dat tot nu toe grotendeels werd genegeerd in generatieve GUI-tools. Dit maakt ControlGUI een krachtig hulpmiddel voor het versnellen van het ideatieproces in UX/UI-design.