Partager via

Recommandations pour le suivi des normes, conventions et directives de conception

  • Article

S’applique à cette recommandation de liste de contrôle Opimisation de l’expérience Power Platform Well-Architected :

XO:02 Suivez les normes, conventions et directives établies. Tirez parti des modèles de conception couramment utilisés. Maintenez la cohérence des éléments de conception, de la terminologie et des interactions dans l’interface. Utilisez des normes et des modèles cohérents pour guider les utilisateurs dans l’interface et créer une expérience utilisateur cohérente.

Ce guide décrit les recommandations pour établir des normes, conventions et bonnes pratiques de conception afin de développer des interfaces utilisateur qui améliorent l’expérience utilisateur et le succès global de l’application. Les écarts par rapport aux normes doivent être soigneusement considérés pour éviter d’affecter négativement l’expérience de l’utilisateur et la convivialité de l’application.

Stratégies de conception clés

Le respect des normes de conception aide à réduire l’effort de prise de décision dans le processus de conception en identifiant les aspects importants de la conception. Comprendre les normes détaille et rationalise la capacité d’une équipe à obtenir des interfaces utilisateur bien conçues. Cette approche se traduit par des cycles de développement plus rapides, une meilleure convivialité et une plus grande satisfaction des utilisateurs, ce qui conduit finalement à une productivité et efficacité accrues des systèmes logiciels internes.

Comprendre les principes de conception

Des recherches approfondies sur la cognition humaine éclairent notre compréhension de la conception visuelle et de l’interaction avec les produits numériques. Ces connaissances sous-tendent de nombreuses pratiques recommandées et normes et représentent environ 80 % du produit final. Les principes de conception peuvent combler les 20 % restants d’écart créatif qui ne sont pas couverts par les normes. La familiarité avec ces connaissances améliore la compréhension par l’équipe de développement des considérations de conception lors de la planification, ce qui réduit la dépendance sur les ressources de conception ou améliore la collaboration avec celles-ci.

Suivre les modèles et métaphores courants

Les modèles et métaphores universels sont largement reconnus et attendus dans les produits numériques. L’incorporation de ces modèles, le cas échéant, peut simplifier l’intégration des utilisateurs et l’utilisation à long terme, ce qui réduit les coûts de formation et de support, et potentiellement le besoin de mises à jour ou de reconceptions. Ces pratiques couvrent divers aspects de la conception, notamment la composition de la disposition, la structure de navigation, la hiérarchie des informations et la conception de l’interaction.

Il est crucial de respecter les métaphores d’icônes et les couleurs sémantiques standard. Les icônes doivent utiliser des associations visuelles établies pour transmettre les fonctionnalités de manière rapide et efficace aux utilisateurs. De même, les couleurs sémantiques, telles que le rouge pour l’erreur ou le vert pour le succès, fournissent un commentaire visuel immédiat qui correspond aux attentes et aux modèles mentaux des utilisateurs. Le respect de ces conventions aide à réduire la charge cognitive et à améliorer la convivialité en favorisant un sentiment de familiarité et de confort.

Établir un système de conception

Un système de conception est un ensemble d’éléments fonctionnels réutilisables utilisés pour créer une interface utilisateur. Ils sont conçus spécifiquement pour une organisation afin que chaque élément soit conforme aux normes établies de la marque. Les quatre composants clés d’un système de conception sont les jetons de conception, les composants, les bibliothèques de modèles et les directives.

Les jetons de conception sont des éléments visuels fondamentaux d’une interface utilisateur, comprenant des aspects tels que la couleur, la typographie et l’espacement. Ils sont exprimés sous forme de variables dans un format standard, ce qui facilite la création et la maintenance d’une application en utilisant le système de conception. Quelle que soit la conception spécifique, les jetons de conception rationalisent la traduction de la conception en code. Par exemple, en définissant un jeton nommé « couleur primaire » avec une valeur désignée, les développeurs peuvent intégrer la conception de manière fluide. Au lieu d’intégrer des valeurs spécifiques directement dans le code, ils utilisent ces jetons. Les jetons de conception peuvent être alignés sur le guide de style d’une organisation et gérés de manière centralisée pour produire des jetons faciles à utiliser.

Un composant représente une unité discrète et modulaire d’une interface utilisateur. Il sert d’élément visuel pour assembler les interfaces des applications. Les composants bien conçus présentent deux caractéristiques clés : la réutilisabilité et la modularité. Ils doivent être conçus pour garantir le maintien d’une cohérence visuelle entre plusieurs applications au sein de l’écosystème d’une marque, ce qui réduit le besoin de recréer la conception à chaque fois. Un seul composant doit servir de manière transparente dans divers contextes.

Power Apps fournit un ensemble complet de composants universels de base, tels que des boutons, des listes déroulantes et plusieurs composants composites, comme la table moderne. Utilisez ces contrôles autant que possible pour les besoins de base, puis envisagez de créer des composants composites là où il existe des lacunes pour les modèles d’interface utilisateur reproductibles.

Les composants composites doivent être suffisamment polyvalents pour être utilisés tels quels ou avec de légères variations (via les paramètres) dans différents contextes d’application, sans nécessiter de modifications. Voici quelques exemples de composants personnalisés :

  • Un en-tête ou un pied de page à la marque de l’entreprise
  • Un composant de page de ressources au format écran permettant aux utilisateurs de fournir des commentaires et d’obtenir une assistance informatique
  • Contenu universel comme les avis de droits d’auteur ou les liens

La bibliothèque de modèles offre un ensemble de modèles de conception prédéfinis que les créateurs peuvent utiliser comme point de départ pour créer des interfaces utilisateur. Ces modèles servent de solutions standardisées aux défis de conception courants. L’objectif principal d’une bibliothèque de modèles est d’offrir une collection centralisée de modèles bien conçus, permettant la création d’interfaces utilisateur cohérentes et efficaces. Les bibliothèques de modèles permettent aux développeurs d’utiliser un modèle spécifique et de suivre les directives d’utilisation établies, ce qui garantit la cohérence et l’efficacité dans les conceptions de l’interface utilisateur.

Les directives offrent des règles et des bonnes pratiques aux équipes de projet sur la manière d’utiliser efficacement les composants et les styles visuels. Contrairement aux directives de style, qui se concentrent sur l’esthétique, les directives du système de conception définissent le comportement fonctionnel des composants et les attentes en matière d’interaction avec l’utilisateur. Par exemple, si un système de conception fournit un ensemble de jetons de conception pour référencer les couleurs, les directives doivent clarifier quand utiliser ces couleurs et comment les développeurs peuvent accéder à la couleur correspondante dans Power Apps. Pour les composants, une documentation doit être disponible sur l’utilisation correcte, les paramètres d’entrée et de sortie et les variations d’état qui peuvent être attendus du composant.

Les efforts centralisés du système de conception peuvent également héberger des ressources multimédias universelles telles que des logos d’entreprise et d’autres ressources de conception dans un référentiel pour permettre un développement rapide et généralisé.

L’interface utilisateur Fluent de Microsoft est un exemple de système de conception open source largement adopté. Elle peut constituer une référence efficace pour de nombreuses décisions de conception prises dans Power Apps car toutes les commandes modernes utilisent les composants du système de conception Fluent (2). Les systèmes de conception tels que l’interface utilisateur de Fluent investissent des efforts importants en recherche et développement dans la création de composants pour garantir qu’ils répondent aux besoins des utilisateurs. Ils sont également conçus de manière à pouvoir être omniprésents et facilement utilisés sur divers produits et plateformes numériques. Chaque composant a des directives spécifiques pour garantir que l’application correspond à l’expérience prévue. Tirez parti des connaissances fondées sur la recherche en consultant les directives de Fluent 2.

