En tant que Web Designer free-lance, j’utilise les éléments d’interface utilisateur pour créer un langage visuel et assurer la cohérence dans mes designs et ainsi leur permettre d’être adapté et facile d’utilisation.
Pour faire bon usage de chacun de ces éléments d’interface, il me faut savoir quel est le réel intérêt de chacun d’eux et dans quelle situation les utiliser. Cela me permet également de mettre un nom sur chacun d’entre eux, et par la même occasion, de les utiliser et les réutiliser à ma guise.
Dans cet article sous forme de guide, nous allons explorer certains de ces éléments d’interface utilisateur les plus courants ! On est prêt ? C’est parti !
01 - Menu Bento
Un menu bento, qui tire directement son nom des boîtes à bento, représente un menu avec des éléments de grille. Vous le remarquerez dans ce guide, beaucoup d’éléments d’interface porte des noms de nourriture.
02 - Menu burger
Comme le nom l’indique il ressemble à deux pains burger enveloppant un steak haché de votre fast-food favori ! Le menu burger est habituellement positionné dans les coins supérieurs des sites internet et applications. Ils indiquent aux utilisateurs qu’il y a plus d’informations à explorer au-delà de ces 3 petites lignes !
03 - Fil d'Ariane
Ce petit chemin de liens aide les utilisateurs à se situer dans la navigation du site web. Souvent situés en haut du site ou d’une application, les fils d’ariane laisse informent les utilisateurs de leur situation dans le chemin de navigation des différentes pages du site.
04 - Cartes
Les cartes mettent en lumière différents types de contenu côte à côte sur lesquels l’utilisateur peut cliquer. Les cartes sont extrêmement souvent utilisées si vous voulez un usage intelligent de l’espace disponible sans faire scroller l’utilisateur.
05 - Champs déroulants
Cet élément permet à l’utilisateur de sélectionner un seul élément d’une liste qui se déroule une fois qu’il a cliqué sur l’élément. Attention à utiliser prudemment les champs déroulants. Ils doivent être proscrits quand vous avez trop d’éléments à choisir, ou trop peu. C’est un subtil dilemme.
06 - Checkbox
Pas de traduction française pour cet élément. Les checks boxes permettent à l’utilisateur de sélectionner un ou plusieurs choix d’une liste, avec chaque check box sélectionné indépendamment. Valider une checkbox l’affiche comme étant coché. Cet élément est fréquemment utilisé dans les formulaires ou les bases de données ouvertes.
07 - Bouton radio
Celui-la il porte un nom sorti de nulle part… Souvent confondus avec les checks boxes, les boutons radio sont des petits éléments circulaires qui permettent à l’utilisateur de sélectionner une seul et unique option d’une liste.
08 - Carrousels
Les carrousels permettent aux utilisateurs de feuilleter différents contenus, comme des images ou des cartes souvent liées à plus de contenu ou à des sources sur le web ou des applications.
09 - Accordéon
Les accordéons incitent les utilisateurs à étendre ou réduire des sections entières de contenu. Ils permettent une utilisation rapide et d’inclure un large panel d’information dans un espace limité. Ils sont très souvent utiliser dans le cadre des Foires aux questions !
10 - Pagination
Habituellement positionnée en bas d’une page, la pagination organise les contenus au travers de différentes pages. Cela permet notamment d’éviter des longueurs de pages interminables. La pagination est très souvent utilisée dans le cadre d’un blog !
11 - Champ de saisie
Ils sont simplement un espace pour saisir des informations dans le cadre d’un formulaire. Souvent des formulaires de contact, mais pas que !
12 - Meatballs
En français les boulettes de viandes… un peu tirées par les cheveux, c’est la raison pour laquelle je les nomme en anglais ! Il s’agit de trois points horizontaux qui signifient que plus d’options sont disponibles. Ces options sont révélées en cliquant sur ces fameux meatballs.
13 - Modal
Cette fois-ci pas de traduction française pour l’élément modal ! Ce sont des petites boîtes qui contiennent du contenu ou un message spécifique qui nécessite une interaction avant de fermer la fenêtre et ainsi retourner au contenu de la page. Vous l’aurez compris, un modal vient, par définition, en surimpression de la page consultée.
14 - Notification
Cet élément est intégré dans le langage courant. Néanmoins, voici ce qu’elles sont : de petits points rouges qui nous indiquent qu’il y a quelque chose de nouveaux à consulter, comme un message par exemple. Elles peuvent aussi nous indiquer que quelque chose tourne mal ou qu’une action a bien été effectuée avec succès.
15 - Toggle
C’est simplement un interrupteur qui permet de passer un paramètre de l’état actif à inactif. C’est très souvent utilisé dans les profils utilisateurs.
16 - Barre de progression
Ces barres de progression sont très utiles pour visualiser où en est l’utilisateur à chaque étape de son parcours sur un site web ou une application. Elles sont utilisées pour des pages de paiement, des articles de blog afin d’indiquer au lecteur sa position dans la totalité de l’article, pour des documents à télécharger et pour recharger des contenus.
17 - Formulaires
Le formulaire est peut-être un des éléments d’interface le plus connu. Il est utilisé pour envoyer et recevoir des informations via un serveur. Cela permet notamment d’envoyer des e-mails. Il est constitué de différents champs, classiquement des champs de saisie de texte, des checkboxes, des boutons radios et des champs de sélection déroulants.
18 - CTA (Call To Action)
Ces boutons sont très utilisés pour le web et pour les applications mobiles, c’est à dire que leur unique but est d’inciter l’utilisateur à passer à l’action ! Cela se matérialise notamment par l’envoi d’un e-mail, la réservation d’un rendez-vous etc.
19 - Témoignages
Un des éléments les plus convaincants derrière toutes les décisions utilisateurs. N’oubliez jamais de les utiliser comme une manière de donner la preuve de votre qualité de service et pour construire une relation de confiance.
20 - Loader
Les loaders informent les utilisateurs d’un chargement d’un contenu, souvent lourd à charger par votre processeur, par l’hébergeur web qui accueil le site web ou du fait de votre connexion internet. Ce processus de chargement est souvent représenté par une animation répétée en boucle.
Voilà qui conclus cet article qui traite des éléments d’interface utilisateur les plus courants un peu plus long que d’habitude sur mon blog ! Il se peut qu’à l’avenir je traite d’autres gros dossiers autour du web design. Si vous avez des suggestions, n’hésitez pas !
Si cet article vous a été utile, n’oubliez pas de le partager sur vos réseaux sociaux, de le commenter si vous avez des questions ! Également, pour ne pas passer à côté du prochain article et accéder à d’autres contenus, abonnez-vous à mon compte Instagram, @florianpioli