Les fonctionnalités CSS et d'UI font référence aux nouvelles fonctionnalités et syntaxes CSS qui vous permettent de réduire ou de remplacer des solutions JavaScript personnalisées ou certains hacks CSS, et de vous aider à écrire un code meilleur 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 facilité de maintenance du code.
- Améliorer les performances.
- Créez des interfaces utilisateur esthétiques, fluides, efficaces et accessibles.
Dans cette série d'études de cas, découvrez comment différents sites d'e-commerce ont adopté les animations basées sur le défilement, les transitions de vue, l'API Popover, les requêtes de conteneur et le sélecteur has(), et les avantages qu'ils ont obtenus.
Pourquoi les sites d'e-commerce doivent-ils utiliser ces fonctionnalités ?
Dans Six Steps for Justifying Better UX, l'étude Forrester Research montre qu'une interface utilisateur bien conçue peut augmenter les conversions jusqu'à 200%. Les utilisateurs semblent associer la qualité de la conception à la confiance, 94% d'entre eux citant la conception comme la principale raison de quitter un site Web ou de ne pas lui faire confiance. C'est pourquoi les sites d'e-commerce bénéficieront particulièrement de ces fonctionnalités CSS et d'UI. Les entonnoirs de conversion doivent être aussi fluides que possible, afin que les utilisateurs puissent accomplir leur tâche facilement et en toute confiance. Les interactions responsives et la navigation fluide peuvent fournir de bons retours visuels à l'utilisateur, et ajouter de la joie et de l'expression au parcours global.
Ces fonctionnalités ont été conçues pour être faciles à utiliser et peuvent être implémentées principalement en CSS avec un minimum de 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 JavaScript peut également améliorer les performances, ce qui rend 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 déclenchées par le défilement | Collection | Fiche produit | Page d'informations détaillées sur le produit (PDP) |
| Afficher les transitions | Connexion | PDP | PDP |
| Pop-up | - | - | PDP |
| Requêtes de conteneur | Accueil | - | PDP |
| :has() | - | PLP | PDP |
Vous pouvez également afficher ces données sous la forme d'un entonnoir de conversion:
Les études de cas suivantes expliquent comment les entreprises ont implémenté ces fonctionnalités et les avantages qu'elles ont découverts.
- Animations basées sur le défilement
- Afficher les transitions
- API Popover
- Requêtes de conteneur
- Sélecteur:has()
Un merci spécial à Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme et Rachel Andrew pour leurs commentaires et leur examen de cette série d'articles.