Las transiciones tienen numerosos beneficios para los usuarios, como ayudarlos a mantenerse 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 exigía que los desarrolladores administraran 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 por el árbol de una manera que se vea bien, pero que puede hacer que se pierda fácilmente la posición de lectura y el enfoque.
Lanzada en Chrome 111, la API de View Transitions permite crear transiciones simples y fluidas entre páginas. Te permite hacer que tu DOM cambie sin superposiciones entre los estados y tener una animación de transición entre los estados con vistas de instantáneas.
Es posible que te preguntes qué tan fácil es su implementación. ¿Qué tipo de casos de uso existen? ¿Cómo usan las transiciones de vistas otros desarrolladores?
En este artículo, se explica la implementación de transiciones de vistas en 4 sitios web diferentes: RedBus (viajes), CyberAgent (publicador de noticias o blogs), Nykaa (comercio electrónico) y PolicyBazaar (seguros), 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ó las transiciones de vistas?
El equipo de redBus cree firmemente en proporcionar una experiencia web unificada y similar a una app, que sea lo más cercana 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 página incluso antes de que se desarrollara la API de View Transitions. Sin embargo, eso significaba que tenían que lidiar con la administración del rendimiento en segmentos inferiores de la red y los dispositivos, lo que, en ocasiones, generaba una experiencia diferencial con una estrategia de carga adaptativa implementada.
redBus usó transiciones de vista para varios recorridos del usuario. Por ejemplo, en la sección de autoayuda de su aplicación para dispositivos móviles, que abría páginas web en Pestañas personalizadas de Chrome, y en su embudo de reserva de boletos de autobús, en el que los usuarios pasaban 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 se debió a una mejor experiencia del usuario y un mejor rendimiento percibido mientras se ejecutaban las operaciones pesadas, como recuperar el 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 vista:
/* 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 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 decidió implementar transiciones de vista junto con esfuerzos de mejora de la INP en su sitio, lo que generó un 7% más de ventas. Amit Kumar, gerente sénior de Ingeniería de redBus, dijo que las transiciones de vistas son realmente increíbles para quienes realmente quieren mejorar la 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 profundo conocimiento de nuestra base de usuarios (autobuses y trenes) y sus necesidades, combinado con nuestra experiencia, nos llevó a creer que esta función proporcionará un valor significativo desde el principio, sin necesidad de pruebas A/B. Las transiciones de vista 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, como la publicación de noticias y blogs.
¿Por qué CyberAgent implementó las 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 View Transitions, se sintieron entusiasmados por usarla para crear transiciones de páginas atractivas que superaron estos desafíos.
CyberAgent implementó transiciones de vista entre la lista de blogs y la página del blog. Aquí, observa cómo se agregó la transición de elementos a la imagen hero. 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 diferentes dispositivos. En las páginas para dispositivos móviles, se incluyeron transiciones de elementos, pero este efecto tenía demasiado movimiento para 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 muestra cómo usan la API de 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]);
};
Consulta más código de muestra de Next.js.
Cómo ver transiciones para MPA con 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 vista se utilizaron en dos lugares: el primero es cuando se cambian las categorías de las noticias, como se muestra en el siguiente video.
El segundo 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 se atenúa.
Lo interesante es que solo se agregó animación a la parte que cambiará después de hacer clic en el botón. Este pequeño ajuste del diseño de la animación hace que la página de MPA se vea más como una SPA desde el punto de vista del usuario, con solo el contenido nuevo animado:
A continuación, te mostramos cómo lo hicieron: asignaron un view-transition-name diferente a las diferentes partes de la página. Por ejemplo, asignó un view-transition-name a la parte superior del artículo, otro para la parte inferior y no agregó ninguna 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 del uso que hace CyberAgent de la API de View Transitions es que usó el vínculo rápido para implementar fácilmente las 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}/`);
});
Puedes obtener más información sobre su implementación de vínculos directos en este artículo.
Testimonio
Kazunari Hara, líder técnico del servicio de Ameba en CyberAgent, dijo que las transiciones de vista podrían tener un impacto significativo en el negocio por dos razones.
En primer lugar, guían a los usuarios en la página. Las transiciones de vista permiten enfocar visualmente a los usuarios en el mensaje más importante y les ayudan a aprovechar al máximo la página web. Además, mejoran y enfatizan la marca con la animación. 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 hace que las transiciones de vistas sean más fáciles de implementar y mantener en comparación con otras soluciones que dependen de bibliotecas. Esperamos implementar las transiciones de vista en más servicios para comunicar nuestra marca.
Kazunari Hara, CTO 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 su experiencia web móvil sea lo más cercana posible a la experiencia de su aplicación nativa. Cuando intentó implementar animaciones de transición, tuvo problemas para escribir JavaScript personalizado complejo. Esto también afectó marginalmente el rendimiento de su sitio web.
¿Por qué Nykaa implementó transiciones de vistas?
Con la llegada de las transiciones de vista, el equipo de Nykaa vio una oportunidad en la que estas transiciones disponibles de forma nativa significaban que la UX de las transiciones de página podría mejorarse significativamente sin costo para el rendimiento. Nykaa usa mucho las transiciones de vista para pasar 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. Puedes encontrar más código de muestra sobre cómo usar transiciones de vista con React aquí.
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 la 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 vista, la transición en sí les daba a los usuarios la sensación de que "algo está a punto de suceder", lo que hacía que la espera fuera menos dolorosa.
Nykaa se mostró muy entusiasmada con la UX mejorada de su página web con transiciones de vista y está lista para implementarlas en páginas adicionales. Esto es lo que dijo su vicepresidente de diseño:
Tenemos el compromiso de implementar las transiciones de vista en todas las próximas funciones en las que tenga sentido. Ya se identificaron algunas áreas y el equipo está invirtiendo activamente en ellas.
Krishna R V, vicepresidente de Diseño
PolicyBazaar
Con sede en Gurgaon, PolicyBazaar es el agregador de seguros más grande de la India y una empresa multinacional de tecnología financiera.
¿Por qué PolicyBazaar implementó las transiciones de vistas?
Como empresa que prioriza la Web, el equipo de PolicyBazaar siempre se ha esforzado por proporcionar la mejor experiencia del usuario posible en sus recorridos clave. 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 tenían el costo de demoras ocasionales basadas en el rendimiento, complejidades de mantenimiento de 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 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 director de diseño (Life BU), dijo que las transiciones de vista desempeñaron un papel importante en la mejora de la experiencia del sitio web para los usuarios, ya que mejoraron 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 web es un objetivo primordial para PB, y la VT demostró ser una herramienta fundamental para lograrlo con una gran fluidez. Su atractivo generalizado entre nuestra comunidad de desarrolladores y nuestra base de usuarios nos ha llenado de entusiasmo. A medida que contemplamos su integración en diversos POD, prevemos 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 vista? Estos son algunos recursos que puedes consultar para obtener más información: