UI design : le guide de l’interface utilisateur
Comprendre l'UI : définition de la conception d'interface utilisateur
La conception d'interface utilisateur (UI) est le processus utilisé par les designers pour créer des interfaces dans les logiciels ou les sites Web. Les designers visent à créer des interfaces que les utilisateurs trouvent faciles à utiliser et agréables.
La conception UI se concentre sur l'esthétique et la mise en page de l'interface numérique. Elle englobe les éléments visuels d'une application ou d'un site Web, notamment les boutons, les icônes, la typographie, les palettes de couleurs et l'esthétique générale de la conception. Les concepteurs UI sont chargés de créer des interfaces visuellement attrayantes et intuitives qui attirent l'attention de l'utilisateur et le guident à travers l'expérience.
Il ne s'agit pas de faire des sites Web jolis, mais avant tout faciles à utiliser.
Les principes de base de l'UI
Dans la conception digitale, les principes de conception d’interface utilisateur constituent les lignes directrices générales sur lesquelles les concepteurs s’appuient pour créer des designs qui servent les utilisateurs.
L’application des meilleures pratiques en matière de conception UI rend les produits numériques plus faciles à utiliser, à suivre et à apprécier pour tous.
Selon Thomas Lowry, Directeur des ambassadeurs Figma (Advocacy Director), "Les principes de conception d'interface utilisateur s'inspirent des principes gestaltistes de la perception humaine, regroupant les éléments de conception en modèles simples que les utilisateurs peuvent facilement suivre pour atteindre leurs objectifs."
Ces principes de conception UI clairs et cohérents facilitent également la prise de décision pour les concepteurs (voir aussi : les principes UX).
Voici quelques exemples de principes UI.
Équilibre
L’équilibre est la distribution du poids visuel des éléments de design (symétrique ou asymétrique). L’équilibre au sein d’une composition donne à l’utilisateur un sentiment d’harmonie. Il peut être atteint par exemple en utilisant la symétrie.
Contraste
Le contraste peut être obtenu par la couleur, mais aussi par la forme, la taille ou des propriétés similaires des éléments, et fait référence aux différences entre eux. Le contraste fait ressortir les éléments les uns des autres.
Emphase
L’emphase met l’accent sur le point central d’un design et l’ordre d’importance de chaque élément qu’il contient.
Les éléments d’une conception peuvent être mis en valeur en tirant parti d’autres principes de conception, notamment les proportions, les espaces blancs, le mouvement et le contraste.
Proportion
La proportion, également appelée échelle, est la taille relative des objets dans une conception. Les éléments plus grands par rapport aux autres se démarqueront davantage et sembleront avoir plus d’importance aux yeux des utilisateurs. Les éléments plus petits semblent moins importants.
Les proportions créent un intérêt visuel en attirant l’œil du spectateur sur des éléments visuels particuliers.
Espaces blancs
L’espace blanc dans une conception est un espace qui ne contient aucun élément de conception (autre qu’éventuellement une couleur d’arrière-plan ou un motif ou une texture subtile). Il permet aux éléments d’une composition de respirer. Sans espace blanc, les pages semblent encombrées et difficiles à parcourir.
L’espace autour des éléments d’une page fait ressortir davantage les éléments importants et facilite une meilleure expérience utilisateur.
Variété
La variété est le piment du design. Même si la répétition ajoute une impression d’harmonie à une conception, la variété la rend intéressante et évite aux utilisateurs de s’ennuyer.
La variété peut être créée en ajoutant des éléments uniques ou inattendus à des créations. La variété peut être utilisée pour attirer l’attention de l’utilisateur sur des éléments ou des zones spécifiques du design et les faire ressortir.
Répétitions
La répétition fait référence à l’utilisation d’éléments identiques ou similaires tout au long d’une conception, selon des motifs réguliers ou irréguliers. Elle est utilisée pour renforcer certains éléments tout en apportant une impression d’unité et de continuité à une conception. La répétition peut être utilisée pour créer un rythme, ce qui aide les utilisateurs à se déplacer dans des créations.
La répétition peut être utilisée de manière simple, par exemple en utilisant les mêmes icônes partout, les motifs d’arrière-plan ou en stylisant toutes les photos d’une page de la même manière.
La répétition peut être irrégulière pour créer du mouvement, car trop de répétitions régulières peuvent avoir l’effet inverse et donner l’impression qu’une conception est statique.
Modèles
Les patterns, ou modèles de conception, sont des groupes d’éléments de conception ou de composants d’interface utilisateur qui fonctionnent ensemble et favorisent la réutilisabilité au sein d’un produit ou d’un système de conception.
Des exemples de modèles d’interface utilisateur incluent les menus de navigation, les barres de recherche, la pagination, les boutons Ajouter au panier, les modaux, etc. Les modèles d’interface utilisateur sont souvent largement reconnus et familiers aux utilisateurs, ce qui leur permet de comprendre et d’interagir facilement avec l’interface.
Rythme
Lors de la conception, le rythme peut aider à établir l’ambiance et à rendre une composition plus dynamique et excitante. Le rythme peut être utilisé pour briser la monotonie et faire ressortir un peu plus les choses. Il crée également un point focal au sein de la composition, guidant l’utilisateur vers l’image et le texte les plus grands.
Hiérarchie
La hiérarchie visuelle définit l’ordre d’importance des éléments d’une page grâce à des repères visuels qui indiquent aux utilisateurs à quoi ils doivent prêter attention en premier, deuxième, troisième, etc.
La hiérarchie visuelle est créée à travers des éléments tels que l’échelle (la taille relative des éléments) et la couleur. La hiérarchie typographique peut être créée en utilisant différentes polices, tailles et épaisseurs de police.
Mouvement
Le mouvement fait référence à la façon dont les yeux d’un utilisateur se déplacent sur une composition. Dans une certaine mesure, il est possible de contrôler les éléments sur lesquels les utilisateurs se concentrent en les plaçant le long du chemin des mouvements oculaires les plus naturels, comme les schémas de mouvements oculaires F et Z.
Unité
L’unité donne un sentiment d’harmonie, à la fois visuellement et conceptuellement. L’unité est importante car elle permet aux utilisateurs de se sentir à l’aise lorsqu’ils naviguent dans une conception. Tout semble être à sa place et il n’y a aucun élément discordant qui ressort de manière négative.
Les composants de l'UI
Les composants UI sont des éléments de base permettant de créer une interface utilisateur.
Les composants d’interface utilisateur les plus courants qu’on rencontre incluent les boutons, les formulaires, les cartes, les modaux, les menus, les en-têtes et les pieds de page.
Comprendre comment fonctionnent ces composants UI et comment les intégrer dans des conceptions contribue à l’expérience positive des utilisateurs d’une app ou d’un site Web.
Voici une liste non exhaustive de composants UI.
Composants de navigation
Menus
Un menu est une liste interactive d’options qui permet à l’utilisateur d’effectuer certaines actions.
Fils d'Ariane
Les fils d’Ariane (breadcrumbs) permettent aux utilisateurs d’identifier leur emplacement actuel dans le système en fournissant une piste cliquable des pages précédentes pour naviguer.
Étiquettes
Les étiquettes (tags, balises) permettent aux utilisateurs de trouver du contenu dans la même catégorie.
Recherche
Un champ de recherche permet aux utilisateurs de saisir un mot-clé ou une phrase (requête) et de le soumettre à une indexation afin d’obtenir les résultats les plus pertinents.
Pagination
La pagination divise le contenu entre les pages et permet aux utilisateurs de passer d’une page à l’autre ou de parcourir le contenu dans l’ordre.
Boutons
Un bouton indique une action au clic, et est généralement étiqueté à l’aide de texte, d’une icône ou des deux.
Contrôles d'entrée
Formulaires
Les formulaires sont des composants interactifs qui permettent de collecter des informations.
Interrupteurs à bascule
Un bouton à bascule (toggle) permet à l’utilisateur de modifier un paramètre entre deux états distincts comme actif/inactif.
Cases à cocher
Les cases à cocher permettent à l’utilisateur de sélectionner une ou plusieurs options à partir d’un ensemble d’options.
Boutons radio
Les boutons radio sont utilisés pour permettre aux utilisateurs de sélectionner un seul élément dans une liste d’options.
Listes déroulantes
Les listes déroulantes permettent aux utilisateurs de sélectionner un élément dans une liste.
Sélecteurs de date
Un sélecteur de date permet aux utilisateurs de sélectionner une date et/ou une heure. Les informations sont formatées de manière cohérente pour le système.
Conteneurs
En-tête
Les en-têtes sont des sections proéminentes généralement positionnées en haut d’une page Web ou d’un écran d’application. Elles servent de repères de navigation et fournissent un contexte essentiel aux utilisateurs.
Pied de page
Les pieds de page contiennent généralement des informations utiles mais pas nécessaires à l’objectif principal de la page.
Sections
Une section est un élément d’interface utilisateur qui regroupe des éléments de contenu connexes.
Cartes
Les cartes sont des conteneurs d’information compacts et autonomes qui présentent un extrait de contenu, généralement accompagné d’éléments visuels, d’en-têtes et d’un texte bref.
Accordéons
Un accordéon est une liste d’éléments empilés verticalement qui utilise la fonctionnalité afficher/masquer.
Composants informationnels
Icônes
Une icône est une image simplifiée qui sert de symbole intuitif qui peut être utilisé pour aider les utilisateurs à naviguer dans le système ou à titre informationnel.
Info-bulle
Une info-bulle (tooltip) permet à un utilisateur de voir des indices lorsqu’il survole un élément indiquant le nom ou le but de l’élément.
Tableaux
Les tableaux sont des grilles structurées utilisées pour présenter des informations organisées et tabulées.
Modales
Une fenêtre modale (pop-up) oblige les utilisateurs à interagir avec elle d’une manière ou d’une autre avant de pouvoir revenir au système.
Notifications
Les notifications informent l’utilisateur d’un événement ou d’une information importante.
Badges
Les badges affichent des notifications, des compteurs ou des informations d’état sur les éléments de navigation et les icônes.
Indicateur de progrès
Une barre de progression indique où se trouve un utilisateur à mesure qu’il avance dans une série d’étapes d’un processus.
Les guides UI (design systems)
Google, Apple, et d’autres entreprises ont créé des directives de conception en design, des « guidelines ».
Ces directives de conception sont des systèmes adaptables de directives, de composants et d’outils qui soutiennent les meilleures pratiques de conception d’interface utilisateur. Ces guides UI simplifient la collaboration entre les concepteurs et les développeurs et aident les équipes à créer rapidement de beaux produits utilisables.
Guide UI par Google
Material Design
Google a créé son guide UI appelé « Material Design ». Ils ont sorti plusieurs versions de ce guide, la dernière version est « Material 3 ». Material 3 est un système de conception open source qui aide à concevoir et construire de beaux produits utilisables.
Guide UI par Apple
Human Interface Guidelines
Apple a créé son guide UI appelé « Human Interface Guidelines » (HIG – directives relatives à l’interface humaine). Ce sont des conseils et des bonnes pratiques pour concevoir une bonne expérience dans les outils Apple.
Guide UI par Atlassian
Atlassian Design System
Atlassian a créé son guide UI avec des fondations, des composants, des modèles. Il s’agit d’un langage de conception de A à Z pour créer des expériences simples, intuitives et esthétiques.
Guide UI par IBM
Carbon Design System
IBM a créé son guide UI appelé « Carbon », un système de conception open source issu de l’IBM Design Language : composants, modèles et règles d’utilisation, avec des bibliothèques de code pour React et les Web Components.
Guide UI par GitHub
Primer Design System
Primer est un ensemble de directives, de principes et de modèles pour la conception et la création d’une interface utilisateur sur GitHub. Il fournit un langage partagé et une approche standardisée pour offrir des expériences cohérentes.
Arco Design Lark Group
Arco Design System
Le système de conception Arco fournit une bibliothèque complète de composants, notamment la typographie, les couleurs, les icônes et les dispositions. Il s’agit d’un ensemble de composants et de directives qui peuvent être utilisés pour créer des interfaces utilisateur cohérentes et attrayantes.
Les guides de contenu
Il existe également des guides de contenus, appelés « Content Design System » ou « Content Style Guide », qui détaillent le ton à utiliser pour une marque. En voici 2 exemples : Intuit Content Design System et Mailchimp Content Style Guide.
Les métiers designers UI et UX
Découvrez les métiers du design.
Design UI : est-ce de l'art ou de la science ?
On peut lire que le design UI est à la croisée de l’art et de la science :
Art : pour le processus de création et de choix
Science : car la conception d’interfaces suit des règles de psychologie, de fonctionnement de la perception du cerveau humain, de tests A/B de type expérience scientifique expérimentale
Toutefois, le design UI n’est pas vraiment fait pour exprimer un côté artistique.
Les visiteurs ont l’habitude de voir des sites Web et applications avec un système d’interface : ils veulent retrouver la même chose ailleurs, et non pas ré-apprendre à utiliser un site ou un logiciel à chaque fois.
L’art est ouvert à l’interprétation, tandis que le design communique un message clair – il s’agit de résolution de problèmes.
Comme une blague, si le design doit être expliqué, c’est qu’il n’a pas atteint son objectif.
Dans l’UI, la créativité doit être utilisée pour résoudre des problèmes, et non pas sans but logique.
Commentaires
Pas encore de commentaire. Soyez le premier !