Les transitions présentent de nombreux avantages pour les utilisateurs, par exemple 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 permet d'accroître l'engagement des utilisateurs sur leur site.
Toutefois, activer les transitions d'état était très difficile, car les développeurs devaient gérer les états de deux éléments différents. Même un simple fondu implique que les deux états sont 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'elle doit proposer une expérience Web unifiée, semblable à une application, qui soit aussi proche que possible de ses 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. Cependant, cela signifiait qu'ils devaient gérer la gestion des performances dans les segments inférieurs du réseau et des appareils, ce qui entraînait parfois une expérience différenciée avec une stratégie de chargement adaptatif en place.
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, en intégrant les insights précieux 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, directeur de la technologie de redBus
CyberAgent
CyberAgent est une entreprise IT 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é 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.
Ils ont également utilisé des requêtes multimédias 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 SPA. 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]);
};
Consultez d'autres exemples de code Next.js.
Afficher les transitions pour les MPA avec la technologie de prérendu
CyberAgent a également testé notre nouvelle API View Transitions pour les applications multipages (MPA) (actuellement sous l'indicateur chrome://flags/#view-transition-on-navigation) sur un service appelé Ameba News, qui est un site de portail d'actualités.
Les transitions d'affichage 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 produit entre la page des actualités principales, où un extrait du contenu est affiché, et le moment où l'utilisateur clique sur Afficher plus de détails, et que le reste de l'article apparaît en fondu.
L'élément intéressant est qu'il n'a ajouté d'animation qu'à la partie qui changera 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;
}
Autre point intéressant concernant l'utilisation de l'API de transition de vue par CyberAgent : l'entreprise a 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, ils peuvent implémenter cette expérience de marque sans avoir à supporter 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 maintenance des transitions de vue par rapport aux autres solutions dépendant de bibliothèques. Nous avons hâte d'implémenter les transitions de vue dans d'autres services pour 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 a essayé d'implémenter des animations de transition, il a eu 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 implémenté 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 SPA. Pour obtenir d'autres exemples de code sur l'utilisation des transitions de vue 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 plus grand avantage de la transition de vue é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 implémenté 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. Il était courant d'implémenter des transitions personnalisées à l'aide de JavaScript et de CSS, même avant le lancement de l'API View Transitions, 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 ont entraîné des retards occasionnels liés aux performances, une complexité de la 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 la demande de 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 l'usabilité, 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 est un objectif primordial pour PB. La vidéo en direct s'est avérée être un outil essentiel pour y parvenir avec une fluidité remarquable. 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 pour en savoir plus: