Las transiciones tienen numerosos beneficios para los usuarios, como ayudarlos a mantenerse en contexto y reducir la percepción de latencia. Los desarrolladores desean 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 tan simple como una transición suave implica que ambos estados estén presentes al mismo tiempo. Eso presenta desafíos de usabilidad, como la administración de la interacción adicional en el elemento saliente. Para los usuarios de dispositivos de accesibilidad, hay un período en el que el estado anterior y el posterior se encuentran 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 estados y tener una animación de transición entre los estados con vistas de instantáneas.
Te preguntarás qué tan fácil es implementarlo. ¿Qué tipos de casos de uso hay? ¿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 el uso de la API de View Transitions.
redBus
redBus, parte del grupo MakeMyTrip, es un sitio web de reserva y venta de boletos de autobús con sede en Bangalore, India, y presencia en diferentes geografías de todo el mundo. 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 de inventario a la página de pagos. En el último caso, las transiciones de vista facilitaron la navegación de página a página y aumentaron 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 de tecnología 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 una mejor experiencia del usuario y desean menos sobrecarga de mantenimiento.
Realizamos sesiones de comentarios de usuarios integrales, en las que incorporamos estadísticas valiosas 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 blogs y noticias.
¿Por qué CyberAgent implementó las transiciones de vistas?
En el pasado, CyberAgent había considerado usar animaciones de CSS o un framework para implementar transiciones animadas para mejorar la experiencia del usuario, 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, con la marca chrome://flags/#view-transition-on-navigation) en un servicio llamado Ameba News, que es un sitio de portal de noticias.
Las transiciones de vista se usaron 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 transiciones de vistas es que usó el vínculo directo 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 vista, 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 vista 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ó las 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 compilar 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, dijo 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 cargara el contenido desde el backend, pero descubrió que mostrar el efecto de brillo no les indicaba a los usuarios cuánto tiempo tendrían que 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 otras páginas. 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 vista?
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 vista en diferentes elementos de sus recorridos previos a la cotización para que sea emocionante para los compradores potenciales proporcionar los detalles necesarios para comprar pólizas de seguro.
Detalles técnicos de la implementación
Usan un enfoque de framework híbrido con Angular y React que 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 principal 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, 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, PolicyBazaar)
Próximos pasos
¿Te interesa probar las transiciones de vista? Estos son algunos recursos que puedes consultar para obtener más información: