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 veulent pouvoir créer des transitions fluides entre les pages, ce qui contribue à accroître l'engagement des utilisateurs sur leur site.
Toutefois, l'activation des transitions d'état était vraiment difficile, car les développeurs devaient 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 au cours de laquelle l'état "avant" et l'état "après" se trouvent simultanément dans le DOM. En outre, les éléments peuvent se déplacer d'une manière fluide dans l'arbre, mais peuvent facilement entraîner une perte de la position de lecture et de la concentration.
L'API View Transitions, lancée dans Chrome 111, permet de créer des transitions fluides et simples entre les pages. Vous pouvez ainsi modifier votre DOM sans chevauchement entre les états et créer une animation de transition entre les états à l'aide de vues instantanées.
Vous vous demandez peut-être si elle est facile à mettre en œuvre. Quels sont les différents cas d'utilisation ? Comment les autres développeurs utilisent-ils les transitions de vue ?
Cet article vous explique comment implémenter des transitions de vue dans quatre sites Web différents: RedBus (voyages), CyberAgent (éditeur de blogs/actualités), Nykaa (e-commerce) et PolicyBazaar (assurance) et comment leurs sites Web en ont profité de différentes manières grâce à l'API View Transitions.
redBus
RedBus, qui fait partie du groupe MakeMyTrip, est un site Web de réservation et de billetterie de bus basé à Bangalore en Inde. Il est présent dans différentes zones géographiques à travers le monde. Il a été l'un des premiers sites Web à implémenter une expérience à l'aide de l'API View Transitions.
Pourquoi Redbus a-t-il mis en œuvre des transitions de vue ?
L'équipe de redBus est convaincue qu'il s'agit d'offrir une expérience Web unifiée, semblable à celle des applications, et aussi proche que possible des applications natives. D'ailleurs, l'entreprise a implémenté plusieurs solutions personnalisées au fil des ans. Par exemple, elle a déployé des animations personnalisées basées sur du code 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 a utilisé des transitions de vue pour plusieurs parcours utilisateur. Par exemple, dans la section d'auto-assistance de l'application mobile, qui ouvre 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 fiche de l'inventaire à la page de paiement. Dans ce dernier cas, les transitions de vue ont facilité la navigation entre les pages et ont entraîné une augmentation du taux de conversion. Cela était dû à une meilleure expérience utilisateur et à une meilleure évaluation des performances lors de l'exécution des opérations lourdes, telles que l'extraction de l'inventaire disponible le plus à jour.
Détails techniques de l'implémentation
redBus utilise React et EJS comme pile technologique d'interface, avec une combinaison d'applications monopages 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 vues en même temps que des efforts d'amélioration de l'INP sur l'ensemble de son site, ce qui a entraîné une augmentation de 7% des ventes. Amit Kumar, responsable principal de l'ingénierie chez redBus, a déclaré que les transitions de vue sont particulièrement efficaces pour ceux qui souhaitent vraiment améliorer l'expérience utilisateur et réduire les coûts de maintenance.
Nous avons organisé des sessions complètes pour recueillir les commentaires des utilisateurs, en tenant compte des précieux insights d'un groupe diversifié d'utilisateurs. Grâce à notre compréhension approfondie de notre base d'utilisateurs (bus et train) et de leurs besoins, associée à notre expertise, nous sommes convaincus que cette fonctionnalité apportera une valeur ajoutée significative dès le départ, sans nécessiter de tests A/B. Les transitions de vue permettent de combler le fossé entre l'application et le Web en offrant une expérience de navigation fluide.
Anoop Menon, directeur de la technologie 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 ?
Par le passé, 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, mais l'équipe s'inquiétait des mauvaises performances en termes de rendu DOM et de gestion du code. Lorsque Chrome a ajouté la prise en charge de l'API View Transitions, l'équipe a hâte de l'utiliser pour créer des transitions de page attrayantes qui permettent de relever ces défis.
CyberAgent a implémenté des transitions de vue entre la liste des blogs et la page du blog. Ici, notez comment ils ont ajouté la transition d’élément à l’image héros. Vous pouvez consulter leur site et le découvrir en ligne 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, elles incluaient des transitions d'éléments, mais cet effet présentait trop de mouvement sur 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 de l'approbation multipartite (MPA) avec la technologie de prérendu
CyberAgent a également essayé notre nouvelle API View Transitions pour les applications à pages multiples (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 consiste à modifier les catégories d'actualités, comme illustré dans la vidéo suivante.
La seconde se situe entre la page d'actualités sélectionnée, qui contient 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 de la MPA ressemble davantage à une SPA du point de vue de l'utilisateur, seul le nouveau contenu s'anime dans:
Voici comment il a fait: il a attribué un view-transition-name différent aux différentes parties de la page. Par exemple, l'équipe a attribué une propriété view-transition-name à la partie supérieure de l'article, une 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 View Transitions par CyberAgent : l'équipe a utilisé quicklink pour implémenter facilement les règles de prérendu sur la page d'informations. Voici l'exemple de code correspondant:
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 de Quicklink, 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.
Premièrement, ils guident les utilisateurs sur la page. Les transitions de vue permettent de concentrer visuellement les utilisateurs sur le message le plus important et de tirer le meilleur parti de la page Web. En outre, elles mettent en valeur et mettent en valeur la marque grâce à l'animation. CyberAgent utilise un design d'animation spécifique pour faire connaître 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.
Les transitions de vues sont 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 de la technologie chez Ameba
Nykaa
Nykaa est la plus grande plate-forme d'e-commerce d'Inde dans le secteur de la mode et de la beauté. Son objectif est d'offrir une expérience Web mobile aussi proche que possible de celle de son application native. Lors d'une précédente tentative d'implémentation d'animations de transition, l'équipe rencontrait des difficultés pour écrire du code JavaScript personnalisé complexe. Cela a également eu un impact minime sur les performances de leur site Web.
Pourquoi Nykaa a-t-il mis en œuvre des transitions de vue ?
Avec l'arrivée des transitions d'affichage, l'équipe de Nykaa a compris que ces transitions étant disponibles en mode natif, il était possible d'améliorer considérablement l'expérience utilisateur lors des transitions de page sans nuire aux performances. Nykaa utilise beaucoup les transitions de vue pour passer de la page d'informations détaillées sur le produit à la page des fiches 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 a utilisé les effets de scintillement pour attendre que le contenu se charge depuis le backend, mais a constaté que l'affichage de l'effet de scintillement ne fournissait pas aux utilisateurs le temps nécessaire pour que le contenu se charge. Avec les transitions de vue, la transition elle-même donnait aux utilisateurs l'impression que "quelque chose est sur le point de se produire", ce qui rend l'attente moins pénible.
Nykaa a été très enthousiaste à l'idée d'améliorer l'expérience utilisateur de sa page Web avec des transitions de vue. Elle est prête à en implémenter sur d'autres pages. Voici ce qu'a dit son vice-président de la conception:
Nous nous engageons à implémenter des transitions de vue dans toutes les fonctionnalités à venir, le cas échéant. Certains domaines ont déjà été identifiés et l'équipe investit activement dans ceux-ci.
Krishna R V, vice-présidente de la conception
PolicyBazaar
Basé à Gurugram, PolicyBazaar est le plus grand agrégateur d'assurance et entreprise multinationale des technologies financières en Inde.
Pourquoi PolicyBazaar a-t-il mis en œuvre des transitions de vue ?
En tant qu'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 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 l'a aidé à 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é les transitions de vue entre différents éléments dans leurs parcours avant le devis pour que les acheteurs potentiels puissent fournir les détails nécessaires à la souscription de polices d'assurance.
Détails techniques de l'implémentation
Ils utilisent une approche de framework hybride, Angular et React dominent la majeure partie de leur codebase. Voici un extrait de vidéo :
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 facilité d'utilisation, l'engagement et la satisfaction globale. Il a contribué à la fluidité de la navigation, aux interactions guidées, à la réduction de la charge cognitive, à l'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 intérêt auprès de notre communauté de développeurs et de notre base d'utilisateurs a suscité l'enthousiasme de notre équipe. Alors que nous envisageons son intégration dans différents pods, nous nous attendons à un impact positif considérable sur les niveaux de satisfaction et l'excellence opérationnelle.
Saurabh Tiwari (Directeur de la technologie, PolicyBazaar)
Étapes suivantes
Souhaitez-vous essayer les transitions de vue ? Voici quelques ressources que vous pouvez consulter pour en savoir plus: