Les capacités CSS et UI font référence à de nouvelles fonctionnalités et syntaxes CSS. Elles vous permettent de réduire ou de remplacer des solutions JavaScript personnalisées, ou de certains piratages CSS, et qui vous aident à écrire un code de meilleure qualité et plus simple. L'adoption de fonctionnalités CSS modernes permet aux développeurs de:
- Réduisez le temps de développement.
- Améliorez l'efficacité, la lisibilité et la gestion du code.
- Améliorez les performances.
- Créez des interfaces utilisateur attrayantes, fluides, efficaces et accessibles.
Dans cette série d'études de cas, vous découvrirez comment divers sites d'e-commerce ont adopté les animations basées sur le défilement, les transitions de vues, l'API Popover, les requêtes de conteneur et le sélecteur has(). Vous découvrirez également les avantages qu'ils ont retirés de cette approche.
Pourquoi les sites d'e-commerce devraient-ils utiliser ces fonctionnalités ?
Dans l'étude Six Steps for Justified Better UX (Six étapes pour justifier une meilleure expérience utilisateur), Forrester Research montre qu'une interface utilisateur bien conçue peut augmenter le nombre de conversions jusqu'à 200%. Les utilisateurs semblent corréler la qualité de la conception et la confiance : 94% des consommateurs citent la conception comme la principale raison de quitter un site Web ou de se méfier. C'est pourquoi les sites d'e-commerce bénéficient particulièrement de ces fonctionnalités CSS et UI. Les entonnoirs de conversion doivent être aussi fluides que possible pour que les utilisateurs puissent accomplir leur tâche facilement et en toute confiance. Les interactions réactives et la navigation fluide peuvent fournir un bon retour visuel à l'utilisateur, et ajouter de l'expérience et de l'expression au parcours global.
Ces fonctionnalités sont conçues pour être faciles à utiliser et peuvent être implémentées principalement en CSS avec un minimum de code JavaScript. Ils permettent de créer des expériences d'e-commerce exceptionnelles sans avoir à recourir à des bibliothèques tierces ou à du code JavaScript personnalisé pour créer les mêmes fonctionnalités. Utiliser moins de code JavaScript peut également vous permettre d'améliorer vos performances en rendant ces expériences plus fluides et réactives.
Les fonctionnalités de l'UI Web peuvent être utilisées à toutes les étapes du parcours utilisateur. Voici quelques exemples concrets:
| Fonctionnalité/Entreprise | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Animations liées au défilement | Collection | Page des fiches produit (PLP) | Page d'informations détaillées sur le produit |
| Afficher les transitions | Connexion | Page d'informations détaillées sur les produits | Page d'informations détaillées sur les produits |
| Pop-over | - | - | Page d'informations détaillées sur les produits |
| Requêtes de conteneur | Home | - | Page d'informations détaillées sur les produits |
| :has() | - | PLP | Page d'informations détaillées sur les produits |
Il peut également s'afficher sous la forme d'un entonnoir de conversion:
Les études de cas suivantes expliquent comment les entreprises ont mis en œuvre ces fonctionnalités et les avantages qu'elles ont découverts.
- Animations liées au défilement
- Afficher les transitions
- API Popover
- Requêtes de conteneur
- Sélecteur:has()
Nous remercions Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme et Rachel Andrew pour avoir vos commentaires et avoir consulté cette série d'articles.