Cadre de prototypage automatisé d'interfaces utilisateur intégrant des principes de conception cognitive et visuelle pour améliorer l'utilisabilité et la clarté de la mise en page

Résumé

Cette étude présente un cadre automatisé de prototypage d'interfaces utilisateurs intégrant des principes de conception cognitive, une modélisation perceptive des couleurs et un apprentissage profond. Le système améliore l'accessibilité, la clarté de la disposition, l'harmonie des couleurs et la cohérence entre écrans, produisant ainsi des conceptions d'interfaces cohérentes et centrées sur l'utilisateur.

Résumé

Une conception efficace de l'interface utilisateur (IU) exige un équilibre harmonieux entre attrait visuel, ergonomie cognitive et cohérence de la disposition. Toutefois, les approches actuelles de génération automatique d'IU se concentrent principalement sur l'apparence visuelle ou la détection de composants, et manquent d'un cadre unifié intégrant les principes cognitifs, l'intelligence chromatique et le raisonnement structurel. De plus, les méthodes existantes souffrent d'une généralisation limitée en matière de disposition, d'une faible interprétabilité, d'une sélection statique des couleurs et d'un comportement incohérent entre les écrans. Dans ce contexte, ce travail propose un cadre de prototypage automatisé d'IU qui intègre une détection de composants basée sur le réseau neuronal convolutif régional accéléré (Faster R-CNN) et une modélisation chromatique perceptive fondée sur l'espace colorimétrique uniforme CIECAM02 (CAM02-UCS), enrichi par des principes de conception cognitive et visuelle. Le Faster R-CNN permet d'identifier les composants d'IU et d'inférer des structures hiérarchiques à partir de jeux de données d'interfaces à grande échelle. Un module amélioré de génération de couleurs analyse des images de marque ou de référence afin d'assurer des thèmes chromatiques perceptuellement uniformes, harmonieux et conformes aux exigences d'ergonomie, en utilisant l'espace CAM02-UCS. Ces résultats sont ensuite optimisés à l'aide de règles de conception cognitive, incluant le regroupement gestaltiste, les lois de Fitts et de Hick, un espacement fondé sur l'attention et la modélisation de la hiérarchie visuelle, afin de générer automatiquement des dispositions d'IU raffinées et orientées vers la tâche. Des expériences menées sur les jeux de données RICO, ENRICO et Guo UI Color montrent que le système proposé atteint une précision de 92,4 % dans la détection des composants, améliore la clarté de la disposition et la précision de l'ordre de lecture de 18,7 %, et produit des palettes de couleurs jugées 24,5 % plus harmonieuses par les concepteurs, comparé aux méthodes de référence. Les évaluations par les utilisateurs indiquent également une réduction de 31 % de la charge cognitive perçue et une augmentation de 28 % de la cohérence du design entre les écrans. Ces résultats démontrent que la combinaison d'une compréhension structurelle fondée sur l'apprentissage profond, d'une modélisation chromatique ancrée dans la perception et de principes de conception cognitive permet de produire des prototypes d'IU hautement efficaces, esthétiquement cohérents et conviviaux. Ce cadre établit une approche nouvelle et bout-en-bout pour un prototypage automatisé d'IU intelligent et centré sur l'humain.

Introduction

Les interfaces graphiques utilisateur (IGU) servent de support fondamental de communication entre les êtres humains et les systèmes informatiques, influençant considérablement l'ergonomie, l'accessibilité et l'expérience utilisateur (UX) globale^1,2. Les systèmes logiciels modernes s'appuient sur des interfaces intuitives et esthétiques pour attirer et fidéliser les utilisateurs. Traditionnellement, la conception d'interfaces consiste à créer des maquettes graphiques qui sont ensuite traduites en code front-end par des ingénieurs. Toutefois, les différences entre les protocoles spécifiques aux plateformes selon les systèmes d'exploitation exigent des adaptations répétées, augmentant ainsi la complexité et l'effort de développement. La génération automatisée de code d'interface est donc apparue comme une direction de recherche importante, réduisant l'effort manuel et améliorant l'efficacité du développement.

Les premières approches de génération automatisée d'interfaces utilisateur combinaient des techniques traditionnelles de traitement d'image avec des modèles d'apprentissage profond pour la détection et la classification de régions^3,4. Actuellement, les stratégies dominantes pour la génération de code d'interface graphique appliquent des techniques de vision par ordinateur afin d'analyser les images d'interfaces utilisateur et de les convertir en représentations structurées de niveau frontal^5,6,7. Alors que les méthodes de traitement d'image s'appuient sur des caractéristiques conçues manuellement, les approches d'apprentissage profond extraient des représentations hiérarchiques à partir de jeux de données à grande échelle. En conséquence, les chercheurs ont exploré des approches hybrides combinant l'apprentissage profond à des techniques spécifiques de traitement d'image afin d'améliorer la robustesse et la précision.

La couleur est un autre facteur essentiel dans la conception d'interfaces utilisateur, influençant la perception de l'utilisateur, l'ergonomie et l'attrait esthétique¹. Il devient difficile de maintenir une cohérence entre le contenu des images et les schémas de couleurs de l'interface lorsque les entrées visuelles varient en teinte et en contexte^8,9,10. Par conséquent, d'importantes recherches se sont concentrées sur la génération automatisée de palettes de couleurs et la modélisation perceptive des couleurs. Les méthodes existantes de génération de couleurs incluent des techniques fondées sur l'espace colorimétrique CIELAB¹¹. D'autres approches utilisent des algorithmes de regroupement, comme les k-moyennes, pour extraire les couleurs dominantes d'images¹². En conséquence, les travaux récents adoptent de plus en plus des approches fondées sur les données et l'apprentissage automatique pour la modélisation des couleurs.

Parallèlement, les approches d'apprentissage profond ont considérablement amélioré la détection des composants d'interface et la compréhension de la disposition. Les réseaux neuronaux ont permis un analyse structurelle plus précise des interfaces mobiles¹³. Toutefois, ces méthodes se concentrent principalement sur la précision de détection et négligent souvent des aspects de niveau supérieur tels que l'ergonomie cognitive, la hiérarchie de la disposition et l'efficacité des interactions. Des modèles génératifs pour la synthèse de dispositions d'interface ont également été proposés^14,15, mais ils rencontrent des difficultés à maintenir une cohérence entre les écrans et à fournir des décisions de conception interprétables¹⁶. D'autres approches se concentrent sur la similarité visuelle ou la qualité de rendu, mais manquent d'un cadre unifié combinant la sémantique des composants, l'harmonie des couleurs et les contraintes d'utilisabilité¹⁷. La reconnaissance de texte est également importante pour comprendre le contenu de l'interface. Des techniques telles que les réseaux neuronaux récurrents convolutifs (CRNN) permettent une reconnaissance précise de motifs textuels complexes dans les écrans d'interface^18,19,20.

Plusieurs systèmes ont été proposés pour générer du code d'interface utilisateur à partir de croquis ou d'images. Sketch2Code utilise la détection d'objets pour convertir des croquis en représentations de code^21,22, mais il est sensible à la qualité de l'image. REDRAW fournit un pipeline automatisé pour la collecte de données et l'entraînement de modèles, combinant des réseaux neuronaux convolutifs et récurrents afin de générer des représentations structurées d'interfaces utilisateur^23,24. Des travaux ultérieurs ont introduit des métriques d'évaluation améliorées pour évaluer la qualité des interfaces utilisateur générées²⁵. Parmi les approches plus récentes figurent les modèles basés sur la diffusion et les modèles basés sur les transformeurs pour la génération de mise en page, tels que les transformeurs de mise en page par diffusion sans méthodes d'auto-encodeur, la génération de mise en page d'interface graphique utilisant des graphes d'agencement d'interface graphique basés sur les transformeurs, et la génération de mise en page d'interface utilisateur guidée par de grands modèles linguistiques^26,27,28. Un aperçu comparatif de ces approches est fourni dans Tableau 1.

Références et méthodes clés	Objectif	Avantages	Inconvénients
Génération automatisée de thèmes de couleurs d'interface utilisateur basée sur l'image : extraction des couleurs dominantes + modélisation perceptive des couleurs CAM02-UCS¹	Générer automatiquement des thèmes de couleurs d'interface utilisateur à partir d'images de référence tout en optimisant l'harmonie et l'ergonomie.	Fondement perceptif solide (CAM02-UCS) ; équilibre explicite entre harmonie et ergonomie (contraste et diversité) ; inclut une implémentation web et une évaluation par des concepteurs.	Se concentre uniquement sur la couleur/le thème (pas sur la disposition ou la structure des composants) ; approche basée sur des règles/heuristiques plutôt que sur une synthèse d'interface utilisateur apprise de bout en bout.
Unification de la génération de mise en page avec un modèle de diffusion découplé (LDGM)²⁵	Génération unifiée et flexible de mises en page pour des scènes graphiques et des interfaces utilisateur.	Diversité et contrôlabilité à l'état de l'art pour la génération de mises en page ; prend en charge la génération conditionnelle et plusieurs types d'attributs.	Les sorties basées sur la diffusion peuvent présenter des problèmes d'alignement ou de fines nuances de mise en page, sauf contraintes ; complexité du modèle et coût d'inférence plus élevés.
Transformeurs de mise en page par diffusion sans méthodes d'auto-encodeur : transformeur + diffusion pour la génération de mise en page (sans auto-encodeur)²⁶	Améliorer la fidélité et l'alignement pour les benchmarks de génération de mise en page (métriques FID, d'alignement et de superposition).	Meilleure capture des corrélations sémantiques entre objets voisins ; performances élevées sur les métriques FID et d'alignement.	Se concentre principalement sur la géométrie de la mise en page (positions, tailles, catégories) plutôt que sur la sémantique de l'interface utilisateur.
Génération de mise en page d'interface graphique à partir de graphes d'agencement d'interface graphique (GUI-AGs) à l'aide de modèles basés sur des transformeurs²⁷	Créer des mises en page d'interface graphique à partir de contraintes positionnelles ou graphiques afin d'aider les concepteurs.	Les représentations sous forme de graphes capturent les contraintes relationnelles ; le transformeur permet une génération flexible conditionnée par des contraintes.	Peut nécessiter des graphes de contraintes explicites fournis par les concepteurs ; accent limité sur les métriques de couleur et d'ergonomie.
Génération de mise en page d'interface utilisateur à l'aide de modèles linguistiques de grande taille (LLMs) guidés par une grammaire d'interface utilisateur : modèles linguistiques de grande taille (LLMs) + grammaire hiérarchique d'interface utilisateur²⁸	Explorer l'utilisation des LLMs pour la génération de mises en page et améliorer l'explicabilité/le contrôle grâce à des représentations grammaticales.	Contrôlabilité et explicabilité de haut niveau ; possibilité d'exploiter l'apprentissage dans le contexte offert par les LLMs (type GPT).	Travail préliminaire avec une validation empirique limitée ; conception de la grammaire et robustesse à travers les interfaces utilisateur

Tableau 1 : Comparaison des méthodes existantes de modélisation des couleurs d'interface utilisateur et de génération de mise en page. Le tableau résume les approches représentatives en matière de conception d'interface utilisateur, notamment la génération de thèmes de couleurs, la génération de mise en page par diffusion, les méthodes basées sur les transformeurs et la génération de mise en page guidée par de grands modèles linguistiques. Pour chaque méthode, la technique sous-jacente, l'objectif, les avantages et les limites sont présentés, mettant en évidence les différences en matière de modélisation perceptive, de capacité de génération de mise en page, de contrôlabilité et de considérations d'utilisabilité.

Malgré ces avancées, une limitation majeure persiste : aucun système existant ne parvient à intégrer conjointement la détection des composants, la modélisation perceptive des couleurs, les principes cognitifs de conception et la cohérence de mise en page sur plusieurs écrans au sein d’un cadre unique et bout en bout¹. Les approches actuelles optimisent généralement un ou deux aspects seulement — tels que la détection, la disposition ou les couleurs — sans tenir compte de leurs interdépendances. Cette fragmentation met en évidence un manque critique dans la recherche sur le développement de systèmes automatisés de prototypage d’interfaces utilisateur unifiés et centrés sur l’humain. En particulier, les principes de conception cognitive tels que les lois de la Gestalt, la loi de Fitts et la loi de Hick sont souvent abordés de manière conceptuelle, sans être formellement intégrés dans des modèles computationnels.

Pour pallier ces limitations, cette étude propose un cadre de prototypage d'interfaces utilisateur (UI) automatisé de bout en bout qui intègre la détection de composants, la modélisation perceptive des couleurs et les principes de conception cognitive au sein d'un système unifié. Ce cadre vise à améliorer la qualité de la disposition, à réduire la charge cognitive, à renforcer l'harmonie des couleurs et à accroître l'utilisabilité globale. Ces améliorations sont validées par des expériences menées sur les ensembles de données RICO, ENRICO et Guo’s UI Color Datasets, démontrant l'efficacité de la combinaison des aspects structurels, perceptifs et cognitifs au sein d'un unique pipeline automatisé de prototypage d'interfaces utilisateur. On émet l'hypothèse que l'intégration de la détection de composants basée sur l'apprentissage profond, de la modélisation perceptive des couleurs et des principes de conception cognitive au sein d'un cadre unifié améliorera significativement la qualité des prototypes d'interface par rapport aux approches existantes. Plus précisément, H1 suppose que le cadre améliore la qualité de la disposition, notamment l'alignement, le regroupement et l'ordre de lecture. H2 postule que le cadre réduit la charge cognitive de l'utilisateur. H3 suggère que la modélisation perceptive des couleurs améliore la coordination des couleurs et l'harmonie visuelle. H4 affirme que l'utilisabilité globale et la qualité esthétique des prototypes d'interface sont améliorées.

Protocole

Cette étude utilise des ensembles de données accessibles au public et ne concerne ni sujets humains ni animaux.

Le cadre automatisé de prototypage d'interface utilisateur proposé intègre une compréhension structurelle fondée sur l'apprentissage profond, une modélisation des couleurs perceptuellement uniforme et des principes de conception cognitive afin de générer des prototypes d'interface cohérents et centrés sur l'utilisateur. La méthodologie débute par une architecture Faster R-CNN entraînée sur les ensembles de données RICO et ENRICO pour détecter les composants d'interface et en extraire les relations hiérarchiques, permettant ainsi une interprétation précise de diverses dispositions d'écran. Les composants détectés sont ensuite traités par un module d'intelligence chromatique, qui extrait des indices de couleur basés sur la marque ou sur une image, modélise la similarité perceptive à l'aide de CAM02-UCS et génère des palettes de couleurs harmonieuses, sensibles au contraste et conformes aux normes d'accessibilité. Ensuite, des principes de conception cognitive — notamment les lois de regroupement de la Gestalt, la loi de Fitts, la loi de Hick, l'espacement fondé sur l'attention et les contraintes de hiérarchie visuelle — sont appliqués au moyen d'un moteur d'optimisation cognitive afin d'affiner l'organisation spatiale et l'alignement des composants. Enfin, une couche de raisonnement de mise en page intègre les contraintes structurelles, perceptuelles et cognitives pour générer des prototypes d'interface multi-écrans cohérents, équilibrant convivialité, esthétique et clarté fonctionnelle. Ce pipeline intégré assure la cohérence perceptive, réduit la charge cognitive et respecte les principes de conception centrée sur l'humain. Le flux de travail complet de la méthode proposée est illustré dans Figure 1.

Figure 1. Architecturee générale du cadre de prototypage d'interface utilisateur automatisé proposé. Le diagramme illustre l'ensemble du pipeline, à partir d'une image d'interface utilisateur en entrée. La détection des composants est effectuée à l'aide de Faster R-CNN afin d'identifier les éléments d'interface. Les composants détectés sont ensuite traités à l'aide d'une modélisation perceptive basée sur CAM02-UCS pour l'extraction de la hiérarchie et de la disposition. Une optimisation cognitive est ensuite appliquée en utilisant les principes de la Gestalt, la loi de Fitts, la loi de Hick et des ajustements fondés sur l'attention. Les flèches indiquent le flux de données entre les modules, aboutissant à la sortie du prototype d'interface utilisateur final. Veuillez cliquer ici pour afficher une version agrandie de cette figure.

Aperçu du cadre

Figure 1 illustre le flux de travail de bout en bout du cadre de prototypage d'interface utilisateur (IU) automatisé proposé, qui transforme une capture d'écran brute d'une IU en un prototype raffiné sur le plan cognitif. Le processus débute avec l'image d'entrée de l'IU, qui est transmise au module de détection de composants basé sur Faster R-CNN. Ce module identifie les éléments d'interface tels que les boutons, les icônes, les champs de texte et les conteneurs, puis fournit leurs cadres englobants et leurs étiquettes de classe correspondants. Les composants détectés sont ensuite traités lors de l'étape d'extraction de la hiérarchie et de la disposition. En se basant sur les relations spatiales et les motifs structurels, le système construit un arbre hiérarchique de la disposition qui reflète la manière dont les utilisateurs perçoivent naturellement l'organisation de l'écran. Cette représentation capture le regroupement visuel et les dépendances structurelles entre les éléments de l'IU. La disposition extraite est ensuite affinée par une optimisation cognitive grâce à l'application de principes de conception centrés sur l'humain. Ces principes incluent le regroupement de la Gestalt pour le regroupement visuel, la loi de Fitts pour optimiser la taille des cibles tactiles et leur accessibilité, la loi de Hick pour réduire la complexité de décision, et un espacement fondé sur l'attention afin d'améliorer la hiérarchie visuelle. En conséquence, la disposition devient plus intuitive, plus lisible et plus efficace pour l'interaction utilisateur. Enfin, la disposition optimisée est combinée à une modélisation perceptive des couleurs pour générer un prototype d'IU cohérent. L'interface résultante est structurellement précise, visuellement harmonieuse et conforme aux attentes humaines en matière d'utilisabilité.

Le cadre a été implémenté à l'aide de PyTorch 2.0 sur Ubuntu 22.04. Les expériences ont été menées sur un système équipé d'un GPU NVIDIA RTX 4090 (24 Go de mémoire vidéo). Le modèle Faster R-CNN utilisait un réseau ResNet-50 comme base, pré-entraîné sur le jeu de données ImageNet. L'entraînement a été effectué à l'aide de l'optimiseur de descente de gradient stochastique (SGD) avec un taux d'apprentissage de 0,001, une taille de lot de 16 et jusqu'à 60 époques. Un arrêt précoce a été appliqué pour éviter le surapprentissage, en utilisant un ensemble de validation composé de 20 % des données. Bien que l'entraînement ait été réalisé sur un maximum de 60 époques, la convergence était généralement atteinte plus tôt grâce à l'arrêt précoce basé sur la perte de validation. Le moment et la décroissance du poids ont été fixés respectivement à 0,9 et 0,0005. L'augmentation des données comprenait la normalisation, le retournement horizontal aléatoire, ainsi que le rognage aléatoire et le redimensionnement.

Préparation du jeu de données

Pour soutenir le cadre de prototypage d'interface utilisateur (IU) automatisé proposé, trois jeux de données complémentaires ont été utilisés : ENRICO²⁹, RICO³⁰ et le jeu de données sur les couleurs d'IU de Guo¹. Le jeu de données RICO contient 66 261 écrans d'IU Android collectés à partir de 9 700 applications, offrant une grande diversité à grande échelle pour la détection de composants et l'extraction de disposition hiérarchique. ENRICO comprend 1 464 captures d'écran d'IU de haute qualité classées manuellement en 20 motifs de conception, permettant une meilleure généralisation pour le raisonnement structurel et la modélisation de la cohérence de la disposition. Le jeu de données sur les couleurs d'IU de Guo se compose de 128 images d'IU sélectionnées accompagnées de thèmes de couleurs annotés, utilisées pour la modélisation perceptive des couleurs et l'évaluation des palettes. Toutefois, en raison de sa taille relativement plus petite, ce jeu de données peut introduire une certaine variabilité dans les caractéristiques de disposition. Pour cette étude, un jeu de données combiné de 5 128 écrans a été préparé pour l'entraînement et l'évaluation. Plus précisément, environ 4 000 images provenant de RICO ont été utilisées pour entraîner le modèle Faster R-CNN en vue de la détection de composants, 1 000 images provenant d'ENRICO ont été utilisées pour l'apprentissage des motifs de disposition et la modélisation de la cohérence structurelle, et 128 images provenant du jeu de données de Guo ont été utilisées pour les tâches d'évaluation des couleurs. Toutes les images ont été normalisées à une résolution de 480 × 800 pixels, converties en espace colorimétrique sRGB uniforme, et réannotées avec des cadres englobants normalisés et des métadonnées hiérarchiques afin d'assurer la compatibilité entre les jeux de données. Un aperçu des jeux de données utilisés dans cette étude est fourni dans Tableau 2. Le jeu de données RICO permet la détection à grande échelle des composants d'IU et l'analyse structurelle, tandis qu'ENRICO améliore la capacité du modèle à reconnaître les motifs de disposition et à appliquer une cohérence entre les écrans. Le jeu de données sur les couleurs d'IU de Guo, bien que plus petit, joue un rôle essentiel dans l'évaluation de l'harmonie perceptive des couleurs et de la modélisation du contraste. Ensemble, ces jeux de données fournissent une base complète et bien équilibrée pour l'entraînement, la validation et l'évaluation du cadre de prototypage d'IU automatisé proposé.

Jeu de données	Nombre total d'images disponibles	Images utilisées dans l'étude	Objectif dans le cadre proposé
RICO Dataset30	66 261	4 000	Détection des composants d'interface utilisateur, extraction de la disposition structurelle
ENRICO Dataset29	1 464	1 000	Apprentissage des motifs de conception, modélisation de la cohérence de la disposition
Guo’s UI Color Dataset1	128	128	Extraction des thèmes de couleurs, évaluation perceptive des couleurs
Total combiné	67 853	5 128	Jeu de données complet pour la détection, la disposition et la modélisation des couleurs

Tableau 2 : Résumé des ensembles de données utilisés dans le cadre proposé. Le tableau présente les ensembles de données utilisés pour l'entraînement et l'évaluation, notamment les ensembles de données RICO, ENRICO et Guo’s UI Color. Il indique le nombre total d'images disponibles, le sous-ensemble utilisé dans cette étude, ainsi que le rôle spécifique de chaque ensemble de données dans la détection de composants, la modélisation de la disposition et l'analyse perceptive des couleurs dans le cadre proposé.

Une stratégie d'échantillonnage stratifié a été utilisée afin de préserver la diversité des composants d'interface utilisateur, des structures de mise en page et des distributions de couleurs à travers les jeux de données RICO, ENRICO et Guo. Le jeu de données a été divisé en sous-ensembles d'apprentissage (70 %), de validation (15 %) et de test (15 %) à l'aide d'un échantillonnage stratifié. Les images ont été normalisées à l'aide des moyennes (0,485, 0,456 et 0,406) et des écarts types (0,229, 0,224 et 0,225). L'augmentation des données comprenait un retournement horizontal aléatoire (probabilité = 0,5) et un rognage aléatoire (plage d'échelle : 0,8–1,0), suivis d'un redimensionnement à 224 × 224 pixels appliqué durant l'apprentissage.

Annotation des composants et prétraitement

Les ensembles de données RICO, ENRICO et Guo’s UI Color Dataset soutiennent collectivement les trois composantes fonctionnelles principales du cadre de prototypage automatisé proposé : la détection des composants, la modélisation de la disposition et l'optimisation perceptive des couleurs. L'ensemble de données RICO contient une collection à grande échelle de plus de 66 000 écrans d'interfaces mobiles et est principalement utilisé pour entraîner le module de détection des composants. Sa diversité permet au modèle Faster R-CNN d'apprendre des représentations robustes des éléments d'interface courants tels que les boutons, les images et les champs de texte à travers une large gamme d'applications. Cela garantit une détection et une localisation précises des composants d'interface sous différentes conditions de conception. L'ensemble de données ENRICO fournit des écrans d'interface de haute qualité, étiquetés par motifs, permettant d'apprendre les relations structurelles et les schémas de disposition. Il permet au système de comprendre les relations entre composants, l'organisation hiérarchique et les modèles de conception courants. Cet ensemble de données joue un rôle essentiel dans la modélisation des structures de disposition et le respect de la cohérence entre plusieurs écrans, permettant au cadre de générer des dispositions conformes aux conventions de conception établies. En revanche, l'ensemble de données Guo’s UI Color Dataset est spécifiquement utilisé pour la modélisation perceptive et cognitive des couleurs. Contrairement à RICO et ENRICO, qui se concentrent sur les aspects structurels, cet ensemble contient des images d'interfaces soigneusement sélectionnées accompagnées de thèmes de couleurs annotés. Ces annotations servent à entraîner les modules d'extraction des couleurs et d'évaluation de l'harmonie chromatique. En mappant les relations entre couleurs dans des espaces colorimétriques perceptuels tels que CAM02-UCS, le cadre apprend à générer des palettes de couleurs équilibrées en termes de contraste, d'accessibilité et de cohérence esthétique. Ensemble, ces ensembles de données forment un pipeline intégré : RICO soutient la détection des composants, ENRICO permet la compréhension des motifs de disposition et la cohérence structurelle, et l'ensemble de données de Guo facilite l'optimisation perceptive des couleurs. Cette intégration garantit que les prototypes d'interface générés sont structurellement précis, visuellement harmonieux et optimisés sur le plan cognitif.

La normalisation a été effectuée en utilisant une moyenne de [0.485, 0.456, 0.406] et un écart type de [0.229, 0.224, 0.225]. Des techniques d'augmentation des données, incluant le rognage aléatoire, le retournement horizontal et la rotation, ont été appliquées afin d'améliorer la généralisation du modèle. De plus, les valeurs des pixels ont été ramenées à l'intervalle [0, 1], et toutes les images ont été redimensionnées à une résolution de 480 × 800 pixels afin d'assurer une cohérence entre les ensembles de données. Les images redimensionnées à 224 × 224 pixels sont utilisées pour l'augmentation pendant l'entraînement, tandis que la résolution d'origine de 480 × 800 pixels est conservée pour l'analyse de la disposition. Les boîtes englobantes ont été ajustées afin de filtrer les annotations non pertinentes à l'aide de seuils prédéfinis. Pour assurer une uniformité entre les ensembles de données, tous les éléments d'interface utilisateur ont été annotés manuellement à l'aide de l'outil d'annotation LabelImg. Un schéma prédéfini a été établi avant l'annotation afin de classer les éléments d'interface utilisateur en catégories telles que bouton, texte, image, icône et conteneur. Pour la représentation des boîtes englobantes, un système de coordonnées uniforme a été appliqué, et une information hiérarchique a été construite en fonction des relations spatiales entre les éléments et leurs associations parent-enfant au sein de l'arbre de disposition. En outre, des directives ont été établies afin d'assurer une annotation cohérente des éléments, une gestion appropriée des composants superposés et l'application de seuils de taille minimale sur les ensembles de données RICO, ENRICO et Guo.

Des formulations mathématiques détaillées pour l'entraînement de la détection des composants et l'extraction des motifs de disposition sont fournies dans le Supplementary File 1.

Le modèle Faster R-CNN a été entraîné à l'aide de SGD avec une inertie de 0,9 et une décroissance du poids de 0,0005. Le taux d'apprentissage initial a été fixé à 0,001 et ajusté à l'aide d'une politique de décroissance par étapes basée sur les performances de validation. L'entraînement a été effectué pendant un maximum de 60 époques avec une taille de lot de 16. Un arrêt précoce a été appliqué pour éviter le surapprentissage, en utilisant un ensemble de validation composé de 20 % des données d'entraînement.

La fonction de mappage f(.) prend en entrée les éléments d'interface utilisateur détectés et produit en sortie une représentation hiérarchique de la disposition. Elle calcule les relations d'adjacence entre les éléments d'interface utilisateur en fonction de critères de distance spatiale et d'alignement, puis construit une matrice d'adjacence pour représenter ces relations. Un algorithme de regroupement, tel que DBSCAN, est ensuite appliqué pour regrouper les composants associés. Enfin, les éléments regroupés sont organisés en structures hiérarchiques selon des relations parent–enfant, formant ainsi une représentation structurée de la disposition.

Des formulations détaillées pour la modélisation de l'harmonie des couleurs et de l'objectif d'optimisation unifié sont fournies dans le Supplementary File 1.

Cette fonction objective formalise mathématiquement l'intégration de la détection structurelle, du raisonnement sur la disposition et de la modélisation perceptive des couleurs, garantissant que tous les composants du cadre contribuent conjointement à la génération de prototypes d'interfaces utilisateur cohérents et centrés sur l'utilisateur. L'optimisation est effectuée de manière modulaire pour chaque composant du cadre. La descente de gradient stochastique (SGD) est utilisée pour entraîner le module de détection des composants, tandis que l'optimiseur Adam est utilisé lors de l'optimisation conjointe de l'objectif unifié. L'objectif combiné sert à guider les performances globales du système. Pour les étapes d'optimisation conjointe, la fonction objective est minimisée à l'aide de l'optimiseur Adam avec un taux d'apprentissage de 0,001 et une taille de lot de 16. L'entraînement est réalisé sur un maximum de 60 époques, avec arrêt précoce appliqué lorsque la variation de la perte sur l'ensemble de validation est inférieure à 10⁻⁴ pendant cinq époques consécutives.

Détection de composants à l'aide de Faster R-CNN

Le cadre proposé utilise Faster R-CNN pour la détection automatique des composants d'interface utilisateur, notamment les boutons, icônes, champs de texte, images et conteneurs. Faster R-CNN convient particulièrement bien à cette tâche car il allie une grande précision de détection d'objets à une génération efficace de propositions de régions, ce qui est essentiel pour gérer des agencements d'interface utilisateur complexes contenant des éléments densément regroupés. Le modèle utilise un réseau ResNet-50 pré-entraîné sur le jeu de données ImageNet afin d'extraire des cartes de caractéristiques convolutives à partir de chaque écran d'interface utilisateur. Lors de l'entraînement, les couches initiales ont été figées pour conserver des caractéristiques visuelles générales, tandis que les couches supérieures (conv4_x et conv5_x) ont été ajustées finement pour la détection de composants spécifiques à l'interface utilisateur. Ces cartes de caractéristiques capturent les structures visuelles, les contours, les textures et les limites des composants. Lors de la détection, le réseau de proposition de régions (RPN) identifie des régions candidates (ancres) susceptibles de contenir des composants d'interface utilisateur. Les ancres sont définies à l'aide de plusieurs échelles (128, 256 et 512) et de rapports d'aspect (1:1, 1:2 et 2:1) afin de s'adapter aux éléments d'interface utilisateur de tailles variées. Pendant l'entraînement, les ancres dont l'intersection sur union (IoU) avec les boîtes de référence est supérieure à 0,7 sont étiquetées comme positives, tandis que celles dont l'IoU est inférieure à 0,3 sont étiquetées comme négatives ; les ancres ayant des valeurs d'IoU intermédiaires sont ignorées. Chaque ancre se voit attribuer une probabilité indiquant la présence d'un composant. Une suppression non maximale (NMS) est ensuite appliquée pour éliminer les propositions redondantes et superposées, assurant ainsi une localisation efficace des éléments d'interface utilisateur significatifs, même dans des interfaces encombrées. Une fois les régions candidates générées, chaque proposition est classée dans des catégories prédéfinies de composants, et les coordonnées de son cadre englobant sont affinées. Une opération d'alignement de la région d'intérêt (ROI) extrait des représentations de caractéristiques de taille fixe pour chaque proposition, qui sont ensuite traitées par des couches entièrement connectées pour la classification et la régression. La branche de classification fournit les probabilités de classe, tandis que la branche de régression prédit les coordonnées précises du cadre englobant. L'ensemble du modèle Faster R-CNN est entraîné de bout en bout en optimisant une fonction de perte conjointe combinant la perte du RPN et la perte finale de détection. Cela permet au système non seulement de reconnaître avec précision les composants d'interface utilisateur, mais aussi de les localiser exactement à travers diverses structures d'interface. Une description détaillée de la détection de composants par Faster R-CNN, incluant l'étape du RPN, la classification des ROI, l'affinement des cadres englobants et l'objectif d'optimisation final, est fournie dans le Supplementary File 1.

Algorithme S1 présente le flux de travail détaillé de détection des composants et d'extraction structurelle (Fichier supplémentaire 1). Il décrit l'ensemble du processus de détection automatique des composants d'interface utilisateur et d'extraction structurelle à partir d'une image brute d'écran. L'image d'entrée est d'abord prétraitée, puis transmise à un réseau neuronal convolutif (CNN) de base afin d'extraire des caractéristiques visuelles profondes. Ces caractéristiques sont utilisées par la proposition de régions orientée réseau (RPN) pour générer des boîtes englobantes candidates, qui sont ensuite affinées par classification et régression. La suppression non maximale (NMS) élimine les détections redondantes afin d'assurer une localisation précise. Après la détection, les composants sont regroupés selon leur proximité spatiale à l'aide du regroupement spatial basé sur la densité d'applications avec bruit (DBSCAN). Cette étape de regroupement permet de construire un arbre hiérarchique d'interface utilisateur qui capture les relations parent–enfant et les regroupements logiques entre les composants. Cette représentation hiérarchique constitue la base pour les analyses ultérieures de la disposition et la compréhension de l'interface utilisateur. Figure 2 illustre le processus de détection de composants par Faster R-CNN sur un écran d'interface utilisateur mobile. L'interface d'entrée (à gauche) contient des éléments d'interface tels que des boutons et des blocs de texte, automatiquement encadrés par des boîtes englobantes. Ces régions détectées sont ensuite classées en catégories de composants (par exemple, Bouton et Texte), comme indiqué par les liaisons étiquetées. Le module de détection Faster R-CNN (à droite) affine les coordonnées des boîtes englobantes, attribue des étiquettes sémantiques et fournit des informations structurées au niveau des composants. Cette étape constitue une base essentielle pour les processus ultérieurs, notamment l'extraction de la disposition, l'optimisation cognitive et la génération de prototypes d'interface utilisateur, en offrant des représentations précises et sémantiquement significatives des composants d'interface utilisateur.

Figure 2. Détection des composants des éléments d'interface utilisateur à l'aide de Faster R-CNN. La figure illustre la détection de composants d'interface à partir d'une capture d'écran d'interface en entrée. Les régions d'intérêt sont identifiées à l'aide de cadres englobants, et les éléments tels que les boutons et les champs de texte sont classés à l'aide de Faster R-CNN. Des flèches indiquent l'association des composants détectés à leurs étiquettes sémantiques correspondantes. Veuillez cliquer ici pour afficher une version agrandie de cette figure.

Extraction du motif de disposition et modélisation hiérarchique

Après la détection des composants à l'aide de Faster R-CNN, chaque élément d'interface utilisateur est représenté par un cadre englobant. Toutefois, ces cadres englobants seuls ne permettent pas de comprendre comment les éléments sont organisés structurellement au sein de l'interface, par exemple quels éléments appartiennent aux en-têtes, aux barres de navigation ou aux régions de contenu groupées. Pour remédier à cette limitation, les composants détectés sont transformés en un arbre logique d'interface utilisateur, dans lequel chaque composant est considéré comme un nœud et les composants fonctionnellement ou visuellement liés sont regroupés sous des nœuds parents communs. Afin d'identifier des groupes de disposition significatifs, des techniques de regroupement telles que DBSCAN ou le regroupement hiérarchique agglomératif sont appliquées. Ces méthodes analysent la proximité spatiale et les motifs d'alignement entre les composants afin de détecter les relations entre les éléments d'interface utilisateur. De façon analogue aux pratiques humaines de conception, le système apprend à reconnaître des motifs structurels courants tels que les en-têtes, les pieds de page, les grilles et les blocs de contenu. Une fois le regroupement établi, des propriétés structurelles supplémentaires — notamment l'alignement, l'organisation en grille et l'ordre de lecture — sont analysées afin de construire une représentation complète de la disposition. Par exemple, des composants alignés en colonnes de largeur égale peuvent indiquer une disposition basée sur des cartes, tandis que des éléments empilés verticalement peuvent indiquer une interface basée sur un formulaire ou un fil d'actualité. En intégrant le regroupement, le raisonnement spatial et les règles d'alignement, le cadre de travail construit un arbre hiérarchique d'interface utilisateur qui capture à la fois le regroupement visuel et les relations fonctionnelles. Cette représentation hiérarchique sert de fondement à l'affinement ultérieur de la disposition et à la modélisation de la cohérence entre plusieurs écrans, permettant au système de générer des conceptions d'interface structurées, cohérentes et centrées sur l'utilisateur.

Des formulations détaillées pour la distance spatiale et la similarité d'alignement sont fournies dans le Supplementary File 1.

Regroupement par regroupement de mise en page (DBSCAN)

Pour identifier les groupes de disposition, DBSCAN est appliqué. DBSCAN utilise deux paramètres : (1) ε = distance maximale entre les composants voisins et (2) = nombre minimal de composants requis pour former un groupe. Pour cette analyse, les paramètres de DBSCAN ont été choisis empiriquement en fonction de la résolution normalisée de l'interface utilisateur (480 × 800 pixels). Le paramètre de distance de voisinage a été fixé à ε = 50 pixels afin de capturer la proximité spatiale entre les composants adjacents de l'interface utilisateur. Le nombre minimal de points requis pour former un groupe a été fixé à MinPts = 3 afin d'éviter la formation de groupes insignifiants ou fallacieux de composants d'interface utilisateur.

La formulation détaillée de la construction de l'arbre logique de l'interface utilisateur est fournie dans Fichier supplémentaire 1.

Modélisation perceptive des couleurs avec CAM02-UCS

La modélisation perceptive des couleurs garantit que les couleurs utilisées dans l'interface utilisateur générée sont harmonieuses, lisibles et cognitivement efficaces. Les couleurs dominantes sont extraites à partir de sources d'entrée telles que des images d'interface utilisateur, à l'aide de techniques de regroupement. Plus précisément, un regroupement par K-moyennes avec initialisation K-moyennes++ est appliqué sur 300 itérations afin d'obtenir des palettes de couleurs représentatives. Toutefois, l'espace colorimétrique RVB (RGB) ne reflète pas fidèlement la perception visuelle humaine, ce qui signifie que des couleurs numériquement proches peuvent sembler perceptuellement différentes. Pour pallier cette limitation, toutes les couleurs extraites sont transformées en CAM02-UCS, un espace perceptuellement uniforme. Dans cet espace, des distances égales correspondent à des différences de couleur perçues équivalentes, ce qui le rend adapté à la modélisation de l'harmonie et du contraste des couleurs. Une fois projetées dans CAM02-UCS, les différences perceptives de couleur sont calculées à l'aide de la distance euclidienne, permettant au système de quantifier le contraste, l'harmonie et les variations entre les couleurs. Les couleurs trop proches sont espacées pour améliorer la lisibilité, tandis que les couleurs excessivement contrastées sont atténuées afin d'éviter l'inconfort visuel. La palette générée respecte également des normes d'accessibilité telles que WCAG AA et AAA, en assurant un contraste suffisant entre les éléments au premier plan et en arrière-plan. En outre, l'harmonie des couleurs est garantie en limitant les relations au sein de la palette à des schémas complémentaires, analogues ou triadiques, selon le thème d'interface utilisateur visé. Cela assure que la palette de couleurs résultante soit non seulement esthétiquement plaisante, mais aussi fonctionnellement accessible et optimisée sur le plan cognitif. Pour affiner davantage la palette, un processus d'optimisation est appliqué sous contraintes de similarité perceptive, de contraste, d'harmonie et de cohérence avec l'identité visuelle. Une couleur principale est sélectionnée (par exemple, issue de l'identité de marque), et les couleurs secondaires sont ajustées en luminance et en chromaticité afin de préserver la hiérarchie visuelle. Un mécanisme d'évaluation basé sur des règles évalue les palettes candidates selon les distances perceptives et les métriques d'accessibilité, en minimisant la charge cognitive tout en maintenant un équilibre esthétique. En conséquence, le cadre produit des schémas de couleurs pour interfaces utilisateur qui présentent une cohérence, une lisibilité et une uniformité perceptive de niveau professionnel.

Des expressions mathématiques détaillées pour la modélisation perceptive des couleurs basée sur CAM02-UCS sont fournies dans le Fichier supplémentaire 1.

Algorithme S2 (Fichier supplémentaire 1) décrit le flux de travail d'extraction et d'optimisation des couleurs perçues basé sur CAM02-UCS, soumis à des contraintes d'harmonie et d'accessibilité. Dans un premier temps, les couleurs dominantes sont extraites de l'image d'entrée et transformées dans l'espace CAM02-UCS afin que les différences de couleur correspondent à la perception humaine. Les distances perceptuelles entre les couleurs sont ensuite calculées et limitées à des seuils prédéfinis pour assurer à la fois clarté et harmonie. Par la suite, l'accessibilité est garantie en évaluant les rapports de contraste de luminance conformément aux directives WCAG. La palette finale est obtenue en optimisant une fonction objective combinée qui équilibre l'espacement perceptuel, les exigences de contraste et les contraintes d'harmonie des couleurs. Cela garantit que les schémas de couleurs d'interface générés sont non seulement visuellement attrayants, mais aussi lisibles, accessibles et perceptuellement cohérents.

Optimisation de la conception cognitive

L'optimisation de la conception cognitive garantit que les prototypes d'interface utilisateur générés automatiquement sont non seulement visuellement cohérents, mais aussi faciles à comprendre et à utiliser. Ce module intègre des principes fondamentaux de conception cognitive, notamment les principes de la Gestalt, la loi de Fitts et la loi de Hick, afin de guider l'agencement, le regroupement et l'espacement des composants de l'interface utilisateur. Des formulations mathématiques détaillées relatives à l'optimisation de la conception cognitive sont fournies dans le Supplementary File 1.

Objectif intégré d'optimisation cognitive

L'expression mathématique de l'objectif intégré d'optimisation cognitive est fournie dans le fichier supplémentaire 1. Les coefficients représentant l'importance du regroupement visuel, de l'efficacité des interactions et de la complexité de la décision sont notés respectivement alpha, beta et gamma. Dans cette étude, les valeurs de alpha, beta et gamma ont été déterminées empiriquement à l'aide du jeu de données de validation. Pour la présente expérience, les coefficients ont été fixés comme suit : α = 0,5, β = 0,3 et γ = 0,2. Cette configuration assure un équilibre efficace entre regroupement visuel, efficacité des interactions et simplicité de la décision.

Cohérence entre plusieurs écrans et génération d'interface utilisateur

La modélisation de la cohérence multiscreen garantit que différents écrans au sein d'une application partagent une identité visuelle, une structure de mise en page et un schéma d'interaction cohérents. Lorsque les utilisateurs naviguent entre les écrans, ils développent des attentes concernant le positionnement des éléments, la typographie, les espacements et la hiérarchie visuelle. Pour répondre à ces attentes, le système analyse les schémas transversaux à l'aide de modèles dérivés des jeux de données RICO et ENRICO. Ces modèles capturent des structures d'interface utilisateur courantes, telles que les mises en page accueil–détail, les schémas liste–détail, les formulaires en plusieurs étapes et les flux de tableau de bord. En comparant le positionnement des composants et leurs comportements de regroupement, le système construit un profil structurel multiscreen qui identifie les éléments devant rester constants et ceux pouvant varier. Une fois les schémas structurels identifiés, le cadre impose une cohérence dans les échelles de typographie, les rapports d'espacement, les grilles de mise en page et les ancres de navigation. Par exemple, les barres d'en-tête conservent une hauteur constante, les boutons principaux gardent une taille et un alignement uniformes, et les blocs de contenu suivent un ordre visuel prévisible. Ceci est obtenu grâce à un processus de régularisation de la mise en page qui évalue chaque écran par rapport à des contraintes structurelles globales. Si un écran s'écarte des modèles appris—comme des remplissages incohérents ou des titres mal alignés—le système ajuste automatiquement la mise en page pour rétablir la cohérence. Ces corrections contribuent à assurer une expérience utilisateur fluide et à réduire les coûts cognitifs liés aux changements d'écran. Le cadre analyse en outre le graphe de navigation entre les écrans afin de maintenir une cohérence dans le flux d'interaction. Les schémas de navigation courants, notamment les transitions avant/arrière, la navigation par onglets et les workflows en plusieurs étapes, sont identifiés et appliqués. Chaque transition est validée afin de garantir son alignement avec le modèle mental de l'utilisateur, améliorant ainsi l'ergonomie et réduisant la confusion. En conséquence, le modèle de cohérence multiscreen minimise le bruit visuel, renforce la familiarité et favorise une expérience d'interaction unifiée.

Des formulations mathématiques détaillées concernant la cohérence multiscreen et la génération d'interface utilisateur sont fournies dans le Fichier supplémentaire 1.

Enfin, le moteur de rendu génère des sorties visuelles sous des formats tels que des structures filaires SVG, des prototypes HTML/CSS ou des maquettes d'interface utilisateur basées sur des pixels. Les écrans d'interface utilisateur résultants présentent un ordre de lecture correct, des relations harmonieuses entre les couleurs, un alignement précis sur la grille et une hiérarchie visuelle cohérente à travers plusieurs écrans.

Algorithme S3 fournit l'optimisation de la disposition cognitive-visuelle et le flux de travail de cohérence multisupport (Fichier supplémentaire 1). L'Algorithme S3 décrit le processus intégré d'optimisation cognitive et structurelle utilisé pour générer des dispositions d'interface utilisateur conviviales. Il combine le regroupement perceptif (principes de la Gestalt), l'efficacité des interactions (loi de Fitts) et la simplicité de décision (loi de Hick) au sein d'un cadre d'optimisation unifié. Dans un premier temps, les relations spatiales entre les composants sont évaluées afin d'établir des regroupements perceptifs. L'efficacité des interactions est ensuite optimisée en ajustant la taille et la disposition des composants, tandis que la complexité des décisions est maîtrisée en limitant le nombre de choix présentés aux utilisateurs. En outre, l'algorithme garantit la cohérence multisupport en alignant chaque écran sur des modèles de disposition appris, assurant ainsi une uniformité dans la typographie, les espacements et l'organisation structurelle. Une fonction d'optimisation multi-objectif affine ensuite la disposition en équilibrant alignement, espacement et coût cognitif, produisant ainsi une interface à la fois visuellement cohérente et cognitivement efficace. Dans l'ensemble, cet algorithme assure que les dispositions multisupport générées conservent un haut niveau de cohérence visuelle, d'ergonomie et de clarté perceptuelle.

Résultats

Le cadre de prototypage d'interface utilisateur automatisé proposé a été évalué à l'aide d'un ensemble de données intégré comprenant 5 128 écrans d'interface utilisateur provenant de trois sources : 4 000 images RICO, 1 000 écrans ENRICO et 128 échantillons d'interfaces utilisateur annotés en couleurs provenant de la base de données UI Color de Guo. Cet ensemble de données mixte fournit une référence bien équilibrée pour évaluer la précision de détection des composants, la clarté structurelle de la disposition, la cohérence entre plusieurs écrans et l'harmonie perceptive des couleurs.

Les résultats expérimentaux montrent que le modèle de détection basé sur Faster R-CNN atteint une précision de détection des composants de 92,4 % et se généralise efficacement à divers styles d'interfaces mobiles. De plus, l'intégration d'annotations de motifs provenant d'ENRICO améliore le raisonnement de la disposition, entraînant une augmentation de 18,7 % de la clarté de la mise en page et une meilleure préservation de l'ordre de lecture. Dans les expériences d'évaluation des couleurs, le module de modélisation des couleurs piloté par CAM02-UCS génère des palettes qui sont, selon les évaluations des designers, 24,5 % plus harmonieuses et offrent une uniformité perceptive supérieure par rapport aux méthodes traditionnelles de génération de palettes basées sur RGB et LAB. Par ailleurs, la modélisation de la cohérence entre écrans permet une amélioration de 28 % de l'alignement inter-écrans et de la cohérence typographique. Des études utilisateurs impliquant 30 participants montrent une réduction de 31 % de la charge cognitive perçue lors de l'interaction avec les prototypes produits par le système proposé. Ensemble, ces résultats indiquent que la combinaison de la détection de composants, de la modélisation perceptive des couleurs et de l'optimisation cognitive permet de produire des prototypes d'interface qui sont non seulement structurellement précis, mais aussi visuellement cohérents et cognitivement efficaces. Tableau 3 met en évidence l'environnement de simulation et les paramètres techniques utilisés pour évaluer le cadre de prototypage d'interface proposé. Les procédures de formation intensives en calcul pour Faster R-CNN et les modules de cohérence de la disposition ont été réalisées à l'aide d'un GPU haute performance NVIDIA RTX 4090. Toutes les expériences ont été menées dans un environnement Ubuntu 22.04 en utilisant PyTorch 2.0 pour l'implémentation de l'apprentissage profond.

Paramètre	Configuration
Matériel	NVIDIA RTX 4090 GPU (24 GB), processeur Intel i9, 64 Go de RAM
Système d'exploitation	Ubuntu 22.04 LTS
Framework d'apprentissage profond	PyTorch 2.0
Backbone Faster R-CNN	ResNet-50 + FPN
Résolution d'image	480 × 800 (normalisée pour tous les jeux de données)
Taille du lot d'entraînement	8
Optimiseur	AdamW (LR = 1e−4, décroissance du poids = 0,01)
Époques	40
Espace de modélisation des couleurs	CAM02-UCS
Regroupement pour l'extraction de la palette	K-means (k = 5)
Regroupement de la disposition	DBSCAN (ε = 20, min_samples = 3)

Tableau 3 : Paramètres de mise en œuvre et configuration expérimentale du cadre proposé. Le tableau résume la configuration matérielle et logicielle utilisée pour l'entraînement et l'évaluation du modèle, incluant les ressources informatiques, le système d'exploitation, le framework d'apprentissage profond, l'architecture du modèle, la résolution des images, les paramètres d'entraînement, la stratégie d'optimisation, l'espace de modélisation des couleurs, ainsi que les méthodes de regroupement utilisées pour l'extraction de la palette et le regroupement de la disposition.

L'architecture Faster R-CNN utilise un réseau ResNet-50 comme base avec un FPN afin de détecter un large éventail de composants d'interface utilisateur finement détaillés. Toutes les images d'interface sont redimensionnées uniformément à 480 × 800 pixels avant traitement. L'entraînement est effectué sur 60 époques à l'aide de l'optimiseur SGD, avec une taille de lot de 16 pour garantir une convergence stable. Le générateur de palette de couleurs utilise CAM02-UCS combiné à un regroupement par K-moyennes, tandis que DBSCAN est utilisé pour le regroupement de la disposition structurelle. Ces paramètres techniques assurent que les résultats d'interface utilisateur générés sont reproductibles, stables et de haute fidélité. Afin d'évaluer de manière complète le cadre proposé de prototypage automatisé d'interface utilisateur, quatre catégories de métriques d'évaluation sont utilisées :

i) Les performances de détection des composants, analysées à l'aide de la précision, du rappel, du score F1, de l'intersection sur l'union (IoU) et de la précision moyenne (mAP), qui quantifient l'exactitude du modèle Faster R-CNN dans l'identification des composants d'interface utilisateur sur les jeux de données RICO et ENRICO ;

ii) La clarté de la disposition et la cohérence structurelle, mesurées à l’aide de l’erreur d’alignement (AE), de la précision du regroupement, de la justesse de l’ordre de lecture et des scores de cohérence entre écrans dérivés des contraintes des motifs de conception ;

iii) La qualité perceptive des couleurs, évaluée à l'aide de la distance perceptuelle CAM02-UCS (ΔE_UCS), des rapports de contraste WCAG 2.1, de l'indice de diversité et de scores d'harmonie des couleurs inspirés du cadre d'évaluation des couleurs d'interface utilisateur de Guo ;

iv) Des métriques d'efficacité cognitive centrées sur l'utilisateur, incluant la charge cognitive mesurée par l'indice de charge mentale NASA (NASA-TLX), les évaluations de cohérence esthétique et l'efficacité d'exécution des tâches.

Ces métriques permettent d'évaluer le cadre non seulement en termes de précision de détection, mais aussi en termes d'harmonie perceptive, de qualité d'utilisation et d'expérience cognitive.

Métriques de détection des composants

La précision décrit l'exactitude du modèle dans la prédiction des composants d'interface utilisateur sans générer de faux positifs. Une précision élevée implique que la majorité des boîtes englobantes prédites correspondent à des éléments d'interface valide. Le rappel mesure la capacité du modèle à identifier tous les composants d'interface pertinents sur un écran. Un rappel élevé indique que le modèle détecte avec succès la plupart des composants de référence. Le score F1, défini comme la moyenne harmonique de la précision et du rappel, fournit une évaluation équilibrée et est particulièrement utile lorsque les composants d'interface sont répartis de manière inégale dans les ensembles de données.

La métrique IoU mesure dans quelle mesure la boîte englobante prédite se superpose à la boîte englobante de référence. Dans les tâches de détection d'objets, des seuils IoU de 0,5 et 0,75 sont couramment utilisés pour représenter des conditions d'évaluation modérées et strictes. La mAP résume la performance de détection sur plusieurs seuils IoU. La métrique mAP@0,5:0,95 fournit une évaluation plus robuste en moyennant la précision sur des seuils allant de 0,5 à 0,95 par pas de 0,05, et est donc largement acceptée comme référence standard pour la détection d'objets.

Les résultats de détection sur les trois ensembles de données indiquent que le module de détection de composants proposé offre des performances régulières et élevées. Les résultats quantitatifs sont présentés dans le Tableau 4. L'ensemble de données RICO atteint les performances les plus élevées, avec une précision de 0,91, un rappel de 0,88 et un score F1 de 0,89, grâce à son vaste ensemble d'annotations de composants d'interface utilisateur, très diversifié. ENRICO présente des scores légèrement inférieurs en raison de sa structure plus simplifiée et du nombre réduit de types de composants annotés. L'ensemble de données Guo enregistre le score F1 le plus faible (0,81), probablement en raison de variations visuelles plus importantes et de motifs de disposition moins standardisés, ce qui rend la détection plus difficile. Dans l'ensemble, ces résultats confirment que le modèle conserve des performances robustes en matière de détection de composants, quelles que soient les styles de conception d'interface utilisateur et les caractéristiques des ensembles de données.

Jeu de données	Précision	Rappel	Score F1
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

Tableau 4 : Performances de détection des composants sur différents ensembles de données. Le tableau présente la précision, le rappel et le score F1 pour la détection des composants d'interface utilisateur sur les ensembles de données RICO, ENRICO et Guo, démontrant l'efficacité du modèle de détection.

Figure 3 montre les performances du modèle sur les jeux de données RICO, ENRICO et Guo à des seuils d’intersection sur l’union (IoU) de 0,5 et 0,75. Comme prévu, les valeurs de mAP sont plus élevées à un IoU de 0,5 en raison d'une exigence de recouvrement plus permissive. RICO présente systématiquement les valeurs de mAP les plus élevées (0,89 à un IoU de 0,5 et 0,78 à un IoU de 0,75), reflétant la richesse et la cohérence de ses annotations. ENRICO affiche des valeurs légèrement inférieures, tandis que Guo enregistre les scores les plus bas en raison d'une plus grande variation du style de mise en page et de la densité des composants. La tendance à la baisse observée avec des seuils d’IoU plus stricts illustre que la complexité du jeu de données influence directement la robustesse de la détection.

Figure 3. Précision moyenne (mAP) aux seuils d'intersection sur union (IoU) de 0,5 et 0,75 selon les jeux de données. Le graphique en courbes compare les performances de détection des composants sur les jeux de données RICO, ENRICO et Guo. L'axe des abscisses représente les jeux de données, et l'axe des ordonnées indique les valeurs de mAP. Deux courbes correspondent aux seuils d’IoU de 0,5 et 0,75, illustrant la variation des performances selon différents niveaux de sévérité de détection. Veuillez cliquer ici pour visualiser une version agrandie de cette figure.

Figure 4 présente le mAP@IoU(0,5:0,95) pour chaque jeu de données, offrant une évaluation plus large des performances de détection à travers dix seuils IoU. Les résultats révèlent une tendance clairement décroissante, passant de RICO (0,61) à ENRICO (0,57) puis à Guo (0,52), confirmant que le modèle de détection proposé se généralise mieux sur des jeux de données plus grands et plus structurés. Cette métrique moyennée plus stricte met en évidence des dégradations subtiles des performances qui pourraient ne pas être apparentes lors d'une évaluation à seuil unique. Ces résultats indiquent que, bien que le modèle affiche de bonnes performances sur l'ensemble des jeux de données, une diversité accrue des agencements et une plus grande variabilité des composants introduisent des défis supplémentaires dans le cadre d'une évaluation rigoureuse de type COCO. Les résultats de détection sont présentés dans les Figures 3 et 4, qui fournissent des comparaisons quantitatives du mAP à différents niveaux IoU.

Figure 4. Précision moyenne (mAP) moyennée sur les seuils d'intersection sur union (IoU) allant de 0,5 à 0,95 à travers les jeux de données. Le graphique en courbes illustre les performances de détection des composants sur les jeux de données RICO, ENRICO et Guo, en utilisant la métrique mAP moyennée sur des seuils IoU variant de 0,5 à 0,95. L'axe des abscisses représente les jeux de données, et l'axe des ordonnées indique les valeurs mAP correspondantes rapportées sur une échelle de 0 à 1, reflétant les performances du modèle sous différents seuils de détection. Veuillez cliquer ici pour visualiser une version agrandie de cette figure.

Métriques de qualité de la disposition

La qualité de la disposition est évaluée à l'aide de l'AE, de la précision du regroupement (GA) et de la précision de l'ordre de lecture (ROA), qui évaluent collectivement la justesse structurelle, l'organisation perceptive et la lisibilité cognitive des dispositions d'interface utilisateur générées.

Erreur d'alignement.

L'AE (écart au pixel près) indique dans quelle mesure les éléments d'interface sont alignés par rapport à des lignes d'alignement idéales, telles que les repères gauche, droit, supérieur ou de la ligne de base. Une valeur d'AE plus faible indique que les éléments sont disposés de manière cohérente avec une distorsion visuelle minimale, améliorant ainsi la lisibilité et la clarté globale du design. Ce critère est particulièrement important pour évaluer l'affinage de la disposition cognitive, car un mauvais alignement perturbe le flux visuel et augmente la complexité perçue. Figure 5 illustre l'AE sur les jeux de données RICO, ENRICO et Guo, mesurée comme l'écart moyen en pixels par rapport aux lignes d'alignement idéales. Les résultats montrent que RICO atteint la plus faible valeur d'AE (4,2 px), indiquant que les composants d'interface de ce jeu de données présentent des motifs structurels plus cohérents, ce qui facilite l'alignement pour le modèle. ENRICO suit avec un écart d'alignement modéré de 6,1 px, reflétant une combinaison de mises en page bien structurées et variées. Le jeu de données Guo enregistre la valeur d'AE la plus élevée (7,4 px), en raison d'une plus grande diversité dans le positionnement des composants et de structures de mise en page non standard, ce qui rend plus difficile l'affinage basé sur l'alignement. Dans l'ensemble, ces résultats démontrent que le modèle conserve une grande précision d'alignement sur l'ensemble des jeux de données, malgré une complexité croissante des mises en page.

Figure 5. Erreur d'alignement entre les jeux de données. La figure montre l'erreur d'alignement entre les jeux de données ; des valeurs plus faibles indiquent un meilleur alignement. Veuillez cliquer ici pour afficher une version agrandie de cette figure.

Précision du regroupement (GA).

L'analyse de regroupement (GA) quantifie dans quelle mesure le modèle regroupe efficacement les composants d'interface utilisateur (UI) apparentés, par exemple selon les principes de la Gestalt tels que la proximité, la similarité et la continuité. Une précision de regroupement plus élevée indique que le modèle préserve la structure prévue des éléments d'interface, permettant aux utilisateurs d'interpréter l'interface de manière plus naturelle. Cette métrique est particulièrement utile pour évaluer si le module d'affinement de la disposition parvient effectivement à organiser le contenu en groupes visuels significatifs. Figure 6 présente la distribution de la GA obtenue par le cadre proposé sur les trois jeux de données. Le jeu de données ENRICO présente la médiane de GA la plus élevée et l'intervalle interquartile le plus faible, indiquant une performance de regroupement stable et cohérente grâce à ses dispositions bien définies et étiquetées selon des motifs. Le jeu de données RICO montre une précision de regroupement modérée avec une variabilité plus importante, probablement en raison de sa plus grande diversité et de la complexité de ses dispositions. Le jeu de données Guo UI Color enregistre une précision de regroupement inférieure, car ses échantillons sont visuellement hétérogènes et moins centrés sur la structure de la disposition. Dans l'ensemble, les résultats indiquent que le module cognitif d'affinement de la disposition fonctionne de manière fiable sur l'ensemble des jeux de données, offrant les meilleures performances de regroupement sur des données structurellement cohérentes.

Figure 6. Répartition de la précision du regroupement selon les ensembles de données. Le graphique en boîte montre la précision du regroupement fondée sur les principes de la Gestalt à travers les ensembles de données RICO, ENRICO et Guo’s UI Color. Les boîtes représentent l'intervalle interquartile, la ligne centrale indique la médiane, et les moustaches indiquent l'étendue des valeurs. L'axe des abscisses représente les ensembles de données, et l'axe des ordonnées montre les scores de précision du regroupement. La taille de l'échantillon est n=5128 écrans d'interface utilisateur (RICO : 4000, ENRICO : 1000 et Guo : 128). Veuillez cliquer ici pour visualiser une version agrandie de cette figure.

Précision de l'ordre de lecture (ROA).

La précision de l'ordre de lecture (ROA) mesure dans quelle mesure le modèle prédit précisément le flux de lecture naturel d'un écran d'interface utilisateur, généralement selon un motif de haut en bas et de gauche à droite. Le maintien d'un ordre de lecture correct est essentiel pour l'utilisabilité, la clarté de la navigation et la cohérence avec les conventions de conception établies. Un ROA plus élevé indique que le système préserve les schémas de balayage cognitif attendus. Figure 7 présente le ROA à travers différentes étapes d'évaluation pour les jeux de données RICO, ENRICO et Guo. ENRICO atteint systématiquement le ROA le plus élevé en raison de sa structure de mise en page régulière et orientée motif, ce qui permet une prédiction plus précise de séquences de lecture proches de celles des humains. RICO montre une performance modérée avec une légère variabilité, reflétant sa plus grande diversité et sa complexité proche du monde réel. Le jeu de données Guo présente le ROA le plus faible, car de nombreux écrans sont riches visuellement mais manquent de hiérarchies de lecture clairement définies. Dans l'ensemble, ces résultats indiquent que le module proposé de raffinement de la mise en page cognitive fonctionne de manière plus fiable sur des jeux de données structurés tout en maintenant des prédictions stables de l'ordre de lecture à travers des conceptions d'interfaces utilisateur variées.

Figure 7. Précision de l’ordre de lecture au cours des étapes d’évaluation pour plusieurs ensembles de données. Le graphique en courbes montre la précision de l’ordre de lecture au fil des étapes d’évaluation pour les ensembles de données RICO, ENRICO et Guo’s UI Color. L’axe des abscisses représente l’étape d’évaluation, et l’axe des ordonnées indique la précision de l’ordre de lecture. Chaque courbe correspond à un ensemble de données, illustrant les variations dans la préservation du flux visuel au cours des étapes successives d’évaluation. L’étape d’évaluation représente les phases progressives de raffinement du cadre proposé. Veuillez cliquer ici pour visualiser une version agrandie de cette figure.

Score de cohérence de la mise en page (LCS)

Le score de cohérence de disposition (LCS) mesure dans quelle mesure les dispositions d'interface utilisateur générées sont maintenues de façon cohérente sur plusieurs écrans au sein d'une même application. Cela inclut la cohérence en matière d'espacement, de règles d'alignement, de zones typographiques et de motifs de regroupement. Un score plus élevé indique une meilleure cohérence entre les écrans, ce qui se traduit par une expérience utilisateur plus unifiée et intuitive. Figure 8 présente le LCS mesuré à travers plusieurs étapes d'évaluation pour les ensembles de données RICO, ENRICO et Guo sur les couleurs d'interface utilisateur. L'ensemble de données ENRICO atteint systématiquement les valeurs LCS les plus élevées, grâce à ses écrans d'interface utilisateur étiquetés par motifs et structurellement uniformes, ce qui facilite un apprentissage plus stable de la cohérence entre écrans. En revanche, l'ensemble de données RICO montre une cohérence modérée mais en amélioration constante, attribuable à la capacité du modèle à généraliser à partir de dispositions d'interface utilisateur très variées. Comme prévu, l'ensemble de données Guo enregistre les valeurs LCS les plus faibles, car il se concentre principalement sur les caractéristiques de couleur plutôt que sur la structure de la disposition, ce qui rend la cohérence entre plusieurs écrans plus difficile. Dans l'ensemble, ces résultats indiquent que le module proposé de cohérence entre écrans fonctionne le plus efficacement sur des ensembles de données axés sur les motifs, tout en apportant des améliorations mesurables sur tous les ensembles de données.

Figure 8. Score de cohérence de la disposition au cours des étapes d'évaluation pour plusieurs ensembles de données. Le graphique en courbes montre les scores de cohérence de la disposition selon les étapes d'évaluation pour les ensembles de données RICO, ENRICO et Guo’s UI Color. L'axe des abscisses représente l'étape d'évaluation et l'axe des ordonnées indique les scores de cohérence de la disposition. Chaque courbe correspond à un ensemble de données, illustrant l'amélioration de la cohérence structurelle des interfaces générées au fil des étapes successives d'évaluation. Veuillez cliquer ici pour afficher une version agrandie de cette figure.

Métriques de qualité des couleurs

Les thèmes de couleurs d'interface générés sont évalués à l'aide de cinq métriques fondées sur la perception, dérivées de CAM02-UCS : ΔE (différence de couleur perçue), qui quantifie l'uniformité perceptive entre les couleurs de la palette ; le rapport de contraste (basé sur les WCAG 2.1), qui évalue la lisibilité entre les éléments au premier plan et en arrière-plan ; l'indice d'harmonie des couleurs (CHI), qui mesure la compatibilité esthétique entre les teintes ; le score de diversité des couleurs (CDS), qui reflète la variation dans l'espace perceptif des couleurs ; et le score de prédominance des couleurs (CPS), qui évalue l'équilibre et la dominance des couleurs au sein de la palette. Ensemble, ces métriques offrent une évaluation complète de la qualité esthétique et des performances des couleurs orientées vers l'utilisabilité. Les résultats montrent que la méthode proposée atteint une valeur de ΔE plus faible de 4,12, indiquant une meilleure uniformité perceptive entre les couleurs. Un rapport de contraste de 6,21 confirme la conformité aux normes d'accessibilité, assurant ainsi une lisibilité améliorée. Tableau 5 présente une comparaison quantitative entre le module de modélisation des couleurs proposé et les méthodes de référence. Le CHI augmente de 0,61 à 0,83, indiquant une meilleure cohésion esthétique dans les transitions de couleurs. De plus, le CDS augmente de plus de 50 %, démontrant que les palettes générées conservent une variation plus riche sans introduire de désordre visuel. Des valeurs de CPS plus élevées indiquent une répartition équilibrée des couleurs dominantes, évitant la sur-saturation par une teinte unique. Dans l'ensemble, ces résultats établissent l'efficacité du module de modélisation des couleurs basé sur CAM02-UCS pour générer des schémas de couleurs d'interface harmonieux, lisibles et optimisés sur le plan perceptif.

Métrique	Définition	Méthode proposée	Ligne de base1	Amélioration (%)
ΔE (CAM02-UCS)	Différence de couleur perceptive	4.12	7.85	47,5 % de moins
Rapport de contraste (WCAG)	Lisibilité des paires FG–BG	6.21	4.38	41.80%
ICH (Indice de harmonie des couleurs)	Teinte & harmonie des couleurs	0.83	0.61	36.10%
CDS (indice de diversité des couleurs)	Variance en J′a′b′ espace	18.70	12.40	50.80%
CPS (Score de prédominance des couleurs)	Stabilité des couleurs dominantes	0.72	0.55	30.90%

Tableau 5 : Comparaison quantitative des métriques de qualité des couleurs entre la méthode proposée et les méthodes de référence. Le tableau présente des métriques d'évaluation de la qualité des couleurs, incluant la différence de couleur perçue (ΔE en CAM02-UCS), le rapport de contraste (WCAG), l'indice d'harmonie des couleurs (CHI), le score de diversité des couleurs (CDS) et le score de prédominance des couleurs (CPS). Les résultats de la méthode proposée sont comparés aux valeurs de référence, ainsi qu'aux améliorations en pourcentage.

Données démographiques des participants et conception de l'étude

Un total de 30 participants ont pris part au processus d'évaluation. Les participants avaient un âge compris entre 20 et 35 ans (âge moyen : 26,4 ± 3,2 ans). La cohorte comprenait des individus aux origines variées, notamment des ingénieurs logiciels, des étudiants et des concepteurs UI/UX. Selon leur niveau d'aisance informatique auto-déclaré, 40 % des participants ont été classés comme utilisateurs intermédiaires, 35 % comme utilisateurs avancés et 25 % comme débutants. Environ la moitié des participants avaient une expérience préalable en conception UI/UX ou dans des domaines connexes, tandis que les autres participants n'en avaient pas. Cette diversité a permis d'assurer une évaluation équilibrée à travers différents niveaux de compétence technique et de familiarité avec la conception.

Métriques de l'étude utilisateur

Une évaluation centrée sur l'utilisateur a été menée à l'aide de plusieurs métriques, notamment l'échelle NASA-TLX, l'échelle de facilité d'utilisation du système (SUS), le score d'harmonie esthétique (AHS), le temps d'efficacité de recherche (SET) et l'évaluation de la cohérence entre écrans (CSCR), afin d'évaluer la charge cognitive, la facilité d'utilisation, l'attrait visuel, l'efficacité et la cohérence.

La métrique NASA-TLX quantifie la charge mentale en mesurant des facteurs tels que la demande mentale, l'effort et la frustration. Des scores plus faibles indiquent une charge cognitive réduite et une interaction plus aisée. Le cadre proposé a systématiquement conduit à des scores NASA-TLX inférieurs sur l'ensemble des jeux de données, ce qui traduit un moindre effort mental. Cette amélioration s'explique par l'intégration de principes de conception cognitive, notamment le regroupement de type Gestalt, un espacement optimisé et une hiérarchie visuelle renforcée, qui facilitent collectivement une navigation plus intuitive. La métrique SUS fournit un score normalisé d'utilisabilité compris entre 0 et 100, où des valeurs plus élevées indiquent une meilleure utilisabilité et clarté. Le cadre proposé a obtenu des scores SUS supérieurs par rapport aux méthodes de référence, reflétant des améliorations tant au niveau de la disposition structurelle que de la clarté des couleurs. Un alignement, un espacement et un flux de navigation améliorés ont contribué à des interfaces perçues par les utilisateurs comme plus intuitives et fonctionnellement cohérentes. L'AHS, mesurée sur une échelle de Likert à 7 points, évalue l'attrait visuel perçu et l'harmonie des couleurs. Les interfaces générées à l'aide du module de modélisation des couleurs basé sur CAM02-UCS ont obtenu des valeurs d'AHS plus élevées, indiquant des transitions de couleur plus douces et des palettes plus équilibrées visuellement. Les participants ont systématiquement préféré ces interfaces en raison d'un contraste amélioré, d'une cohérence des teintes et d'une réduction de la surcharge visuelle, soulignant l'importance de la modélisation perceptive des couleurs dans la conception d'interfaces utilisateur. Le SET mesure le temps nécessaire aux utilisateurs pour localiser des éléments cibles de l'interface lors de tâches de recherche visuelle. Des valeurs de SET plus faibles indiquent une meilleure organisation et hiérarchie visuelles. Le cadre proposé a significativement réduit le SET sur tous les jeux de données, démontrant que l'intégration du regroupement de type Gestalt, d'un espacement guidé par l'attention et de structures de mise en page affinées permet une interaction plus rapide et plus efficace. La métrique CSCR évalue la cohérence de la conception de l'interface sur plusieurs écrans. Des scores plus élevés indiquent une meilleure continuité en matière de disposition, de couleur et d'organisation structurelle. Le cadre proposé a obtenu des valeurs CSCR plus élevées, reflétant l'efficacité du module de cohérence multi-écran à maintenir des schémas de couleurs stables, un espacement constant et des structures hiérarchiques uniformes à travers les interfaces.

Figure 9 présente les résultats de l'étude comparative auprès des utilisateurs pour l'ensemble des métriques (NASA-TLX, SUS, AHS, SET et CSCR) sur les jeux de données RICO, ENRICO et Guo. Dans l'ensemble, des améliorations cohérentes sont observées pour toutes les métriques d'évaluation. Notamment, le jeu de données Guo démontre une performance supérieure dans les métriques centrées sur l'utilisateur, notamment une charge cognitive plus faible (NASA-TLX), une utilisabilité plus élevée (SUS), une harmonie esthétique améliorée (AHS), un temps de recherche plus court (SET) et une meilleure cohérence entre écrans (CSCR). Toutefois, ces résultats nécessitent une interprétation attentive. Les gains observés dans les métriques d'expérience utilisateur (UX) pour le jeu de données Guo sont principalement attribuables à une forte cohérence chromatique et à une composition visuelle relativement plus simple, plutôt qu'à une qualité supérieure du plan de disposition structurelle. Bien que les utilisateurs perçoivent ces interfaces comme plus harmonieuses visuellement et moins exigeantes cognitivement, des résultats antérieurs montrent que le jeu de données Guo obtient de mauvais résultats en ce qui concerne l'alignement, le regroupement et l'ordre de lecture. Cela met en évidence une distinction importante entre les facteurs perceptuels et les facteurs structurels en conception d'interface utilisateur. Alors que les attributs perceptuels, tels que l'harmonie des couleurs, améliorent significativement l'expérience utilisateur, la précision structurelle et la cohérence de la disposition restent essentielles pour une utilisabilité fonctionnelle. Par conséquent, une conception optimale d'interface utilisateur exige un équilibre entre harmonie perceptuelle et justesse structurelle.

Figure 9. Comparaison des métriques de l'étude utilisateur entre les jeux de données. Le graphique à barres groupées compare les métriques de l'étude utilisateur entre les jeux de données RICO, ENRICO et Guo’s UI Color Datasets. L'axe des abscisses représente les métriques d'évaluation, notamment l'indice de charge de travail NASA (NASA-TLX), l'échelle de facilité d'utilisation du système (SUS), le score d'harmonie esthétique (AHS), le temps d'efficacité structurelle (SET) et le taux de cohérence entre écrans (CSCR), tandis que l'axe des ordonnées indique les scores correspondants. Les barres illustrent les performances pour chaque jeu de données, mettant en évidence les différences en termes de convivialité, de charge cognitive, de qualité esthétique et de cohérence de l'interface. NASA-TLX (0–100, plus bas est meilleur), SUS (0–100, plus élevé est meilleur), AHS (1–7, échelle de Likert), SET (s, plus bas est meilleur) et CSCR (0–1, plus élevé est meilleur). Veuillez cliquer ici pour afficher une version agrandie de cette figure.

Validation statistique des hypothèses

Afin de valider davantage les hypothèses proposées (H1–H4), des tests de significativité statistique ont été effectués sur des métriques d'évaluation clés, notamment la qualité de la mise en page, la charge cognitive, l'harmonie des couleurs et les mesures d'utilisabilité (Tableau 6). Les résultats sont exprimés sous la forme moyenne ± écart-type, et la significativité statistique a été évaluée à l'aide de tests t appariés avec un intervalle de confiance de 95 % (p < 0,05). Les résultats indiquent que le cadre proposé permet des améliorations statistiquement significatives par rapport aux approches de référence sur plusieurs métriques, notamment la précision de l'alignement, la précision du regroupement, l'ordre de lecture, la charge cognitive (NASA-TLX) et les mesures d'harmonie des couleurs. Notamment, les réductions de la charge cognitive et les améliorations des métriques d'utilisabilité montrent des différences hautement significatives (p < 0,01). Ces résultats confirment que l'intégration de principes de conception cognitive et de modélisation perceptive des couleurs conduit à des améliorations mesurables et statistiquement significatives de la qualité de l'interface utilisateur, soutenant ainsi les hypothèses H1–H4.

Métrique	Valeur de base (moyenne ± ÉT)	Proposé (moyenne ± ÉT)	Amélioration (%)	valeur-p	Signification
Erreur d'alignement (↓)	7,8 ± 1,2	4,2 ± 0,9	46,10 %	0,003	Significatif
Précision du regroupement (↑)	0,68 ± 0,05	0,82 ± 0,04	20,50 %	0,001	Significatif
Précision de l'ordre de lecture (↑)	0,72 ± 0,06	0,87 ± 0,03	20,80 %	0,002	Significatif
NASA-TLX (↓)	68,5 ± 5,4	47,2 ± 4,8	31,10 %	0,0005	Très significatif
Note SUS (↑)	71,3 ± 6,2	88,9 ± 4,5	24,70 %	0,0008	Très significatif
Indice d'harmonie des couleurs (↑)	0,61 ± 0,07	0,83 ± 0,05	36,00 %	0,001	Significatif
Rapport de contraste (↑)	4,1 ± 0,6	6,2 ± 0,5	51,20 %	0,002	Significatif

Tableau 6 : Comparaison statistique des métriques de performance entre les méthodes de base et la méthode proposée. Le tableau présente la moyenne et l'écart type (moyenne ± ÉT) pour les métriques de performance clés, notamment l'erreur d'alignement, la précision du regroupement, la précision de l'ordre de lecture, l'indice de charge de travail NASA (NASA-TLX), l'échelle d'utilisabilité du système (SUS), l'indice d'harmonie des couleurs et le rapport de contraste. Les améliorations en pourcentage, les valeurs de p et les niveaux de signification statistique sont indiqués. (↑) indique que des valeurs plus élevées sont préférables, et (↓) indique que des valeurs plus faibles sont préférables. La signification statistique a été évaluée à p < 0,05.

Observations spécifiques à l'ensemble de données

Les performances relativement inférieures observées pour les métriques structurelles sur le jeu de données Guo peuvent être attribuées à ses caractéristiques intrinsèques. Le jeu de données Guo est plus petit que RICO et ENRICO et se concentre principalement sur les caractéristiques perçues des couleurs plutôt que sur des annotations de mise en page structurée. En conséquence, il présente une plus grande variabilité dans le placement des composants, une organisation hiérarchique plus faible et des structures de mise en page moins cohérentes d’un écran à l’autre. Ces propriétés rendent l’apprentissage structurel et l’optimisation de la disposition plus difficiles, ce qui explique les performances inférieures en matière d’alignement, de regroupement et d’ordre de lecture, malgré des résultats solides dans les évaluations perceptuelles et centrées sur l’utilisateur.

Étude d'ablation

L'étude d'ablation évalue la contribution de chaque module du cadre proposé en supprimant systématiquement des composants individuels et en analysant leur impact sur la qualité de la mise en page, la modélisation des couleurs et les performances de détection. La qualité de la mise en page est évaluée à l'aide de l'AE, de la GA, de la ROA et de la LCS. L'AE reflète l'écart de position des éléments d'interface utilisateur, des valeurs plus élevées indiquant une structure spatiale plus faible. La GA évalue dans quelle mesure les composants sont organisés selon les principes de la Gestalt. La ROA mesure la préservation du flux visuel logique, tandis que la LCS quantifie la cohérence structurelle entre écrans en termes d'alignement, d'espacement et d'organisation de la mise en page. La dégradation de la qualité des couleurs est évaluée à l'aide du ΔE (différence de couleur perçue), du CHI et du CDS, qui évaluent collectivement l'uniformité perceptive, la cohérence esthétique et la richesse de la palette. Les performances de détection sont évaluées à l'aide du mAP, de la précision et du rappel, qui quantifient l'impact du remplacement du module Faster R-CNN par un modèle de détection plus simple. Ensemble, ces métriques fournissent une évaluation complète de la manière dont chaque module contribue aux performances globales du système.

Tableau 7 résume la contribution de chaque module et compare le cadre proposé avec les approches existantes de génération d'interface utilisateur. Le modèle complet atteint les meilleures performances sur tous les indicateurs de qualité de mise en page, de modélisation des couleurs et de détection, démontrant que la conception cognitive, la modélisation perceptive des couleurs et la compréhension visuelle profonde ont un effet synergique. Lorsque le module de modélisation des couleurs est supprimé, le ΔE augmente significativement, tandis que le CHI et le CDS diminuent fortement, indiquant une perte d'uniformité perceptive et d'harmonie des couleurs. Ceci confirme l'importance de la modélisation fondée sur CAM02-UCS pour préserver la qualité esthétique et perceptive. La suppression du module de mise en page cognitive entraîne une augmentation significative de l'AE et des baisses notables du GA et du ROA, démontrant que les principes de conception cognitive sont essentiels pour produire des mises en page structurellement cohérentes et lisibles. La suppression du module de cohérence multiscreen conduit à une réduction du LCS, confirmant son rôle dans le maintien de motifs de mise en page cohérents sur plusieurs écrans. Le remplacement du détecteur Faster R-CNN par un CNN plus simple entraîne une forte baisse du mAP, de la précision et du rappel, soulignant l'importance cruciale d'une détection robuste des composants dans l'ensemble du processus. Par rapport aux méthodes de référence, notamment pix2code, REDRAW et LDGM, le cadre proposé surpasse systématiquement toutes les approches en matière de précision de la mise en page, de cohérence visuelle et de qualité perceptive des couleurs.

Méthode / Module	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
Module de couleur supprimé	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
Module de disposition cognitive supprimé	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
Suppression de la cohérence multi-écran	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Faster R-CNN remplacé par un CNN simple	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 (diffusion de la disposition)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
Modèle complet proposé	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

Tableau 7 : Étude d'ablation et analyse comparative des performances du cadre proposé et des méthodes de référence. Ce tableau évalue l'impact des composants individuels en comparant le modèle complet proposé à des variantes dans lesquelles certains modules sont supprimés (module de couleur, module de disposition cognitive, cohérence multiscreen et remplacement de Faster R-CNN par un CNN simple), ainsi qu'aux méthodes de référence (pix2code, REDRAW et LDGM). Les performances sont évaluées à l'aide de l'erreur d'alignement (AE), de la précision du regroupement (GA), de la précision de l'ordre de lecture (ROA), du score de cohérence de la disposition (LCS), de la différence de couleur perçue (ΔE), de l'indice d'harmonie des couleurs (CHI), du score de diversité des couleurs (CDS) et de la précision moyenne (mAP). (↑) indique que des valeurs plus élevées sont préférables, et (↓) indique que des valeurs plus faibles sont préférables.

DISPONIBILITÉ DES DONNÉES :

Les ensembles de données utilisés dans cette étude sont disponibles aux liens suivants : ensemble de données RICO : https://interactionmining.org/rico ; ensemble de données ENRICO : https://github.com/luileito/enrico ; ensemble de données sur les couleurs d'interface utilisateur de Guo : https://github.com/guozhongke/UI-Color-Dataset.

Fichier supplémentaire 1. Formulations mathématiques et détails d'implémentation étendus. Ce fichier fournit les formulations mathématiques détaillées et les flux algorithmiques soutenant le cadre de prototypage automatisé d'interface utilisateur proposé. Il inclut l'apprentissage de la détection de composants, l'extraction de motifs de disposition, la modélisation de l'harmonie des couleurs, l'objectif unifié de prototypage d'interface utilisateur, les détails de détection de Faster R-CNN, les calculs de distance spatiale et de similarité d'alignement, la construction de l'arbre logique d'interface utilisateur, la modélisation perceptive des couleurs basée sur CAM02-UCS, l'optimisation de conception cognitive, la modélisation de la cohérence multisupport et les algorithmes S1 à S3.Veuillez cliquer ici pour télécharger ce fichier.

Discussion

Les résultats démontrent des améliorations statistiquement significatives en matière d'ergonomie, d'organisation structurelle et de qualité perceptive (p < 0,05), confirmant l'efficacité de l'intégration de principes de conception cognitive dans la création automatisée de maquettes d'interface utilisateur. Contrairement aux systèmes traditionnels de génération d'interfaces qui reposent principalement sur la détection visuelle ou des heuristiques fondées sur des règles, le cadre proposé intègre le regroupement de type Gestalt, la modélisation hiérarchique, les contraintes d'espacement et la lisibilité perceptive tout au long du processus complet de reconstruction de l'interface. Les améliorations observées aux échelles NASA-TLX, SUS et SET confirment en outre une réduction statistiquement significative de la charge cognitive (NASA-TLX, p.< 0,01). Ces résultats indiquent que la génération automatisée d'interfaces devrait aller au-delà de la simple précision de la reconstruction visuelle et intégrer des connaissances issues de la conception centrée sur l'humain afin d'atteindre une ergonomie pratique. En outre, toutes les hypothèses formulées (H1–H4) sont soutenues empiriquement par les résultats expérimentaux.

Outre les améliorations de la disposition, l'intégration d'un modèle de couleur perceptive basé sur CAM02-UCS entraîne des gains statistiquement significatifs en matière d'harmonie des couleurs, d'accessibilité et de stabilité perceptive (p < 0,05), comme en témoignent les améliorations observées pour ΔE, CHI, CDS et le rapport de contraste. Contrairement aux travaux antérieurs tels que la génération automatisée de thèmes de couleurs d'interface utilisateur basée sur les images, qui se concentrent principalement sur l'optimisation des couleurs, le cadre proposé intègre à la fois l'optimisation des couleurs et celle de la disposition au sein d'un pipeline unifié. En outre, l'inclusion d'un module de cohérence multisupport permet de surmonter une limitation majeure des approches précédentes, centrées uniquement sur la génération d'interfaces utilisateur pour un seul écran. Une comparaison avec des méthodes existantes, notamment pix2code³¹, REDRAW^23,24 et LDGM³², montre que ces approches mettent principalement l'accent sur la reconstruction structurelle ou la modélisation générative, sans intégrer de principes cognitifs, d'harmonisation perceptive des couleurs ou de raisonnement multisupport. Le cadre proposé démontre des améliorations statistiquement significatives par rapport à ces méthodes (p < 0,05) selon les métriques de précision de la disposition (AE, GA et ROA), les métriques perceptuelles (CHI et ΔE) et les mesures d'utilisabilité (SUS et CSCR). Ces résultats soulignent l'avantage d'associer des principes de conception cognitive, un modèle de couleur perceptive et un apprentissage profond au sein d'un système unifié.

Une observation importante découlant des résultats est la distinction entre les facteurs structurels et perceptuels influençant l'expérience utilisateur (UX). L'optimisation structurelle améliore la justesse fonctionnelle et la clarté de la disposition, tandis que l'optimisation perceptuelle — en particulier l'harmonie des couleurs — influence de manière significative la perception de l'utilisateur et la charge cognitive. Les résultats indiquent qu'une conception optimale de l'interface utilisateur (UI) nécessite un équilibre entre précision structurelle et cohérence perceptuelle. Malgré les améliorations démontrées, certaines limites persistent. Par exemple, les performances sur des ensembles de données plus petits et davantage orientés vers la perception, tels que le jeu de données Guo UI Color, sont inférieures en ce qui concerne les métriques structurelles, en raison de la variabilité dans l'organisation de la mise en page et d'annotations structurelles limitées. Ces caractéristiques posent des défis pour l'apprentissage de schémas de disposition cohérents et de relations hiérarchiques. Les travaux futurs se concentreront sur l'amélioration de la robustesse sur de tels ensembles de données.

Du point de vue théorique, cette recherche démontre que la génération d'interfaces utilisateur peut être considérablement améliorée en intégrant directement des principes cognitifs et perceptifs dans les flux de travail d'apprentissage profond. L'étude remet en question l'idée conventionnelle selon laquelle la génération d'interfaces utilisateur relève uniquement de la vision par ordinateur ou de la génération de code. Elle met plutôt en évidence l'importance d'incorporer l'uniformité perceptive (via CAM02-UCS), la réduction de la charge cognitive (via les principes de la Gestalt et la modélisation hiérarchique) et la cohérence de conception multisupport comme composantes fondamentales des systèmes automatisés d'interfaces utilisateur. Ce travail contribue à un virage vers des modèles computationnels centrés sur l'humain, dans lesquels la génération d'interfaces tient compte non seulement de la correction structurelle, mais aussi des facteurs psychologiques et perceptifs. En ce sens, il établit une nouvelle orientation théorique pour l'intelligence de conception automatisée.

D'un point de vue pratique, le cadre proposé offre une solution déployable aux concepteurs d'interfaces utilisateur, aux équipes produit et aux outils de prototypage. En réduisant la charge cognitive et en améliorant l'efficacité de la recherche, le système génère des agencements d'interfaces qui nécessitent moins de retouches manuelles pour répondre aux normes professionnelles de conception. L'utilisation de thèmes de couleurs optimisés du point de vue perceptuel garantit le respect des directives d'accessibilité telles que les WCAG 2.1, permettant une utilisation immédiate dans des applications réelles. De plus, le module de cohérence multisupport accélère le développement d'applications multipages en maintenant une uniformité des agencements et des motifs de conception, sans nécessiter d'ajustements manuels. Dans l'ensemble, ce cadre présente un potentiel important pour réduire considérablement le temps de développement des interfaces, tout en améliorant la qualité et l'ergonomie des conceptions générées.

Le cadre proposé introduit une approche centrée sur l'humain pour la création automatisée de maquettes d'interfaces utilisateur, en intégrant des principes de conception cognitive, une modélisation perceptive des couleurs (CAM02-UCS) et une cohérence de mise en page multi-écran au sein d'un pipeline computationnel unifié. Contrairement aux approches antérieures axées principalement sur la reconstruction structurelle ou la détection visuelle, ce cadre modélise explicitement le regroupement gestaltiste, la hiérarchie, l'optimisation du contraste et l'uniformité perceptive. Les résultats expérimentaux montrent des améliorations significatives en termes d'ergonomie (SUS et NASA-TLX), d'harmonie visuelle (AHS, CHI et ΔE) et de performance structurelle (GA, ROA, LCS et mAP), confirmant que la modélisation cognitive et perceptive améliore la qualité de l'interface et l'expérience utilisateur. Les travaux futurs exploreront l'intégration de modèles vision-langage basés sur les transformeurs afin d'améliorer la compréhension sémantique et le raisonnement structurel. De plus, l'incorporation d'une personnalisation adaptative, de mises en page réactives aux appareils et d'un affinage avec intervention humaine pourrait renforcer davantage l'applicabilité pratique du système. Dans l'ensemble, cette étude fournit une base pour les systèmes de conception d'interfaces pilotés par l'intelligence artificielle de prochaine génération, qui seront non seulement visuellement précis, mais aussi cognitivement efficaces, perceptuellement harmonieux et réellement déployables.

Matériaux

Liste des matériaux utilisés dans cet article

Nom	Entreprise	Numéro de catalogue	Commentaires
UC (Processeur)	AMD Ryzen 9 7950X (16 cœurs, 32 threads, 4,5–5,7 GHz)	Advanced Micro Devices (AMD), États-Unis	Ryzen 9 7950X
CUDA Toolkit	Version 11.8	NVIDIA Corporation, États-Unis	CUDA Toolkit 11.8
cuDNN	Version 8.9	NVIDIA Corporation, États-Unis	cuDNN v8.9
Faster R-CNN	Modèle de détection d'objets (avec réseau de proposition de régions)	Meta AI Research / Detectron2	Framework Detectron2
Matplotlib	Version 3.7	Équipe de développement Matplotlib	v3.7.0
GPU NVIDIA RTX 4090	Carte graphique 24 Go GDDR6X	NVIDIA Corporation, Santa Clara, Californie, États-Unis	RTX 4090
NumPy	Version 1.24	Développeurs NumPy	v1.24.0
OpenCV	Version 4.8	Fondation OpenCV	v4.8.0
PyTorch	Version 2.0	Fondation PyTorch (Meta AI)	v2.0.0
ResNet-50 avec FPN	CNN de base avec réseau de pyramide de caractéristiques	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	Version 1.3	Développeurs Scikit-learn	v1.3.0
SciPy	Version 1.10	Communauté SciPy	v1.10.0
Mémoire système (RAM)	64 Go DDR5	Corsair / Kingston (ou équivalent)	Ki DDR5 64 Go
Système d'exploitation Ubuntu	Version 22.04 LTS	Canonical Ltd., Royaume-Uni	Ubuntu 22.04 LTS