Las transiciones tienen numerosos beneficios para los usuarios, incluida la ayuda para mantenerlos en contexto y reducir la percepción de latencia. Los desarrolladores quieren poder crear transiciones fluidas entre páginas, lo que ayuda a aumentar la participación de los usuarios en su sitio.
Sin embargo, habilitar las transiciones de estado fue muy difícil, ya que los desarrolladores debían administrar los estados de dos elementos diferentes. Incluso algo como un simple fundido cruzado implica que ambos estados estén presentes al mismo tiempo. Eso presenta desafíos de usabilidad, como controlar la interacción adicional en el elemento saliente. Para los usuarios de dispositivos de asistencia, hay un período en el que tanto el estado anterior como el posterior están en el DOM al mismo tiempo. Además, los elementos pueden moverse alrededor del árbol de una forma que se vea bien, pero que fácilmente pueden hacer que la posición de lectura y el enfoque se pierdan.
La API de View Transitions se lanzó en Chrome 111 y permite crear transiciones fluidas y simples entre páginas. Te permite hacer que tu DOM cambie sin ninguna superposición entre estados, y tener una animación de transición entre los estados usando vistas instantáneas.
Es posible que te preguntes qué tan fácil es su implementación. ¿Qué tipo de casos de uso existen? ¿Cómo están usando otros desarrolladores las transiciones de vistas?
En este artículo, se explica la implementación de transiciones de vistas en 4 sitios web diferentes: RedBus (viajes), CyberAgent (editor de noticias/blog), Nykaa (comercio electrónico) y PolicyBazaar (seguro), y cómo sus sitios web se beneficiaron de diferentes maneras con la API de View Transitions.
redBus
redBus, parte del grupo MakeMyTrip, es un sitio web de reservas y venta de boletos de autobús con sede en Bangalore, India, que tiene presencia en diferentes ubicaciones geográficas a nivel mundial. Fue uno de los primeros sitios web en implementar una experiencia con la API de View Transitions.
¿Por qué Redbus implementó transiciones de vistas?
El equipo de redBus cree firmemente en proporcionar una experiencia web unificada, similar a la de una app, que sea lo más parecida posible a sus apps nativas. De hecho, habían implementado varias soluciones personalizadas a lo largo de los años. Por ejemplo, lanzaron animaciones personalizadas basadas en JavaScript y CSS para las transiciones de la página, incluso antes de que se desarrollara la API de View Transitions. Sin embargo, eso significó que debían encargarse de la administración del rendimiento en segmentos más bajos de la red y los dispositivos, lo que, en ocasiones, generaba una experiencia diferencial con una estrategia de carga adaptable.
redBus usó transiciones de vistas para varios recorridos de usuarios. Por ejemplo, en la sección de autoayuda dentro de su app para dispositivos móviles, que abre páginas web en pestañas personalizadas de Chrome, y en su embudo de reserva de boletos de autobús, donde los usuarios van de la página de la ficha del inventario a la página de pagos. En el último caso, las transiciones de vistas facilitaron la navegación de página a página y generaron un aumento en su porcentaje de conversiones. Esto fue el resultado de una mejor experiencia del usuario y un mejor rendimiento percibido mientras se ejecutaban las operaciones pesadas, como la recuperación del inventario disponible más actualizado.
Detalles técnicos de la implementación
redBus usa React y EJS como su pila tecnológica de frontend, con una combinación de SPA y MPA en diferentes recorridos. En el siguiente extracto de código, se muestra cómo se usan las transiciones de vistas:
/* 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();
}
};
En el siguiente código CSS, slide-to-right, slide-to-left, slide-from-right y slide-from-left son fotogramas clave de animación de 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;
}
Impacto en el negocio
redBus eligió implementar transiciones de vistas junto con los esfuerzos de mejora de INP en su sitio, lo que generó un 7% más de ventas. Amit Kumar, gerente sénior de Ingeniería de redBus, comentó que las transiciones de vistas son realmente asombrosas para quienes realmente desean una mejor experiencia del usuario y desean menos sobrecarga de mantenimiento.
Realizamos sesiones integrales de comentarios de los usuarios en las que incorporamos información valiosa de un grupo diverso de usuarios. Nuestro gran conocimiento de nuestra base de usuarios (autobuses y ferrocarriles) y sus necesidades, combinadas con nuestra experiencia, nos llevó a creer que esta función proporcionará un valor significativo desde el principio, sin la necesidad de realizar pruebas A/B. Las transiciones de vistas son un paso para cerrar la brecha entre la app y la Web con una experiencia de navegación fluida.
Anoop Menon, director de Tecnología de redBus
CyberAgent
CyberAgent es una empresa de TI con sede en Japón que proporciona muchos servicios en línea, incluidos blogs y publicación de noticias.
¿Por qué CyberAgent implementó transiciones de vistas?
CyberAgent había considerado el uso de animaciones de CSS o de un framework para implementar transiciones animadas a fin de mejorar la experiencia del usuario en el pasado, pero les preocupaba el bajo rendimiento en la renderización del DOM y la capacidad de mantenimiento del código. Cuando Chrome agregó compatibilidad con la API de transiciones de View, se entusiasmó por utilizarla para crear transiciones de página atractivas que superaran estos desafíos.
CyberAgent implementó transiciones de vistas entre la lista de blogs y la página del blog. Aquí, observa cómo agregaron la transición de elementos a la imagen principal. Puedes visitar su sitio y experimentarlo en vivo hoy mismo.
También usaron consultas de medios para diseñar diferentes experiencias de animación para distintos dispositivos. En las páginas para dispositivos móviles, incluyeron transiciones de elementos, pero este efecto tenía demasiado movimiento para las computadoras de escritorio.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Detalles técnicos de la implementación
CyberAgent usa Next.js para compilar su SPA. En el siguiente ejemplo de código, se demuestra cómo se usa la API de transición de vistas.
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]);
};
Consulta más código de muestra de Next.js.
Consulta las transiciones de la MPA con la tecnología de renderización previa
CyberAgent también probó nuestra nueva API de View Transitions para apps de varias páginas (MPA) (actualmente bajo la marca chrome://flags/#view-transition-on-navigation) en un servicio llamado Ameba News, que es un sitio del portal de noticias.
Las transiciones de vistas se usaban en dos lugares: el primero, al cambiar las categorías de las noticias, que se muestran en el siguiente video.
La segunda es entre la página de noticias destacadas, donde se muestra un extracto del contenido, y cuando el usuario hace clic en Ver más detalles, el resto del artículo aparece atenuado.
Lo interesante es que solo agregaron animación a la parte que cambiará después de hacer clic en el botón. Este pequeño ajuste en el diseño de la animación hace que la página de la MPA se vea más como una SPA desde el punto de vista del usuario, con solo el nuevo contenido animado en:
Así es como lo hizo: asignaron un view-transition-name diferente a las distintas partes de la página. Por ejemplo, asignó un elemento view-transition-name a la parte superior del artículo, otro a la parte inferior y no agregó animación a la parte superior.
::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;
}
Otro aspecto interesante sobre el uso de la API de transiciones de vistas por parte de CyberAgent es que utilizó vínculo rápido para implementar fácilmente reglas de renderización previa en la página de detalles. Este es su código de muestra:
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}/`);
});
Puede obtener más información sobre la implementación de vínculos rápidos en este artículo.
Testimonio
Kazunari Hara, el líder de tecnología del servicio Ameba en CyberAgent, afirmó que las transiciones de vistas podrían tener un impacto significativo en el negocio por dos razones.
En primer lugar, guían a los usuarios por la página. Las transiciones de vistas permiten enfocar visualmente a los usuarios en el mensaje más importante y los ayudan a aprovechar al máximo la página web. Además, mejoran y enfatizan la marca con animaciones. CyberAgent tiene un diseño de animación designado para comunicar su marca. Con las transiciones de vistas, pueden implementar esta experiencia de marca sin agregar el costo de mantener bibliotecas externas.
View Transitions es una de mis APIs favoritas. La capacidad de agregar animaciones como una función estándar del navegador facilita la implementación y el mantenimiento de las transiciones de vistas en comparación con otras soluciones que dependen de bibliotecas. Esperamos implementar transiciones de vistas en más servicios para comunicar nuestra marca.
Kazunari Hara, director de Tecnología de Ameba
Nykaa
Nykaa es la plataforma de comercio electrónico de moda y belleza más grande de la India. Su objetivo es que la experiencia web móvil sea lo más parecida posible a la de la app nativa. Cuando anteriormente intentaban implementar animaciones de transición, tenían problemas para escribir JavaScript personalizado complejo. Esto también tuvo un impacto marginal en el rendimiento de su sitio web.
¿Por qué Nykaa implementó transiciones de vistas?
Con la llegada de las transiciones de vistas, el equipo de Nykaa vio una oportunidad en la que estas transiciones estaban disponibles de forma nativa, lo que significaba que la UX de las transiciones de página podía mejorarse significativamente sin costo para el rendimiento. Nykaa usa mucho las transiciones de vistas para hacer la transición de la página de detalles del producto a la página de la ficha del producto.
Detalles técnicos de la implementación
Nykaa usó React y Emotion para crear su SPA. Aquí encontrarás más código de muestra para usar transiciones de vistas con React.
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 para animación del panel lateral:
::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};
}
Testimonio
Sunit Jindal, director de apps de Nykaa, comentó que el mayor beneficio de la transición de vistas fue la "Percepción de velocidad". Nykaa usó los efectos de brillo para esperar a que se cargue el contenido desde el backend, pero descubrió que mostrar ese efecto no les proporcionaba a los usuarios cuánto tiempo debían esperar a que se cargara el contenido. Con las transiciones de vistas, la transición en sí les brindó a los usuarios la sensación de que "algo está por suceder", lo que hizo que la espera fuera menos dolorosa.
Nykaa estaba muy entusiasmada con la UX recientemente mejorada de su página web con transiciones de vistas y también está lista para implementar transiciones de vistas en páginas adicionales. Esto es lo que dijo su vicepresidente de Diseño:
Asumimos el compromiso flexible de implementar transiciones de vistas en todas las próximas funciones cuando sea conveniente. Algunas áreas ya se identificaron y el equipo está invirtiendo activamente en ellas.
Krishna R. V, vicepresidenta de Diseño
PolicyBazaar
Con sede en Gurgaon, PolicyBazaar es el agregador de seguros y la empresa multinacional de tecnología financiera más grande de la India.
¿Por qué PolicyBazaar implementó transiciones de vistas?
Como es una empresa centrada en la Web, el equipo de PolicyBazaar siempre ha tenido como objetivo proporcionar la mejor experiencia del usuario posible en sus recorridos críticos del usuario. Era una práctica común implementar transiciones personalizadas con JavaScript y CSS incluso antes del lanzamiento de la API de View Transitions, ya que mejoraban la experiencia del usuario, creaban un flujo de navegación fluido y mejoraban el atractivo visual general de sus sitios web.
Sin embargo, estas implementaciones personalizadas atrajeron a costos de retrasos ocasionales basados en el rendimiento, complejidades de mantenimiento del código y compatibilidad subóptima con los frameworks utilizados. La API de View Transitions los ayudó a superar la mayoría de estos desafíos, ya que les proporcionó una interfaz fácil de usar con beneficios de rendimiento disponibles de forma nativa.
PolicyBazaar usó transiciones de vistas entre diferentes elementos en sus recorridos previos a la cotización para que los posibles compradores proporcionaran los detalles que necesitaban para comprar pólizas de seguros.
Detalles técnicos de la implementación
Usan un enfoque de framework híbrido en el que Angular y React dominan la mayor parte de su base de código. Este es el extracto de VT de su código escrito en Angular y compartido por Aman Soni (desarrollador líder de frontend 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');
}
Testimonio
Rishabh Mehrotra, su jefe de Diseño (Life BU), afirmó que las transiciones de vistas desempeñaron un papel importante en la mejora de la experiencia del sitio web para sus usuarios al mejorar la usabilidad, la participación y la satisfacción general. Ayudó a proporcionar una navegación fluida, interacción guiada, carga cognitiva reducida, una estética moderna y mucho más.
Mejorar la experiencia en la Web es un objetivo fundamental para PB, y VT demostró ser una herramienta fundamental para lograrlo con una excelente fluidez. El amplio atractivo que genera entre nuestra comunidad de desarrolladores y nuestra base de usuarios le proporcionó a nuestro equipo una sensación de entusiasmo. A medida que contemplamos su integración en diversos POD, anticipamos un impacto positivo de gran alcance en los niveles de satisfacción y la excelencia operativa.
Saurabh Tiwari (director de Tecnología de PolicyBazaar)
Próximos pasos
¿Te interesa probar las transiciones de vistas? Consulta los siguientes recursos para obtener más información: