Framework di prototipazione automatizzata dell'interfaccia utente che integra i principi del design cognitivo e visivo per migliorare l'usabilità e la chiarezza del layout

Sommario

Questo studio presenta un framework automatizzato per la prototipazione di interfacce utente che integra principi di progettazione cognitiva, modellazione percettiva del colore e apprendimento profondo. Il sistema migliora l'accessibilità, la chiarezza del layout, l'armonia cromatica e la coerenza tra schermi, producendo progetti di interfaccia coerenti e centrati sull'utente.

Abstract

Una progettazione efficace dell'interfaccia utente (UI) richiede un equilibrio armonioso tra attrattiva visiva, usabilità cognitiva e coerenza del layout. Tuttavia, gli attuali approcci di generazione automatica dell'interfaccia utente si concentrano principalmente sull'aspetto visivo o sul rilevamento dei componenti, mancando di un framework unificato che integri principi cognitivi, intelligenza cromatica e ragionamento strutturale. Inoltre, i metodi esistenti soffrono di generalizzazione limitata del layout, scarsa interpretabilità, selezione cromatica statica e comportamento non coerente tra schermate diverse. In questo contesto, questo studio propone un framework automatizzato per la prototipazione dell'interfaccia utente che integra il rilevamento dei componenti basato sulla rete neurale convoluzionale region-based più veloce (Faster R-CNN) e la modellazione cromatica percettiva guidata dallo spazio colore uniforme CIECAM02 (CAM02-UCS), arricchita con principi di progettazione cognitiva e visiva. Il Faster R-CNN viene utilizzato per identificare i componenti dell'interfaccia utente e inferire strutture gerarchiche da dataset di interfacce su larga scala. Un modulo avanzato di generazione del colore analizza immagini del marchio o di riferimento per garantire temi cromatici percettivamente uniformi, armoniosi e conformi ai requisiti di usabilità, utilizzando CAM02-UCS. Questi risultati vengono ulteriormente ottimizzati attraverso regole di progettazione cognitiva, tra cui il raggruppamento secondo la psicologia della Gestalt, le leggi di Fitts e di Hick, la spaziatura basata sull'attenzione e la modellazione della gerarchia visiva, al fine di generare automaticamente layout dell'interfaccia utente raffinati e orientati al compito. Esperimenti condotti sui dataset RICO, ENRICO e Guo’s UI Color Datasets mostrano che il sistema proposto raggiunge un'accuratezza del 92,4% nel rilevamento dei componenti, migliora la chiarezza del layout e l'accuratezza dell'ordine di lettura del 18,7% e produce palette cromatiche giudicate dal 24,5% più armoniose dai progettisti rispetto ai metodi di base. Le valutazioni degli utenti indicano inoltre una riduzione del 31% del carico cognitivo percepito e un aumento del 28% della coerenza progettuale tra schermate. Questi risultati dimostrano che la combinazione della comprensione strutturale basata sul deep learning con la modellazione cromatica fondata sulle percezioni e i principi di progettazione cognitiva produce prototipi di interfacce utente altamente efficienti, esteticamente coerenti e facili da usare. Questo framework stabilisce un nuovo approccio end-to-end per la prototipazione automatizzata dell'interfaccia utente intelligente e centrata sull'essere umano.

Introduzione

Le interfacce grafiche per l'utente (GUI) svolgono un ruolo fondamentale di comunicazione tra esseri umani e sistemi informatici, influenzando in modo significativo l'usabilità, l'accessibilità e l'esperienza complessiva dell'utente (UX)^1,2. I sistemi software moderni si basano su interfacce intuitive e visivamente accattivanti per attrarre e mantenere gli utenti. Tradizionalmente, la progettazione dell'interfaccia utente prevede la creazione di layout grafici che successivamente vengono tradotti in codice front-end da parte degli ingegneri. Tuttavia, le differenze nei protocolli specifici delle piattaforme tra diversi sistemi operativi richiedono adattamenti ripetuti, aumentando la complessità e lo sforzo di sviluppo. La generazione automatica del codice per l'interfaccia utente si è quindi affermata come un'importante direzione di ricerca, riducendo lo sforzo manuale e migliorando l'efficienza dello sviluppo.

I primi approcci alla generazione automatica di interfacce utente combinavano tecniche tradizionali di elaborazione delle immagini con modelli di apprendimento profondo per la rilevazione e la classificazione delle regioni^3,4. Attualmente, le strategie predominanti per la generazione di codice GUI applicano tecniche di visione artificiale per analizzare le immagini delle interfacce utente e convertirle in rappresentazioni strutturate per il front-end^5,6,7. Mentre i metodi di elaborazione delle immagini si basano su caratteristiche progettate manualmente, gli approcci basati sull'apprendimento profondo estraggono rappresentazioni gerarchiche da dataset su larga scala. Di conseguenza, i ricercatori hanno esplorato approcci ibridi che combinano l'apprendimento profondo con tecniche specifiche del dominio di elaborazione delle immagini per migliorare robustezza e accuratezza.

Il colore è un altro fattore fondamentale nella progettazione dell'interfaccia utente, che influenza la percezione dell'utente, l'usabilità e l'estetica¹. Mantenere una coerenza tra il contenuto delle immagini e le combinazioni cromatiche dell'interfaccia utente risulta difficile quando gli input visivi variano per tonalità e contesto^8,9,10. Di conseguenza, una notevole quantità di ricerca si è concentrata sulla generazione automatica di palette cromatiche e sulla modellizzazione percettiva del colore. I metodi esistenti per la generazione di colori includono tecniche basate sullo spazio colore CIELAB¹¹. Altri approcci utilizzano algoritmi di clustering, come k-means, per estrarre i colori dominanti dalle immagini¹². Di recente, pertanto, si è assistito a un crescente ricorso ad approcci basati sui dati e sul machine learning per la modellizzazione del colore.

Parallelamente, gli approcci di deep learning hanno notevolmente migliorato il rilevamento dei componenti dell'interfaccia utente e la comprensione della disposizione. Le reti neurali hanno reso possibile un'analisi strutturale più accurata delle interfacce mobili¹³. Tuttavia, questi metodi si concentrano principalmente sull'accuratezza del rilevamento e spesso trascurano aspetti di livello superiore come l'usabilità cognitiva, la gerarchia della disposizione e l'efficienza delle interazioni. Sono stati inoltre proposti modelli generativi per la sintesi della disposizione dell'interfaccia utente^14,15, ma incontrano difficoltà nel mantenere la coerenza tra schermate diverse e nel fornire decisioni di progettazione interpretabili¹⁶. Altri approcci si focalizzano sulla similarità visiva o sulla qualità di rendering, ma mancano di un framework unificato che combini semantica dei componenti, armonia cromatica e vincoli di usabilità¹⁷. Il riconoscimento del testo è inoltre importante per comprendere il contenuto dell'interfaccia utente. Tecniche come le reti neurali ricorrenti convoluzionali (CRNN) consentono un riconoscimento accurato di modelli testuali complessi negli schermi dell'interfaccia^18,19,20.

Sono stati proposti diversi sistemi per generare codice UI da schizzi o immagini. Sketch2Code utilizza il rilevamento degli oggetti per convertire schizzi in rappresentazioni codificate^21,22, ma è sensibile alla qualità dell'immagine. REDRAW offre una pipeline automatizzata per la raccolta dati e l'addestramento del modello, combinando reti neurali convoluzionali e ricorrenti per generare rappresentazioni strutturate dell'interfaccia utente^23,24. Lavori successivi hanno introdotto metriche di valutazione migliorate per analizzare la qualità dell'interfaccia utente generata²⁵. Approcci più recenti includono modelli basati su diffusione e su trasformatori per la generazione di layout, come i trasformatori per layout basati su diffusione senza metodi di autoencoder, la generazione di layout GUI mediante grafi di disposizione GUI basati su trasformatori, e la generazione guidata da modelli linguistici di grandi dimensioni di layout per l'interfaccia utente^26,27,28. Un panorama comparativo di questi approcci è fornito nella Tabella 1.

Riferimenti e Metodo(i) Chiave	Obiettivo	Vantaggi	Svantaggi
Generazione automatica basata su immagini di temi cromatici per interfacce utente: estrazione dei colori predominanti + modellazione cromatica percettiva CAM02-UCS¹	Generare automaticamente temi cromatici per interfacce utente a partire da immagini di riferimento, ottimizzando armonia e usabilità.	Fondamento percettivo solido (CAM02-UCS); bilancia esplicitamente armonia e usabilità (contrasto e diversità); include un'implementazione basata sul web e una valutazione da parte di designer.	Si concentra esclusivamente sui colori/temi (non sul layout o sulla struttura dei componenti); basato su regole/euristiche piuttosto che su sintesi end-to-end appresa.
Unificazione della generazione di layout con un modello di diffusione disaccoppiato (LDGM)²⁵	Generazione unificata e flessibile di layout per scene grafiche e interfacce utente.	Diversità e controllabilità all'avanguardia nella generazione di layout; supporta la generazione condizionata e diversi tipi di attributi.	Gli output basati sulla diffusione possono presentare problemi di allineamento o dettagli fini nel layout se non vincolati; maggiore complessità del modello e costo computazionale durante l'inferenza.
Diffusion Layout Transformers senza metodi autoencoder: trasformatore + diffusione per la generazione di layout (senza autoencoder)²⁶	Migliorare fedeltà e allineamento nei benchmark di generazione di layout (metriche FID, allineamento e sovrapposizione).	Migliore cattura delle correlazioni semantiche tra oggetti adiacenti; prestazioni elevate nelle metriche FID e di allineamento.	Si concentra principalmente sulla geometria del layout (posizioni, dimensioni, categorie) piuttosto che sulla semantica dell'interfaccia utente.
Generazione di layout GUI con modelli basati su trasformatori a partire da grafi di disposizione GUI (GUI-AGs)²⁷	Creare layout GUI a partire da vincoli posizionali/grafici per assistere i designer.	Le rappresentazioni grafiche catturano i vincoli relazionali; il trasformatore consente una generazione flessibile condizionata ai vincoli.	Potrebbe richiedere grafi di vincoli espliciti da parte dei designer; attenzione limitata a metriche di colore e usabilità.
Generazione di layout UI con modelli linguistici di grandi dimensioni guidati da una grammatica UI: modelli linguistici di grandi dimensioni (LLMs) + grammatica UI gerarchica²⁸	Esplorare l'uso degli LLM per la generazione di layout e migliorare spiegabilità/controllo tramite rappresentazioni grammaticali.	Controllabilità ed esplicabilità a alto livello; possibilità di sfruttare l'apprendimento contestuale degli LLM (tipo GPT).	Lavoro in fase iniziale con validazione empirica limitata; progettazione della grammatica e robustezza attraverso diversi tipi di UI

Tabella 1: Confronto tra metodi esistenti di modellazione del colore nell'interfaccia utente e generazione di layout. La tabella riassume approcci rappresentativi per la progettazione dell'interfaccia utente, inclusa la generazione di temi cromatici, la generazione di layout basata su diffusione, metodi basati su trasformatori e la generazione di layout guidata da modelli linguistici di grandi dimensioni. Per ciascun metodo vengono presentati la tecnica sottostante, l'obiettivo, i vantaggi e i limiti, evidenziando le differenze in termini di modellazione percettiva, capacità di generazione del layout, controllabilità e considerazioni sull'usabilità.

Nonostante questi progressi, permane una limitazione fondamentale: nessun sistema esistente integra contemporaneamente rilevamento dei componenti, modellazione percettiva del colore, principi cognitivi di progettazione e coerenza del layout multipiattaforma all'interno di un unico framework end-to-end¹. Gli approcci attuali tipicamente ottimizzano solo uno o due aspetti—come rilevamento, layout o colore—senza considerarne le interdipendenze. Questa frammentazione evidenzia un'importante lacuna nella ricerca volta a sviluppare sistemi unificati di prototipazione automatica di interfacce utente centrati sull'essere umano. In particolare, principi cognitivi di progettazione come le leggi della Gestalt, la legge di Fitts e la legge di Hick sono spesso trattati a livello concettuale piuttosto che essere formalmente integrati nei modelli computazionali.