Le partage pour éviter les implémentations en double améliore non seulement l’efficacité de la production, mais garantit également que les expériences restent cohérentes dans le temps. Les contributions aux éléments partagés aident à maintenir les expériences à jour et reflètent l’expertise de toute l’organisation. Actuellement, la cohérence constitue un défi car les composants, les systèmes, les processus et la culture ne sont souvent pas partagés, ne favorisent pas la cohérence et rendent les contributions difficiles.

Effectuer des révisions de la conception

L’accès aux ressources destinées à guider la conception de l’expérience utilisateur est crucial pour garantir qu’une application répond aux normes UI/UX établies. Les équipes centralisées doivent chercher à se familiariser avec les normes de conception de base et les meilleures pratiques. Bien que les concepteurs connaissent généralement l’expérience utilisateur, les chefs de projet peuvent également bénéficier de l’apprentissage de ces compétences pour contribuer efficacement à l’équipe.

La manière la plus efficace de valider une expérience est de la parcourir physiquement. Cependant, vous pouvez également lire par programme les métadonnées de l’application Power Apps. Les méthodes pour y parvenir peuvent inclure de vérifier que le thème correct est appliqué à l’application ou de vérifier si les valeurs du jeton de thème sont référencées dans les contrôles hérités.

Par exemple, si des éléments de texte spécifiques doivent utiliser certains jetons de conception, le nom du composant de texte peut correspondre à une valeur particulière et les propriétés du composant doivent correspondre à un mappage de jeton de conception spécifique.

Évaluez le nombre d’éléments qui correspondent à un type de composant spécifique et répondent à certains critères, par rapport à ceux qui ne le sont pas. Par exemple, considérez les composants de texte qui sont nommés de manière incorrecte ou nommés de manière correcte, mais qui ne respectent pas les directives des valeurs de propriété. Pour appliquer une disposition dynamique, certains conteneurs de disposition peuvent ere associés à des conventions d’affectation de noms et à des valeurs de propriété spécifiques (telles que LayoutWrap).

Respecter les normes d’accessibilité pour augmenter la base d’utilisateurs

L’incorporation de principes de conception inclusifs garantit que les produits s’adressent à un audience diversifié, y compris des individus de toutes capacités. La conception inclusive cherche à identifier les obstacles potentiels pour les utilisateurs de toutes capacités pour créer des produits qui répondent aux défis avant la mise en œuvre finale. Il est essentiel de comprendre et de discuter des aspects fonctionnels qui pourraient créer des barrières d’interaction afin de les surmonter efficacement.

Fonction Objectif
Cognition Notre capacité à recevoir, interpréter et traiter des informations est influencée par de nombreux facteurs. Ces facteurs comprennent l’attention, la prise de conscience, la concentration, la mémoire, le jugement, la compréhension, la résolution des problèmes et le raisonnement. La cognition d’une personne peut affecter la façon dont elle apprend, qu’il s’agisse d’apprendre à utiliser un nouvel appareil ou d’apprendre de nouvelles informations en classe. De nombreux aspects de la cognition s’influencent mutuellement.
Mobilité Notre anatomie et nos muscles nous donnent de la mobilité et dépendent des signaux cérébraux qui contrôlent les muscles. La mobilité implique les préhensions, la motricité fine, la coordination, le contrôle (mouvements volontaires ou involontaires), la vitesse, le tonus musculaire, l’endurance, la posture et les blessures temporaires. La mobilité peut être influencée par des conditions situationnelles, temporaires, progressives ou permanentes.
Vision Notre capacité à voir et à comprendre les informations visuelles de notre environnement guide la pensée et le mouvement. La vision est influencée par des facteurs à la fois physiques et neurologiques. Les limitations visuelles incluent la cécité, la basse vision (malvoyant), la baisse de l’acuité visuelle, la perte du champ visuel, le daltonisme, la photophobie (sensibilité à la lumière) et même la lumière du soleil qui a un impact sur la lisibilité du texte sur un écran.
Audition Notre capacité à recevoir et à comprendre le contenu audio de notre environnement guide également la pensée et le mouvement. Les degrés de perte auditive varient sur un large spectre, ce qui entraîne divers obstacles à l’utilisation quotidienne de la technologie. Des exemples temporaires ou situationnels incluent des environnements bruyants ou des zones calmes où la lecture du son n’est pas possible.
Voix, parole et communication Notre capacité à communiquer (verbalement ou non verbalement) est essentielle pour exprimer nos désirs et nos besoins, établir des relations, transmettre des informations aux autres et interagir avec notre environnement.
Sensation et perception La sensation est notre capacité à détecter des sens comme le toucher ou la position de notre corps. La perception est la manière dont le cerveau traite et communique ces sens. Les limitations sensorielles comprennent les troubles vestibulaires, la douleur chronique, l’intégrité cutanée, la sensation (hypersensibilité et hyposensibilité) et la proprioception.

