Recommandations pour optimiser la perception et l’esthétique des utilisateurs
S’applique à cette recommandation de liste de contrôle Optimisation de l’expérience Power Platform Well-Architected :
| XO:07 | Appliquez les principes de conception classiques aux éléments visuels tels que les jeux de couleurs, la typographie et la mise en page. Efforcez-vous d’établir une hiérarchie visuelle ciblée, équilibrée et intuitive qui guide l’attention des utilisateurs vers les éléments et les actions importants. |
|---|
Ce guide décrit les recommandations relatives aux modèles de conception visuelle universelle qui affectent la perception des utilisateurs, ce qui peut influencer de manière significative la satisfaction et l’adoption d’une application. Les éléments visuels constituent les éléments de base utilisés pour créer des expériences. L’application de principes visuels qui correspondent à la façon dont les humains perçoivent et traitent naturellement les informations fournit des méthodes structurées pour aider à sélectionner et organiser les éléments visuels afin de créer une application efficace et attrayante.
Stratégies de conception clés
Des recherches approfondies sur la perception humaine du design visuel révèlent que les utilisateurs ne voient pas les éléments visuels de manière isolée. Au lieu de cela, ils les perçoivent par rapport à d’autres éléments et au contexte dans lequel ils apparaissent. Ces relations influencent la perception des utilisateurs, attirant l’attention sur des domaines spécifiques, suscitant des émotions, facilitant la compréhension, améliorant l’esthétique et renforçant l’identité de la marque. Une sélection et une disposition minutieuses des éléments visuels peuvent créer des expériences utilisateur engageantes, mémorables et efficaces qui correspondent à l’audience cible.
Effet esthétique-convivialité
L’effet esthétique-convivialité fait référence à la tendance à considérer les produits attractifs comme plus conviviaux. Les utilisateurs se font une première opinion sur une application en 50 millisecondes environ. Cette première impression est influencée par divers facteurs, notamment la structure, les couleurs, l’espacement, la symétrie, la quantité de texte et les polices. Une première impression positive peut améliorer la satisfaction globale des utilisateurs. L’étude montre que les utilisateurs pardonnent davantage les problèmes mineurs de convivialité lorsqu’ils trouvent une interface visuellement attrayante. De plus, la qualité de la conception peut servir d’indicateur de crédibilité.
Équilibre et poids
L’équilibre visuel représente un sentiment d’équilibre et d’harmonie dans la perception visuelle. Il aide les utilisateurs à traiter et à organiser les informations visuelles plus efficacement en réduisant la tension cognitive. Les compositions équilibrées sont généralement perçues comme plus agréables et plus faciles à comprendre, permettant aux utilisateurs de concentrer leur attention efficacement et de naviguer plus facilement dans les stimuli visuels. Cet aspect cognitif de l’équilibre visuel souligne son importance pour faciliter une communication claire et améliorer l’expérience utilisateur globale.
Une composition est équilibrée lorsque tous les éléments sont en équilibre optique. Souvent, le positionnement mathématique nécessite un ajustement. Certains des éléments qui affectent le poids visuel sont la taille, la couleur, la densité et l’espace blanc.
Taille : Les éléments plus grands ont tendance à avoir plus de poids visuel que ceux de guide. Pour parvenir à un équilibre, les éléments plus grands peuvent être contrebalancés en les regroupant avec des éléments plus petits ou en ajustant leur positionnement dans la mise en page.
Couleur : les couleurs vives ou intenses peuvent attirer davantage l’attention et paraître plus lourdes que les couleurs sourdes ou neutres. L’équilibrage des couleurs consiste à les répartir uniformément dans toute l’interface ou à utiliser des couleurs complémentaires pour créer une harmonie visuelle.
Densité : La densité des éléments fait référence à la façon dont ils sont regroupés dans un espace donné. L’équilibrage de la densité consiste à s’assurer que les éléments sont répartis uniformément dans l’interface pour éviter le surpeuplement ou les zones clairsemées.
Espace blanc : Également connu sous le nom d’espace négatif, l’espace blanc fait référence aux zones vides entre les éléments. L’espace aide à créer une respiration visuelle et peut équilibrer la composition en mettant en valeur et en mettant l’accent sur certains éléments.
Une composition équilibrée est une somme des forces visuelles entre les éléments.
L’équilibre de la mise en page est l’une des tâches les plus complexes, car elle est difficilement mesurable.
Color
Les teintes, les nuances et les tons peuvent transmettre un sens, évoquer des émotions et créer un attrait esthétique. La couleur joue un rôle crucial en guidant l’attention de l’utilisateur, en établissant une hiérarchie, en transmettant des informations et en améliorant la convivialité. Plusieurs raisons expliquent pourquoi une conception réfléchie des couleurs dans une interface utilisateur peut affecter les utilisateurs comme vous le souhaitez :
Attention et perception. Certaines couleurs sont plus accrocheuses que d’autres, permettant aux concepteurs d’orienter l’attention des spectateurs vers des éléments spécifiques. Le contraste des couleurs peut améliorer la lisibilité et distinguer les différents composants, facilitant ainsi le traitement rapide des informations.
Réponse émotionnelle. Les couleurs ont des associations psychologiques qui évoquent des émotions et des humeurs. Les couleurs chaudes comme le rouge et l’orange peuvent créer une sensation d’énergie et d’excitation, tandis que les couleurs froides comme le bleu et le vert peuvent évoquer le calme et la tranquillité. Vous pouvez obtenir les réponses souhaitées pour influencer les utilisateurs vers l’expérience souhaitée.
Identité de la marque. L’utilisation cohérente de la couleur sur les supports de marque contribue à établir une identité visuelle forte et favorise la reconnaissance de la marque. Les utilisateurs associent souvent des couleurs spécifiques à des marques particulières et associent leur expérience à la fidélité et à la confiance envers la marque.
Hiérarchie visuelle. La couleur peut être utilisée pour établir une hiérarchie visuelle et organiser les informations. Attribuez des couleurs différentes aux éléments en fonction de leur importance ou de leur catégorie pour créer une hiérarchie claire et faciliter la navigation et la compréhension.
Proximité
Les éléments rapprochés semblent plus liés. Lors de l’organisation des éléments, assurez-vous qu’il existe une différence notable d’espacement entre les éléments étroitement liés et ceux qui ne le sont pas.
Ce principe de Gestalt suggère que la distance spatiale entre les éléments visuels influence la façon dont ils sont perçus et organisés mentalement, et souligne son importance pour faciliter le traitement et la compréhension efficaces des stimuli visuels.
Regroupez les éléments liés qui sont fonctionnellement similaires ou appartiennent à la même catégorie hiérarchique. Par exemple, les boutons qui effectuent des actions ou des options similaires dans un menu déroulant doivent être regroupés étroitement pour indiquer leur association. Dans une barre de navigation, les éléments de menu rapprochés suggèrent un ensemble d’options connexes, tandis qu’un écart plus grand entre les catégories de menu les distingue visuellement. Les éléments de formulaire liés doivent être regroupés, comme les champs d’adresse dans une section appelée "adresse".
Améliorez la lisibilité dans les interfaces contenant beaucoup de texte en ajustant l’espacement entre les paragraphes, les phrases et les mots. Un espacement plus rapproché des paragraphes indique une connexion logique ou une continuation de la pensée, tandis qu’un espacement plus grand indique une transition ou une rupture dans le contenu. Cette technique favorise une compréhension efficace des informations textuelles.
Assurez-vous qu’il existe une distinction notable dans l’espacement entre les éléments liés et non liés pour éviter toute confusion. Une rampe d’espacement peut aider à déterminer de manière cohérente l’espacement approprié nécessaire en fonction de la taille de l’élément.
Le cercle à gauche est davantage associé à un triangle que l’autre cercle.
L’espacement entre les paragraphes est plus petit que l’espace entre les sections.
Continuité
Les éléments disposés sur une ligne ou une courbe sont perçus comme étant plus liés que les éléments qui ne sont pas disposés sur une ligne ou une courbe.
Organisez les éléments d’interface, tels que les menus de navigation ou les étapes d’un processus, le long d’une ligne ou d’une courbe pour impliquer une séquence ou une progression. Cette disposition aide les utilisateurs à percevoir la relation entre les éléments et à comprendre le flux logique des informations ou des actions.
Placez les éléments associés, tels que les options de case à cocher ou de radio, ou les éléments dans une liste à puces, le long d’une ligne pour les regrouper visuellement. Cette disposition suggère aux utilisateurs que ces éléments partagent un objectif commun ou appartiennent à la même catégorie, facilitant ainsi la navigation et la compréhension. Si des éléments d’apparence similaire sont davantage en retrait vers l’intérieur, la position de l’élément est corrélée à un placement inférieur dans la hiérarchie visuelle.
Utilisez des lignes ou des courbes pour guider l’attention des utilisateurs et créer des chemins visuels à travers l’interface. Par exemple, une flèche peut diriger l’œil de l’utilisateur d’une section de contenu à une autre le long d’un certain chemin, indiquant une connexion ou une progression. Cette technique aide les utilisateurs à naviguer dans l’interface de manière plus intuitive et encourage l’exploration.
Disposez les éléments clés de l’interface, tels que les boutons d’appel à l’action ou les informations importantes, le long de lignes bien visibles pour attirer l’attention des utilisateurs et créer des points focaux. Par exemple, le modèle Fluent MessageBar est souvent affiché sous la forme d’un message équilibré bien visible dans la zone de contenu, avec le message à gauche, menant aux boutons d’appel à l’action à droite. Cette stratégie de mise en page met en valeur ces éléments et souligne leur importance, augmentant ainsi la probabilité d’interaction.
Les courbes/lignes sont plus élaborées que la couleur pour notre perception.
Les assistants utilisent la continuité pour montrer aux utilisateurs que les étapes sont connectées, sans les écraser avec beaucoup trop d’informations.
Clôture
Le cerveau humain a tendance à voir des formes complètes, reconnaissant un motif familier unique, sur des objets individuels, même lorsque certaines informations manquent.
Assurez la cohérence visuelle des éléments de conception, tels que les formes, les couleurs et les tailles, pour aider les utilisateurs à découvrir les modèles auxquels ils doivent s’attendre, même s’ils sont présentés dans des contextes différents.
Utilisez des icônes ou des symboles simples et familiers qui permettent aux utilisateurs de compléter les informations manquantes en fonction de leurs expériences antérieures. Par exemple, une icône en forme de loupe est généralement associée à la fonctionnalité de recherche, même sans texte d’accompagnement.
Présentez les informations progressivement aux utilisateurs, également appelée divulgation progressive. Permettez aux utilisateurs de compléter les détails manquants lorsqu’ils interagissent avec l’interface, évitant ainsi de les submerger avec trop d’informations et encourageant l’exploration.
Créez des modèles visuels cohérents qui encouragent les utilisateurs à percevoir les objets comme des entités entières. Par exemple, le regroupement d’éléments liés peut aider les utilisateurs à comprendre leur relation et leur objectif. Organisez visuellement les éléments de manière cohérente en utilisant les principes de la Gestalt pour indiquer la segmentation. Utilisez l’espace efficacement pour créer un sentiment de fermeture autour des éléments de l’interface.
Utilisez l’animation et les transitions pour guider l’attention des utilisateurs et transmettre les changements dans les états de l’interface. Des transitions fluides entre différents états ou écrans peuvent aider les utilisateurs à comprendre la relation entre les éléments et à compléter les informations manquantes. Plusieurs commandes modernes disponibles dans Power Apps affichent automatiquement des animations.
Un carré est reconnu tout d’abord avant quatre cercles incomplets.
Une animation d’une carte vers un modal permet de combler l’écart entre les deux et de les associer l’une à l’autre.
Point focal
Un point focal est un élément de design qui attire immédiatement l’attention du spectateur. Idéalement, une conception devrait avoir une séquence de points focaux, généralement entre un et trois, disposés de manière à guider l’utilisateur à travers le contenu de manière délibérée.
Concevez l’interface avec une hiérarchie claire d’informations, où le contenu ou les actions les plus importants sont mis en avant comme points focaux. Utilisez des indices visuels tels que la taille, la couleur, le contraste et le positionnement pour faire ressortir ces éléments. Présentez les informations progressivement, en commençant par les points focaux les plus importants. Cette technique aide les utilisateurs à identifier rapidement le contenu ou les actions les plus pertinents et les guide à travers l’interface dans une séquence logique.
Placez les principaux boutons d’appel à l’action bien en évidence dans l’interface, ce qui en fait les points focaux les plus forts. Ces boutons doivent être visuellement distincts des autres éléments et stratégiquement positionnés pour guider les utilisateurs vers les actions souhaitées, comme effectuer un achat ou s’inscrire. Un langage de conception courant recommande d’utiliser la couleur du thème de la marque pour ces éléments.
Utilisez efficacement le contraste pour créer des points focaux. Les éléments qui se démarquent par des différences de couleur, de luminosité, de taille ou de typographie attirent naturellement l’attention de l’utilisateur. Le contraste des surfaces plus claires avec du texte plus sombre ou des éléments de marque crée un point focal plus important.
Utilisez l’espace blanc pour mettre en valeur les points focaux en créant une séparation visuelle des éléments environnants. Cette technique permet d’éviter les distractions et permet aux utilisateurs de se concentrer sur le contenu ou les actions les plus importantes. Les éléments d’interface utilisateur plus espacés attirent davantage l’attention et ont tendance à être perçus comme plus importants que les éléments avec moins d’espace.
Maintenir la cohérence dans l’utilisation des points focaux dans toute l’interface pour offrir une expérience utilisateur cohérente. En définissant un modèle de points focaux, vous guidez les attentes des utilisateurs concernant la hiérarchie qu’ils doivent comprendre pour naviguer dans l’interface et vous les aidez à trouver des informations ou des actions importantes sur différents écrans ou pages.
Gardez à l’esprit qu’il est important de maintenir l’équilibre et de ne pas submerger les utilisateurs avec trop de points focaux concurrents.
Le regard est d’abord attiré par le carré bleu.
Des éléments tels que des appels à l’action peuvent être transformés en points focaux pour garantir que les utilisateurs les remarquent.
Similarité
Les objets qui semblent similaires sont souvent perçus comme un groupe ou un modèle, ce qui amène les utilisateurs à s’attendre à ce qu’ils aient la même fonctionnalité.
Assurez-vous que les éléments d’interface ayant des fonctions similaires ont des styles visuels cohérents. Par exemple, les boutons qui effectuent des actions similaires ou de même poids doivent avoir la même couleur, la même forme et la même taille, signalant aux utilisateurs leur fonctionnalité partagée. À l’inverse, veillez à ce que les éléments dont les fonctionnalités diffèrent sensiblement soient clairement distinguables. Les deux techniques évitent la confusion et la frustration en établissant des repères visuels clairs.
Utilisez une iconographie et des symboles cohérents pour représenter des actions ou des fonctionnalités similaires dans toute l’interface. Les utilisateurs ont tendance à associer des icônes familières à des fonctions spécifiques en fonction de leurs expériences passées. Pour répondre à ces attentes, utilisez des métaphores d’icônes universellement reconnues. Assurez la cohérence du style des icônes en utilisant des icônes du même ensemble, telles que la bibliothèque d’iconographie Fluent UI.
Utilisez un code couleur pour indiquer les similitudes entre les éléments ou les catégories. Par exemple, utiliser la même couleur pour mettre en évidence des éléments associés dans une liste ou regrouper des points de données similaires sur un graphique améliore la cohérence visuelle et aide les utilisateurs à discerner des modèles.
Maintenir l’uniformité de la typographie et du style du texte pour les éléments ayant des objectifs analogues. Des styles de police, des tailles et un formatage cohérents contribuent à un langage visuel cohérent, facilitant la reconnaissance par les utilisateurs du contenu ou des actions associés.
Fournissez des commentaires interactifs cohérents pour des actions similaires dans l’interface. Qu’il s’agisse de survoler un bouton ou de cliquer sur un lien, les utilisateurs doivent s’attendre à des réponses uniformes pour renforcer l’association entre similitude visuelle et équivalence fonctionnelle. Bien que la plate-forme fournisse intrinsèquement la plupart des comportements d’interactivité, comme les valeurs de couleur de l’état de survol et d’appui, gardez ce principe de conception à l’esprit lorsque vous créez des éléments de composant à partir de zéro ou lorsque vous implémentez manuellement des états de retour.
Assurez-vous que les similitudes visuelles sont complétées par d’autres indices, tels que des étiquettes textuelles ou des commentaires audio, pour répondre aux besoins et préférences des utilisateurs ayant des besoins et des préférences divers. Une communication efficace des fonctionnalités via de multiples modalités sensorielles améliore la convivialité et l’inclusivité.
Les éléments sont regroupés par forme et par couleur, pas par organisation (colonnes et lignes).
Si une carte sur un tableau de bord s’ouvre comme volet latéral, les utilisateurs s’attendront à ce que chacune s’ouvre de cette façon.
Figure et terrain
Les gens perçoivent instinctivement les éléments comme étant soit une « figure » (ce qui ressort au premier plan), soit un « fond » (ce qui recule à l’arrière-plan). Par conséquent, le contexte influence la perception et il est crucial d’assurer une délimitation suffisante pour distinguer les éléments importants de l’arrière-plan. L’espace blanc (espace négatif) augmente la compréhension du contenu.
Utilisez le contraste de couleur, de taille ou de visuel style pour établir une relation claire entre la figure et le fond. Les éléments importants doivent ressortir clairement sur l’arrière-plan, ce qui les rend facilement reconnaissables et guide efficacement l’attention des utilisateurs. Les surfaces aux couleurs plus claires et aux éléments visuels plus contrastés par rapport à l’arrière-plan sont plus visibles. Cette approche réduit l’encombrement visuel et aide les utilisateurs à identifier les informations clés. Fournissez un contraste suffisant entre les éléments de premier plan et d’arrière-plan pour améliorer la lisibilité pour les utilisateurs malvoyants, améliorant ainsi leur capacité à accéder et à comprendre le contenu.
Le maintien de la cohérence dans le placement et le style des éléments de l’interface renforce la relation figure-fond et aide les utilisateurs à comprendre la structure de l’interface. L’utilisation cohérente de modèles de conception et d’indices visuels garantit que les utilisateurs peuvent rapidement distinguer les éléments de premier plan et d’arrière-plan sur différents écrans et contextes. Les incohérences dans la conception peuvent perturber les modèles mentaux des utilisateurs et entraver leur capacité à naviguer efficacement dans l’interface.
Un contraste faible et un espace négatif minimum contribuent à percevoir les rectangles blancs comme arrière-plan.
Une image latérale doit disparaître en arrière-plan pour que les utilisateurs puissent se concentrer sur le contenu important.
Regroupement
Les éléments ont tendance à être perçus comme des groupes s’ils partagent une zone avec une limite clairement définie.
Le regroupement d’éléments associés dans des conteneurs visuels, tels que des boîtes, des cartes ou des bordures, aide les utilisateurs à les percevoir comme des unités cohérentes. Cette approche organise visuellement le contenu et les fonctionnalités, facilitant ainsi l’identification et le traitement des informations. Des regroupements clairs permettent d’éviter une interface encombrée et de réduire la confusion ou l’inefficacité. Le regroupement est également efficace lorsque la proximité n’est pas une option ; par exemple, une barre de message qui s’étend sur plusieurs contrôles sur un écran est perçue comme une unité liée en raison de ses bordures et de sa couleur d’arrière-plan.
Le maintien d’un style visuel cohérent pour les éléments groupés renforce leur connexion et améliore la convivialité. L’utilisation de couleurs, polices ou icônes similaires pour ces éléments souligne qu’ils appartiennent à la même catégorie ou fonction. Les incohérences dans la présentation visuelle peuvent affaiblir le regroupement perçu et amener les utilisateurs à négliger les relations entre les éléments ou à mal interpréter leur signification ou leur objectif.
Ajouter des limites autour d’un élément ou un groupe d’éléments génère la séparation des éléments alentours.
Sectionner le contenu permet aux utilisateurs de comprendre que le sujet change.
Signaux vs bruit
Des indices visuels tels que les lignes, le contraste et l’espacement sont utilisés pour signifier aux utilisateurs que quelque chose est important. Cependant, trop de signaux, ou des signaux mettant en avant des informations qui ne sont pas importantes, se transforment rapidement en bruit.
Utilisez des principes de focalisation, comme du texte en gras, des couleurs contrastées ou des icônes, pour signaler des informations ou des actions importantes aux utilisateurs. Par exemple, utilisez une couleur vive pour les boutons ou les titres importants afin de les faire ressortir.
Soyez sélectif sur ce que vous mettez en avant pour éviter de submerger les utilisateurs avec trop d’informations. Uniquement les éléments de signal qui sont vraiment importants pour la tâche ou l’objectif de l’utilisateur. Trop de signaux peuvent créer de la confusion et rendre difficile la définition des priorités pour les utilisateurs. Identifiez les informations les plus importantes pour l’utilisateur et mettez-les en valeur de manière appropriée. En règle générale, il est recommandé de n’avoir qu’un seul bouton d’appel à l’action par page. Dans les formulaires, mettez en surbrillance les champs obligatoires pour guider l’attention de l’utilisateur. Cela évite aux utilisateurs de se perdre dans des détails inutiles et les aide à se concentrer sur l’essentiel.
Assurez-vous que les signaux suivent un langage visuel cohérent dans toute l’interface pour servir de guide qui aide les utilisateurs à reconnaître les modèles et à comprendre intuitivement la signification des différents signaux.
Adaptez les signaux au contexte spécifique et aux besoins de l’utilisateur. Par exemple, si les utilisateurs analysent une interface qui présente certaines tâches, signalez clairement l’état critique et les éléments exploitables pour attirer leur attention. Les signaux contextuels aident les utilisateurs à trouver rapidement des informations pertinentes sans être distraits par des détails sans rapport.
Les signaux aident à guider les utilisateurs concernant le contenu et à transmettre ce qui est essentiel.
Le bruit visuel introduit la confusion et a l’effet opposé de signaux.
Facilitation de Power Platform
Dans les applications canevas, utilisez les conteneurs de mise en page pour regrouper les éléments liés. Idéalement, vous devriez organiser tous les éléments de la page dans des conteneurs, et les conteneurs de mise en page peuvent également séparer efficacement les conteneurs enfants en ajustant la propriété gap.
Dans les formulaires d’application pilotés par modèle, les sections peuvent être utilisées pour regrouper des champs ou des éléments associés.
Mettez en œuvre la cohérence des éléments visuels communs avec des composants personnalisés réutilisables.
Dans les applications canevas, la fonctionnalité des commandes modernes a intégré la signalisation dans leur conception. Plus précisément, les contrôles button et badge offrent diverses options dans leurs propriétés de style, ce qui en fait des signaux efficaces. Adhérez aux meilleures pratiques pour chaque composant et appliquez la signalisation de manière sélective pour garantir une communication optimale.
Informations associées
- Principes de regroupement
- Psychologie de Gestalt
- Effet Esthétique-Convivialité
- Rampe d’espacement du système de conception Fluent UI