Per affrontare queste limitazioni, lo studio propone un framework automatizzato end-to-end per la prototipazione dell'interfaccia utente che integra il rilevamento dei componenti, la modellazione percettiva del colore e i principi di design cognitivo all'interno di un sistema unificato. Il framework è stato progettato per migliorare la qualità del layout, ridurre il carico cognitivo, ottimizzare l'armonia cromatica e aumentare l'usabilità complessiva. Questi miglioramenti sono stati validati attraverso esperimenti sui dataset RICO, ENRICO e Guo’s UI Color Datasets, dimostrando l'efficacia della combinazione di aspetti strutturali, percettivi e cognitivi all'interno di una singola pipeline automatizzata per la prototipazione dell'interfaccia utente. Si ipotizza che l'integrazione del rilevamento dei componenti basato sul deep learning, della modellazione percettiva del colore e dei principi di design cognitivo all'interno di un framework unificato consentirà un miglioramento significativo della qualità dei prototipi di interfaccia utente rispetto agli approcci esistenti. In particolare, H1 propone che il framework migliori la qualità del layout, inclusi allineamento, raggruppamento e ordine di lettura. H2 afferma che il framework riduce il carico cognitivo dell'utente. H3 suggerisce che la modellazione percettiva del colore migliora la coordinazione cromatica e l'armonia visiva. H4 afferma che l'usabilità complessiva e la qualità estetica dei prototipi di interfaccia utente risultano migliorate.

Protocollo

Questo studio utilizza set di dati disponibili pubblicamente e non prevede soggetti umani o animali.

Il framework proposto per la prototipazione automatizzata di interfacce utente integra una comprensione strutturale basata sul deep learning, una modellazione cromatica percettivamente uniforme e principi di design cognitivi per generare prototipi di interfaccia coerenti e centrati sull'utente. La metodologia inizia con un'architettura Faster R-CNN addestrata sui dataset RICO ed ENRICO per rilevare i componenti dell'interfaccia utente ed estrarre le loro relazioni gerarchiche, consentendo un'interpretazione accurata di layout schermo diversificati. I componenti rilevati vengono quindi elaborati da un modulo di intelligenza cromatica, che estrae suggerimenti cromatici basati su marchio o immagine, modella la similarità percettiva utilizzando CAM02-UCS e genera palette di colori armoniose, sensibili al contrasto e conformi ai requisiti di accessibilità. Successivamente, principi di design cognitivo — tra cui le leggi del raggruppamento di Gestalt, la legge di Fitts, la legge di Hick, la spaziatura basata sull'attenzione e i vincoli di gerarchia visiva — vengono applicati attraverso un motore di ottimizzazione cognitiva per perfezionare l'organizzazione spaziale e l'allineamento dei componenti. Infine, un livello di ragionamento sul layout integra vincoli strutturali, percettivi e cognitivi per generare prototipi di interfaccia utente coerenti su più schermate, bilanciando usabilità, estetica e chiarezza funzionale. Questa pipeline integrata garantisce coerenza percettiva, riduce il carico cognitivo e rispetta i principi di progettazione centrati sull'essere umano. L'intero flusso di lavoro del metodo proposto è illustrato nella Figura 1.

Figura 1. Architettura generale del framework proposto per la prototipazione automatica dell'interfaccia utente. Il diagramma illustra l'intera sequenza operativa, a partire da un'immagine iniziale dell'interfaccia utente. Il rilevamento dei componenti viene effettuato mediante Faster R-CNN per identificare gli elementi dell'interfaccia. I componenti rilevati vengono quindi elaborati attraverso un modello percettivo basato su CAM02-UCS per l'estrazione della gerarchia e del layout. Successivamente, viene applicata un'ottimizzazione cognitiva basata sui principi della Gestalt, sulla legge di Fitts, sulla legge di Hick e su aggiustamenti legati all'attenzione. Le frecce indicano il flusso dei dati tra i diversi moduli, che porta in output il prototipo finale dell'interfaccia utente. Cliccare qui per visualizzare una versione ingrandita di questa figura.

Panoramica del framework

Figura 1 illustra il flusso di lavoro end-to-end del framework proposto per la prototipazione automatica dell'interfaccia utente, che trasforma uno screenshot grezzo dell'interfaccia in un prototipo affinato dal punto di vista cognitivo. Il processo inizia con l'immagine iniziale dell'interfaccia, che viene inviata al modulo di rilevamento dei componenti basato su Faster R-CNN. Questo modulo identifica elementi dell'interfaccia come pulsanti, icone, campi di testo e contenitori, producendo i rispettivi riquadri di delimitazione e le etichette di classe. I componenti rilevati vengono quindi elaborati nella fase di estrazione della gerarchia e del layout. Sulla base delle relazioni spaziali e dei modelli strutturali, il sistema costruisce un albero gerarchico del layout che riflette il modo in cui gli utenti percepiscono naturalmente l'organizzazione dello schermo. Questa rappresentazione cattura il raggruppamento visivo e le dipendenze strutturali tra gli elementi dell'interfaccia. Il layout estratto viene successivamente affinato mediante un'ottimizzazione cognitiva che applica principi di progettazione centrati sull'essere umano. Tali principi includono il raggruppamento di Gestalt per il clustering visivo, la legge di Fitts per ottimizzare dimensioni e accessibilità delle aree sensibili al tocco, la legge di Hick per ridurre la complessità decisionale e una spaziatura basata sull'attenzione per migliorare la gerarchia visiva. Di conseguenza, il layout diventa più intuitivo, leggibile ed efficiente per l'interazione con l'utente. Infine, il layout ottimizzato viene combinato con un modello percettivo del colore per generare un prototipo di interfaccia coerente. L'interfaccia risultante è strutturalmente accurata, visivamente armoniosa e conforme alle aspettative umane in termini di usabilità.

Il framework è stato implementato utilizzando PyTorch 2.0 su Ubuntu 22.04. Gli esperimenti sono stati condotti su un sistema dotato di una GPU NVIDIA RTX 4090 (24 GB di VRAM). Il modello Faster R-CNN ha utilizzato un'architettura ResNet-50 pre-addestrata sul dataset ImageNet. L'addestramento è stato eseguito utilizzando l'ottimizzatore stochastic gradient descent (SGD) con un tasso di apprendimento di 0,001, una dimensione del batch di 16 e fino a 60 epoche. È stata applicata l'arresto anticipato per prevenire l'overfitting, utilizzando un insieme di validazione costituito dal 20% dei dati. Sebbene l'addestramento sia stato effettuato per un massimo di 60 epoche, la convergenza è stata generalmente raggiunta prima grazie all'arresto anticipato basato sulla perdita di validazione. I valori di momento e riduzione del peso sono stati impostati rispettivamente a 0,9 e 0,0005. L'aumento dei dati ha incluso normalizzazione, inversione orizzontale casuale e ritaglio e ridimensionamento casuali.

Preparazione del set di dati

Per supportare il framework proposto per la prototipazione automatizzata dell'interfaccia utente (UI), sono stati utilizzati tre dataset complementari: ENRICO²⁹, RICO³⁰ e il Guo’s UI Color Dataset¹. Il dataset RICO contiene 66.261 schermate UI Android raccolte da 9.700 applicazioni, offrendo una diversità su larga scala per il rilevamento dei componenti e l'estrazione dei layout gerarchici. ENRICO comprende 1.464 screenshot UI di alta qualità categorizzati manualmente in 20 modelli di design, consentendo una migliore generalizzazione nel ragionamento strutturale e nella modellazione della coerenza del layout. Il Guo’s UI Color Dataset è costituito da 128 immagini UI curate con temi cromatici annotati, utilizzate per la modellazione percettiva del colore e la valutazione delle palette. Tuttavia, a causa delle dimensioni relativamente ridotte, questo dataset potrebbe introdurre una certa variabilità nelle caratteristiche del layout. Per questo studio, è stato preparato un dataset combinato di 5.128 schermate per l'addestramento e la valutazione. In particolare, circa 4.000 immagini da RICO sono state utilizzate per addestrare il modello Faster R-CNN per il rilevamento dei componenti, 1.000 immagini da ENRICO per l'apprendimento dei modelli di layout e la modellazione della coerenza strutturale, e 128 immagini dal dataset di Guo per le attività di valutazione del colore. Tutte le immagini sono state normalizzate a una risoluzione di 480 × 800 pixel, convertite in uno spazio colore sRGB uniforme e ri-annotated con box delimitatori standardizzati e metadati gerarchici per garantire la compatibilità tra i dataset. Una panoramica dei dataset utilizzati in questo studio è riportata nella Tabella 2. Il dataset RICO supporta il rilevamento su larga scala dei componenti UI e l'analisi strutturale, mentre ENRICO migliora la capacità del modello di riconoscere modelli di layout e applicare coerenza tra schermate. Il Guo’s UI Color Dataset, sebbene più piccolo, svolge un ruolo fondamentale nella valutazione dell'armonia cromatica percettiva e della modellazione del contrasto. Nel complesso, questi dataset forniscono una base completa ed equilibrata per l'addestramento, la validazione e la valutazione del framework proposto per la prototipazione automatizzata dell'interfaccia utente.

Dataset	Numero totale di immagini disponibili	Immagini utilizzate nello studio	Scopo nel framework proposto
RICO Dataset30	66.261	4.000	Rilevamento dei componenti dell'interfaccia utente, estrazione del layout strutturale
ENRICO Dataset29	1.464	1.000	Apprendimento dei modelli di progettazione, modellazione della coerenza del layout
Guo’s UI Color Dataset1	128	128	Estrazione del tema cromatico, valutazione percettiva del colore
Totale combinato	67.853	5.128	Dataset completo per il rilevamento, il layout e la modellazione cromatica

Tabella 2: Sintesi dei dataset utilizzati nel framework proposto. La tabella presenta i dataset impiegati per il training e la valutazione, inclusi i dataset RICO, ENRICO e Guo’s UI Color. Vengono riportati il numero totale di immagini disponibili, il sottoinsieme utilizzato in questo studio e il ruolo specifico di ciascun dataset nel rilevamento dei componenti, nella modellazione del layout e nell'analisi percettiva del colore all'interno del framework proposto.

È stata adottata una strategia di campionamento stratificato per preservare la diversità nei componenti dell'interfaccia utente, nelle strutture di layout e nelle distribuzioni dei colori nei dataset RICO, ENRICO e Guo. Il dataset è stato suddiviso in sottoinsiemi di training (70%), validazione (15%) e test (15%) utilizzando un campionamento stratificato. Le immagini sono state normalizzate utilizzando la media (0.485, 0.456 e 0.406) e la deviazione standard (0.229, 0.224 e 0.225). L'aumento dei dati ha incluso il ribaltamento orizzontale casuale (probabilità = 0.5) e il ritaglio casuale (intervallo di scala: 0.8–1.0), seguito da ridimensionamento a 224 × 224 pixel applicato durante la fase di training.

Annotazione dei componenti e preelaborazione

I dataset RICO, ENRICO e Guo’s UI Color supportano congiuntamente i tre componenti funzionali principali del framework proposto per la prototipazione automatica di interfacce utente: rilevamento dei componenti, modellazione del layout e ottimizzazione percettiva dei colori. Il dataset RICO contiene una raccolta su larga scala di oltre 66.000 schermate di interfacce utente per dispositivi mobili ed è utilizzato principalmente per addestrare il modulo di rilevamento dei componenti. La sua diversità permette al modello Faster R-CNN di apprendere rappresentazioni robuste di elementi comuni delle interfacce utente, come pulsanti, immagini e campi di testo, in un'ampia varietà di applicazioni. Ciò garantisce un rilevamento e una localizzazione accurati dei componenti dell'interfaccia utente in condizioni di progettazione variabili. Il dataset ENRICO fornisce schermate di interfacce utente di alta qualità, etichettate per schema, per l'apprendimento delle relazioni strutturali e dei modelli di layout. Permette al sistema di comprendere le relazioni tra i componenti, l'organizzazione gerarchica e i modelli di progettazione comuni. Questo dataset svolge un ruolo fondamentale nella modellazione delle strutture di layout e nel garantire la coerenza tra più schermate, consentendo al framework di generare layout in linea con le convenzioni di progettazione consolidate. Al contrario, il dataset Guo’s UI Color è specificamente utilizzato per la modellazione percettiva e cognitiva dei colori. A differenza di RICO ed ENRICO, che si concentrano sugli aspetti strutturali, questo dataset contiene immagini di interfacce utente selezionate con temi cromatici annotati. Tali annotazioni vengono utilizzate per addestrare i moduli di estrazione dei colori e di valutazione dell'armonia cromatica. Mappando le relazioni cromatiche in spazi colore percettivi come CAM02-UCS, il framework impara a generare palette di colori che bilanciano contrasto, accessibilità e coerenza estetica. Nel complesso, questi dataset formano una pipeline integrata: RICO supporta il rilevamento dei componenti, ENRICO consente la comprensione dei modelli di layout e la coerenza strutturale, mentre il dataset di Guo facilita l'ottimizzazione percettiva dei colori. Questa integrazione assicura che i prototipi di interfaccia utente generati siano strutturalmente accurati, visivamente armoniosi e ottimizzati dal punto di vista cognitivo.

La normalizzazione è stata eseguita utilizzando una media di [0.485, 0.456, 0.406] e una deviazione standard di [0.229, 0.224, 0.225]. Sono state applicate tecniche di aumento dei dati, tra cui ritaglio casuale, inversione orizzontale e rotazione, per migliorare la generalizzazione del modello. Inoltre, i valori dei pixel sono stati ridimensionati all'intervallo [0, 1] e tutte le immagini sono state ridimensionate a una risoluzione di 480 × 800 pixel per garantire coerenza tra i diversi set di dati. Le immagini ridimensionate a 224 × 224 pixel vengono utilizzate per l'aumento durante l'addestramento, mentre la risoluzione originale di 480 × 800 pixel viene mantenuta per l'analisi del layout. Le bounding box sono state aggiustate per filtrare annotazioni irrilevanti mediante soglie predefinite. Per ottenere uniformità tra i set di dati, tutti gli elementi dell'interfaccia utente sono stati annotati manualmente utilizzando lo strumento di annotazione LabelImg. Prima dell'annotazione è stato stabilito uno schema predefinito per classificare gli elementi dell'interfaccia utente in categorie come pulsante, testo, immagine, icona e contenitore. Per la rappresentazione delle bounding box è stato applicato un sistema di coordinate uniforme, e sono state costruite informazioni gerarchiche basate sulle relazioni spaziali tra gli elementi e le loro associazioni padre-figlio all'interno dell'albero del layout. Inoltre, sono state stabilite linee guida per garantire un'annotazione coerente degli elementi, una corretta gestione dei componenti sovrapposti e il rispetto di soglie minime di dimensione nei set di dati RICO, ENRICO e Guo.

Formulazioni matematiche dettagliate per l'addestramento del rilevamento dei componenti e l'estrazione dei modelli di layout sono fornite nel File Supplementare 1.

Il modello Faster R-CNN è stato addestrato utilizzando SGD con un'inerzia di 0,9 e un decadimento del peso di 0,0005. Il tasso di apprendimento iniziale è stato impostato a 0,001 e aggiustato mediante una politica di decadimento a passi basata sulle prestazioni di validazione. L'addestramento è stato eseguito per un massimo di 60 epoche con una dimensione del batch di 16. È stata applicata l'arresto anticipato per prevenire l'overfitting, utilizzando un insieme di validazione costituito dal 20% dei dati di addestramento.

La funzione di mappatura f(.) prende come input gli elementi dell'interfaccia utente rilevati e produce in output una rappresentazione gerarchica del layout. Calcola le relazioni di adiacenza tra gli elementi dell'interfaccia utente in base a criteri di distanza spaziale e allineamento, e costruisce una matrice di adiacenza per rappresentare tali relazioni. Successivamente, viene applicato un algoritmo di clustering, come DBSCAN, per raggruppare i componenti correlati. Infine, gli elementi raggruppati vengono organizzati in strutture gerarchiche in base alle relazioni padre-figlio, formando una rappresentazione strutturata del layout.

Formulazioni dettagliate per la modellazione dell'armonia cromatica e per l'obiettivo unificato di ottimizzazione sono fornite nel Supplementary File 1.

Questa funzione obiettivo formalizza matematicamente l'integrazione del rilevamento strutturale, del ragionamento sul layout e della modellazione percettiva del colore, garantendo che tutti i componenti del framework contribuiscano congiuntamente alla generazione di prototipi di interfaccia utente coerenti e centrati sull'utente. L'ottimizzazione viene eseguita in modo modulare per ciascun componente del framework. Viene utilizzato SGD per l'addestramento del modulo di rilevamento dei componenti, mentre l'ottimizzatore Adam viene impiegato durante l'ottimizzazione congiunta dell'obiettivo unificato. La funzione obiettivo combinata viene utilizzata per guidare le prestazioni complessive del sistema. Per le fasi di ottimizzazione congiunta, la funzione obiettivo viene minimizzata utilizzando l'ottimizzatore Adam con un tasso di apprendimento di 0,001 e una dimensione del batch di 16. L'addestramento viene eseguito per un massimo di 60 epoche, applicando l'arresto anticipato quando la variazione della perdita sulla validazione è inferiore a 10⁻⁴ per cinque epoche consecutive.

Rilevamento dei componenti mediante Faster R-CNN

Il framework proposto utilizza Faster R-CNN per il rilevamento automatico di componenti dell'interfaccia utente (UI), inclusi pulsanti, icone, campi di testo, immagini e contenitori. Faster R-CNN è particolarmente adatto a questo compito poiché combina un'elevata accuratezza nel rilevamento degli oggetti con una generazione efficiente di proposte di regione, elemento essenziale per gestire layout complessi dell'interfaccia utente contenenti elementi fitti. Il modello utilizza un'architettura ResNet-50 pre-addestrata sul dataset ImageNet per estrarre mappe di caratteristiche convoluzionali da ogni schermata dell'interfaccia utente. Durante l'addestramento, i primi strati sono stati congelati per mantenere caratteristiche visive generali, mentre i livelli superiori (conv4_x e conv5_x) sono stati affinati per il rilevamento specifico di componenti dell'interfaccia utente. Queste mappe di caratteristiche catturano strutture visive, bordi, trame e contorni dei componenti. Durante il rilevamento, la rete di proposta di regione (RPN) identifica regioni candidate (ancore) che probabilmente contengono componenti dell'interfaccia utente. Le ancore sono definite utilizzando diverse scale (128, 256 e 512) e rapporti d'aspetto (1:1, 1:2 e 2:1) per adattarsi a elementi dell'interfaccia utente di dimensioni variabili. Durante l'addestramento, le ancore con un valore di intersezione rispetto all'unione (IoU) superiore a 0,7 rispetto ai riquadri reali sono etichettate come positive, mentre quelle con un valore di IoU inferiore a 0,3 sono etichettate come negative; le ancore con valori intermedi di IoU vengono ignorate. A ciascuna ancora viene assegnata una probabilità che indica la presenza di un componente. Successivamente viene applicata la soppressione non massima (NMS) per rimuovere proposte ridondanti e sovrapposte, garantendo una localizzazione efficiente di elementi significativi dell'interfaccia utente anche in interfacce affollate. Una volta generate le regioni candidate, ogni proposta viene classificata in categorie predefinite di componenti e vengono affinate le coordinate del suo riquadro delimitatore. Un'operazione di allineamento della regione di interesse (ROI) estrae rappresentazioni di caratteristiche di dimensione fissa per ciascuna proposta, che vengono poi elaborate da strati completamente connessi per la classificazione e la regressione. Il ramo di classificazione produce probabilità di classe, mentre il ramo di regressione predice coordinate precise del riquadro delimitatore. L'intero modello Faster R-CNN viene addestrato end-to-end ottimizzando una funzione di perdita congiunta che combina la perdita della RPN con la perdita finale di rilevamento. Ciò consente al sistema non solo di riconoscere con precisione i componenti dell'interfaccia utente, ma anche di localizzarli accuratamente all'interno di strutture d'interfaccia diverse. Una descrizione dettagliata del rilevamento dei componenti con Faster R-CNN, inclusa la fase della RPN, la classificazione delle ROI, l'affinamento del riquadro delimitatore e l'obiettivo finale di ottimizzazione, è fornita in Supplementary File 1.

Algoritmo S1 fornisce il flusso di lavoro dettagliato per il rilevamento dei componenti ed estrazione strutturale (File Supplementare 1). Viene descritto il processo completo di rilevamento automatico dei componenti dell'interfaccia utente ed estrazione strutturale a partire da un'immagine grezza dello schermo. L'immagine in ingresso viene inizialmente preelaborata e inviata a un'architettura CNN per estrarre caratteristiche visive profonde. Queste caratteristiche sono utilizzate dall'RPN per generare box delimitatori candidati, che vengono successivamente affinati mediante classificazione e regressione. La NMS elimina i rilevamenti ridondanti per garantire una localizzazione accurata. Dopo il rilevamento, i componenti vengono raggruppati in base alla vicinanza spaziale utilizzando il clustering spaziale basato sulla densità con rilevamento del rumore (DBSCAN). Questo passaggio di clustering consente la costruzione di un albero gerarchico dell'interfaccia utente che cattura le relazioni padre-figlio e i raggruppamenti logici tra i componenti. Questa rappresentazione gerarchica costituisce la base per l'analisi successiva del layout e la comprensione dell'interfaccia utente. Figura 2 illustra il processo di rilevamento dei componenti mediante Faster R-CNN su uno schermo di interfaccia utente mobile. L'interfaccia in ingresso (a sinistra) contiene elementi dell'interfaccia utente come pulsanti e blocchi di testo, che vengono automaticamente racchiusi all'interno di box delimitatori. Queste regioni rilevate vengono poi classificate in categorie di componenti (ad esempio, Pulsante e Testo), come indicato dai collegamenti etichettati. Il modulo di rilevamento Faster R-CNN (a destra) affina le coordinate dei box delimitatori, assegna etichette semantiche ed emette informazioni strutturate a livello di componente. Questo passaggio costituisce una base fondamentale per i processi successivi, inclusi l'estrazione del layout, l'ottimizzazione cognitiva e la generazione di prototipi di interfaccia utente, fornendo rappresentazioni accurate e semanticamente significative dei componenti dell'interfaccia utente.

Figura 2. Rilevamento dei componenti degli elementi dell'interfaccia utente mediante Faster R-CNN. La figura illustra il rilevamento dei componenti dell'interfaccia utente a partire da una schermata dell'interfaccia in ingresso. Le regioni di interesse vengono identificate mediante box delimitatori, e gli elementi come pulsanti e campi di testo vengono classificati utilizzando Faster R-CNN. Le frecce indicano l'associazione dei componenti rilevati alle rispettive etichette semantiche. Cliccare qui per visualizzare una versione ingrandita di questa figura.

Estrazione del modello di layout e modellizzazione gerarchica

Dopo il rilevamento dei componenti mediante Faster R-CNN, ogni elemento dell'interfaccia utente è rappresentato da un riquadro delimitatore. Tuttavia, questi riquadri da soli non indicano come gli elementi siano organizzati strutturalmente all'interno dell'interfaccia, ad esempio quali elementi appartengano a intestazioni, barre di navigazione o aree di contenuto raggruppate. Per superare questa limitazione, i componenti rilevati vengono trasformati in un albero logico dell'interfaccia utente, in cui ciascun componente è considerato un nodo e i componenti correlati funzionalmente o visivamente vengono raggruppati sotto nodi genitore comuni. Per identificare gruppi di layout significativi, vengono applicate tecniche di clustering come DBSCAN o il clustering gerarchico agglomerativo. Questi metodi analizzano la vicinanza spaziale e i modelli di allineamento tra i componenti per individuare le relazioni tra gli elementi dell'interfaccia utente. In modo analogo alle pratiche progettuali umane, il sistema impara a riconoscere modelli strutturali comuni come intestazioni, piè di pagina, griglie e blocchi di contenuto. Una volta stabilito il raggruppamento, vengono analizzate ulteriori proprietà strutturali, tra cui allineamento, organizzazione a griglia e ordine di lettura, al fine di costruire una rappresentazione completa del layout. Ad esempio, componenti allineati in colonne di uguale larghezza potrebbero indicare un layout basato su schede, mentre elementi disposti in verticale potrebbero indicare un'interfaccia basata su moduli o su un flusso di contenuti. Integrando clustering, ragionamento spaziale e regole di allineamento, il framework costruisce un albero gerarchico dell'interfaccia utente che cattura sia il raggruppamento visivo sia le relazioni funzionali. Questa rappresentazione gerarchica costituisce la base per il successivo affinamento del layout e per la modellazione della coerenza tra più schermate, consentendo al sistema di generare progetti di interfacce strutturati, coerenti e centrati sull'utente.

Formulazioni dettagliate per la distanza spaziale e la similarità di allineamento sono fornite nel File Supplementare 1.

Raggruppamento per raggruppamento del layout (DBSCAN)

Per identificare i gruppi di layout, viene applicato DBSCAN. DBSCAN utilizza due parametri: (1) ε = distanza massima tra componenti adiacenti e (2) = numero minimo di componenti necessari per formare un cluster. Per questa analisi, i parametri di DBSCAN sono stati selezionati empiricamente in base alla risoluzione normalizzata dell'interfaccia utente (480 × 800 pixel). Il parametro della distanza del vicinato è stato impostato a ε = 50 pixel per rilevare la prossimità spaziale tra componenti dell'interfaccia utente adiacenti. Il numero minimo di punti richiesto per formare un cluster è stato impostato a MinPts = 3 per evitare la formazione di gruppi insignificanti o spurii di componenti dell'interfaccia utente.

La formulazione dettagliata della costruzione dell'albero logico dell'interfaccia utente è fornita nel File Supplementare 1.

Modellizzazione percettiva del colore con CAM02-UCS

La modellazione percettiva del colore garantisce che i colori utilizzati nell'interfaccia utente generata siano armoniosi, leggibili ed efficienti dal punto di vista cognitivo. I colori dominanti vengono estratti da fonti di input come immagini di interfacce utente, mediante tecniche di clustering. In particolare, si applica il clustering K-means con inizializzazione K-means++ per 300 iterazioni al fine di ottenere palette rappresentative. Tuttavia, lo spazio colore RGB non riflette accuratamente la percezione visiva umana, il che significa che colori numericamente simili possono apparire percettivamente diversi. Per superare questa limitazione, tutti i colori estratti vengono trasformati nello spazio CAM02-UCS, che è percettivamente uniforme. In questo spazio, distanze uguali corrispondono a differenze cromatiche percepite uguali, rendendolo adatto per modellare armonia e contrasto cromatico. Una volta mappati nello spazio CAM02-UCS, le differenze percettive tra i colori vengono calcolate mediante la distanza euclidea, consentendo al sistema di quantificare contrasto, armonia e variazione tra i colori. I colori troppo simili vengono separati per migliorare la leggibilità, mentre i colori con contrasto eccessivo vengono moderati per evitare disagio visivo. La palette generata rispetta inoltre standard di accessibilità come WCAG AA e AAA, garantendo un contrasto sufficiente tra elementi di primo piano e di sfondo. Inoltre, l'armonia cromatica viene applicata vincolando le relazioni all'interno della palette a schemi complementari, analoghi o triadici, a seconda del tema dell'interfaccia utente previsto. Ciò assicura che la palette risultante sia non solo esteticamente gradevole, ma anche funzionalmente accessibile e ottimizzata dal punto di vista cognitivo. Per affinare ulteriormente la palette, viene applicato un processo di ottimizzazione soggetto a vincoli di similarità percettiva, contrasto, armonia e coerenza del brand. Viene selezionato un colore primario (ad esempio, proveniente dall'identità del brand) e i colori secondari vengono regolati in termini di luminanza e croma per preservare la gerarchia visiva. Un meccanismo di valutazione basato su regole analizza le palette candidate in base alle distanze percettive e alle metriche di accessibilità, minimizzando lo sforzo cognitivo pur mantenendo un equilibrio estetico. Di conseguenza, il framework produce schemi cromatici per interfacce utente caratterizzati da coerenza, leggibilità e consistenza percettiva di livello professionale.

Espressioni matematiche dettagliate per la modellizzazione percettiva del colore basata su CAM02-UCS sono fornite nel File Supplementare 1.

Algoritmo S2 (File Supplementare 1) descrive il flusso di lavoro per l'estrazione e l'ottimizzazione dei colori basato sullo spazio CAM02-UCS, vincolato da criteri di armonia e accessibilità. Inizialmente, i colori dominanti vengono estratti dall'immagine in ingresso e trasformati nello spazio CAM02-UCS per garantire che le differenze cromatiche corrispondano alla percezione umana. Successivamente, vengono calcolate le distanze percettive tra i colori e vincolate entro limiti predeterminati per mantenere chiarezza e armonia. In seguito, l'accessibilità è garantita valutando i rapporti di contrasto luminoso secondo le linee guida WCAG. La tavolozza finale si ottiene ottimizzando una funzione obiettivo combinata che bilancia la distribuzione percettiva, i requisiti di contrasto e i vincoli di armonia cromatica. Ciò assicura che le combinazioni di colori per l'interfaccia utente generate siano non solo visivamente accattivanti, ma anche leggibili, accessibili e percettivamente coerenti.

Ottimizzazione della progettazione cognitiva

L'ottimizzazione del design cognitivo garantisce che i prototipi di interfaccia utente generati automaticamente siano non solo visivamente coerenti, ma anche facili da comprendere e da utilizzare. Questo modulo integra principi fondamentali del design cognitivo, tra cui i principi della Gestalt, la legge di Fitts e la legge di Hick, per guidare il posizionamento, il raggruppamento e gli spaziature dei componenti dell'interfaccia utente. Le formulazioni matematiche dettagliate relative all'ottimizzazione del design cognitivo sono fornite nel Supplementary File 1.

Obiettivo integrato di ottimizzazione cognitiva

L'espressione matematica per l'obiettivo integrato di ottimizzazione cognitiva è fornita nel File Supplementare 1. I coefficienti che rappresentano l'importanza del raggruppamento visivo, dell'efficienza dell'interazione e della complessità decisionale sono indicati rispettivamente con alfa, beta e gamma. In questo studio, i valori di alfa, beta e gamma sono stati determinati empiricamente utilizzando il dataset di validazione. Per l'esperimento in corso, i coefficienti sono stati impostati come segue: α = 0.5, β = 0.3 e γ = 0.2. Questa configurazione garantisce un equilibrio efficace tra raggruppamento visivo, efficienza dell'interazione e semplicità decisionale.

Coesione tra più schermi e generazione dell'interfaccia utente

La modellazione della coerenza multischermo garantisce che diversi schermi all'interno di un'applicazione condividano un'identità visiva, una struttura di layout e uno schema di interazione coerenti. Mentre gli utenti navigano tra gli schermi, sviluppano aspettative riguardo al posizionamento degli elementi, al tipo di carattere, agli spazi e alla gerarchia visiva. Per soddisfare queste aspettative, il sistema analizza schemi interschermo utilizzando modelli derivati dai dataset RICO ed ENRICO. Questi modelli catturano strutture comuni dell'interfaccia utente, come layout home–dettaglio, schemi lista–dettaglio, moduli a più passaggi e flussi di dashboard. Analizzando il posizionamento dei componenti e il comportamento di raggruppamento, il sistema costruisce un profilo strutturale interschermo che identifica quali elementi dovrebbero rimanere coerenti e quali possono variare. Una volta identificati gli schemi strutturali, il framework impone coerenza nelle scale tipografiche, nei rapporti di spaziatura, nei layout a griglia e negli ancoraggi di navigazione. Ad esempio, le barre dell'intestazione mantengono un'altezza costante, i pulsanti principali conservano dimensioni e allineamento uniformi, e i blocchi di contenuto seguono un ordine visivo prevedibile. Ciò viene ottenuto attraverso un processo di regolarizzazione del layout che valuta ogni schermo rispetto a vincoli strutturali globali. Se uno schermo si discosta dai modelli appresi—ad esempio per padding non coerente o titoli non allineati—il sistema regola automaticamente il layout per ripristinare la coerenza. Queste correzioni contribuiscono a garantire un'esperienza utente fluida e a ridurre i costi cognitivi legati al passaggio tra schermi. Il framework analizza inoltre il grafo di navigazione tra gli schermi per mantenere la coerenza nel flusso di interazione. Schemi di navigazione comuni, inclusi passaggi in avanti/indietro, navigazione a schede e flussi di lavoro a più passaggi, vengono identificati e applicati. Ogni transizione viene convalidata per assicurare l'allineamento con il modello mentale dell'utente, migliorando così l'usabilità e riducendo la confusione. Di conseguenza, il modello di coerenza multischermo riduce il rumore visivo, aumenta la familiarità e promuove un'esperienza di interazione unificata.

Formulazioni matematiche dettagliate per la coerenza tra più schermate e la generazione dell'interfaccia utente sono fornite nel File Supplementare 1.

Infine, il motore di rendering genera output visivi in formati come wireframe SVG, prototipi HTML/CSS o mockup dell'interfaccia utente basati su pixel. Le schermate dell'interfaccia utente risultanti presentano un ordine di lettura corretto, relazioni cromatiche armoniose, un allineamento preciso alla griglia e una gerarchia visiva coerente tra più schermate.

Algoritmo S3 fornisce l'ottimizzazione del layout cognitivo-visivo e il flusso di lavoro per la coerenza tra più schermi (File Supplementare 1). L'Algoritmo S3 descrive il processo integrato di ottimizzazione cognitiva e strutturale utilizzato per generare layout di interfaccia utente intuitivi. Esso combina il raggruppamento percettivo (principi della Gestalt), l'efficienza dell'interazione (legge di Fitts) e la semplicità decisionale (legge di Hick) all'interno di un framework unificato di ottimizzazione. Inizialmente, vengono valutate le relazioni spaziali tra i componenti per definire i raggruppamenti percettivi. Successivamente, l'efficienza dell'interazione viene ottimizzata regolando dimensioni e posizionamento dei componenti, mentre la complessità decisionale è controllata limitando il numero di scelte presentate all'utente. Inoltre, l'algoritmo garantisce coerenza tra più schermi allineando ciascuno schermo con modelli di layout appresi, assicurando uniformità nella tipografia, nei margini e nell'organizzazione strutturale. Una funzione di ottimizzazione multi-obiettivo perfeziona quindi il layout bilanciando allineamento, spaziatura e costo cognitivo, producendo un'interfaccia sia visivamente coerente sia cognitivamente efficiente. Nel complesso, questo algoritmo assicura che i layout multiscreen generati mantengano elevati livelli di coerenza visiva, usabilità e chiarezza percettiva.

Risultati

Il framework proposto per la prototipazione automatica di interfacce utente è stato valutato utilizzando un dataset integrato composto da 5.128 schermate UI provenienti da tre fonti: 4.000 immagini RICO, 1.000 schermate ENRICO e 128 campioni di interfacce utente con annotazioni cromatiche provenienti dal Guo’s UI Color Dataset. Questo dataset combinato fornisce un termine di paragone ben bilanciato per valutare l'accuratezza nel rilevamento dei componenti, la chiarezza strutturale del layout, la coerenza tra più schermate e l'armonia cromatica percettiva.

I risultati sperimentali dimostrano che il modello di rilevamento basato su Faster R-CNN raggiunge un'accuratezza del 92,4% nel rilevamento dei componenti e generalizza efficacemente attraverso diversi stili di interfacce utente mobili. Inoltre, l'inclusione di annotazioni di pattern ENRICO migliora il ragionamento sul layout, determinando un aumento del 18,7% nella chiarezza del layout e un migliore mantenimento dell'ordine di lettura. Negli esperimenti di valutazione del colore, il modulo di modellazione cromatica basato su CAM02-UCS genera palette che risultano il 24,5% più armoniose secondo le valutazioni di designer, raggiungendo anche una maggiore uniformità percettiva rispetto ai metodi tradizionali di generazione delle palette basati su RGB e LAB. Inoltre, la modellazione della coerenza multiscreen ottiene un miglioramento del 28% nell'allineamento tra schermate e nella coerenza tipografica. Studi con utenti che coinvolgono 30 partecipanti mostrano una riduzione del 31% del carico cognitivo percepito durante l'interazione con prototipi prodotti dal sistema proposto. Nel complesso, questi risultati indicano che la combinazione di rilevamento dei componenti, modellazione percettiva del colore e ottimizzazione cognitiva produce prototipi di interfaccia utente che non sono solo strutturalmente accurati, ma anche visivamente coerenti ed efficienti dal punto di vista cognitivo. Tabella 3 evidenzia l'ambiente di simulazione e le impostazioni tecniche utilizzate per valutare il framework proposto di prototipazione dell'interfaccia utente. Le procedure di addestramento intensivo dal punto di vista computazionale dei moduli Faster R-CNN e di coerenza del layout sono state supportate da una GPU NVIDIA RTX 4090 ad alte prestazioni. Tutti gli esperimenti sono stati condotti in un ambiente Ubuntu 22.04 utilizzando PyTorch 2.0 per l'implementazione dell'apprendimento profondo.

Parametro	Configurazione
Hardware	NVIDIA RTX 4090 GPU (24 GB), processore Intel i9, 64 GB di RAM
Sistema operativo	Ubuntu 22.04 LTS
Framework di deep learning	PyTorch 2.0
Backbone Faster R-CNN	ResNet-50 + FPN
Risoluzione dell'immagine	480 × 800 (normalizzata su tutti i dataset)
Dimensione del batch di addestramento	8
Ottimizzatore	AdamW (LR = 1e−4, Weight Decay = 0.01)
Epoche	40
Spazio cromatico di modellazione	CAM02-UCS
Clustering per l'estrazione della tavolozza	K-means (k = 5)
Clustering del layout	DBSCAN (ε = 20, min_samples = 3)

Tabella 3: Parametri di implementazione e configurazione sperimentale del framework proposto. La tabella riassume l'hardware e il setup software utilizzati per l'addestramento e la valutazione del modello, inclusi le risorse computazionali, il sistema operativo, il framework di apprendimento profondo, l'architettura del modello, la risoluzione delle immagini, i parametri di addestramento, la strategia di ottimizzazione, lo spazio di modellazione del colore e i metodi di clustering impiegati per l'estrazione della tavolozza e il raggruppamento del layout.

L'architettura Faster R-CNN utilizza un backbone ResNet-50 con una FPN per rilevare un'ampia gamma di componenti UI a granularità fine. Tutte le immagini UI vengono ridimensionate uniformemente a 480 × 800 pixel prima dell'elaborazione. L'addestramento viene eseguito per 60 epoche utilizzando l'ottimizzatore SGD, con una dimensione del batch pari a 16 per garantire una convergenza stabile. Il generatore della tavolozza dei colori utilizza CAM02-UCS con clustering K-means, mentre DBSCAN viene impiegato per il clustering del layout strutturale. Queste impostazioni tecniche assicurano che i risultati UI generati siano riproducibili, stabili e ad alta fedeltà. Per fornire una valutazione completa del framework proposto per la prototipazione automatizzata di interfacce utente, vengono utilizzate quattro categorie di metriche di valutazione:

i) Prestazioni nel rilevamento dei componenti, analizzate mediante precisione, richiamo, punteggio F1, intersezione rispetto all'unione (IoU) e precisione media media (mAP), che quantificano l'accuratezza del modello Faster R-CNN nell'identificare i componenti dell'interfaccia utente nei dataset RICO ed ENRICO;

ii) Chiarezza del layout e coerenza strutturale, misurate tramite errore di allineamento (AE), accuratezza del raggruppamento, correttezza dell'ordine di lettura e punteggi di coerenza tra schermate derivati da vincoli di modelli di progettazione;

iii) Qualità cromatica percettiva, valutata mediante la distanza percettiva CAM02-UCS (ΔE_UCS), i rapporti di contrasto WCAG 2.1, l'indice di diversità e i punteggi di armonia cromatica ispirati al framework di valutazione dei colori per interfacce utente di Guo;

iv) Metriche di efficienza cognitiva centrate sull'utente, incluse il carico cognitivo misurato tramite l'indice di carico di lavoro NASA (NASA-TLX), le valutazioni di coerenza estetica e l'efficienza nel completamento dei compiti.

Queste metriche consentono di valutare il framework non solo in termini di accuratezza di rilevamento, ma anche in termini di armonia percettiva, qualità di usabilità ed esperienza cognitiva.

Metriche di rilevamento dei componenti

La precisione descrive l'esattezza del modello nel predire i componenti dell'interfaccia utente senza generare falsi positivi. Un'elevata precisione implica che la maggior parte dei riquadri delimitatori predetti corrisponda a elementi dell'interfaccia utente validi. Il richiamo misura la capacità del modello di identificare tutti i componenti dell'interfaccia utente rilevanti in uno schermo. Un alto richiamo indica che il modello riesce a rilevare la maggior parte dei componenti reali. Il punteggio F1, definito come la media armonica tra precisione e richiamo, fornisce una valutazione bilanciata ed è particolarmente utile quando i componenti dell'interfaccia utente sono distribuiti in modo non uniforme tra i dataset.

La metrica IoU misura quanto bene il riquadro delimitatore previsto si sovrappone al riquadro delimitatore reale. Nei compiti di rilevamento degli oggetti, soglie di IoU pari a 0,5 e 0,75 sono comunemente utilizzate per rappresentare condizioni di valutazione moderate e rigorose. L'mAP riassume le prestazioni di rilevamento attraverso diverse soglie di IoU. La metrica mAP@0,5:0,95 fornisce una valutazione più robusta mediando la precisione su soglie comprese tra 0,5 e 0,95 con incrementi di 0,05 ed è pertanto ampiamente accettata come standard di riferimento per il rilevamento degli oggetti.

I risultati di rilevamento ottenuti sui tre dataset indicano che il modulo proposto per il rilevamento dei componenti offre prestazioni costantemente elevate. I risultati quantitativi sono presentati nella Tabella 4. Il dataset RICO raggiunge le prestazioni più elevate, con una precisione di 0,91, un richiamo di 0,88 e un punteggio F1 di 0,89, grazie all'ampio insieme diversificato di annotazioni dei componenti dell'interfaccia utente. ENRICO mostra punteggi leggermente inferiori a causa della sua struttura più semplificata e del minor numero di tipi di componenti annotati. Il dataset Guo registra il punteggio F1 più basso (0,81), probabilmente a causa di una maggiore variazione visiva e di un numero ridotto di schemi di layout standardizzati, il che rende il rilevamento più complesso. Nel complesso, questi risultati confermano che il modello mantiene prestazioni solide nel rilevamento dei componenti attraverso diversi stili di progettazione dell'interfaccia utente e caratteristiche dei dataset.

Dataset	Precisione	Recupero	Punteggio F1
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

Tabella 4: Prestazioni del rilevamento dei componenti su diversi dataset. La tabella mostra la precisione, il richiamo e il punteggio F1 per il rilevamento dei componenti dell'interfaccia utente sui dataset RICO, ENRICO e Guo, dimostrando l'efficacia del modello di rilevamento.

Figura 3 mostra le prestazioni del modello nei dataset RICO, ENRICO e Guo a soglie di IoU di 0,5 e 0,75. Come previsto, i valori di mAP sono più elevati a un IoU di 0,5 a causa del requisito di sovrapposizione meno stringente. RICO riporta costantemente i valori di mAP più alti (0,89 a un IoU di 0,5 e 0,78 a un IoU di 0,75), riflettendo la ricchezza e coerenza delle sue annotazioni. ENRICO mostra valori leggermente inferiori, mentre Guo riporta i punteggi più bassi a causa della maggiore variabilità nello stile del layout e nella densità dei componenti. L'andamento decrescente con soglie di IoU più rigorose illustra come la complessità del dataset influenzi direttamente la robustezza del rilevamento.

Figura 3. Precisione media (mAP) ai valori di soglia dell'intersezione rispetto all'unione (IoU) di 0,5 e 0,75 nei vari dataset. Il grafico a linee confronta le prestazioni nel rilevamento dei componenti nei dataset RICO, ENRICO e Guo. L'asse x rappresenta i dataset, mentre l'asse y mostra i valori di mAP. Due curve corrispondono alle soglie di IoU di 0,5 e 0,75, illustrando la variazione delle prestazioni a diversi livelli di severità nel rilevamento. Cliccare qui per visualizzare una versione ingrandita di questa figura.

Figura 4 mostra l'mAP@IoU(0,5:0,95) per ciascun dataset, fornendo una valutazione più ampia delle prestazioni di rilevamento su dieci soglie IoU. I risultati rivelano una chiara tendenza discendente da RICO (0,61) a ENRICO (0,57) e Guo (0,52), confermando che il modello di rilevamento proposto generalizza meglio su dataset più grandi e strutturati. Questa metrica media più rigorosa evidenzia lievi degradazioni delle prestazioni che potrebbero non essere evidenti in una valutazione a soglia singola. Questi risultati indicano che, sebbene il modello presti bene su tutti i dataset, una maggiore diversità nei layout e una maggiore variabilità dei componenti introducono ulteriori sfide in una valutazione rigorosa secondo lo standard COCO. I risultati del rilevamento sono presentati in Figure 3 e 4, che forniscono confronti quantitativi dell'mAP a diversi livelli di IoU.

Figura 4. Precisione media (mAP) calcolata come media sui valori di intersezione rispetto all'unione (IoU) con soglie comprese tra 0,5 e 0,95, per ciascun dataset. Il grafico a linee mostra le prestazioni nel rilevamento degli elementi nei dataset RICO, ENRICO e Guo, utilizzando la metrica mAP media su soglie di IoU comprese tra 0,5 e 0,95. L'asse x rappresenta i dataset, mentre l'asse y indica i corrispondenti valori di mAP riportati su una scala da 0 a 1, che riflettono le prestazioni del modello a diverse soglie di rilevamento. Cliccare qui per visualizzare una versione ingrandita di questa figura.

Metriche di qualità del layout

La qualità del layout viene valutata utilizzando l'AE, l'accuratezza del raggruppamento (GA) e l'accuratezza dell'ordine di lettura (ROA), che insieme valutano la correttezza strutturale, l'organizzazione percettiva e la leggibilità cognitiva dei layout dell'interfaccia utente generati.

Errore di allineamento.

AE (deviazione basata sui pixel) indica quanto bene gli elementi dell'interfaccia utente sono allineati rispetto a linee di allineamento ideali, come guide per il bordo sinistro, destro, superiore o per la linea di base. Un valore di AE più basso indica che gli elementi sono disposti in modo più coerente, con minima distorsione visiva, migliorando la leggibilità e la chiarezza complessiva del design. Questa metrica è particolarmente importante per valutare il perfezionamento del layout cognitivo, poiché un allineamento impreciso interrompe il flusso visivo e aumenta la complessità percepita. Figura 5 illustra l'AE nei dataset RICO, ENRICO e Guo, misurata come deviazione media in pixel rispetto alle linee di allineamento ideali. I risultati mostrano che RICO ottiene il valore di AE più basso (4,2 px), indicando che i componenti dell'interfaccia utente in questo dataset presentano schemi strutturali più coerenti, rendendo l'allineamento più semplice per il modello. ENRICO segue con una deviazione di allineamento moderata di 6,1 px, riflettendo una combinazione di layout di schermata ben strutturati e più variabili. Il dataset Guo registra il valore di AE più alto (7,4 px), a causa della maggiore diversità nel posizionamento dei componenti e di strutture di layout non standard, che rendono più difficile il perfezionamento basato sull'allineamento. Nel complesso, questi risultati dimostrano che il modello mantiene un'elevata accuratezza di allineamento attraverso i diversi dataset, nonostante l'aumento della complessità del layout.

Figura 5. Errore di allineamento nei diversi set di dati. Il grafico mostra l'errore di allineamento nei vari set di dati; valori più bassi indicano un migliore allineamento. Cliccare qui per visualizzare una versione ingrandita di questa figura.

Accuratezza del raggruppamento (GA).

L'accuratezza di raggruppamento (GA) quantifica quanto efficacemente il modello raggruppa componenti dell'interfaccia utente (UI) correlati, ad esempio in base ai principi della Gestalt come prossimità, somiglianza e continuità. Un'accuratezza di raggruppamento più elevata indica che il modello preserva la struttura intenzionale degli elementi dell'interfaccia utente, consentendo agli utenti di interpretare l'interfaccia in modo più naturale. Questa metrica è particolarmente utile per valutare se il modulo di affinamento del layout organizza con successo i contenuti in gruppi visivi significativi. Figura 6 mostra la distribuzione del valore di GA ottenuto dal framework proposto nei tre dataset. Il dataset ENRICO presenta la GA mediana più alta e l'intervallo interquartile più ridotto, indicando prestazioni di raggruppamento stabili e coerenti grazie ai suoi layout ben definiti e etichettati per schema. Il dataset RICO mostra un'accuratezza di raggruppamento moderata con una variabilità maggiore, probabilmente a causa della maggiore diversità e complessità dei layout. Il dataset Guo UI Color registra un'accuratezza di raggruppamento inferiore, poiché i suoi campioni sono eterogenei dal punto di vista visivo e meno focalizzati sulla struttura del layout. Nel complesso, i risultati indicano che il modulo cognitivo di affinamento del layout funziona in modo affidabile su tutti i dataset, ottenendo le migliori prestazioni di raggruppamento su dati strutturalmente coerenti.

Figura 6. Distribuzione dell'accuratezza del raggruppamento nei diversi dataset. Il grafico a scatola mostra l'accuratezza del raggruppamento basata sui principi di Gestalt nei dataset RICO, ENRICO e Guo UI Color. Le scatole rappresentano l'intervallo interquartile, la linea centrale indica la mediana e i baffi indicano l'intervallo dei valori. L'asse x rappresenta i dataset, mentre l'asse y mostra i punteggi di accuratezza del raggruppamento. La dimensione del campione è n=5128 schermate di interfacce utente (RICO: 4000, ENRICO: 1000 e Guo: 128). Cliccare qui per visualizzare una versione ingrandita di questa figura.

Accuratezza dell'ordine di lettura (ROA).

L'accuratezza dell'ordine di lettura (ROA) misura quanto accuratamente il modello predice il flusso naturale di lettura di una schermata di interfaccia utente, che generalmente segue un percorso dall'alto verso il basso e da sinistra a destra. Mantenere un ordine di lettura corretto è essenziale per l'usabilità, la chiarezza della navigazione e la coerenza con le convenzioni di progettazione consolidate. Un valore più elevato di ROA indica che il sistema preserva i modelli cognitivi di scansione attesi. Figura 7 mostra l'ROA attraverso diverse fasi di valutazione per i dataset RICO, ENRICO e Guo. ENRICO raggiunge costantemente l'ROA più alto grazie alla sua struttura di layout regolare e orientata ai pattern, che consente una previsione più accurata di sequenze di lettura simili a quelle umane. RICO mostra prestazioni moderate con una leggera variabilità, riflettendo la sua maggiore diversità e complessità del mondo reale. Il dataset Guo presenta l'ROA più basso, poiché molte delle sue schermate sono ricche dal punto di vista visivo ma mancano di gerarchie di lettura chiaramente definite. Nel complesso, questi risultati indicano che il modulo proposto di affinamento del layout cognitivo funziona in modo più affidabile su dataset strutturati, mantenendo al contempo previsioni stabili dell'ordine di lettura in diversi design di interfacce utente.

Figura 7. Accuratezza dell'ordine di lettura nelle diverse fasi di valutazione per più dataset. Il grafico a linee mostra l'accuratezza dell'ordine di lettura attraverso le fasi di valutazione per i dataset RICO, ENRICO e UI Color di Guo. L'asse x rappresenta la fase di valutazione, mentre l'asse y indica l'accuratezza dell'ordine di lettura. Ogni curva corrisponde a un dataset, illustrando le variazioni nel mantenimento del flusso visivo attraverso le fasi successive di valutazione. La fase di valutazione rappresenta le fasi progressive di affinamento del framework proposto. Cliccare qui per visualizzare una versione ingrandita di questa figura.

Punteggio di coerenza del layout (LCS)

Il punteggio di coerenza del layout (LCS) misura quanto i layout dell'interfaccia utente generati vengano mantenuti in modo coerente attraverso più schermate all'interno della stessa applicazione. Ciò include coerenza nei margini, nelle regole di allineamento, nelle aree tipografiche e nei modelli di raggruppamento. Un punteggio più elevato indica una maggiore coerenza tra schermate, con conseguente esperienza utente più unificata e intuitiva. Figura 8 mostra l'LCS misurato in diverse fasi di valutazione per i dataset di colore dell'interfaccia utente RICO, ENRICO e Guo. Il dataset ENRICO raggiunge costantemente i valori LCS più alti grazie alle sue schermate di interfaccia utente etichettate per modello e strutturalmente uniformi, che favoriscono un apprendimento più stabile della coerenza tra schermate. Al contrario, il dataset RICO dimostra una coerenza moderata ma in costante miglioramento, attribuibile alla capacità del modello di generalizzare attraverso layout dell'interfaccia utente altamente diversificati. Come previsto, il dataset Guo registra i valori LCS più bassi, poiché è principalmente focalizzato sulle caratteristiche cromatiche piuttosto che sul layout strutturale, rendendo più difficile la coerenza tra più schermate. Nel complesso, questi risultati indicano che il modulo proposto per la coerenza tra schermate funziona in modo più efficace su dataset orientati ai modelli, pur fornendo miglioramenti misurabili su tutti i dataset.

Figura 8. Punteggio di coerenza del layout durante le fasi di valutazione per diversi set di dati. Il grafico a linee mostra i punteggi di coerenza del layout durante le fasi di valutazione per i set di dati RICO, ENRICO e Guo’s UI Color. L'asse x rappresenta la fase di valutazione e l'asse y indica i punteggi di coerenza del layout. Ogni curva corrisponde a un set di dati, illustrando il miglioramento della coerenza strutturale delle interfacce generate nelle successive fasi di valutazione. Cliccare qui per visualizzare una versione ingrandita di questa figura.

Metriche della qualità del colore

I temi di colore dell'interfaccia utente generati vengono valutati mediante cinque metriche basate sulla percezione, derivate dal CAM02-UCS: ΔE (differenza cromatica percettiva), che quantifica l'uniformità percettiva tra i colori della tavolozza; rapporto di contrasto (basato su WCAG 2.1), che valuta la leggibilità tra elementi di primo piano e di sfondo; indice di armonia cromatica (CHI), che misura la compatibilità estetica tra le tonalità; punteggio di diversità cromatica (CDS), che riflette la variazione all'interno dello spazio cromatico percettivo; e punteggio di rilevanza cromatica (CPS), che valuta l'equilibrio e la predominanza dei colori all'interno della tavolozza. Insieme, queste metriche forniscono una valutazione completa sia della qualità estetica sia della prestazione cromatica orientata all'usabilità. I risultati dimostrano che il metodo proposto raggiunge un valore di ΔE inferiore pari a 4,12, indicando una migliore uniformità percettiva tra i colori. Un rapporto di contrasto di 6,21 conferma la conformità agli standard di accessibilità, garantendo una leggibilità migliorata. Tabella 5 presenta un confronto quantitativo tra il modulo di modellazione cromatica proposto e i metodi di riferimento. L'indice CHI aumenta da 0,61 a 0,83, indicando una maggiore coesione estetica nelle transizioni cromatiche. Inoltre, il CDS aumenta di oltre il 50%, dimostrando che le tavolozze generate mantengono una variazione più ricca senza introdurre confusione visiva. Valori CPS più elevati indicano una distribuzione equilibrata dei colori dominanti, evitando la sovrasaturazione di una singola tonalità. Nel complesso, questi risultati dimostrano l'efficacia del modulo di modellazione cromatica basato su CAM02-UCS nella generazione di schemi cromatici per interfacce utente armoniosi, leggibili e ottimizzati dal punto di vista percettivo.

Metrica	Definizione	Metodo proposto	Valore di riferimento1	Miglioramento (%)
ΔE (CAM02-UCS)	Differenza cromatica percettiva	4,12	7,85	47,5% inferiore
Rapporto di contrasto (WCAG)	Leggibilità delle coppie FG–BG	6,21	4,38	41,80%
CHI (Indice di armonia cromatica)	Armonia tra tonalità e cromatura	0,83	0,61	36,10%
CDS (Punteggio di diversità cromatica)	Varianza nello spazio J′a′b′	18,70	12,40	50,80%
CPS (Punteggio di rilievo cromatico)	Stabilità dei colori dominanti	0,72	0,55	30,90%

Tabella 5: Confronto quantitativo delle metriche di qualità del colore tra il metodo proposto e i metodi di riferimento. La tabella presenta metriche di valutazione della qualità del colore, inclusa la differenza cromatica percettiva (ΔE in CAM02-UCS), il rapporto di contrasto (WCAG), l'indice di armonia cromatica (CHI), il punteggio di diversità cromatica (CDS) e il punteggio di rilevanza cromatica (CPS). I risultati del metodo proposto vengono confrontati con i valori di riferimento, insieme ai miglioramenti percentuali.

Caratteristiche demografiche dei partecipanti e disegno dello studio

Un totale di 30 partecipanti ha preso parte al processo di valutazione. L'età dei partecipanti era compresa tra 20 e 35 anni (età media: 26,4 ± 3,2 anni). Il gruppo comprendeva individui con background diversi, tra cui ingegneri del software, studenti e progettisti UI/UX. In base alla competenza informatica auto-dichiarata, il 40% dei partecipanti è stato classificato come utente intermedio, il 35% come utente avanzato e il 25% come principiante. Circa la metà dei partecipanti aveva esperienza pregressa in progettazione UI/UX o settori affini, mentre i restanti non ne avevano. Questa diversità ha garantito una valutazione equilibrata tra diversi livelli di competenza tecnica e familiarità con il design.

Parametri dello studio sull'utilizzatore

La valutazione centrata sull'utente è stata condotta utilizzando diverse metriche, tra cui NASA-TLX, scala di usabilità del sistema (SUS), punteggio di armonia estetica (AHS), tempo di efficienza della ricerca (SET) e valutazione della coerenza tra schermi (CSCR), per valutare carico cognitivo, usabilità, attrattiva visiva, efficienza e coerenza.

La metrica NASA-TLX quantifica il carico mentale misurando fattori come la richiesta cognitiva, lo sforzo e la frustrazione. Punteggi più bassi indicano un ridotto carico cognitivo e una maggiore facilità d'interazione. Il framework proposto ha prodotto costantemente punteggi NASA-TLX inferiori in tutti i dataset, indicando uno sforzo mentale ridotto. Questo miglioramento può essere attribuito all'integrazione di principi di progettazione cognitiva, tra cui il raggruppamento secondo la teoria della Gestalt, una spaziatura ottimizzata e una gerarchia visiva potenziata, che insieme favoriscono una navigazione più intuitiva. La metrica SUS fornisce un punteggio standardizzato di usabilità compreso tra 0 e 100, in cui valori più elevati indicano un'usabilità e una chiarezza migliorate. Il framework proposto ha ottenuto punteggi SUS superiori rispetto ai metodi di riferimento, riflettendo miglioramenti sia nella struttura del layout che nella chiarezza cromatica. Un allineamento, una spaziatura e un flusso di navigazione migliorati hanno contribuito a creare interfacce percepite dagli utenti come più intuitive e funzionalmente coerenti. L'AHS, misurato su una scala Likert a 7 punti, valuta l'estetica visiva percepita e l'armonia cromatica. Le interfacce generate utilizzando il modulo di modellazione del colore basato su CAM02-UCS hanno ottenuto valori AHS più elevati, indicando transizioni cromatiche più fluide e palette più equilibrate dal punto di vista visivo. I partecipanti hanno mostrato una preferenza costante per queste interfacce grazie a un contrasto migliore, una maggiore coerenza tra le tonalità e una riduzione del disordine visivo, evidenziando l'importanza della modellazione percettiva del colore nella progettazione dell'interfaccia utente. Il SET misura il tempo necessario agli utenti per individuare elementi specifici dell'interfaccia durante compiti di ricerca visiva. Valori di SET più bassi indicano una migliore organizzazione e gerarchia visiva. Il framework proposto ha ridotto significativamente il SET in tutti i dataset, dimostrando che l'integrazione del raggruppamento secondo la teoria della Gestalt, di una spaziatura guidata dall'attenzione e di strutture di layout perfezionate consente un'interazione più rapida ed efficiente. La metrica CSCR valuta la coerenza della progettazione dell'interfaccia utente attraverso schermate multiple. Punteggi più alti indicano una migliore continuità nel layout, nel colore e nell'organizzazione strutturale. Il framework proposto ha ottenuto valori CSCR più elevati, riflettendo l'efficacia del modulo per la coerenza multischermo nel mantenere schemi cromatici stabili, spaziature e strutture gerarchiche costanti tra le diverse interfacce.

Figura 9 presenta i risultati dello studio comparativo con utenti per tutti i parametri (NASA-TLX, SUS, AHS, SET e CSCR) nei dataset RICO, ENRICO e Guo. Nel complesso, si osservano miglioramenti costanti in tutti i parametri di valutazione. In particolare, il dataset Guo mostra prestazioni superiori nei parametri centrati sull'utente, inclusi un carico cognitivo inferiore (NASA-TLX), un'usabilità maggiore (SUS), un'armonia estetica migliore (AHS), un tempo di ricerca ridotto (SET) e una maggiore coerenza tra schermate (CSCR). Tuttavia, questi risultati richiedono un'interpretazione accurata. I miglioramenti nei parametri di esperienza utente osservati per il dataset Guo sono attribuibili principalmente alla forte coerenza cromatica e alla composizione visiva relativamente più semplice, piuttosto che a una qualità superiore del layout strutturale. Sebbene gli utenti percepiscano queste interfacce come più armoniose dal punto di vista visivo e meno gravose cognitivamente, risultati precedenti dimostrano che il dataset Guo ha prestazioni scadenti in termini di allineamento, raggruppamento e ordine di lettura. Ciò evidenzia una distinzione importante tra fattori percettivi e strutturali nella progettazione dell'interfaccia utente. Mentre gli attributi percettivi, come l'armonia cromatica, migliorano significativamente l'esperienza utente, l'accuratezza strutturale e la coerenza del layout rimangono fondamentali per l'usabilità funzionale. Pertanto, una progettazione ottimale dell'interfaccia utente richiede un equilibrio tra armonia percettiva e correttezza strutturale.

Figura 9. Confronto delle metriche dello studio utente tra diversi dataset. Il grafico a barre raggruppate confronta le metriche dello studio utente nei dataset RICO, ENRICO e Guo’s UI Color Datasets. L'asse x rappresenta le metriche di valutazione, tra cui NASA Task Load Index (NASA-TLX), scala di usabilità del sistema (SUS), punteggio di armonia estetica (AHS), tempo di efficienza strutturale (SET) e tasso di coerenza tra schermi (CSCR), mentre l'asse y indica i punteggi corrispondenti. Le barre rappresentano le prestazioni per ciascun dataset, evidenziando le differenze in usabilità, carico cognitivo, qualità estetica e coerenza dell'interfaccia. NASA-TLX (0–100, valore inferiore è migliore), SUS (0–100, valore superiore è migliore), AHS (1–7 scala Likert), SET (s, valore inferiore è migliore) e CSCR (0–1, valore superiore è migliore). Cliccare qui per visualizzare una versione ingrandita di questa figura.

Validazione statistica delle ipotesi

Per validare ulteriormente le ipotesi proposte (H1–H4), sono stati effettuati test di significatività statistica su metriche chiave di valutazione, inclusi la qualità del layout, il carico cognitivo, l'armonia cromatica e le misure di usabilità (Tabella 6). I risultati sono espressi come media ± deviazione standard, e la significatività statistica è stata valutata mediante test t appaiati con un intervallo di confidenza del 95% (p < 0,05). I risultati indicano che il framework proposto ottiene miglioramenti statisticamente significativi rispetto agli approcci di base in diverse metriche, inclusa l'accuratezza di allineamento, l'accuratezza di raggruppamento, l'ordine di lettura, il carico cognitivo (NASA-TLX) e le misure di armonia cromatica. In particolare, le riduzioni del carico cognitivo e i miglioramenti nelle metriche di usabilità mostrano differenze altamente significative (p < 0,01). Questi risultati confermano che l'integrazione di principi di progettazione cognitiva e di modellazione percettiva del colore porta a miglioramenti misurabili e statisticamente significativi nella qualità dell'interfaccia utente, sostenendo così le ipotesi H1–H4.

Metrica	Condizione iniziale (Media ± DS)	Proposta (Media ± DS)	Miglioramento (%)	valore p	Significatività
Errore di allineamento (↓)	7,8 ± 1,2	4,2 ± 0,9	46,10%	0,003	Significativo
Precisione del raggruppamento (↑)	0,68 ± 0,05	0,82 ± 0,04	20,50%	0,001	Significativo
Precisione dell'ordine di lettura (↑)	0,72 ± 0,06	0,87 ± 0,03	20,80%	0,002	Significativo
NASA-TLX (↓)	68,5 ± 5,4	47,2 ± 4,8	31,10%	0,0005	Altamente significativo
Punteggio SUS (↑)	71,3 ± 6,2	88,9 ± 4,5	24,70%	0,0008	Altamente significativo
Indice di armonia cromatica (↑)	0,61 ± 0,07	0,83 ± 0,05	36,00%	0,001	Significativo
Rapporto di contrasto (↑)	4,1 ± 0,6	6,2 ± 0,5	51,20%	0,002	Significativo

Tabella 6: Confronto statistico delle metriche di prestazione tra il metodo di base e il metodo proposto. La tabella riporta la media e la deviazione standard (media ± DS) per le principali metriche di prestazione, tra cui errore di allineamento, accuratezza del raggruppamento, accuratezza dell'ordine di lettura, Indice di Carico di Lavoro NASA (NASA-TLX), scala di usabilità del sistema (SUS), indice di armonia cromatica e rapporto di contrasto. Sono indicati i miglioramenti percentuali, i valori p e i livelli di significatività statistica. (↑) indica che valori più alti sono migliori, e (↓) indica che valori più bassi sono migliori. La significatività statistica è stata valutata con p < 0,05.

Osservazioni specifiche per il dataset

Le prestazioni relativamente inferiori osservate nelle metriche strutturali sul dataset Guo possono essere attribuite alle sue caratteristiche intrinseche. Il dataset Guo è più piccolo rispetto a RICO ed ENRICO e si concentra principalmente su caratteristiche percettive del colore piuttosto che su annotazioni strutturate del layout. Di conseguenza, presenta una maggiore variabilità nel posizionamento dei componenti, un'organizzazione gerarchica più debole e strutture di layout meno coerenti tra le schermate. Queste proprietà rendono più difficile l'apprendimento strutturale e l'ottimizzazione del layout, spiegando le prestazioni inferiori nelle metriche di allineamento, raggruppamento e ordine di lettura, nonostante le ottime prestazioni nelle valutazioni percettive e centrate sull'utente.

Studio di ablazione

Lo studio di ablazione valuta il contributo di ciascun modulo all'interno del framework proposto rimuovendo sistematicamente singoli componenti e analizzandone l'impatto sulla qualità del layout, sulla modellazione del colore e sulle prestazioni di rilevamento. La qualità del layout viene valutata utilizzando AE, GA, ROA e LCS. AE riflette la deviazione posizionale degli elementi dell'interfaccia utente, dove valori più elevati indicano una struttura spaziale più debole. GA valuta quanto efficacemente i componenti siano organizzati secondo i principi della Gestalt. ROA misura il mantenimento del flusso visivo logico, mentre LCS quantifica la coerenza strutturale tra schermate in termini di allineamento, spaziatura e organizzazione del layout. Il degrado della qualità cromatica viene valutato mediante ΔE (differenza cromatica percettiva), CHI e CDS, che insieme valutano l'uniformità percettiva, la coerenza estetica e la ricchezza della palette cromatica. Le prestazioni di rilevamento vengono valutate utilizzando mAP, precisione e richiamo, parametri che quantificano l'impatto della sostituzione del modulo Faster R-CNN con un modello di rilevamento più semplice. Nel complesso, queste metriche forniscono una valutazione completa del contributo di ciascun modulo alle prestazioni complessive del sistema.

Tabella 7 riassume il contributo di ciascun modulo e confronta il framework proposto con gli approcci esistenti per la generazione di interfacce utente. Il modello completo raggiunge le migliori prestazioni in tutti i parametri di qualità del layout, modellazione del colore e metriche di rilevamento, dimostrando che progettazione cognitiva, modellazione percettiva del colore e comprensione visiva profonda hanno un effetto sinergico. Quando il modulo di modellazione del colore viene rimosso, il ΔE aumenta significativamente, mentre CHI e CDS diminuiscono notevolmente, indicando una perdita di uniformità percettiva e armonia cromatica. Ciò conferma l'importanza della modellazione basata su CAM02-UCS nel mantenimento della qualità estetica e percettiva. La rimozione del modulo di layout cognitivo provoca un aumento significativo dell'AE e diminuzioni evidenti di GA e ROA, dimostrando che i principi di progettazione cognitiva sono essenziali per produrre layout strutturalmente coerenti e leggibili. L'eliminazione del modulo di coerenza tra schermate porta a una riduzione dell'LCS, confermandone il ruolo nel mantenimento di schemi di layout coerenti su più schermate. Sostituire il rilevatore Faster R-CNN con una CNN più semplice determina un netto calo di mAP, precisione e richiamo, evidenziando l'importanza fondamentale di un rilevamento robusto dei componenti nell'intero processo. Rispetto ai metodi di riferimento, tra cui pix2code, REDRAW e LDGM, il framework proposto supera costantemente tutti gli approcci in termini di accuratezza del layout, coerenza visiva e qualità percettiva del colore.

Metodo / Modulo	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
Modulo del colore rimosso	0,14	0,86	0,92	0,84	7,85	0,61	12,4	0,9
Modulo della disposizione cognitiva rimosso	0,18	0,72	0,73	0,69	4,21	0,79	17,9	0,89
Coerenza multi-schermo rimossa	0,17	0,81	0,88	0,62	4,18	0,81	17,3	0,9
Faster R-CNN sostituito con una semplice 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 (Diffusione della disposizione)	0,19	0,74	0,79	0,63	6,9	0,59	13,8	0,8
Modello completo proposto	0,12	0,89	0,94	0,87	4,12	0,83	18,7	0,91

Tabella 7: Analisi comparativa delle prestazioni e studio di ablazione del framework proposto e dei metodi di base. La tabella valuta l'impatto dei singoli componenti confrontando il modello completo proposto con varianti in cui specifici moduli sono rimossi (modulo del colore, modulo della disposizione cognitiva, coerenza tra più schermate e sostituzione di Faster R-CNN con una semplice CNN), nonché con metodi di base (pix2code, REDRAW e LDGM). Le prestazioni sono valutate mediante errore di allineamento (AE), accuratezza del raggruppamento (GA), accuratezza dell'ordine di lettura (ROA), punteggio di coerenza della disposizione (LCS), differenza percettiva del colore (ΔE), indice di armonia cromatica (CHI), punteggio di diversità cromatica (CDS) e precisione media (mAP). (↑) indica che valori più alti sono migliori, e (↓) indica che valori più bassi sono migliori.

DISPONIBILITÀ DEI DATI:

I set di dati utilizzati in questo studio sono disponibili ai seguenti collegamenti: set di dati RICO: https://interactionmining.org/rico; set di dati ENRICO: https://github.com/luileito/enrico; set di dati sui colori dell'interfaccia utente di Guo: https://github.com/guozhongke/UI-Color-Dataset.

File Supplementare 1. Formulazioni matematiche e dettagli estesi di implementazione. Questo file fornisce le formulazioni matematiche dettagliate e i flussi algoritmici a supporto del framework proposto per la prototipazione automatica di interfacce utente (UI). Include l'addestramento per il rilevamento dei componenti, l'estrazione dei modelli di layout, la modellizzazione dell'armonia cromatica, l'obiettivo unificato di prototipazione dell'interfaccia utente, i dettagli del rilevamento con Faster R-CNN, i calcoli della distanza spaziale e della similarità di allineamento, la costruzione dell'albero logico dell'interfaccia utente, la modellizzazione percettiva del colore basata su CAM02-UCS, l'ottimizzazione del design cognitivo, la modellizzazione della coerenza tra più schermate e gli Algoritmi S1–S3.Clicca qui per scaricare questo file.

Discussione

I risultati dimostrano miglioramenti statisticamente significativi in termini di usabilità, organizzazione strutturale e qualità percettiva (p < 0,05), confermando l'efficacia dell'integrazione dei principi cognitivi di progettazione nella prototipazione automatizzata dell'interfaccia utente. A differenza dei sistemi tradizionali di generazione dell'interfaccia utente che si basano principalmente su rilevamento visivo o euristiche basate su regole, il framework proposto integra il raggruppamento secondo la Gestalt, la modellazione della gerarchia, i vincoli di spaziatura e la leggibilità percettiva in tutto il processo di ricostruzione dell'interfaccia utente. I miglioramenti osservati nei test NASA-TLX, SUS e SET confermano ulteriormente una riduzione statisticamente significativa del carico cognitivo (NASA-TLX, p.< 0,01). Questi risultati indicano che la generazione automatizzata di interfacce utente dovrebbe andare oltre la semplice accuratezza della ricostruzione visiva, integrando conoscenze progettuali centrate sull'utente per raggiungere un'usabilità pratica. Inoltre, tutte le ipotesi formulate (H1–H4) sono supportate empiricamente dai risultati sperimentali.

Oltre ai miglioramenti del layout, l'integrazione di un modello cromatico percettivo basato su CAM02-UCS determina guadagni statisticamente significativi in termini di armonia cromatica, accessibilità e stabilità percettiva (p < 0,05), come evidenziato dai miglioramenti nei valori di ΔE, CHI, CDS e rapporto di contrasto. Rispetto ai lavori precedenti, come la generazione automatica di temi cromatici per interfacce utente basata su immagini, che si concentra principalmente sull'ottimizzazione dei colori, il framework proposto integra sia il perfezionamento cromatico che quello del layout all'interno di una pipeline unificata. Inoltre, l'inclusione di un modulo per la coerenza multischermo affronta una limitazione fondamentale degli approcci precedenti, focalizzati esclusivamente sulla generazione di interfacce utente per singolo schermo. Un confronto con metodi esistenti, tra cui pix2code³¹, REDRAW^23,24 e LDGM³², mostra che tali approcci enfatizzano principalmente la ricostruzione strutturale o la modellazione generativa, senza incorporare principi cognitivi, l'armonizzazione percettiva dei colori o il ragionamento multischermo. Il framework proposto dimostra miglioramenti statisticamente significativi rispetto a questi metodi (p < 0,05) in metriche di accuratezza del layout (AE, GA e ROA), metriche percettive (CHI e ΔE) e misure di usabilità (SUS e CSCR). Questi risultati evidenziano il vantaggio derivante dalla combinazione di principi progettuali cognitivi, modellazione percettiva del colore e apprendimento profondo all'interno di un sistema unificato.

Un'osservazione importante emersa dai risultati riguarda la distinzione tra fattori strutturali e percettivi che influenzano l'esperienza utente (UX). L'ottimizzazione strutturale migliora la correttezza funzionale e la chiarezza del layout, mentre l'ottimizzazione percettiva — in particolare l'armonia cromatica — influenza in modo significativo la percezione dell'utente e il carico cognitivo. I risultati indicano che un design ottimale dell'interfaccia utente (UI) richiede un equilibrio tra accuratezza strutturale e coerenza percettiva. Nonostante i miglioramenti dimostrati, permangono alcune limitazioni. Ad esempio, le prestazioni su dataset più piccoli e maggiormente orientati alla percezione, come il dataset Guo UI Color, risultano inferiori in termini di metriche strutturali a causa della variabilità nell'organizzazione del layout e della limitata presenza di annotazioni strutturali. Queste caratteristiche introducono difficoltà nell'apprendimento di schemi di layout coerenti e di relazioni gerarchiche. I futuri sviluppi si concentreranno sul miglioramento della robustezza su tali dataset.

Da un punto di vista teorico, questa ricerca dimostra che la generazione di interfacce utente può essere notevolmente migliorata integrando direttamente nei flussi di lavoro del deep learning principi cognitivi e percettivi. Lo studio mette in discussione l'opinione convenzionale secondo cui la generazione di interfacce utente è unicamente un problema di visione artificiale o di generazione di codice. Al contrario, evidenzia l'importanza di incorporare l'uniformità percettiva (mediante CAM02-UCS), la riduzione del carico cognitivo (attraverso i principi della Gestalt e la modellazione della gerarchia) e la coerenza progettuale multipiattaforma come componenti fondamentali dei sistemi automatizzati di interfaccia utente. Questo lavoro contribuisce a un cambiamento verso modelli computazionali centrati sull'essere umano, in cui la generazione di interfacce utente tiene conto non solo della correttezza strutturale, ma anche di fattori psicologici e percettivi. In tal senso, stabilisce una nuova direzione teorica per l'intelligenza progettuale automatizzata.

Dal punto di vista pratico, il framework proposto offre una soluzione implementabile per progettisti di interfacce utente, team di prodotto e strumenti di prototipazione. Riducendo il carico cognitivo e migliorando l'efficienza della ricerca, il sistema genera layout di interfaccia che richiedono meno interventi manuali per soddisfare gli standard professionali di progettazione. L'uso di temi cromatici ottimizzati dal punto di vista percettivo garantisce la conformità alle linee guida per l'accessibilità, come le WCAG 2.1, consentendo un'utilizzo immediato in applicazioni reali. Inoltre, il modulo di coerenza multipiattaforma facilita lo sviluppo più rapido di applicazioni multipagina mantenendo layout e modelli di design coerenti senza necessità di aggiustamenti manuali. Nel complesso, il framework ha il potenziale di ridurre significativamente i tempi di sviluppo delle interfacce, migliorando al contempo la qualità e l'usabilità dei design generati.

Il framework proposto introduce un approccio centrato sull'essere umano alla prototipazione automatica di interfacce utente, integrando principi di progettazione cognitiva, modellazione percettiva del colore (CAM02-UCS) e coerenza nei layout multiscreen in una pipeline computazionale unificata. A differenza degli approcci precedenti, focalizzati principalmente sulla ricostruzione strutturale o sul rilevamento visivo, il framework modella esplicitamente il raggruppamento secondo la Gestalt, la gerarchia, l'ottimizzazione del contrasto e l'uniformità percettiva. I risultati sperimentali mostrano miglioramenti significativi in termini di usabilità (SUS e NASA-TLX), armonia visiva (AHS, CHI e ΔE) e prestazioni strutturali (GA, ROA, LCS e mAP), confermando che la modellazione cognitiva e percettiva migliora la qualità dell'interfaccia utente e l'esperienza utente. Lavori futuri esploreranno l'integrazione di modelli visione–linguaggio basati su trasformatori per migliorare la comprensione semantica e il ragionamento strutturale. Inoltre, l'introduzione di personalizzazione adattativa, layout reattivi ai dispositivi e affinamento con il coinvolgimento dell'utente potrebbe ulteriormente aumentare l'applicabilità pratica del sistema. Nel complesso, questo lavoro fornisce le basi per sistemi di progettazione di interfacce utente guidati dall'intelligenza artificiale di nuova generazione che non siano soltanto visivamente accurati, ma anche cognitivamente efficienti, percettivamente armoniosi e praticamente implementabili.

Materiali

Elenco dei materiali utilizzati in questo articolo

Nome	Azienda	Numero di catalogo	Commenti
CPU (Processore)	AMD Ryzen 9 7950X (16-core, 32-thread, 4,5–5,7 GHz)	Advanced Micro Devices (AMD), USA	Ryzen 9 7950X
CUDA Toolkit	Versione 11.8	NVIDIA Corporation, USA	CUDA Toolkit 11.8
cuDNN	Versione 8.9	NVIDIA Corporation, USA	cuDNN v8.9
Faster R-CNN	Modello di rilevamento oggetti (con rete di proposta regionale)	Meta AI Research / Detectron2	Framework Detectron2
Matplotlib	Versione 3.7	Squadra di sviluppo Matplotlib	v3.7.0
GPU NVIDIA RTX 4090	Scheda grafica con 24 GB di memoria GDDR6X	NVIDIA Corporation, Santa Clara, CA, USA	RTX 4090
NumPy	Versione 1.24	Sviluppatori NumPy	v1.24.0
OpenCV	Versione 4.8	Fondazione OpenCV	v4.8.0
PyTorch	Versione 2.0	Fondazione PyTorch (Meta AI)	v2.0.0
ResNet-50 con FPN	CNN principale con rete piramidale di caratteristiche	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	Versione 1.3	Sviluppatori Scikit-learn	v1.3.0
SciPy	Versione 1.10	Comunità SciPy	v1.10.0
Memoria di sistema (RAM)	64 GB DDR5	Corsair / Kingston (o equivalente)	Kit DDR5 da 64 GB
Sistema operativo Ubuntu	Versione 22.04 LTS	Canonical Ltd., UK	Ubuntu 22.04 LTS