Simple Science

La science de pointe expliquée simplement

# Informatique# Interaction homme-machine# Intelligence artificielle

Esquisse vs. Dessin Coloré dans le Design UI

Une étude comparant les méthodes de croquis et de dessin en couleur pour des maquettes d'interface utilisateur.

― 8 min lire


Dessin à la main ouDessin à la main oudessin coloré pour l'UI ?dans la conception d'interface.Une étude sur les méthodes de maquette
Table des matières

Concevoir des interfaces utilisateur, c’est pas toujours simple pour les designers. Ils doivent créer des designs efficaces et faciles à utiliser qui se démarquent. Pour les aider, ils regardent souvent des designs existants pour s’inspirer. Deux façons populaires de trouver l’inspiration, c'est d’un côté parcourir des plateformes de design comme Dribbble et Behance, où ils peuvent voir plein de designs différents. De l’autre côté, il y a des outils qui proposent des exemples de design en fonction de croquis ou de designs déjà existants. Ces outils utilisent des algorithmes pour trouver des images similaires.

Mais même si ces méthodes peuvent aider, elles ont aussi des inconvénients. Explorer des portfolios de design peut être écrasant et peut faire perdre de vue les idées originales. D’un autre côté, s’accrocher trop à des designs similaires peut rendre difficile d’être original.

Pour trouver une meilleure solution, des chercheurs ont créé un modèle appelé StyleGAN. Ce modèle peut générer une large gamme d’échantillons de design en se basant sur une entrée de design initiale. Cependant, il ne donne pas beaucoup de contrôle aux designers sur la mise en page ou des éléments spécifiques du design. Les designers peuvent seulement choisir des attributs de style comme la couleur et la texture.

Dans ce travail, on examine deux méthodes différentes pour aider les designers à créer des maquettes. Une méthode utilise des croquis, et l’autre utilise des dessins détaillés avec des couleurs spécifiques pour représenter différents éléments de design. La méthode de croquis permet aux designers d’exprimer rapidement leurs idées, tandis que la méthode de dessin coloré aide à représenter le design plus précisément.

Méthodologie

Pour la méthode de croquis, on utilise un modèle appelé Pix2Pix, qui est efficace pour transformer des croquis en images de haute Qualité. La méthode de dessin coloré utilise un modèle différent appelé SPADE, qui génère des images à partir de dessins colorés sémantiques. Cette approche permet un meilleur contrôle sur des éléments spécifiques du design, aidant à transmettre des représentations précises du design final.

On voulait voir comment ces deux méthodes se comportent en termes d’Expressivité, de facilité d’utilisation, de besoins en temps, et d’intuitivité. Pour ça, on a fait des tests avec un groupe de 13 étudiants en Interaction Humain-Machine. Chaque étudiant devait créer une maquette d’application mobile en utilisant les deux méthodes, puis ils ont partagé leurs expériences durant la tâche.

Participants

L’étude a inclus 13 participants, tous en première année d’un master en ingénierie informatique. Ils avaient un peu de formation préalable en design d’interface utilisateur. Parmi ces participants, il y avait 2 filles et 11 garçons, avec des âges compris entre 23 et 25 ans. Le petit nombre de participants fait que ces résultats sont préliminaires, et d'autres études seraient nécessaires pour confirmer les conclusions avec un groupe plus large.

Design de l'étude

Les participants avaient une tâche en deux parties où ils devaient d'abord concevoir une interface mobile en croquant puis en dessinant sémantiquement. Ils ont été informés de comment compléter la tâche grâce à un guide fourni. Ils pouvaient utiliser n’importe quel outil de dessin numérique avec lequel ils se sentaient à l’aise, bien que les études futures pourraient bénéficier de limiter les outils à une seule option pour plus de résultats cohérents.

Dans la première partie, ils ont croqué leurs idées. Ensuite, ils sont passés à la méthode de dessin coloré pour créer une version plus détaillée de leur design. Cet ordre de tâches a été choisi pour refléter un processus de design typique où des idées initiales évoluent vers des designs plus structurés. Après avoir complété leurs maquettes, les participants ont évalué leurs expériences sur divers critères comme la facilité, l’expressivité, et l’intuitivité. Ils ont aussi donné leur avis sur la qualité des maquettes générées par les deux méthodes.

Évaluation des Méthodes

Intuitivité

En regardant la facilité de compréhension et d'utilisation de chaque méthode, la méthode de croquis a généralement obtenu de meilleures notes que celle du dessin coloré. La plupart des participants ont trouvé que croquer leur permettait d’exprimer clairement leurs idées et de mieux visualiser leurs mises en page. Plusieurs ont noté que c’était plus naturel de transformer leurs pensées en croquis.

Cependant, certains participants ont trouvé la méthode de dessin coloré moins intuitive parce qu’ils avaient du mal à se souvenir des associations de couleurs pour les différents éléments. Quelques participants ont mentionné que la méthode semblait confuse, rendant difficile d’en voir l’utilité.

Facilité d'utilisation

Concernant la facilité d’utilisation, les participants ont exprimé des sentiments mitigés sur les deux méthodes. Tandis que certains estimaient que croquer demandait des compétences de dessin spécifiques, d'autres trouvaient que la méthode de dessin coloré était simple car elle se concentrait davantage sur des formes de base comme des carrés et des rectangles. Les participants avaient des avis variés sur les défis rencontrés, comme dessiner avec une souris ou s’adapter à différents appareils pour la tâche.

Efficacité temporelle

Les participants avaient des avis différents sur la durée de chaque méthode. Certains trouvaient le processus de croquis plus rapide car il leur permettait de dessiner la mise en page plus librement, tandis que d'autres se sentaient bloqués en essayant de créer un croquis correct. De même, les opinions sur la méthode de dessin coloré variaient, certains finissant rapidement tandis que d'autres pensaient que ça prenait trop de temps de trouver le bon logiciel ou d’associer leurs idées à ce qui sortait.

Expressivité

En termes d’expressivité, les participants préféraient généralement la méthode de croquis. Ils estimaient qu'elle leur permettait de transmettre des idées plus détaillées, tandis que beaucoup trouvaient que la méthode de dessin coloré était limitée dans la façon dont elle exprimait leurs concepts originaux. Certains participants aimaient comment le croquis pouvait illustrer presque tout ce qu’ils imaginaient, tandis que d'autres remarquaient que la méthode colorée semblait trop restrictive.

Qualité et fidélité des résultats

En comparant les maquettes finales produites par chaque méthode, l’approche de croquis aboutissait à des images de meilleure qualité que la méthode de dessin coloré. Beaucoup de participants estimaient aussi que la méthode de croquis restait plus proche de leurs idées originales. Cependant, la différence de qualité et d'adhérence au design initial n'était pas aussi grande qu'on le percevait en termes d'expressivité.

Observations supplémentaires

En regardant les commentaires supplémentaires des participants, il est devenu clair que les préférences variaient. Certains participants insistaient sur le fait que la méthode de croquis était meilleure mais suggéraient d'ajouter une légende des couleurs pour résoudre les défis de définition de la fonction de chaque composant. D'autres voyaient les avantages de combiner croquis et dessin coloré pour créer une expérience plus fonctionnelle.

Un bon nombre de participants ont argumenté que la meilleure méthode pourrait dépendre du contexte de la tâche de design. Ils affirmaient qu'aucune méthode n'était supérieure ; au lieu de cela, elles se complètent bien et peuvent être utiles lorsqu'elles sont utilisées ensemble.

Conclusions

Cette étude a évalué et comparé deux méthodes de génération de maquettes d'interface utilisateur : le croquis et le dessin sémantique. Les participants ont généralement préféré le croquis pour son intuitivité et son expressivité supérieures. Cependant, les deux méthodes ont leurs avantages et inconvénients, suggérant qu'une combinaison des deux pourrait être l'approche la plus bénéfique.

Une méthode mixte qui inclut à la fois le croquis pour générer des idées rapidement et des dessins colorés pour une représentation détaillée pourrait fournir aux designers un outil puissant pour créer des maquettes. Cela leur permettrait d'exprimer clairement leurs idées tout en maintenant un niveau élevé de précision, aboutissant à de meilleurs produits finaux.

Les futures recherches devraient explorer comment ces deux méthodes peuvent être intégrées efficacement, améliorant finalement le processus de design pour les interfaces utilisateur.

Source originale

Titre: Evaluation of Sketch-Based and Semantic-Based Modalities for Mockup Generation

Résumé: Design mockups are essential instruments for visualizing and testing design ideas. However, the process of generating mockups can be time-consuming and challenging for designers. In this article, we present and evaluate two different modalities for generating mockup ideas to support designers in their work: (1) a sketch-based approach to generate mockups based on hand-drawn sketches, and (2) a semantic-based approach to generate interfaces based on a set of predefined design elements. To evaluate the effectiveness of these two approaches, we conducted a series of experiments with 13 participants in which we asked them to generate mockups using each modality. Our results show that sketch-based generation was more intuitive and expressive, while semantic-based generative AI obtained better results in terms of quality and fidelity. Both methods can be valuable tools for UI designers looking to increase their creativity and efficiency.

Auteurs: Tommaso Calò, Luigi De Russis

Dernière mise à jour: 2023-03-22 00:00:00

Langue: English

Source URL: https://arxiv.org/abs/2303.12709

Source PDF: https://arxiv.org/pdf/2303.12709

Licence: https://creativecommons.org/licenses/by/4.0/

Changements: Ce résumé a été créé avec l'aide de l'IA et peut contenir des inexactitudes. Pour obtenir des informations précises, veuillez vous référer aux documents sources originaux dont les liens figurent ici.

Merci à arxiv pour l'utilisation de son interopérabilité en libre accès.

Articles similaires