Les transitions présentent de nombreux avantages pour les utilisateurs, y compris en les aidant à rester dans le contexte et à réduire la perception de la latence. Les développeurs souhaitent pouvoir créer des transitions fluides entre les pages, ce qui contribue à améliorer l'engagement des utilisateurs avec leur site.
Cependant, 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 une simple fondu enchaîné implique la présence simultanée des deux états. Cela pose des problèmes d'usabilité, comme la gestion d'une interaction supplémentaire sur l'élément sortant. Pour les utilisateurs d'appareils d'assistance, il existe une période pendant laquelle les états avant et après se trouvent en même temps dans le DOM. De plus, les éléments peuvent se déplacer dans l'arborescence d'une manière qui est visuellement acceptable, mais qui peut facilement entraîner la perte de la position de lecture et de la mise au point.
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 si c'est facile à implémenter. Quels sont les cas d'utilisation ? Comment les autres développeurs utilisent-ils les transitions de vue ?
Cet article vous explique comment implémenter les transitions de vue sur quatre sites Web différents : RedBus (voyages), CyberAgent (éditeur d'actualités/de blogs), Nykaa (e-commerce) et PolicyBazaar (assurances). Vous découvrirez é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 de billets 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 à avoir implémenté une expérience à l'aide de l'API View Transitions.
Pourquoi Redbus a-t-il implémenté les transitions de vue ?
L'équipe de redBus croit fermement à l'importance de fournir une expérience Web unifiée, semblable à une application, qui se rapproche le plus possible de leurs applications natives. En fait, ils avaient implémenté plusieurs solutions personnalisées au fil des ans. Par exemple, ils ont déployé des animations JavaScript et CSS personnalisées pour les transitions de page avant même que l'API View Transitions ne soit développée. Toutefois, cela signifiait qu'ils devaient gérer les performances dans les segments inférieurs du réseau et des appareils, ce qui entraînait parfois une expérience différente avec une stratégie de chargement adaptatif.
redBus a utilisé les transitions de vue pour plusieurs parcours utilisateur. Par exemple, dans la section d'aide de leur application mobile, qui ouvrait des pages Web dans des onglets Chrome personnalisés, et dans leur 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 de page à page plus fluide et ont entraîné une augmentation de leur taux de conversion. Cela s'explique par une meilleure expérience utilisateur et une meilleure perception des performances lors de l'exécution des opérations lourdes, comme la récupération de l'inventaire disponible le plus récent.
Détails techniques de l'implémentation
redBus utilise React et EJS comme pile technologique de frontend, avec une combinaison de SPA et de MPA pour différents parcours. L'extrait de code suivant montre comment utiliser les transitions de vue :
/* 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 keyframes 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 les transitions de vue et d'améliorer l'INP sur son site, ce qui a entraîné une augmentation de 7 % des ventes. Amit Kumar, Senior Engineering Manager chez redBus, a déclaré que les transitions de vue sont vraiment géniales pour ceux qui souhaitent réellement améliorer l'expérience utilisateur et réduire la charge de maintenance.
Nous avons organisé des sessions complètes de recueil des commentaires des utilisateurs, en intégrant les précieux insights d'un groupe diversifié d'utilisateurs. Grâce à notre connaissance approfondie de notre base d'utilisateurs (bus et train) et de leurs besoins, combinée à notre expertise, nous pensons que cette fonctionnalité apportera une valeur ajoutée significative dès le départ, sans avoir besoin de tests A/B. Les transitions d'affichage permettent de combler le fossé entre les applications et le Web en offrant une expérience de navigation fluide.
Anoop Menon, CTO redBus
CyberAgent
CyberAgent est une entreprise informatique basée au Japon qui fournit de nombreux services en ligne, y compris la publication de blogs et d'actualités.
Pourquoi CyberAgent a-t-il implémenté les 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, l'entreprise s'inquiétait des mauvaises performances de rendu du DOM et de la facilité de maintenance du code. Lorsque Chrome a ajouté la compatibilité avec l'API View Transitions, l'équipe était ravie 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. Ici, vous pouvez voir comment ils ont ajouté la transition d'élément à l'image hero. Vous pouvez visiter leur site et le découvrir en direct dès aujourd'hui.
Ils ont é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 dynamique 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 sa SPA. L'exemple de code suivant montre comment ils utilisent l'API View Transitions.
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]);
};
Consultez d'autres exemples de code Next.js.
Transitions d'affichage pour les MPA avec technologie de prérendu
CyberAgent a également testé notre nouvelle API View Transitions pour les applications multipages (actuellement sous l'indicateur chrome://flags/#view-transition-on-navigation) sur un service appelé Ameba News, qui est un site portail d'actualités.
Les transitions de vue ont été utilisées à deux endroits : la première fois, lors du changement de catégorie d'actualités, comme le montre la vidéo suivante.
La seconde se situe entre la page de mise en avant de l'actualité, où un extrait du contenu est affiché, et le moment où l'utilisateur clique sur Afficher plus de détails, ce qui permet de faire apparaître le reste de l'article.
Le point intéressant est qu'ils n'ont ajouté une animation qu'à la partie qui changera après le clic sur le bouton. Cette petite modification de la conception de l'animation permet à la page MPA de ressembler 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 aux différentes parties de la page. Par exemple, ils ont attribué un view-transition-name à la partie supérieure de l'article, un autre à la partie inférieure et n'ont 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;
}
Un autre aspect intéressant de l'utilisation de l'API View Transitions par CyberAgent est qu'ils ont utilisé quicklink pour implémenter facilement des règles de prérendu sur la page de détails. Voici un 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 pourraient avoir un impact significatif sur l'activité pour deux raisons.
Tout d'abord, elles guident les utilisateurs sur la page. Les transitions de vue permettent de concentrer visuellement les utilisateurs sur le message le plus important et de les aider à tirer le meilleur parti de la page Web. De plus, elles mettent en valeur la marque grâce à l'animation. CyberAgent a une conception d'animation spécifique pour communiquer sur sa marque. Grâce aux transitions de vue, ils peuvent implémenter cette expérience de marque sans avoir à payer pour la maintenance de 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 maintenance des transitions de vue par rapport à d'autres solutions dépendantes des bibliothèques. Nous sommes impatients d'implémenter les transitions d'affichage dans d'autres services pour communiquer notre marque.
Kazunari Hara, directeur de la technologie d'Ameba
Nykaa
Nykaa est la plus grande plate-forme d'e-commerce de mode et de beauté en Inde. Ils souhaitent que l'expérience sur le Web mobile soit aussi proche que possible de celle de leur application native. Lorsqu'ils ont essayé d'implémenter des animations de transition, ils ont eu du mal à écrire du code JavaScript personnalisé complexe. Cela a également eu un impact marginal sur les performances de leur site Web.
Pourquoi Nykaa a-t-il implémenté les transitions de vue ?
Avec l'arrivée des transitions de vue, l'équipe de Nykaa a vu une opportunité : ces transitions étant disponibles de manière native, l'UX des transitions de page pouvait être considérablement améliorée sans impact sur les performances. Nykaa utilise beaucoup les transitions de vue pour passer de la page d'informations détaillées sur le produit à la page de liste des produits.
Détails techniques de l'implémentation
Nykaa a utilisé React et Emotion pour créer sa SPA. Pour obtenir d'autres exemples de code sur l'utilisation des transitions d'affichage avec React, cliquez 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 la transition d'affichage était la "perception de la vitesse". Nykaa a utilisé les effets de scintillement pour attendre le chargement du contenu à partir du backend, mais a constaté que l'affichage de l'effet de scintillement n'indiquait pas aux utilisateurs combien de temps ils devaient attendre le chargement du contenu. Avec les transitions de vue, la transition elle-même donnait aux utilisateurs l'impression que "quelque chose allait se passer", ce qui rendait l'attente moins pénible.
Nykaa était très enthousiaste à propos de l'UX améliorée de sa page Web avec les transitions de vue et est prêt à implémenter les transitions de vue sur d'autres pages. Voici ce qu'a déclaré son vice-président du design :
Nous nous engageons à implémenter les transitions de vue dans toutes les prochaines fonctionnalités où cela est pertinent. Certains domaines ont déjà été identifiés et l'équipe y investit activement.
Krishna R V, VP of Design
PolicyBazaar
PolicyBazaar, dont le siège est à Gurgaon, est le plus grand agrégateur d'assurances et la plus grande entreprise multinationale de technologie financière d'Inde.
Pourquoi PolicyBazaar a-t-il implémenté les transitions de vue ?
Étant une entreprise axée sur le Web, l'équipe PolicyBazaar a toujours cherché à offrir la meilleure expérience utilisateur possible tout au long de ses parcours utilisateur critiques. Avant même 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élioraient l'expérience utilisateur, créaient un flux de navigation fluide et amélioraient l'attrait visuel global de leurs sites Web.
Toutefois, ces implémentations personnalisées entraînaient parfois des retards basés sur les performances, des difficultés de maintenance du code et une compatibilité sous-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 de manière native.
PolicyBazaar a utilisé des transitions de vue sur différents éléments de ses parcours de pré-devis pour inciter les acheteurs potentiels à fournir les informations requises pour souscrire des polices d'assurance.
Détails techniques de l'implémentation
Ils utilisent une approche de framework hybride, Angular et React représentant la majeure partie de leur codebase. Voici l'extrait de VT de leur code écrit en Angular et partagé par Aman Soni (développeur frontend principal 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 du design (Life BU), a déclaré que les transitions de vue avaient joué un rôle important dans l'amélioration de l'expérience des utilisateurs sur le site Web en améliorant l'usabilité, l'engagement et la satisfaction globale. Il a permis d'offrir 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 est un objectif primordial pour PB, et VT s'est avéré être un outil essentiel pour y parvenir avec une fluidité remarquable. Son succès 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 considérable sur les niveaux de satisfaction et l'excellence opérationnelle lorsque nous envisagerons son intégration dans divers points de présence.
Saurabh Tiwari (CTO, PolicyBazaar)
Étapes suivantes
Souhaitez-vous essayer les transitions de vue ? Voici quelques ressources pour en savoir plus :