Recommandations pour optimiser la mise en page
S’applique à cette recommandation de liste de contrôle d’optimisation d’expérience bien conçue : Power Platform
| XO:06 | Conservez des mises en page utilisables et visuellement attrayantes sur toutes les tailles et résolutions d’écran. Utilisez des techniques adaptatives pour restituer dynamiquement le contenu de différentes manières. |
|---|
Ce guide décrit les recommandations pour concevoir des dispositions d’écran faciles à naviguer et à adapter de manière fluide sur différents appareils. Cette approche garantit aux utilisateurs une expérience visuelle cohérente et optimale, quel que soit l’appareil qu’ils utilisent.
Définitions
| Terme | Définition |
|---|---|
| Fenêtre d’affichage | Partie visible d’une interface numérique, telle qu’un navigateur Web ou une application mobile, où le contenu est affiché. Les plages de fenêtres d’affichage sont souvent associées à des classes d’appareils (mobiles, tablettes et ordinateurs de bureau) en fonction des dimensions et des résolutions de l’écran. |
| Points d’arrêt | Valeurs de pixels spécifiques qui définissent les plages de fenêtres utilisées pour déterminer le comportement de mise en page adaptative. |
Stratégies de conception clés
Les disposition dynamique offrent une expérience utilisateur flexible et efficace sur différentes tailles de fenêtres. Ils s’adaptent en mettant à l’échelle le contenu, en réorganisant les éléments et en affichant de manière sélective le texte et les images. Les disposition dynamique répondent aux besoins des utilisateurs quelle que soit la taille de leur écran.
Déterminer un cadre d’application cohérent
Le cadre d’application se compose d’un ensemble de commandes disponibles de manière cohérente sur chaque écran. Il comprend trois sous-composants principaux : un en-tête, une navigation et une région de contenu. Les applications simples ont la possibilité d’utiliser le composant d’en-tête, tandis que les applications plus sophistiquées exploitent souvent la navigation latérale pour activer plusieurs pages. Les sous-composants sont personnalisables. Par exemple, vous pouvez intégrer une recherche globale dans l’en-tête ou regrouper des éléments dans la navigation latérale pour répondre aux exigences de votre application.
Les trois principaux sous-composants du cadre d’application sont décrits comme suit :
L’ en-tête est un composant essentiel conçu pour faire partie de chaque application interne. Il se compose de sous-composants qui permettent aux utilisateurs d’accéder aux fonctions à l’échelle du système, les aident à s’orienter vers l’interface utilisateur et assurent la cohérence des expériences. Il apparaît en haut du cadre de l’application et doit persister sur toutes les pages de l’application. Il peut éventuellement héberger des commandes globales, telles que la recherche, les paramètres, les notifications, les commentaires, le profil ou l’aide. Le nom de l’application doit toujours être affiché, ce qui devrait idéalement également servir de lien cliquable vers la page d’accueil ou de destination. L’en-tête doit être réactif, avec des commandes passant au contrôle de débordement dans les fenêtres de 600 pixels et moins. La largeur de saisie de la recherche est également réactive à 1 023 pixels et moins.
La navigation est un système de contrôles qui fonctionnent ensemble pour aider les utilisateurs à trouver des informations et à accomplir des tâches. Il aide les utilisateurs à passer d’une section à l’autre d’une application. Hiérarchiquement, il n’est attaché à aucune page ou section, mais existe au-dessus de tout autre contenu. Il est toujours présent et peut être réduit à un état réduit (également appelé état ferroviaire) pour libérer de l’espace supplémentaire pour le contenu de la page. Pour les fenêtres de plus petite taille, il peut être réduit dans un menu déroulant. Les formes de navigation les plus courantes incluent la navigation supérieure et la navigation latérale (les deux ne doivent pas être utilisées simultanément).
La région de contenu contient le focus de l’écran. La taille de la fenêtre du navigateur influence le cadre de contenu et l’espace disponible dans la zone de contenu principale. Ce cadre s’adapte en fonction du point d’arrêt et du comportement réactif correspondant de chaque composant. Pour plus d'informations, voir Créer une Matrice point d’arrêt.
La région de contenu peut éventuellement contenir plusieurs sous-régions disponibles pour un placement cohérent des éléments, comme un en-tête de page, des volets latéraux en ligne ou des panneaux qui superposent le contenu.
L’adhésion à un langage de conception cohérent (schémas de couleurs, typographie et structure de mise en page) aide les utilisateurs à identifier et à interagir rapidement avec divers éléments sans confusion. Plus un modèle de cadre d’application est utilisé de manière cohérente dans toutes les applications métier internes, plus le rappel ou le modèle mental de l’utilisateur devient fort. L’alignement sur les normes industrielles ou les modèles de plate-forme communs renforce encore cet effet.
Une fois le cadre de l’application déterminé, la disposition de chaque écran réside dans la zone de contenu du cadre de l’application.
Utilisez judicieusement la région de contenu
Les utilisateurs recherchent des expériences fluides où l’information est facilement accessible, le texte est facile à lire et l’esthétique améliore plutôt qu’elle n’entrave la convivialité. Donnez la priorité à la visibilité initiale des informations clés, assurez la lisibilité dans toutes les colonnes et harmonisez les éléments de conception pour un attrait esthétique.
Assurez-vous que les informations essentielles sont immédiatement visibles dès l’ouverture de l’écran sans avoir besoin de le faire défiler. Donnez la priorité à l’affichage des informations essentielles telles que les options de navigation, le contenu crucial et les éléments exploitables en haut de l’écran. Trouver l’équilibre entre afficher suffisamment d’éléments et fournir des informations détaillées pour chaque élément est un défi constant. À l’inverse, même s’il peut être tentant de fournir toutes les informations possibles dans l’optique initiale, trop d’informations risque de submerger les utilisateurs et de diluer la signification des éléments clés. Pensez à utiliser des résumés ou des aperçus concis qui offrent un aperçu d’un contenu plus détaillé, incitant les utilisateurs à approfondir leur recherche. Les tableaux de bord sont optimisés pour servir cet objectif de visualisation de grandes quantités de données.
Incorporez plusieurs colonnes, sections ou regroupements pour organiser logiquement le contenu et maximiser l’espace. Portez une attention particulière à la largeur des colonnes, en vous assurant que le texte reste lisible sans contrainte excessive. Évitez les colonnes trop étroites qui obligent les utilisateurs à faire constamment défiler horizontalement, perturbant ainsi le flux d’interaction. À l’inverse, des colonnes trop larges peuvent nuire à la lisibilité, obligeant les utilisateurs à suivre les lignes sur de longues distances. Efforcez-vous de trouver un équilibre qui permet une lecture confortable tout en utilisant efficacement l’espace disponible.
Dimensionnez et positionnez les éléments visuels de manière appropriée pour créer une interface visuellement agréable et équilibrée. Alignez les légendes avec les visuels ou les titres correspondants, maintenez un espacement cohérent entre les éléments et respectez une hiérarchie basée sur les besoins des utilisateurs. Supprimez les embellissements inutiles et attribuez judicieusement les pixels aux éléments qui comptent le plus. Donnez la priorité et mettez l’accent sur le contenu et les éléments de navigation, en particulier sur les applications ou les pages d’accueil nécessitant beaucoup de navigation, et évitez les ornements superflus qui nuisent à la convivialité.
Une grille sous-jacente peut être utile pour organiser les éléments de manière cohérente. Le comportement de grille choisi doit être cohérent dans la zone de contenu de chaque écran de l’application et peut également être appliqué au niveau des composants (tels que des cartes ou des volets latéraux). Le type de disposition de grille le plus couramment utilisé dans les applications Web est la grille de colonnes. Un comportement de grille fluide (ou extensible) est recommandé pour la mise en œuvre d’écrans réactifs.
Utiliser des mises en page et des modèles de regroupement établis
Utiliser des structures et des dispositions communément reconnues pour organiser le contenu et les éléments au sein d’une interface utilisateur. Ces mises en page et modèles ont été affinés et se sont avérés efficaces au fil du temps, les rendant familiers et intuitifs pour les utilisateurs tout en facilitant la mise en œuvre de modèles adaptatifs. Une fois les scénarios et les éléments de base identifiés, mappez chacun d’eux sur une disposition établie qui offre la meilleure interaction. Donnez la priorité au contenu et aux fonctionnalités importants pour l’accomplissement des tâches. Décidez quels éléments doivent toujours être visibles et accessibles sur l’écran et lesquels peuvent être masqués ou accessibles via d’autres menus ou actions.
La liste suivante, bien que non exhaustive, décrit les mises en page établies couramment utilisées pour les applications professionnelles ou de productivité. Tout peut avoir lieu dans la région de contenu principale.
Écran d’accueil/destination
Sert de point d’entrée à une application, fournissant aux utilisateurs un aperçu des offres ou des fonctionnalités de l’application. Vise généralement à capter l’attention des visiteurs et les encourage à entreprendre une action spécifique, comme accomplir une première tâche ou explorer un contenu plus approfondi. Il contient souvent des images de héros et des options de navigation claires.
Il est idéal pour accueillir les utilisateurs, offrir un accès rapide aux fonctionnalités clés, aux options de navigation ou aux appels à l’action, et donner le ton à l’expérience de l’application. Privilégiez la clarté, la simplicité et la navigation intuitive pour guider efficacement les utilisateurs.
Tableau de bord
Un hub centralisé au sein d’une application qui présente aux utilisateurs un aperçu complet des données ou informations pertinentes. Il se compose souvent de widgets ou de modules personnalisables, permettant aux utilisateurs de surveiller des métriques spécifiques ou d’effectuer des actions.
Les tableaux de bord conviennent aux applications comportant des ensembles de données complexes ou des fonctionnalités multiformes, permettant aux utilisateurs de suivre les progrès, d’analyser les tendances et de prendre des décisions éclairées en un coup d’œil. Ils sont particulièrement utiles dans les plateformes d’analyse, les outils de gestion de projet et les applications de gestion financière.
Formulaire
Une présentation structurée qui facilite la saisie des données par les utilisateurs, généralement composée de champs permettant de saisir divers types d’informations telles que du texte, des chiffres, des dates et des sélections. Les formulaires sont essentiels pour collecter les entrées des utilisateurs, traiter les transactions et faciliter les interactions au sein des applications.
Ils sont couramment utilisés dans les flux d’inscription, les processus de paiement, les tâches de saisie de données et tout scénario nécessitant la contribution ou les commentaires de l’utilisateur.
Afficher une profil/entité
Présente des informations détaillées sur une entité spécifique, telle qu’un profil utilisateur, une liste de produits ou un élément de contenu. Il comprend généralement un texte descriptif, des éléments multimédias et des actions ou interactions pertinentes.
Ils sont bien adaptés pour présenter des informations détaillées sur les éléments d’une application. Ils fournissent aux utilisateurs des informations approfondies, facilitent la prise de décision et soutiennent l’engagement avec des entités spécifiques telles que les profils d’utilisateurs dans les applications de réseaux sociaux ou les listes de produits sur les plateformes de commerce électronique.
Page Liste
Affiche une collection d’éléments ou d’entités dans un format structuré, souvent présenté sous forme linéaire ou en grille. Il comprend généralement de brefs résumés ou des aperçus de chaque élément, ainsi que des commandes de navigation pour la navigation ou le filtrage.
Les pages de liste sont efficaces pour présenter de grands ensembles de contenus ou de données dans un format compréhensible, permettant aux utilisateurs de numériser, de rechercher et de naviguer efficacement. Par exemple, si des actions sur des lignes spécifiques sont activées, le processus doit être clair. Les pages de liste sont couramment utilisées dans les systèmes de gestion de contenu, les listes d’annuaires, les résultats de recherche et les flux d’actualités.
Mini revue (écran partagé)
Divise l’interface en deux sections distinctes, avec une liste affichée sur le côté gauche et une vue des éléments sur le côté droit. La liste contient généralement une collection d’éléments, tandis que la vue des éléments fournit des informations détaillées sur l’élément sélectionné dans la liste.
Cette présentation est particulièrement efficace dans les scénarios dans lesquels les utilisateurs doivent parcourir rapidement une liste d’éléments et afficher simultanément des informations détaillées sur chaque élément, par exemple lors d’opérations groupées. Les catalogues de produits, les systèmes de gestion de documents, les clients de messagerie ou de communication et les outils de gestion de tâches (par exemple, la visionneuse de requêtes Azure Dev Ops) sont des scénarios qui correspondent généralement à ce modèle.
Assistant
Guide les utilisateurs à travers une série d’étapes ou de tâches séquentielles, généralement de manière linéaire, pour mener à bien un processus complexe ou atteindre un objectif spécifique. Il comprend souvent des indicateurs de progression, des invites et des contrôles de validation. Les assistants sont utiles pour simplifier les processus complexes, réduire la surcharge cognitive et guider les utilisateurs dans des tâches ou des flux de travail inconnus. Ils sont couramment utilisés dans les flux d’intégration, les processus de configuration, les formulaires en plusieurs étapes et les interactions basées sur des tâches telles que la configuration de paramètres ou de transactions complexes.
Continuez à personnaliser et à développer la mise en page standard pour répondre à des exigences spécifiques. Ce processus peut inclure l’ajout ou la suppression d’éléments, l’ajustement de la taille et du positionnement des éléments et l’application d’un style correspondant à l’identité de la marque ou aux directives de conception visuelle. Expérimentez avec différentes configurations et variantes de la mise en page standard pour trouver la disposition la plus efficace pour le contenu et l’expérience utilisateur globale.
Concevoir des mises en page pour tous les appareils
Les mises en page sont l’aboutissement de règles définies et d’une organisation intentionnelle du contenu. Il est essentiel de regrouper votre contenu dans des structures réfléchies, mais faire en sorte que tout cela s’articule avec une hiérarchie claire entre les plates-formes et les tailles d’écran nécessite une logique de mise à l’échelle. Individuellement, la conception adaptative et réactive peut chacune relever ce défi. Dans certains cas, un mélange de conception adaptative et réactive est le bon choix.
La conception réactive utilise un seul disposition où le contenu est fluide et peut s’adapter aux changements de taille de format. Cette technique de conception utilise des requêtes multimédias pour inspecter les caractéristiques d’un appareil donné et restituer le contenu en conséquence. La conception réactive vous permet de créer une fonctionnalité une seule fois et de la faire fonctionner efficacement sur toutes les tailles d’écran.
Une mise en page adaptative change entièrement en fonction du format dans lequel elle est présentée. La conception adaptative a plusieurs tailles de mise en page fixes et déclenche le navigateur pour charger une mise en page donnée en fonction de l’espace disponible. Les sites Web créés avec une conception adaptative utilisent des requêtes multimédias pour détecter les points d’arrêt, de la même manière que la conception réactive. Ils utilisent également un balisage supplémentaire basé sur les capacités de l’appareil. Ce processus est connu sous le nom d’"amélioration progressive".
Repositionner
Modifier Position des éléments de la page.
Gardez votre contenu organisé, lisible et équilibré en optimisant la composition à mesure que la taille de la fenêtre augmente. Par exemple, les éléments empilés verticalement sur une fenêtre mobile peuvent être repositionnés horizontalement sur des fenêtres plus grandes. Ce changement suit un ordre de lecture naturel de gauche à droite, crée un équilibre dans la conception et maintient la concentration visuelle sur les éléments clés de la page.
Redimensionner
Ajustez la taille et les marges des éléments de la page.
Redimensionnez les éléments de la page pour optimiser une expérience utilisateur riche en affichant plus de contenu en haut de la fenêtre, réduisant ainsi le besoin de défilement vertical. Ajustez les marges de la page pour ajouter de l’espace blanc et équilibrer la mise en page, ce qui permet au contenu de respirer et améliore l’attrait visuel du design. Par exemple, un composant héros peut s’étendre sur toute la largeur de la fenêtre pour afficher une plus grande partie de l’image d’arrière-plan. Le contenu sous la photo peut être développé, mais utilisez des marges différentes pour ajouter de la variété dans la mise en page et aider à définir la hiérarchie visuelle.
Redisposition
Optimisez le flux des éléments de la page.
Reflow ajuste les éléments de la page pour garantir qu’ils soient entièrement affichés, en tenant compte de la taille et de l’orientation de la fenêtre en réorganisant le contenu. Par exemple, une seule colonne de contenu dans une fenêtre plus petite peut être redistribuée sur une fenêtre plus grande pour afficher deux colonnes de texte. Cette technique permet d’afficher davantage de contenu "au-dessus de la ligne de flottaison".
Afficher/masquer
Optimisez le contenu pour la taille de la fenêtre et son orientation.
Afficher ou masquer les éléments de la page pour optimiser le contenu en fonction de la taille de la fenêtre et de son orientation. Cette technique réactive adapte la quantité d’informations au contexte de visualisation. Par exemple, les catégories apparaissant sur un petit écran peuvent afficher des métadonnées limitées, comme une image, un titre et un lien, afin que d’autres informations soient rendues visibles pour aider l’utilisateur à se concentrer. Sur un écran plus grand, les catégories peuvent afficher des métadonnées supplémentaires telles qu’un personnage, une date et une brève description, tout en s’inscrivant dans la fenêtre d’affichage.
Réarchitecte
Divisez ou réduisez les éléments et le contenu de la page pour rester concentré sur les informations et les actions importantes.
Cette approche est similaire à la pratique de la "divulgation progressive" dans votre conception, mais pour des tailles et des orientations de fenêtres différentes. Par exemple, agrandir la fenêtre permet d’afficher une liste d’éléments à côté des détails. Ce lien visuel entre le contenu permet aux utilisateurs de sélectionner facilement un autre élément. Sur un écran plus petit, l’accent reste mis sur l’affichage des informations clés.
Créer une matrice de points d’arrêt
Une matrice de points d’arrêt sert de représentation graphique illustrant les comportements réactifs ou adaptatifs de la conception d’une application sur différentes tailles et orientations d’écran. Il présente généralement une grille ou une mise en page structurée détaillant la réponse de la conception à différents points d’arrêt. Chaque segment correspond à une largeur d’écran distincte, offrant un aperçu de la structure, de la disposition et des fonctionnalités de la conception. Une matrice de points d’arrêt englobe des considérations sur la largeur de l’écran, l’orientation de la fenêtre, les éléments de conception, la structure de mise en page, la présentation du contenu, la navigation, les médias et les composants interactifs, pour illustrer comment la conception d’un site Web ou d’une application réagit sur différentes tailles et orientations d’écran. Cette approche permet non seulement de finaliser la conception de chaque écran, mais facilite également la mise en œuvre lorsque les modifications des propriétés des composants clés sont explicitement suivies et bien communiquées.
Facilitation de Power Platform
Les présentations de formulaires d’application basées sur un modèle sont configurées à l’aide de Power Apps Studio. Le concepteur de formulaires permet aux créateurs d’ajouter des éléments dans une structure de grille, ce qui permet aux pages de formulaire d’être intrinsèquement réactives. Composants personnalisés intégrés tels que pages personnalisées, composants de canevas intégrés et Power Apps Component Framework (PCF) composants de code doivent intégrer un comportement réactif dans leurs implémentations respectives. Par exemple, les pages personnalisées doivent implémenter un comportement réactif de la même manière qu’une application purement canevas pour fonctionner correctement.
Les applications Canvas nécessitent une configuration explicite pour chaque composant afin de implémenter un comportement réactif, permettant ainsi un meilleur contrôle sur l’expérience. Les tailles d’écran sont déterminées dans la définition de l’application, qui peut être référencée pour déterminer la position, le comportement, la visibilité et d’autres propriétés pertinentes.
Informations associées
Liste de contrôle Optimisation de l’expérience
Référez-vous à l’ensemble complet des recommandations.