Les éléments de l’interface utilisateur (UI) sont les composants visuels que nous utilisons pour construire des applications ou des sites web. Ils ajoutent de l’interactivité à l’interface utilisateur, en fournissant des points de contact aux utilisateurs lorsqu’ils se déplacent : boutons, app bar, éléments de menu, messages d’erreur et checkbox.

Lors de la création de votre application, vous utiliserez les éléments de l’interface utilisateur pour créer un langage visuel et assurer la cohérence de votre produit, le rendant ainsi convivial et facile à naviguer sans trop de réflexion lorsque les utilisateurs interagissent. C’est ainsi que vous créerez une meilleure application.

Voici les principaux éléments UI que vous devez connaître. Cette liste n’est pas exhaustive mais vous y trouverez de bonnes idées et de l’inspiration pour votre prochain projet d’application.

Il existe de nombreux UI kits disponibles en ligne pour le téléchargement. Un UI kit est un ensemble de fichiers qui contient des composants UI essentiels comme les polices, les fichiers de conception en couches, les icônes et les composants de conception. Il existe plusieurs formats selon le logiciel que vous utilisez pour le prototypage (Adobe XD, Sketch, Illustrator, Figma…).

Apple et Google fournissent des ressources d’interface utilisateur pour la conception de superbes applications qui s’intègrent parfaitement à leurs plateformes :

iOS Human Interface Guidelines
UI Guidelines for Android

User input

UI Design Mobile : les éléments de votre interface utilisateur

Checkbox

Une checkbox (case à cocher) permet aux utilisateurs de sélectionner une ou plusieurs options dans une liste.

radio button

Radio buttons

Les radio buttons (boutons radio) permettent à l’utilisateur de sélectionner une option parmi un ensemble.

UI Design Mobile : les éléments de votre interface utilisateur

Toggle / Switch

Ils servent pour les options binaires. Ils permettent d’activer ou de désactiver l’état d’un seul élément.

text field

Text fields

Les text fields (champs de texte) permettent aux utilisateurs d’entrer et de modifier du texte. Il peut s’agir d’une seule ou de plusieurs lignes.

UI Design Mobile : les éléments de votre interface utilisateur

Boutons

Les boutons permettent aux utilisateurs de faire des actions et des choix d’un seul tap.

drop down

Drop-down

Le drop-down (liste déroulante) permet aux utilisateurs de sélectionner un élément dans une liste qui “déroule” une fois qu’on a cliqué dessus.

form

Formulaires

Les formulaires aident les utilisateurs à saisir des ensembles de données connexes dans le système et à les soumettre.

search bar

Barres de recherche

Les barres de recherche sont des champs de saisie spécifiques permettant de rechercher ou de filtrer des éléments.

Utils

toast

Toast

Le toast affiche une notification en haut du contenu d’une application. L’utilisateur peut l’ignorer en tapant n’importe où en dehors de l’application.

UI Design Mobile : les éléments de votre interface utilisateur

Modal/Pop-up

Une petite boîte contenant un contenu qui vous oblige à interagir avec lui avant que vous ne puissiez le fermer et retourner à votre flux.

UI Design Mobile : les éléments de votre interface utilisateur

Popover

Un popover peut être utilisé pour afficher un contenu par-dessus un autre.

loader

Loaders

Les loaders (écrans de chargement) sont conçus pour faire savoir aux utilisateurs que le système effectue une action en arrière-plan et qu’il doit attendre.

Contenu

accordion

Accordéon

Les accordéons permettent aux utilisateurs d’agrandir et de réduire des sections de contenu.

UI Design Mobile : les éléments de votre interface utilisateur

Carroussel

Les carrousels permettent aux utilisateurs de parcourir des ensembles de contenus, comme des images ou des cartes, souvent liés à d’autres contenus ou sources.

UI Design Mobile : les éléments de votre interface utilisateur

Pagination

Souvent au bas d’une page, la pagination organise le contenu en pages.

slider

Slider

Les sliders (curseurs) permettent aux utilisateurs d’effectuer des sélections parmi une série de valeurs.

Liste

UI Design Mobile : les éléments de votre interface utilisateur

Grid list

Les grids (listes de grille) affichent une collection d’images dans une grille organisée.

list

Liste

Elle se compose d’un ensemble d’items qui se succèdent par ordre alphabétique, numérique ou même aléatoire.

item

Item

Un item est un élément d’une liste.

card

Card

Une card (carte) affiche un contenu de manière similaire à une carte à jouer.

Navigation

icons

Icônes

Les icônes aident à mieux communiquer le contenu, ou peuvent communiquer et déclencher une action spécifique.

UI Design Mobile : les éléments de votre interface utilisateur

Tabs

Les tabs (onglets) permettent d’organiser le contenu sur différents écrans, ensembles de données et autres interactions.

menu

Menu

Pour naviguer dans votre application, il existe plusieurs types de menus : tous leurs noms sont liés à la nourriture.

breadcrumb

Breadcrumb

Le breadcrumb (fil d’Ariane) permet aux utilisateurs de voir leur emplacement actuel et d’afficher la hiérarchie des contenus.

progress bar

Barre de progression

Les barres de progression aident les utilisateurs à visualiser où ils se trouvent dans une série d’étapes.

side bar

Side bar

Une side bar (barre latérale) affiche un groupe d’actions de navigation ou de contenu littéralement sur le côté d’une page.

tab bar

Tab bar

La tab bar (barre d’onglet) apparaît au bas d’une application mobile et permet aux utilisateurs de se déplacer rapidement entre les principales sections d’une application.

UI Design Mobile : les éléments de votre interface utilisateur

Créez des apps et des publications numériques sans ligne de code.

Essayer gratuitement
UI Design Mobile : les éléments de votre interface utilisateur

Créez des apps et des publications numériques sans ligne de code.

Essayer gratuitement