Méthodes d’accès au contenu

Les utilisateurs accèdent au contenu numérique de différentes manières. En plus de la saisie avec la souris et le pointeur, ils peuvent également utiliser le clavier et diverses technologies d’assistance. Ces technologies incluent les lecteurs d’écran et de braille, les loupes, les sous-titres, la reconnaissance vocale et les paramètres à contraste élevé, qui adaptent tous l’expérience pour répondre aux besoins de l’utilisateur.

Outils d’assistance

Les outils d’assistance courants sont décrits ci-dessous :

  • Clavier. Les personnes malvoyantes interagissent avec les sites web et les applications à l’aide de logiciels de lecture d’écran, qui lisent le contenu et les contrôles à haute voix à l’aide de la technologie de synthèse vocale. Étant donné que les personnes aveugles ne peuvent pas voir le pointeur à l’écran, elles ne peuvent pas utiliser une souris standard. Le clavier fonctionne comme une entrée alternative à l’interaction par pointer et cliquer. En plus de prendre en charge l’ensemble des commandes du clavier de base, les lecteurs d’écran fournissent également un ensemble complexe de commandes au clavier. Ces commandes offrent aux utilisateurs un ensemble d’outils supplémentaires puissants pour interagir plus efficacement avec les interfaces utilisateur.
  • Lecteur d’écran. Les lecteurs d’écran convertissent le texte numérique en synthèse vocale et en sortie braille. Ils permettent aux utilisateurs d’entendre du contenu et de naviguer avec le clavier. Cette technologie permet aux personnes aveugles ou malvoyantes d’utiliser les technologies de l’information avec le même niveau d’indépendance et de confidentialité que tout autre utilisateur. Les lecteurs d’écran sont également utilisés par les personnes ayant des troubles cognitifs ou d’apprentissage, ainsi que par les utilisateurs qui préfèrent simplement le contenu audio au texte. Ces outils vont au-delà de l’utilisation web, facilitant la navigation dans les documents, les feuilles de calcul et les systèmes d’exploitation.
  • Toucher. Les cibles tactiles sont largement destinées aux personnes présentant des retards moteurs, qui peuvent avoir des difficultés à appuyer sur l’écran. Plus précisément, le toucher est conçu pour aider les gens à limiter la quantité d’entrées parasites provenant de contacts involontaires (ou non enregistrés).
  • Contenu dynamique. Les rôles phares, ou étiquettes ARIA, offrent des avantages immédiats pour filtrer les utilisateurs de lecteur d’écran. Il existe huit rôles, chacun représentant un bloc de contenu qui se produit couramment sur les pages web. Pour les utiliser, ajoutez l’attribut de rôle pertinent à un conteneur approprié dans votre code HTML, pour permettre aux utilisateurs du lecteur d’écran de naviguer rapidement à cette section de la page.

Styles visuels

Pour créer des produits inclusifs pour les utilisateurs ayant des capacités visuelles différentes, il est essentiel de prendre en compte les styles visuels tels que la couleur, le contraste et la taille du texte. Cela implique de garantir un contraste adéquat entre le texte et son arrière-plan, y compris le texte sur les images, les icônes et les boutons, afin d’améliorer la lisibilité pour les utilisateurs ayant un faible sensibilité aux contrastes ou souffrant de daltonisme. Un contenu bien contrasté améliore la lisibilité dans diverses conditions d’éclairage, ce qui profite à tous les utilisateurs.

Le texte standard doit maintenir un rapport de contraste d’au moins 4.5:1 avec l’arrière-plan. Pour le texte plus grand, les composants interactifs et les visualisations de données, un rapport de contraste minimum de 3:1 avec la couleur d’arrière-plan est requis. Les indicateurs de statut doivent utiliser efficacement les couleurs sémantiques, le type et l’imagerie pour transmettre les informations, ce qui garantit que le contenu peut être perçu par tous les utilisateurs. Envisagez de prendre en charge une palette de couleurs à contraste élevé, qui normalise la palette de couleurs pour afficher le contenu avec un rapport de contraste d’au moins 7:1, ce qui garantit la visibilité et la clarté. Offrir un mode sombre peut améliorer considérablement la lisibilité et réduire la fatigue oculaire.

Typographie

La typographie joue un rôle crucial en garantissant la lisibilité pour les utilisateurs ayant des besoins divers. Le texte doit être suffisamment grand et convenablement espacé pour répondre aux différents exigences des utilisateurs. Les utilisateurs doivent pouvoir ajuster les paramètres tels que l’orientation et les niveaux de zoom, les applications adaptant de manière transparente la disposition de leur contenu en conséquence. Une typographie bien définie contribue non seulement à la lisibilité, mais facilite également l’orientation et la navigation dans les pages, ce qui profite aux personnes malvoyantes, avec des troubles cognitifs, daltoniennes et celles qui dépendent de lecteurs d’écran.

Les titres doivent comporter du texte en gros caractères ou en gras pour permettre une lecture et une compréhension rapides, en particulier pour les utilisateurs visuels. Des éléments de titre correctement appliqués garantissent une navigation efficace pour tous les utilisateurs. La largeur et l’espacement des lignes ont un impact significatif sur la lisibilité ; par exemple, des lignes trop larges fatiguent les yeux tandis que des lignes trop courtes perturbent le rythme et la compréhension. Visez une longueur de ligne de 50 à 70 caractères et une hauteur de ligne correspondant à 120 % à 145 % de la taille de la police pour améliorer la lisibilité.

Sur les appareils mobiles, le texte doit être redimensionnable jusqu’à 200 % sans compromettre le contenu ou les fonctionnalités. Cette flexibilité garantit que les utilisateurs peuvent ajuster la taille du texte en fonction de leurs préférences ou de leurs besoins, ce qui améliore l’accessibilité globale. De plus, les utilisateurs doivent avoir la possibilité de zoomer sur l’interface, avec des mises en page conçues pour redistribuer le contenu de manière transparente sans défilement horizontal pour des niveaux de zoom allant jusqu’à 400 %. Veiller à ce que le contenu reste accessible et lisible, quelle que soit la taille de l’écran de l’appareil, contribue à une expérience plus conviviale pour tous les utilisateurs.

Images, graphiques et mouvements

Les images et les graphiques rendent le contenu plus agréable et facile à comprendre pour de nombreuses personnes, et en particulier pour celles ayant des troubles cognitifs et d’apprentissage. Même si les images peuvent servir d’indices pour les personnes malvoyantes et les aider à s’orienter dans le contenu, une utilisation intensive sur les sites web peut créer des obstacles majeurs pour les utilisateurs.

Les pratiques accessibles autour du contenu multimédia profitent aux utilisateurs de lecteurs de braille et d’écran, aux utilisateurs qui naviguent avec les images désactivées pour économiser de la bande passante et aux robots de moteurs de recherche. Elles peuvent également aider les personnes souffrant de perte auditive ou de troubles cognitifs.

Utilisez le texte de remplacement (Alt) pour rendre le contenu visuel accessible. Les attributs Alt décrivent le contenu visuel, par exemple le texte affiché pendant le téléchargement des images. Adaptez le texte de remplacement au contexte de l’image. Soyez concis et informatif (utilisez entre 150 et 250 caractères). N’oubliez pas de marquer les images qui dupliquent le contenu du texte comme images décoratives.

Interaction

L’interaction est là où l’accessibilité compte le plus. Si un utilisateur ne peut pas naviguer facilement dans un produit et effectuer des tâches, le produit n’est pas vraiment accessible. Des interactions au clavier et tactiles efficaces aident les utilisateurs de lecteurs d’écran, de lecteurs de braille et ceux qui naviguent à l’aide d’un clavier. Les interactions classiques incluent :

  • Navigation. Les utilisateurs de technologies d’assistance naviguent dans une page web par tabulation, en effectuant une recherche et, dans le cas des lecteurs d’écran, en utilisant des listes de titres et de liens. Assurez une navigation efficace au clavier avec des points de repère, des titres et des raccourcis (comme passer au contenu principal).
  • Liens hypertextes. La convivialité et l’accessibilité des liens hypertexte peuvent être améliorées en les rendant clairs, concis et significatifs hors contexte. Appliquez un contraste de couleur suffisant et différenciez-vous visuellement des autres contenus.
  • Tables. Se baser uniquement sur des repères visuels ne suffit pas pour créer une table accessible. Le marquage structurel permet à la technologie d’assistance de reconnaître les en-têtes et les cellules de données.
  • Formulaires. Les champs de saisie, utilisés pour diverses interactions web, soulèvent souvent des problèmes d’accessibilité pour les personnes qui utilisent des lecteurs d’écran ou des claviers.
  • Focus. La visibilité ciblée aide les utilisateurs qui se basent sur le clavier à naviguer dans la page, en indiquant visuellement l’élément avec lequel ils interagissent ensuite. Parfois, le focus doit être déplacé par programme ou limité à une zone spécifique pour optimiser l’expérience.
  • Changements d’état. Spécifiez le texte pour tout changement d’état et les annonces. Il est essentiel de communiquer les états d’erreur et de guider les utilisateurs dans la récupération des erreurs (telles que des informations manquantes ou un problème système).

Facilitation de Power Platform

Les controles modernes sont disponibles à la fois pour les applications canevas et les applications pilotées par modèle.

Les applications canevas prennent en charge les thèmes modernes, ce qui vous permet de mettre en œuvre une palette de marque cohérente sur tous les contrôles de l’application. Les applications pilotées par modèle prennent en charge les thèmes pour modifier les éléments de marque de base tels que les couleurs d’en-tête de l’application, les liens et certaines icônes de formulaire.

Les composants réutilisables et compatibles avec les solutions sont disponibles sous plusieurs formes pour différents types d’applications. Les composants de canevas personnalisés peuvent être utilisés dans des applications de canevas ou des pages personnalisées et sont créés à l’aide du low-code. Power Apps component framework peut être utilisé pour implémenter des composants de code pour les applications canevas, les applications pilotées par modèle et Power Pages.

Les applications canevas prennent en charge les propriétés accessibles qui sont mappées à des fonctions de technologie d’assistance spécifiques. Utilisez les outils en studio pour valider la conformité de l’accessibilité.

Même si les applications pilotées par modèle sont accessibles sans configuration, assurez-vous que toutes les ressources web ajoutées à l’application sont accessibles. Les expériences de canevas intégrées, y compris les pages personnalisées, doivent être configurées manuellement pour répondre aux normes d’accessibilité.

Les applications pilotées par modèle fournissent des raccourcis clavier standard intégrés pour naviguer dans les formulaires et les vues.

Les applications canevas nécessitent des composants de code pour activer les raccourcis clavier, qui peuvent être configurés à l’aide des raccourcis clavier du kit du créateur.

Voir aussi

Liste de contrôle Optimisation de l’expérience

Référez-vous à l’ensemble complet des recommandations.

Liste de contrôle Optimisation de l’expérience