Les transitions présentent de nombreux avantages pour les utilisateurs. Par exemple, elles permettent de les garder dans leur contexte et de réduire la perception de la latence. Les développeurs souhaitent pouvoir créer des transitions fluides entre les pages, ce qui permet d'accroître l'engagement des utilisateurs sur leur site.
Toutefois, l'activation des transitions d'état était très difficile, car elle obligeait les développeurs à gérer les états de deux éléments différents. Même un simple fondu enchaîné implique que les deux états soient présents en même temps. Cela pose des problèmes d'usabilité, comme la gestion d'interactions supplémentaires sur l'élément sortant. Pour les utilisateurs d'appareils d'assistance, il existe une période où l'état avant et l'état après se trouvent simultanément dans le DOM. De plus, les éléments peuvent se déplacer dans l'arborescence d'une manière visuellement acceptable, mais qui peut facilement entraîner une perte de la position de lecture et de la concentration.
Lancée dans Chrome 111, l'API View Transitions permet de créer des transitions fluides et simples entre les pages. Il vous permet de modifier votre DOM sans chevauchement entre les états et d'avoir une animation de transition entre les états à l'aide de vues instantanées.
Vous vous demandez peut-être dans quelle mesure cette approche est facile à implémenter. Quels sont les différents cas d'utilisation ? Comment les autres développeurs utilisent-ils les transitions de vue ?
Cet article explique comment implémenter des transitions de vue sur quatre sites Web différents: RedBus (voyages), CyberAgent (éditeur d'actualités/de blogs), Nykaa (e-commerce) et PolicyBazaar (assurance). Il explique également comment ces sites Web ont bénéficié de l'API View Transitions de différentes manières.
redBus
redBus, qui fait partie du groupe MakeMyTrip, est un site Web de réservation et de billetterie de bus basé à Bangalore, en Inde, et présent dans différentes régions du monde. Il s'agit de l'un des premiers sites Web à implémenter une expérience à l'aide de l'API View Transitions.
Pourquoi Redbus a-t-il implémenté des transitions de vue ?
L'équipe de redBus est convaincue qu'il est important de proposer une expérience Web unifiée, semblable à une application, qui soit aussi proche que possible de leurs applications natives. En effet, l'entreprise avait implémenté plusieurs solutions personnalisées au fil des ans. Par exemple, ils ont déployé des animations personnalisées basées sur JavaScript et CSS pour les transitions de page avant même le développement de l'API View Transitions. Elle a toutefois dû gérer les performances dans les segments inférieurs du réseau et des appareils, ce qui entraînait parfois une expérience différentielle avec la mise en place d'une stratégie de chargement adaptatif.
redBus utilisait des transitions de vue pour plusieurs parcours utilisateur. Par exemple, dans la section d'auto-assistance de son application mobile, qui ouvrait des pages Web dans des onglets Chrome personnalisés, et dans l'entonnoir de réservation de billets de bus, où les utilisateurs passent de la page de liste d'inventaire à la page de paiement. Dans ce dernier cas, les transitions de vue ont rendu la navigation d'une page à l'autre plus fluide et ont entraîné une augmentation de leur taux de conversion. Cela s'explique par une meilleure expérience utilisateur et de meilleures performances perçues pendant l'exécution des opérations lourdes, telles que la récupération de l'inventaire disponible le plus à jour.
Détails techniques de l'implémentation
redBus utilise React et EJS comme stack technologique de front-end, avec une combinaison d'SPA et de MPA sur différents parcours. L'extrait de code suivant montre comment les transitions de vue sont utilisées:
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
Dans le code CSS suivant, slide-to-right, slide-to-left, slide-from-right et slide-from-left sont des images clés d'animation CSS.
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
Impact sur l'entreprise
redBus a choisi d'implémenter des transitions de vue et d'améliorer l'INP sur l'ensemble de son site, ce qui lui a permis d'enregistrer 7% de ventes en plus. Amit Kumar, responsable technique senior chez redBus, a déclaré que les transitions de vue sont vraiment utiles pour ceux qui souhaitent vraiment améliorer l'expérience utilisateur et réduire les coûts de maintenance.
Nous avons mené des sessions de commentaires approfondies, qui ont permis d'intégrer des insights précieux provenant d'un groupe diversifié d'utilisateurs. Notre connaissance approfondie de notre base d'utilisateurs (bus et trains) et de leurs besoins, combinée à notre expertise, nous a convaincus que cette fonctionnalité apporterait une valeur ajoutée significative dès le départ, sans avoir besoin de tests A/B. Les transitions de vue permettent de combler l'écart entre l'application et le Web grâce à une expérience de navigation fluide.
Anoop Menon, CTO de redBus
CyberAgent
CyberAgent est une entreprise japonaise d'informatique qui fournit de nombreux services en ligne, dont l'édition de blogs et d'actualités.
Pourquoi CyberAgent a-t-il implémenté des transitions de vue ?
CyberAgent avait envisagé d'utiliser des animations CSS ou un framework pour implémenter des transitions animées afin d'améliorer l'expérience utilisateur. Toutefois, il était préoccupé par les mauvaises performances de rendu du DOM et la maintenabilité du code. Lorsque Chrome a commencé à prendre en charge l'API View Transitions, il a été ravi de l'utiliser pour créer des transitions de page attrayantes qui surmontaient ces défis.
CyberAgent a implémenté des transitions de vue entre la liste des blogs et la page du blog. Notez qu'il a ajouté la transition d'éléments à l'image principale. Vous pouvez accéder à son site et l'essayer dès aujourd'hui.
Elle a également utilisé des requêtes média pour concevoir différentes expériences d'animation pour différents appareils. Pour les pages mobiles, ils ont inclus des transitions d'éléments, mais cet effet était trop mouvementé pour les ordinateurs.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Détails techniques de l'implémentation
CyberAgent utilise Next.js pour créer son application Web monopage. L'exemple de code suivant montre comment ils utilisent l'API View Transition.
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
Découvrez un autre exemple de code Next.js.
Afficher les transitions pour les MPA avec la technologie de prérendu
CyberAgent a également essayé notre nouvelle API View Transitions pour les applications multipages (MPA, Multiple Page Apps) (actuellement sous l'indicateur chrome://flags/#view-transition-on-navigation) sur un portail d'actualités appelé Ameba News.
Les transitions de vue ont été utilisées à deux endroits: la première lors du changement de catégorie des actualités, comme illustré dans la vidéo suivante.
La seconde se situe entre la page "Sélection" d'actualités, qui affiche un extrait du contenu, et lorsque l'utilisateur clique sur Afficher plus de détails, le reste de l'article apparaît en fondu.
Ce qui est intéressant, c'est qu'ils n'ont ajouté de l'animation que dans la partie qui change après le clic sur le bouton. Ce petit ajustement de la conception de l'animation fait que la page MPA ressemble davantage à une SPA du point de vue de l'utilisateur, avec uniquement le nouveau contenu qui s'anime:
Pour ce faire, ils ont attribué un view-transition-name différent à chaque partie de la page. Par exemple, il a attribué un view-transition-name à la partie supérieure de l'article, un autre à la partie inférieure et n'a ajouté aucune animation à la partie supérieure.
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
CyberAgent a également utilisé un lien rapide pour implémenter facilement des règles de préchargement sur la page d'informations. Voici son exemple de code:
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
Pour en savoir plus sur l'implémentation des liens rapides, consultez cet article.
Témoignage
Kazunari Hara, responsable technique du service Ameba chez CyberAgent, a déclaré que les transitions de vue pouvaient avoir un impact significatif sur l'activité pour deux raisons.
Tout d'abord, ils guident les utilisateurs sur la page. Les transitions de vue permettent de focaliser visuellement l'attention des utilisateurs sur le message le plus important et de les aider à tirer le meilleur parti de la page Web. De plus, ils mettent en valeur la marque grâce à l'animation. CyberAgent a une conception d'animation spécifique pour communiquer sa marque. Grâce aux transitions de vue, l'entreprise peut mettre en œuvre cette expérience de marque sans augmenter les coûts de maintenance des bibliothèques externes.
View Transitions est l'une de mes API préférées. La possibilité d'ajouter des animations en tant que fonctionnalité standard du navigateur facilite l'implémentation et la gestion des transitions de vue par rapport à d'autres solutions qui dépendent de bibliothèques. Nous avons hâte de mettre en place des transitions de vues vers d'autres services afin de communiquer notre marque.
Kazunari Hara, directeur technique d'Ameba
Nykaa
Nykaa est la plus grande plate-forme d'e-commerce indienne dans le secteur de la mode et de la beauté. L'objectif est de rendre l'expérience Web mobile aussi proche que possible de celle de l'application native. Lorsqu'il tentait d'implémenter des animations de transition, il avait du mal à écrire du code JavaScript personnalisé complexe. Cela a également eu un impact marginal sur les performances de son site Web.
Pourquoi Nykaa a-t-il mis en œuvre des transitions de vue ?
Avec l'arrivée des transitions de vue, l'équipe de Nykaa a vu une opportunité : ces transitions étant disponibles en mode natif, l'expérience utilisateur des transitions de page pouvait être considérablement améliorée sans affecter les performances. Nykaa utilise largement les transitions d'affichage pour passer de la page d'informations détaillées sur le produit à la page de la fiche produit.
Détails techniques de l'implémentation
Nykaa a utilisé React et Emotion pour créer son application monopage. Vous trouverez d'autres exemples de code sur l'utilisation des transitions de vues avec React ici.
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
CSS pour l'animation du panneau latéral:
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
Témoignage
Sunit Jindal, responsable des applications chez Nykaa, a déclaré que le principal avantage de cette transition était la "perception de la vitesse". Nykaa utilisait les effets de scintillement pour attendre que le contenu soit chargé depuis le backend, mais a constaté que l'affichage de l'effet de scintillement n'indiquait pas aux utilisateurs combien de temps ils devaient attendre que le contenu soit chargé. Avec les transitions de vue, la transition elle-même donnait aux utilisateurs le sentiment que "quelque chose allait se passer", ce qui rendait l'attente moins pénible.
Nykaa est très satisfait de l'expérience utilisateur améliorée de sa page Web grâce aux transitions de vue. Il est prêt à les implémenter sur d'autres pages. Voici ce que son vice-président de la conception a déclaré:
Nous nous engageons à implémenter des transitions de vue dans toutes les fonctionnalités à venir lorsque cela est pertinent. Certains domaines ont déjà été identifiés et l'équipe y investit activement.
Krishna R V, vice-président de la conception
PolicyBazaar
Basée à Gurgaon, PolicyBazaar est la plus grande agrégatrice d'assurances et la plus grande entreprise multinationale de technologie financière en Inde.
Pourquoi PolicyBazaar a-t-il mis en œuvre des transitions de vue ?
Étant une entreprise axée sur le Web, l'équipe PolicyBazaar a toujours cherché à offrir la meilleure expérience utilisateur possible sur l'ensemble de leurs parcours utilisateur critiques. Avant le lancement de l'API View Transitions, il était courant d'implémenter des transitions personnalisées à l'aide de JavaScript et de CSS, car elles améliorent l'expérience utilisateur, créent un flux de navigation fluide et améliorent l'attrait visuel général de leurs sites Web.
Cependant, ces implémentations personnalisées ont entraîné des retards occasionnels liés aux performances, des difficultés en termes de maintenance du code et une compatibilité non optimale avec les frameworks utilisés. L'API View Transitions les a aidés à surmonter la plupart de ces défis en fournissant une interface facile à utiliser avec des avantages en termes de performances disponibles en mode natif.
PolicyBazaar a utilisé des transitions de vue entre différents éléments de son parcours avant l'obtention d'un devis pour inciter les acheteurs potentiels à fournir les informations requises pour l'achat de polices d'assurance.
Détails techniques de l'implémentation
Il utilise une approche de framework hybride, avec Angular et React qui dominent la majeure partie de son codebase. Voici l'extrait de code VT écrit en Angular et partagé par Aman Soni (développeur principal du front-end de PolicyBazaar):
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
Témoignage
Rishabh Mehrotra, responsable de la conception (Life BU), a déclaré que les transitions de vue ont joué un rôle important dans l'amélioration de l'expérience utilisateur sur le site Web en améliorant la convivialité, l'engagement et la satisfaction globale. Il a permis de proposer une navigation fluide, une interaction guidée, une charge cognitive réduite, une esthétique moderne et bien plus encore.
L'amélioration de l'expérience Web constitue un objectif primordial pour PB, et le VTC s'est avéré être un outil essentiel pour y parvenir avec une fluidité exceptionnelle. Son attrait auprès de notre communauté de développeurs et de notre base d'utilisateurs a suscité l'enthousiasme de notre équipe. Nous prévoyons un impact positif à long terme sur les niveaux de satisfaction et l'excellence opérationnelle.
Saurabh Tiwari (CTO, PolicyBazaar)
Étapes suivantes
Souhaitez-vous essayer les transitions de vue ? Voici quelques ressources que vous pouvez consulter pour en savoir plus: