Page d’accueil avec section héros à messages forts – source 66 Nord
Feuilleter des templates en cherchant l’inspiration est agréable, mais toujours insuffisant pour trouver la mise en page qui fera la différence avec la concurrence. Pour être pleinement créatif et ne pas perdre de temps à déplacer des éléments, mieux vaut appliquer quelques principes de bases, voici les 9 principales directives que tout graphiste et UI designer doit connaître.
3 principes UI pour le parcours de l’œil
Ce sont des principes qui s’appliquent à toutes compositions graphiques comportant de l’information, de l’affiche à la page de magazine et passant par tous les messages animés qui défilent sur nos écrans. Ces 9 principes qui s’appliquent à l’UI design sont les repères essentiels qui vous permettent de créer des compositions fortes tout en répondant aux exigences d’un cahier des charges.
1. Le point focal
Sur quel point l’œil de l’utilisateur va-t-il se focaliser lorsque la page va s’ouvrir ?
C’est le centre de la composition à partir duquel l’œil de l’utilisateur va découvrir le reste de la page tout en y revenant fréquemment. C’est donc un élément qui attire l’œil. Ce point n’est pas obligatoirement centré. Il peut être placé ailleurs dans la page, pourvu qu’il soit visible d’entrée.
Prenons par exemple un fond noir sur lequel sont disposés des textes en blanc. Si on ajoute un point rouge dans la composition, il deviendra le point focal. Ce qui peut devenir au fil des pages, un appel pour guider le lecteur ou mettre en évidence un tip, un résumé, etc.
Point focal de couleur sur une grille – source Alvalyn studio
Ce principe s’applique à tous les layouts, y compris à ceux qui ne comportent que de la typo. Dans ce cas, la taille d’un titre joue le rôle de point focal.
Le point focal peut également naître de perspectives, de croisement de lignes, de contrastes et de vibration entre des couleurs.
Point focal par association de lignes, couleurs et espaces — source Alvalyn studio
Point focal par isolement — source Alvalyn studio
2. Espaces blancs (où vides)
Partant du point focal, l’œil de l’utilisateur est appelé sur d’autres parties de la page (suivant le chemin qu’on lui propose). Pour qu’il trouve les informations contenues dans les différentes zones de texte, il faut qu’il les identifie clairement et pour cela, il doit passer par des transitions de repos. C’est le rôle des espaces blancs.
Capture d’écran de la présentation du MacBook Air du site Apple
En photo ou en vidéo, l’espace blanc est créé par le flou d’arrière plan. Dans une composition graphique, il est constitué de vide, c’est-à-dire un espace sans graphisme et sans changement de couleur. Les fonds flous et grisés font aujourd’hui partie de certaines pages de sites.
L’utilisation de l’espace blanc dans un layout donne du rythme et de la fluidité en permettant à chaque élément de se démarquer ce qui facilite la lecture, mais aussi la navigation.
Utilisation de l’espace blanc pour une question de rythme sur le site Sidlee
Autre utilisation fréquente de l’espace vide pour mettre en valeur un CTA ou un formulaire d’adhésion — capture d’écran du site de l’UNICEF
3. Hiérarchie graphique
Il s’agit maintenant de construire la mise en page par priorité visuelle en partant des éléments les plus importants. En effet, si tous les éléments sont au même niveau, aucun ne ressortira. Ce qui donne d’emblée un sentiment de lassitude à l’utilisateur qui va devoir tout lire pour trouver son chemin.
L’abandon n’est pas loin, pourquoi ? Le manque de hiérarchie graphique augmente la charge mentale. C’est un peu comme dans un orchestre ou tous les musiciens joueraient au même niveau, l’auditeur devrait alors se concentrer pour écouter et comprendre la partition interprétée dans la cacophonie.
Les pages du site de Pantone sont surchargées de photos, de textes et de menus, ce qui donne une impression de chaos, le manque d’espaces vides ne permet pas d’apprécier les illustrations. La hiérarchisation entre les menus, les photos et les textes n’est pas faite — capture d’écran du site.
La première section que l’utilisateur va découvrir (la section Héros) est en haut de la hiérarchie. Elle joue le rôle de la photo pleine page du magazine qui attire le lecteur sur l’article, souvent souligné par le point focal. Cette première section donne à l’utilisateur les clés de ce qu’il va lire. Viennent ensuite les titres et les autres blocs de texte.
Pour l’UI designer, la hiérarchie graphique se conjugue avec l’architecture de l’information puisqu’il s’agit de conduire l’utilisateur à travers la page pour lui offrir le contenu qu’il cherche.
Exemple d’une information graphiquement structurée — capture du site Webflow
La hiérarchie graphique est également directement liée à la navigation. Une page saturée d’images et de textes (titres et blocs) ne permet pas à l’utilisateur de faire de choix. Lorsque vous vous retrouvez dans ce cas lors de la construction d’une page, un retour aux principes de base (point focal, espace blanc, hiérarchie) vous permettra de reprendre le contrôle de l’UI de votre page.
3 principes UI pour l’organisation graphique
4. Le regroupement
Le regroupement agit à l’intérieur de la hiérarchie graphique. Au lieu de créer des espaces uniformes, mieux vaut regrouper les éléments qui ont un intérêt à être liés entre eux. L’utilisateur comprendra ainsi dès la première vision sur quel segment d’information il est et choisir là où il veut aller.
Il s’agit également d’utiliser les conventions d’usages dans ce principe. Les menus de navigation apparaissent généralement clairement sur la page d’accueil et sont relayés au haut ou à gauche lorsque l’utilisateur déroule la page.
Par exemple, pour un site de e-commerce comme Zalando, le point focal est composé d’une animation de photos décentrée à gauche pour laisser de l’espace libre pour les informations marketing : les marques, le paiement, les instructions de navigation. Informations essentielles pour rassurer le client. Les marques apparaissent comme autant de rayons disponibles en dessous. Toutes les informations sont efficacement groupées.
Animation page d’accueil e-commerce, les informations client et les photos de mode tournent en continu sur des espaces quasi équivalents. Le regroupement des informations clients se fait par une animation dans un large espace vide dédié. L’ensemble des choix reste visible — capture d’écran du site Zalando.
5. L’échelle, ou le rapport d’échelle
Varier les échelles de taille des typos, des images et des icônes permet de guider instantanément l’utilisateur ou de lui transmettre l’information première de la page.
La page d’accueil de l’iPhone 13 Pro d’Apple laisse peu de doute sur le message que veut faire passer le constructeur : c’est un « smartphone PRO ». La navigation du site et celle du produit sont reléguées au fond de la lecture de l’écran — capture d’écran site Apple.
Sur cette page du site d’Apple, nous avons donc un exemple composé de trois éléments de tailles différentes avec un rapport d’échelle très important ce qui garantit l’impact du premier regard par une forte dynamique de l’image. Cette variation rend la composition également plus esthétique par le contraste, ce qui n’empêche pas l’accès direct à l’ensemble des informations concernant l’appareil.
6. La séquence
Le parcours de l’utilisateur s’organise par séquences graphiques qui donnent un sens à son action. Comme lorsqu’on regarde un film, l’histoire se déroule par plans regroupés en séquence. Chaque séquence, quel que soit son nombre de plans, se déroule dans une unité de lieu, donc une unité de lumière et de couleurs.
L’UI designer, pour être efficace, doit penser la lecture d’une page et du site sous forme de séquence, intégrant ainsi la notion de continuité de lecture, ce qui diminue la charge cognitive de l’utilisateur et rend le site attractif. Tout le monde préfère apprendre quelque chose par une narration bien faite plutôt que par une liste d’informations.
Page d’accueil du site de l’UNICEF — capture d’écran du site
Détail de la page d’accueil du site de l’UNICEF — capture d’écran du site
La page d’accueil du site de l’UNICEF s’ouvre sur la crise la plus importante du moment et regroupe 8 autres actions en cours dont les rapports sont directement accessibles. L’utilisateur peut donc accéder à une des crises que couvre actuellement l’UNICEF.
Détail de la page d’accueil du site de l’UNICEF — capture d’écran du site
Un peu plus bas dans la page d’accueil, l’utilisateur peut s’intéresser au travail de l’UNICEF de façon transversale en cliquant sur une des 9 icônes représentant l’activité de l’organisation pour mener son aide. La séquence est organisée dès l’ouverture du site par le parcours visuel de l’utilisateur.
Sur le site de l’UNICEF, la séquence de la page d’accueil dit : il y a une actualité urgente pour aider les enfants, voici les actions que nous menons (ce que nous faisons) et voici comment nous le faisons. La séquence hiérarchise clairement l’information de l’organisme.
3 principes UI pour organiser l’information d’une page
7. Alignement et espacements des textes
L’alignement concerne les textes (titres et paragraphes) qui se font sur des axes verticaux et horizontaux. Pour les mises en page occidentales, la convention la plus courante est un ferrage à gauche, ce qui aligne le texte sur la gauche. Attention aux pages traduites en langues sémitiques (arabe et hébreu) dont la lecture se fait de droite à gauche ou du japonais qui se lit toujours de droite à gauche et de haut en bas.
Les textes courts peuvent être centrés, donc sans alignement ni à gauche ni à droite. Ce qui peut représenter un intérêt esthétique suivant la typographie.
La maîtrise des alignements est essentielle pour éviter les espaces indésirables entre les mots qui détruisent toute mise en page.
Respect des alignements et des interlettrages quelque soit la typo sur Google Fonts
L’alignement et la taille des colonnes de texte ont également un impact important sur le lecteur. Un nombre de points de fixation trop élevé par ligne ralentit la lecture (l’œil du lecteur enregistre plusieurs mots à la fois et ne lit pas lettre par lettre ou mot par mot).
Une colonne pour une lecture rapide du type de celles des journaux papier est composée de 8 à 12 mots ce qui représente 1 à 6 points de fixation suivant la capacité du lecteur. L’interlettrage a également un impact sur la fatigue de lecture, attention aux textes longs et aux contrastes trop forts.
La prise en compte des éléments d’alignement donne de la solidité et du sérieux à l’UI d’une page web.
Comme on le voit sur cette page, un décalage d’alignement donne une impression de désordre — capture d’écran du site Pantone
8. L’équilibre
Notre sens de l’équilibre trouve généralement une harmonie visuelle dans la symétrie. Mais la symétrie donne rarement des mises en page originales. Il faut donc savoir composer des pages asymétriques équilibrées pour produire une plus grande élégance graphique.
Les magazines équilibrent l’asymétrie sur doubles pages comme pour cette maquette issue d’une grille — source Teknika
Mise en page de la plateforme Figma — source Figma
L’équilibre peut se faire également avec des tailles de titre et des aplats de couleur ou de l’espace vide pour souligner l’importance d’un message comme l’utilise souvent la plateforme Figma.
Ici, l’équilibre est rompu par la trop grande taille des onglets qui s’entrechoquent avec la Tab-bar. Les différentes tailles et ratios des illustrations détruisent l’harmonie de la page qui aurait gagné en lisibilité avec plus d’espaces blancs — capture d’écran du site Pantone.
9. Les grilles
Comme nous venons de le voir sur la recherche d’équilibre dans l’asymétrie, une grille est l’outil essentiel pour construire son layout avec confiance et rapidité. Sans pour autant être une solution miracle, une grille aide aux calages précis et rapides tout en créant une structure cohérente plus facilement.
Cet outil libère l’esprit du graphiste qui peut travailler en appliquant les 8 autres principes de la mise en page. Il existe de nombreux modèles de grilles (12 colonnes, asymétriques, etc.), mais pour la cohésion d’une interface, il est plus prudent d’un point de vue graphique et d’un point de vue de productivité de faire reposer l’ensemble du design des pages sur deux ou trois grilles maximum. L’emploi de cet outil permet à la fois de la rigueur et un jeu créatif.
Ce qu’il faut retenir
On peut avancer sans risques que tous les sites attrayants respectent ces principes de mise en page. Implémentez des principes comme le regroupement ou la séquence sur une de vos pages et constatez la différence. Visitez vos sites préférés avec ses principes en tête et vous vous apercevrez qu’ils sont appliqués. Si l’élégance du graphisme vient d’une recherche artistique, sa cohésion est bel et bien fondée sur ces principes.
Bibliographie
How to Design Intuitive, User Centered Interfaces by Focusing on Effective Communication – en anglais – auteur : Everett N. McKay
La conception d’une interface utilisateur est une activité pluridisciplinaire, exigeant une compréhension approfondie de nombreux concepts et techniques souvent subjectifs, voire contradictoires. Imaginez l’avantage d’une perspective unique permettant de simplifier ces problématiques complexes en un ensemble restreint de principes objectifs. Dans « UI is Communication », Everett McKay expose comment concevoir des interfaces utilisateur intuitives en se concentrant sur une communication humaine efficace. Une interface utilisateur est, au fond, une conversation entre l’utilisateur et la technologie. Les interfaces bien conçues utilisent le langage de l’interface pour transmettre des informations aux utilisateurs de manière efficace et naturelle. Elles reconnaissent également l’existence d’un être humain émotionnel de l’autre côté de l’interaction, et s’efforcent donc de créer une connexion émotionnelle. En appliquant les enseignements de « UI is Communication », vous pourrez éliminer une grande part du mystère, de la subjectivité et de la complexité de la conception d’interface, ce qui vous aidera à prendre des décisions de conception plus éclairées et en toute confiance. Cet ouvrage constitue une introduction idéale à la conception d’interface utilisateur.
Notre guide de référence : UX Design et ergonomie des interfaces de Jean-François Nogier — 7e édition, Dunod
Pour garantir le succès d’une application, celle-ci doit non seulement être utile, mais également facile à utiliser. C’est la raison pour laquelle l’UX Design est devenu une étape incontournable dans la conception des produits numériques.
Cet ouvrage de référence s’adresse à tous les professionnels impliqués dans la conception et le développement d’applications. Depuis sa première édition en 2001, il a été lu, relu, exploité et utilisé par de très nombreux chefs de projet, développeurs et concepteurs d’interface. Conçu de manière pragmatique, il présente une méthode claire et efficace pour « penser UX Design » et vous aidez à trouver des solutions pour vos projets.
À travers de nombreux exemples, vous y découvrirez des réponses aux questions que vous vous posez au fur et à mesure de la réalisation de vos applications, depuis le ciblage des utilisateurs, jusqu’aux choix graphiques, en passant par la conception du système de navigation et des éléments d’interaction.
Cette 7e édition apporte une actualisation en profondeur du chapitre sur les méthodes de conception des interfaces (chapitre 7).
Lire aussi :