Composants
Loader
Les loaders sont des indicateurs visuels qui informent l'utilisateur qu'une action est en cours de traitement ou qu'un contenu est en train de charger. Ils sont essentiels pour éviter la frustration et rassurer l'utilisateur sur le fait que le système réagit à ses actions.
# Usage
Loader Spinner Basique
Usage
Ce spinner est un indicateur de chargement simple et discret, idéal pour les traitements courts.
Comportement
Une icône rotative (spinner) apparaît à la place du contenu d'un bouton ou d'un petit élément d'interface, signalant que l'action est en cours de traitement.
Quand utiliser
- Pour signaler un temps de traitement court (moins de 3 secondes) suite à une action utilisateur (ex: envoi de formulaire rapide, validation d'une option, ajout rapide au panier).
- Lorsque le feedback visuel doit être immédiat et localisé à l'élément déclencheur.
- Pour des actions qui ne nécessitent pas de masquer une grande partie de l'interface.
Quand ne pas utiliser
- Pour des chargements longs ou des mises à jour de contenu importantes (préférer le Skeleton ou le Loader Brand).
- Pour masquer des zones de contenu complexes ou des pages entières.
Loader Brand
Usage
Ce loader est un indicateur de chargement plus élaboré, intégrant l'identité visuelle de Bouygues Telecom. Il est conçu pour les attentes plus longues ou les chargements de contenu significatifs.
Comportement
Une animation spécifique à la marque Bouygues Telecom (par exemple, une animation du logo ou d'éléments graphiques de la charte) apparaît, souvent au centre de l'écran ou d'une zone de contenu importante, pour indiquer un chargement.
Quand utiliser
- Chargement initial d'une page ou d'une application : Pour maintenir l'engagement de l'utilisateur et renforcer la présence de la marque dès le début de l'expérience.
- Chargements de contenu importants : Lorsque l'utilisateur doit attendre plusieurs secondes pour l'affichage d'une nouvelle section, d'une liste de résultats filtrée complexe, ou d'un module interactif.
- Transition entre des états majeurs : Par exemple, entre deux étapes d'un parcours complexe nécessitant un traitement serveur.
- Quand le Skeleton n'est pas suffisant : Si le contenu à charger est trop varié ou imprévisible pour être représenté par un skeleton, ou si l'attente est trop longue pour un simple spinner.
Quand ne pas utiliser
- Pour des actions rapides sur des boutons (utiliser le Loader Spinner Basique).
- Pour des chargements où le Skeleton est plus approprié (ex: chargement progressif de contenu structuré dont la mise en page est connue à l'avance).
- Pour des micro-interactions qui ne justifient pas une animation de marque.
# Do & Don't
**Indiquer un traitement court et localisé**
Le spinner basique est idéal pour les actions rapides qui nécessitent un feedback immédiat sans bloquer l'interface.
**Accompagner les attentes longues**
Le loader brand est conçu pour les chargements significatifs, offrant une expérience plus riche et rassurante à l'utilisateur pendant l'attente, tout en renforçant l'identité de la marque.