Alignement et espacement

Cette rubrique explique comment aligner et espacer les éléments à l'écran pour aider l'utilisateur à comprendre les liens entre ces différents éléments et à bien les utiliser. Regardez la vidéo pour en savoir plus. 

Commençons par quelques bases sur l'alignement et l'espacement.

Un alignement et un espacement cohérents aident l'utilisateur à comprendre les liens entre les différents éléments à l'écran et à bien les utiliser. Un alignement et un espacement incohérents obligent l'utilisateur à deviner la fonction des différents éléments, les liens entre ces éléments et comment les utiliser. Les mêmes règles s'appliquent à la construction de bâtiments, pour les mêmes raisons. Vous ne pouvez pas fixer des poignées de porte et des interrupteurs à n'importe quelle hauteur ; celle-ci doit être cohérente. Imaginez un escalier dont les marches seraient de différentes hauteurs. Gare à la chute !

Imaginez maintenant réaliser votre travail en montant ces marches de différentes hauteurs. Ces incohérences vous gêneraient-elles pour travailler de manière efficace et sans erreur ? Bien sûr que oui. Concevoir une interface utilisateur avec des éléments alignés et espacés de manière incohérente, c'est comme construire une maison avec des poignées de porte différentes et des escaliers biscornus.

En tant que spécialiste du développement logiciel, vous devez vous assurer de la cohérence des alignements et des espacements dans toutes les interfaces utilisateur que vous créez. Vous devez également vérifier que les systèmes de conception (les modèles et lignes directrices définis par votre équipe de conception) utilisent une formule pour définir tous les alignements et espacements à l'écran. L'espacement entre les différents éléments doit être homogène et, idéalement, proportionnel à l'espacement à l'intérieur et autour de tous les éléments. Vous obtenez ainsi un affichage clair, organisé et proportionné, qui aide l'utilisateur à comprendre comment les éléments sont liés les uns aux autres, par exemple les relations entre des données en lecture seule d'une même ligne et la logique de regroupement de plusieurs champs dans un formulaire.

Nous voyons ici un problème d'alignement classique. Les éléments devraient être alignés à gauche suivant les lignes rouges. Les premières données de chaque colonne ne sont pas alignées correctement. L'espacement devrait également être homogène dans le sens vertical, en particulier dans un formulaire ou pour l'affichage de données en lecture seule. Si les espacements sont incohérents, vos utilisateurs auront du mal à saisir le contexte des données présentées, en particulier la relation entre les différents champs ou données. Pour la même raison, vous devez également éviter de laisser trop d'espace horizontal entre les éléments. Un utilisateur contraint de balayer tout l'écran du regard pour trouver les champs ou données associés perd du temps, est moins efficace et risque de faire des erreurs.

Dans cet exemple, l'espacement entre les champs Current manager et New manager est inadapté. Ces deux informations partageant le même contexte, elles devraient être plus proches l'une de l'autre. L'espacement entre la première ligne de champs et la deuxième (le champ Authorization reason) est aussi trop grand. Enfin, le champ Authorization reason est beaucoup trop large. La largeur maximale de tout formulaire ou élément de formulaire doit être de 80 em, soit environ 80 caractères. Il n'y a aucune raison pour que la longueur du champ Authorization reason dépasse celle de la première ligne. Autre erreur fréquente : l'espacement après le dernier élément d'une liste ou d'un bloc d'éléments. Si l'interface affiche une liste ou un bloc d'éléments, n'oubliez pas de supprimer l'espacement après le dernier élément. Par défaut, l'espacement après le dernier élément est supprimé pour toute nouvelle mise en page empilée, mais il est possible que d'anciennes mises en page ne soient pas correctement configurées.

Vérifiez deux ou trois fois les espacements si vous utilisez des sections ou des conteneurs imbriqués, car la mise en page parent peut ajouter un espacement à l'élément imbriqué lui-même : une section ou un conteneur imbriqué suit en effet les mêmes règles de mise en page que tout autre élément. Si les éléments présentés dans la section ou le conteneur imbriqué sont eux-mêmes espacés, les espacements seront incohérents dans l'interface utilisateur finale. Autre source de problème : une section ou un conteneur imbriqué contenant des éléments masqués, sans que la logique d'affichage/masquage soit appliquée pour la section elle-même. Si les emplacements réservés à l'affichage des éléments masqués (qui font partie de la mise en page, comme tout autre élément) ne sont pas eux-mêmes masqués, les espacements sont incohérents.

Vérifiez vos connaissances avec l’interaction suivante.