Pourquoi et comment concevoir des interfaces avec une grille de 8 points ?
L’UX design a pour objectif principal d’optimiser le parcours de l’utilisateur pour le rendre le plus accessible, agréable et instinctif possible. Afin d’atteindre cet objectif, il faut toujours prendre en considération le critère de la cohérence des interfaces tout en se focalisant sur les espacements. Des composants comme les boutons peuvent être disposés individuellement, toutefois, lorsqu’ils sont définis en une plus grande soupe d’éléments et de contenu, ils peuvent dégrader la conception globale. Sur une interface digitale, il est parfois difficile de créer de manière cohérente une composition esthétique, sans un système pour déterminer les relations d’espacement des éléments. Dans ce sens, vous pouvez utiliser le système de grille de 8 points.
La cohérence comme critère d’ergonomie IHM
Les critères ergonomiques d’une interface sont les caractéristiques de l’interface qui vont déterminer son utilisabilité. Ces critères servent à identifier les problèmes d’ergonomie d’une interface et ils sont utilisés en phase d’évaluation sans engager l’utilisateur, c’est-à-dire avant d’effectuer les tests d’utilisabilité. Nombreux sont les critères ergonomiques, nous en citons l’adaptabilité, la comptabilité, la gestion des erreurs, la charge de travail et la cohérence.
Le critère de cohérence s’adresse à la cohérence globale de l’interface homme-machine. L’objectif principal de cette cohérence est de suivre une logique d’utilisation constante, tant au niveau de la façon d’exécuter les commandes que de la représentation des données. En d’autres termes, pour un même projet digital, la position des informations, le format des données, le graphisme et le vocabulaire doivent être cohérents, d’une interface à l’autre.
La cohérence rend le système stable ainsi que prévisible aux yeux de l’utilisateur, ce qui diminue le temps de recherche de l’information. En effet, la perte de temps générée par des incohérences est mal acceptée par l’utilisateur. La cohérence rend l’application mobile ou le site web, par exemple, plus facile à apprendre. Ainsi, grâce à une bonne cohérence du système, les apprentissages deviennent facilement généralisables, ce qui est un avantage lorsqu’on parle d’utilisation, notamment des logiciels, par exemple.
La grille de 8 points en UX Design
Qu’est-ce que la grille de 8 points ?
Pour commencer, une grille est un ensemble de lignes horizontales et verticales qui se croisent. Les lignes horizontales définissent les rangées, tandis que les lignes verticales déterminent les colonnes. Lorsqu’on conçoit une interface digitale, on est amené à placer des éléments sur la grille en fonction de plusieurs critères.
Pour revenir à la grille de 8 points, c’est l’un des systèmes de grille de mise en page les plus couramment utilisés. Cette grille peut être appliquée à presque tous les projets de conception numérique. Un système de grille 8 points consiste à utiliser des espaces de 8 pixels pour dimensionner et espacer les éléments sur une page, cela signifie que toute hauteur ou largeur définie, marge ou remplissage, sera un incrément de 8.
Pourquoi choisir la grille de 8 points ?
Nombreuses sont les raisons qui invitent les utilisateurs à choisir la grille de 8 points, comme par exemple la variété des tailles d’écran et des densités de pixels qui ne cesse d’accroître, ce qui peut compliquer le processus de génération d’actifs.
Un pt (point) est une mesure d’espace qui dépend toujours de la résolution de l’écran : une résolution ‘1x’ (ou @1x) 1pt = 1px. Les écrans étaient dotés d’une résolution 1x ; 1pt équivaut à 1px. Ensuite, les écrans Retina (2x) et Super Retina (3x) sont arrivés et on a pu constater les changements, notamment avec la conception pour l’iPhone X (3x). En effet, la conception serait rendue avec trois fois plus de pixels par pouce (ppi). A titre d’exemple, si un designer dispose d’une icône à la taille de 24px lorsqu’il exporte cette icône en tant qu’actif @2x et @3x, l’image rendue sera soit 48px (2x), soit 72px (3x), ce qui aura alors fière allure sur les écrans Retina et Super Retina.
Le fait d’utiliser un nombre pair tel que ”8” afin d’espacer et de dimensionner les éléments dans la conception, rend plus facile et plus cohérent la mise à l’échelle d’une grande variété d’appareils. Ainsi, le nombre 8 s’adapte parfaitement à tous les différents affichages d’écran y compris Android @ 0,75 et @ 1,5. Par ailleurs, la majorité des tailles d’écran populaires sont divisibles par 8, et cela facilite l’ajustement. La mise à l’échelle par incrément de 8 offre également une bonne quantité d’options.
Prenant l’exemple de la bibliothèque de composants avisés Bootstrap, qui permet aux concepteurs ou aux développeurs de se focaliser sur le contenu et sur l’expérience utilisateur. Sur le web, Bootstrap a réussi à améliorer la qualité d’innombrables sites web, mais le fait de ne pas avoir une unité de mesure cohérente peut causer des incohérences lors de la mise en page entre les interfaces, et particulièrement sur les projets avec deux concepteurs ou plus.
En effet, lorsque plusieurs équipes travaillent sur un même design, il est fort probable que des différences apparaissent, que ce soit au niveau des tailles de titres, des espaces ou des radius. On peut donc conclure que l’adoption d’un système Bootstrap ou d’un autre système similaire ne suffit pas. Il faut donc miser sur la grille de 8 points.
Les avantages du système de 8 points
Le système de 8 points apporte plusieurs avantages pour les designers, les équipes ainsi que pour les utilisateurs. Du côté des designers, ce système améliore l’efficacité au sein d’un projet digital. Cette efficacité diminue les décisions à prendre en termes de correctifs et restructurations et permet de garder un certain espacement entre les éléments.
Le système de 8 points facilite la communication entre les concepteurs et les développeurs dans la mesure où un développeur peut facilement regarder un incrément de 8 points au lieu d’avoir à mesurer à chaque fois. Pour les utilisateurs, ce système offre une esthétique cohérente et crée un sentiment de confiance et une meilleure perception de l’image de la marque en absence de décalage d’un demi-pixel sur leurs divers appareils.
La méthode Hard Grid ou Soft Grid ?
Les grilles constituent l’un des principaux outils de conception. Les systèmes de disposition verticale les plus courants sont les soft grids ou hard grids. La méthode “Soft Grid” est utilisée généralement pour la création des interfaces utilisateur, dans laquelle les concepteurs ou les développeurs peuvent mesurer, avec la manière la plus simple, des incréments de 8 points entre les éléments individuels d’une conception.
Ceci est par opposition à la méthode “Hard Grid” qui place les éléments dans un motif de grille défini par incréments de 8 points, que les développeurs peuvent trouver un peu trop rigide et peu pratique lorsqu’ils codent une conception. Dans la majorité des cas, comme pour les colonnes de journaux ou de magazines, la grille (grid) est tenue pour acquise.
Comment utiliser la grille de 8 points ?
En tant que designer, la grille de 8 points vous aide à concevoir un site web, ou une application mobile ou quelconque interface digitale. Il existe des grilles pour toutes sortes d’arrangements de contenu : les grilles de colonnes pour aligner le contenu horizontalement, les grilles de ligne de base pour aligner verticalement les corps de texte, les grilles souples (Soft Grids) et les grilles dures (Hard Grids) pour décrire la rigueur avec laquelle vous les respectez.
- En matière d’utilisation, commencer à vous assurer que l’option “Aligner sur la grille de pixels” est activée, si elle est disponible sur l’outil que vous utilisez.
- Si vous choisissez de définir la taille de votre texte racine sur 16, vous pouvez facilement utiliser des incréments de 0,5 rem pour créer vos mises en page sur une grille de 8 points. Si vous ne préférez pas faire cela, vous devez utiliser une variable d’espacement CSS ou préprocesseur pour assurer la gestion de la mise en page tout en conservant la valeur de maintenabilité supplémentaire offerte par les variables.
- Assurez-vous d’utiliser le format SVG lorsque vous concevez. Si vous voulez ajouter ou créer des icônes, utilisez des multiples de 8 (16×16, 24 × 24, 32 × 32, 40×40…) car ils s’intégreront facilement dans le système de mise en page.
- Sur la typographie et via les dessins, la grille 8 points donne un rythme vertical beaucoup plus harmonieux. Afin de créer rapidement un système de typographie cohérent, vous pouvez utiliser “l’échelle de type”, comme un outil.
La conception d’interface UX/UI avec la grille de 8 points
Espacement avec la grille de 8 points et Bootstrap
Lors de la conception, assurez-vous de définir les valeurs d’espacement en tant que variables afin de faciliter la compréhension du système d’espacement par les développeurs. L’espacement est important puisqu’il rend la conception nette et propre. L’interface utilisateur semble logique, conviviale ainsi que attrayante. Pour assurer le rembourrage et de réussir l’ajout de la marge entre les éléments, vous pouvez misez sur les principes de 8 points qui sont 8px, 16px, 24px, 32px, 40px, 48px, 56px et ainsi de suite.
Pour le rythme horizontal, utilisez le système de grille d’amorçage standard de disposition à 12 colonnes avec une largeur de gouttière de 24 pixels (1,5 rem). Dans le cas où vous avez pris un plan de travail de 1440 pixels, vous devez utiliser une marge de 60 pixels de chaque côté du conteneur. En ce qui concerne le rythme vertical, misez sur 8 pixels (hauteur) lorsque vous utiliserez la typographie, l’iconographie, les cartes, les boutons…
D’autre part, les icônes doivent toujours être de tailles différentes afin de garder le même poids visuel. Afin de garder vos mesures cohérentes, tout en assurant une variation dans les paramètres définis, mettez un cadre autour d’eux.
Mettre en place un système d’espacement avec Sketch
Si vous utilisez Sketch pour concevoir des interfaces utilisateur, commencez par définir les numéros de base de votre grille. Assurez-vous d’utiliser des principes de conception de matériaux et donc des divisions de 8 : 8px / 16px / 24px / 32px / 40px / 48px / 56px… pour tous les rembourrages / marges entre les éléments.
L’essentiel est de construire détruire une base pour la cohérence de l’espacement. Afin de maintenir le rythme vertical tout en utilisant la grille d’interface utilisateur 8 points, utilisez une grille de ligne de base 8pt sur Sketch.
Pour les icônes, assurez-vous de les encadrer sinon, elles seront de tailles différentes. A noter que nous recommandons que vous utilisez souvent des multiples de 8. Ainsi, si vous avez besoin de changer une icône et qu’elle est utilisée à plusieurs endroits différents, vous n’aurez qu’à changer simplement le symbole.
En ce qui concerne la hauteur de ligne, il sera difficile de s’assurer que les éléments de texte tombent dans la grille. Le plugin de hauteur Golden Line peut vous aider dans ce sens et vous permet d’optimiser votre typographie en toute simplicité. Il suffit de le télécharger et de copier le plugin Golden Line Height sketch plugin dans votre dossier de plugin Sketch.
Création d’un espacement avec Figma
Grâce aux grilles de mise en page de Figma, vous ne trouverez pas de difficulté à configurer les grilles dans votre propre processus de conception. Figma vous aide à accélérer votre processus de conception, du redimensionnement des cadres à la visualisation de l’espacement ainsi que du rembourrage.
Pour la création d’espacement sur Figma, vous pouvez contrôler l’espacement entre les éléments dans un cadre de la disposition automatique. Par contre, il n’est pas possible d’ajuster l’espacement sur le canevas, contrairement à la sélection automatique.
Pour la création d’espacement, assurez-vous d’utiliser plutôt les champs d’espacement de la section “Disposition automatique” de la barre latérale de droite : Espacement horizontal / Espacement vertical. Puis, entrez un nombre dans le champ, et déplacez les valeurs à l’aide des touches fléchées ou faites varier la valeur dans le champ, à l’aide du curseur.
Pour conclure…
Au niveau de la conception d’une interface digitale, l’espacement améliore la consommation de données tout en assurant une meilleure lisibilité. Il offre une certaine évolutivité constante et transmet du sens à vos interfaces, et ce en donnant aux éléments une hiérarchie visuelle. Ainsi, l’espacement garantit la cohérence de l’UX, du côté de l’utilisateur, et réduit les éventuelles conjectures et modifications, pour l’équipe de développement.
Grâce à un système de grille, vos designers et développeurs sont certains de mettre en place une interface attractive, mais surtout cohérente. A noter qu’avant de commencer votre conception, penchez-vous sur la mise en place de votre système de grille.
Nous espérons qu’avec ce bref aperçu de la grille 8 points, vous êtes prêtes à disposer vos interfaces utilisateur plus rapidement !
by 
