Au quotidien, en mission, je suis amenée à échanger avec différents acteurs d’un projet. En fonction du poste et de l’appétence pour la discipline de l’UX-UI design, chacun a une connaissance différente des termes utilisés.
Au fil des missions, j’ai donc compilé un grand nombre de notions et c’est un vocabulaire que j’aurais aimé avoir quand j’ai débuté et que j’ai donc consolidé au fur et à mesure pour aider les futurs étudiants ou novices dans le digital.
Je vous ai donc préparé une série d’articles où chaque notion sera expliquée pour que vous puissiez vous y référer. Nous clôturons donc cette série avec les 20 dernières notions. Si jamais vous souhaitez consulter les deux parties- en amont, voici les liens : partie 1, partie 2 et partie 3.
#1 _ Les mises en page
Carroussel
Le carrousel permet de parcourir, grâce à une navigation horizontale, des contenus comme des images, des cartes, etc. On en retrouve souvent sur la page d’accueil d’un site web pour présenter les actualités.
Accordéons
Les accordéons permettent aux utilisateurs d’agrandir et de réduire des sections de contenu. Ils sont très utiles pour organiser le contenu et pour montrer une hiérarchie clairement définie à l’utilisateur.
Pagination
Souvent au bas d’une page, la pagination organise le contenu en pages. On y retrouve donc le numéro de chaque page. Parfois, certaines sont masquées, en fonction du nombre. La bonne pratique est de garder toujours la première et la dernière. Une autre bonne pratique, pour simplifier l’usage, est de faire apparaître les boutons “précédent” et “suivant”.
Item
Un item est un élément d’une liste. C’est un élément important car c’est souvent lui qu’on va répéter plusieurs fois en adaptant la donnée affichée.
Liste
Elle se compose d’un ensemble d’éléments qui se succèdent par ordre alphabétique, numérique ou même aléatoire.
Plusieurs composants peuvent y être imbriqués comme du texte, des images, un statut, un bouton, etc.
Liste en grille (grid list en anglais)
Les listes en grille affichent une collection d’images dans une grille organisée. À la différence de la liste, les éléments sont disposés verticalement et horizontalement, et non plus sur une seule colonne à la verticale comme pour la liste.
Carte (card)
La carte est un composant qui permet de regrouper au sein d’un même groupe.
Par exemple, un titre, un contenu et une image pour matérialiser un article média. Ou bien une image, un titre et un bouton d’achat sur un site e-commerce.
#2 _ Les formulaires
Formulaire
Les formulaires permettent de récupérer des informations complétées par l’utilisateur. Il va saisir, compléter ou ajouter des éléments dans le système puis les soumettre.
Champ (input en anglais)
Le champ permet à l’utilisateur de saisir une information. Cette information pourra être sous plusieurs formes, comme on peut le décrire dans les notions suivantes.
Champs texte
Les champs texte (text fields) permettent aux utilisateurs d’entrer et de modifier du texte. Il peut s’agir d’une seule ou de plusieurs lignes.
Curseur
Le curseur permet aux utilisateurs de se déplacer parmi une série de valeurs. Il est majoritairement matérialisé par une barre interactive. Par exemple, pour régler le volume ou pour se déplacer dans une piste audio / vidéo.
Liste déroulante (Dropdown ou “select” en anglais)
La liste déroulante permet de choisir entre deux et un nombre illimité d’options.
Case à cocher (checkbox en anglais)
La case à cocher permet aux utilisateurs de sélectionner une ou plusieurs options dans une liste. C’est un composant qui permet à l’utilisateur d’indiquer des choix parmi une liste de propositions. Graphiquement, une case cochée est en général différemment matérialisée (grâce à une icône ou une couleur), alors qu’une case décochée est laissée vide. Une case peut aussi être grisée lorsque le choix n’est pas possible.
Bouton radio
Le bouton radio permet à l’utilisateur de sélectionner une seule option parmi un ensemble. Graphiquement, un bouton radio est représenté par un cercle. Comme pour la case à cocher, la sélection de l’utilisateur est matérialisée différemment (grâce à une icône ou une couleur).
Toggle / switch
Le toggle sert pour les options binaires. Ils permettent d’activer ou de désactiver l’état d’un seul élément.
C’est comme un interrupteur, le toggle ne peut prendre que deux positions (ex : bouton marche/arrêt).
Placeholder
Un placeholder est un attribut permettant d’afficher du texte par défaut dans certains champs de formulaire. Il va permettre de donner à l’utilisateur des indices pour remplir un champ. Par exemple, pour donner le format attendu d’une date, d’une adresse ou d’un numéro de téléphone.
#3 _ Les actions
Bouton
Un bouton permet aux utilisateurs de faire des actions et des choix d’un seul tap ou clic.
Le bouton est l’un des composants les plus importants d’une interface car il permet de diriger l’utilisateur sur les parcours clés : pour acheter un produit, souscrire à un abonnement ou pour s’inscrire par exemple.
Lien
Un lien est un moyen de passer d’une page à l’autre. En cliquant sur un lien, l’utilisateur va accéder directement à l’information recherchée.
Côté design, il est important de bien les identifier. Souvent, ils sont représentés grâce au soulignement et de la couleur.
FAB (Floating Action Button)
Le bouton d’action flottant est un bouton un peu différent des boutons qu’on a l’habitude de rencontrer sur les plate-formes. Sa particularité est qu’il va flotter dans l’interface, au-dessus d’un contenu. Les boutons d’action flottants sont majoritairement placés en bas à droite de l’écran de vos applications préférées. Ils sont utilisés dans les interfaces pour regrouper les actions principales pour les utilisateurs.
Barre de recherche
La barre de recherche est un champ de saisie un peu particulier car elle permet de rechercher ou de filtrer des éléments. La recherche peut être transverse au site ou bien sur une fonctionnalité précise.
Conclusion
Nous clôturons donc notre série du petit lexique UX-UI avec ces notions. Il ne fait aucun doute qu’on relancera une nouvelle série pour vous guider sur de nouvelles notions (sûrement inexistantes à ce jour !). Merci de nous avoir suivis et n’hésitez pas à nous consulter si une notion vous donne encore du fil à retordre !
Pour consulter les trois premières parties, voici les liens : partie 1, partie 2 et partie 3.
Si jamais vous souhaitez approfondir vos connaissances et pratiquer la conception d’une interface web, le centre de formation d’UX-Republic propose une formation “UI Design, les fondamentaux”. Voici le lien pour en savoir plus.
Alexa CUELLAR, UX Designer @UX-Republic
