Découvrez pourquoi l'espace est un élément constitutif d'un bon design de mise en page d'UI, et obtenez des conseils pour démarrer votre processus de design avec Justinmind.
L’espace est omniprésent – il est partout dans cet article de blog ! Bien qu’il soit souvent négligé en tant que composant de mise en page dans le design UI, vous n’avez pas besoin d’être un scientifique de fusée pour comprendre que l’espace a un impact direct sur la convivialité du site et de l’app. On peut l’observer dès les premières étapes, comme la phase de wireframe.
Commencez à wireframer des produits dès aujourd'hui. Projets illimités.
L’utilisation efficace de l’espace dans la mise en page de votre UI permet d’améliorer la lisibilité, de fournir un retour d’information et d’attirer le lecteur vers les parties les plus importantes de l’écran. Nous pensons que personne n’aurait pu mieux résumer l’importance de l’espace et de la mise en page dans la conception de l’UI que le conférencier et auteur de web design Brandon Jones :
“Une bonne hiérarchie visuelle n'a rien à voir avec des graphiques délirants ou les derniers filtres de Photoshop. Il s'agit plutôt d'organiser l'information de manière à ce qu'elle soit utilisable, accessible et logique pour le visiteur quotidien du site.”
Brandon Jones - Ancien rédacteur en chef de Tuts+
Dans le billet d’aujourd’hui, nous examinons comment l’espace peut contribuer à un design UI de qualité. Nous vous montrerons comment commencer et nous vous dévoilerons quelques secrets de fabrication. Il est facile de bien concevoir l’espace – il suffit d’avoir les bons outils !
Lié à la mise en page et à la composition de l’UI, l’espace est un aspect essentiel du langage visuel d’un design UI, au même titre que la couleur, la typographie et l’iconographie. L’espace est ce qui aide les designers à créer une respiration visuelle pour l’œil, et donne envie aux utilisateurs de rester sur la page. Il peut également contribuer à suggérer une fonction et à mettre l’accent sur un contenu important. Lorsque nous parlons d’espace dans le design UI, nous faisons référence aux deux concepts suivants : la proximité et l’espace négatif, ou espace blanc.
La proximité est un principe de la théorie de la Gestalt dans le design UI/UX. Le principe de proximité repose sur l’idée que les objets qui apparaissent proches les uns des autres sur un écran sont liés les uns aux autres (en particulier par rapport à ceux qui sont placés plus loin les uns des autres).
Souvent, les designers mettent en œuvre la proximité pour distinguer les groupes d’éléments et créer des sous-hiérarchies pour les groupes d’éléments et d’icônes de l’UI. C’est très simple. Il s’agit simplement de placer des éléments apparentés à proximité les uns des autres. Par exemple, jetez un coup d’œil à la mise en page de l’UI de notre formidable bibliothèque d’UI de Justinmind. Les icônes de chat et de messagerie ont été placées à proximité les unes des autres parce qu’elles sont étroitement liées les unes aux autres :
La proximité est un outil puissant pour les designers. La familiarité à l’écran aide les utilisateurs à créer des liens significatifs avec les marques. Vous trouverez d’autres bibliothèques sur notre page de kits UI.
L’espace blanc est cet espace entre les éléments de l’UI sur un écran. Une bonne utilisation des espaces blancs permet de désencombrer votre site ou votre application, afin que les utilisateurs puissent se concentrer sur les éléments importants et lire le contenu plus facilement.
N’oubliez pas que l’important n’est pas la quantité d’éléments UI dans votre interface, mais la qualité. Personne n’aime lire un mur de texte. Il suffit de jeter un coup d’œil à ces exemples de design d’espace blanc pour comprendre ce que nous voulons dire.
La façon dont vous intégrez l’espace dans le design de votre UI diffère d’un écran à l’autre. Par exemple, vous pouvez utiliser beaucoup d’espace blanc sur une page d’accueil pour mettre en valeur un bouton d’appel à l’action, mais moins sur un site listant plusieurs articles, comme une page de produit de commerce électronique. Vous pouvez également adopter une approche calculée de l’espace blanc afin de vous assurer que le design de votre formulaire est intuitif et facile à comprendre. Voici quelques bons articles si vous souhaitez perfectionner vos compétences en matière de design de formulaire :
Pour appliquer l’espace de manière appropriée à la mise en page d’une UI, vous avez besoin des bons outils. En concevant votre interface à l’aide d’un outil de conception d’UI tel que Justinmind, vous disposez toujours d’une vue à 360° de votre design – espace, éléments d’UI et liens. Voyons comment vous pouvez utiliser l’espace de manière appropriée dans Justinmind.
Commencez à wireframer des produits dès aujourd'hui. Projets illimités.
Dans l’outil de Justinmind, nous avons ajouté une nouvelle fonctionnalité de marge dans la palette des propriétés. Auparavant, vous pouviez modifier la taille et la position de n’importe quel élément UI sur le canevas. Désormais, vous avez encore plus de contrôle sur la disposition de l’UI de votre écran et sur la position de vos widgets d’UI. Ajoutez une marge de n’importe quel nombre de pixels pour créer de l’espace entre les widgets de l’UI. La marge souhaitée sera conservée quelle que soit la taille de l’appareil ou la dimension, de sorte que votre architecture d’information soit toujours parfaite au pixel près.
L’ajout de marges pour maintenir la disposition et la composition réelles de votre design dans la phase de prototypage est une bonne pratique de conception. Après tout, il n’y a rien de pire que de travailler d’arrache-pied sur vos designs et de devoir ensuite communiquer au développement l’espace que vous avez prévu entre les icônes et les sections de l’écran, conformément aux principes de conception de l’UI.
Lorsque les designers UI créent des interfaces, ils ne se contentent pas de pousser les éléments de l’UI autour de l’écran, ils prêtent également attention à l’espace entre ces éléments et autour d’eux. En disposant soigneusement les éléments de l’UI autour de l’espace sur le canevas, les concepteurs peuvent donner un but à leur design, mettre l’accent et définir un chemin de navigation pour leur interface.
Justinmind dispose d’un ensemble d’outils d’alignement spécialement conçus pour vous aider à disposer vos widgets UI dans l’espace du canevas. Vous pouvez en savoir plus sur l’espace de travail de Justinmind dans notre centre d’apprentissage en ligne : Le module d’interface utilisateur. Nos règles, nos guides intelligents, nos grilles et notre géométrie d’accrochage facilitent la manipulation de l’espace sur le canevas.
Lorsque vous souhaitez manipuler l’espace sur le canevas, notre fonction d’habillage s’avère également très utile. Vous pouvez envelopper les éléments de l’UI horizontalement ou verticalement dans un conteneur.
Ce procédé est similaire à la façon dont vous enveloppez le texte dans la Creative Suite d’Adobe.
N’oubliez pas non plus la fonction de mise en page de Justinmind, qui vous permet de modifier les propriétés de mise en page de chaque élément de l’UI. Choisissez parmi les dispositions horizontale, verticale et libre en fonction de la manière dont vous souhaitez que vos éléments soient alignés sur le canevas. Ajoutez ensuite de l’espace entre les éléments, comme suit :
Commencez à wireframer des produits dès aujourd'hui. Projets illimités.
La hiérarchie visuelle est un concept intéressant dans le domaine du design. Il s’agit de l’ordre dans lequel un utilisateur traite les informations sur un écran. Les designers doivent prêter attention à la hiérarchie visuelle pour que les utilisateurs puissent trouver et comprendre facilement les informations. Lorsqu’un écran manque de hiérarchie visuelle, vous risquez de perdre l’attention de l’utilisateur. C’est en partie pour cette raison que tant de designs se tournent vers les UI Patterns à plusieurs reprises – il s’agit d’une hiérarchie et d’une structure qui ont été testées et dont l’efficacité a été prouvée.
Voici les caractéristiques visuelles (selon l’Interaction Design Foundation) que les designers doivent prendre en compte pour rendre leurs écrans aussi lisibles et utilisables que possible.
- Proximité – le fait de placer des éléments connexes (par exemple, un texte d’appel à l’action avec un bouton d’appel à l’action) contribue à leur donner une signification et un contexte.
- Espace blanc – un espace blanc suffisant permet de mettre en valeur le contenu important, ce qui est particulièrement évident dans les sites web minimalistes.
- Taille – les éléments plus grands de l’UI attireront l’attention de l’utilisateur.
- Couleur – les couleurs vives attirent davantage l’attention que les couleurs discrètes.
- Contraste – les utilisateurs sont attirés par les compositions plus lumineuses
- Alignement – crée un design plus net et plus attrayant sur le plan visuel
- Répétition – la répétition crée une cohérence et permet de lier les éléments entre eux.
Tous ces facteurs tendent à se refléter dans les modèles les plus couramment utilisés dans la conception et la mise en page de l’UI, tels que la conception de l’UI des cartes.
Se concentrer sur la hiérarchie visuelle de votre UI est une excellente façon de penser à l’espace dans votre design. Heureusement, il existe quelques techniques pour vous aider à organiser votre contenu et à renforcer la hiérarchie visuelle de votre UI. Par exemple, réfléchissez aux différentes façons de concevoir la mise en page de votre UI. Que vous conceviez pour le web ou le mobile, que votre UI soit riche en contenu ou non, et quels sont vos utilisateurs cibles, tout cela influencera le type de mise en page que vous utiliserez. En définissant les caractéristiques visuelles de votre site, y compris l’espace, vous pouvez communiquer l’ordre et l’importance du contenu dans votre interface et la rendre plus conviviale pour les lecteurs. Au passage, n’hésitez pas à consulter l’article sur les meilleures polices de caractères pour les applications mobiles et à les incorporer dans votre mise en page dès le début pour obtenir les meilleurs résultats.