As transições têm vários benefícios para os usuários, incluindo ajudar a mantê-los no contexto e reduzir a percepção de latência. Os desenvolvedores querem criar transições perfeitas entre páginas, o que ajuda a aumentar o engajamento dos usuários com o site.
No entanto, ativar transições de estado era muito difícil, já que exigia que os desenvolvedores gerenciassem estados de dois elementos diferentes. Até mesmo algo como um crossfade simples envolve os dois estados presentes ao mesmo tempo. Isso apresenta desafios de usabilidade, como lidar com interações adicionais no elemento de saída. Para usuários de dispositivos assistivos, há um período em que os estados antes e depois estão no DOM ao mesmo tempo. Além disso, as coisas podem se mover pela árvore de uma forma visualmente aceitável, mas que pode facilmente causar a perda da posição de leitura e do foco.
Lançada no Chrome 111, a API View Transitions permite a criação de transições suaves e simples entre páginas. Ele permite que você mude o DOM sem sobreposição entre estados e tenha uma animação de transição entre os estados usando visualizações de snapshot.
Talvez você esteja se perguntando: "É fácil implementar?" Quais são os tipos de casos de uso? Como outros desenvolvedores estão usando transições de visualização?
Este artigo mostra a implementação de transições de visualização em quatro sites diferentes: RedBus (viagens), CyberAgent (editor de notícias/blogs), Nykaa (e-commerce) e PolicyBazaar (seguros). Ele também explica como esses sites se beneficiaram de diferentes maneiras ao usar a API View Transitions.
redBus
A redBus, parte do grupo MakeMyTrip, é um site de reserva e venda de passagens de ônibus com sede em Bangalore, na Índia, e presença em diferentes regiões do mundo. Ele foi um dos primeiros sites a implementar uma experiência usando a API View Transitions.
Por que a Redbus implementou transições de visualização?
A equipe do redBus acredita em oferecer uma experiência unificada e parecida com um app na Web, o mais próximo possível dos apps nativos. Na verdade, eles implementaram várias soluções personalizadas ao longo dos anos. Por exemplo, eles lançaram animações personalizadas baseadas em JavaScript e CSS para as transições de página antes mesmo de a API View Transitions ser desenvolvida. No entanto, isso significava que eles precisavam lidar com o gerenciamento de desempenho em segmentos inferiores de rede e dispositivos, o que às vezes levava a uma experiência diferente com uma estratégia de carregamento adaptável.
O redBus usou transições de visualização para várias jornadas do usuário. Por exemplo, na seção de autoajuda do app para dispositivos móveis, que abria páginas da Web em guias personalizadas do Chrome, e no funil de reserva de passagens de ônibus, em que os usuários vão da página de listagem de inventário para a página de pagamentos. No último caso, as transições de visualização tornaram a navegação de página a página mais suave e resultaram em um aumento na taxa de conversão. Isso foi resultado de uma melhor experiência do usuário e de um desempenho percebido melhor enquanto as operações pesadas, como buscar o inventário disponível mais atualizado, eram executadas.
Detalhes técnicos da implementação
A redBus usa React e EJS como pilha de tecnologia de front-end, com uma combinação de SPAs e MPAs em diferentes jornadas. O trecho de código a seguir mostra como as transições de visualização são usadas:
/* 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();
}
};
No CSS a seguir, slide-to-right, slide-to-left, slide-from-right e slide-from-left são keyframes de animação 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 nos negócios
A redBus implementou transições de visualização e melhorias no INP em todo o site, o que resultou em 7% mais vendas. Amit Kumar, gerente sênior de engenharia da redBus, disse que as transições de visualização são realmente incríveis para quem quer uma experiência do usuário melhor e menos sobrecarga de manutenção.
Realizamos sessões abrangentes de feedback dos usuários, incorporando insights valiosos de um grupo diversificado de pessoas. Nosso profundo conhecimento da base de usuários (ônibus e trem) e das necessidades deles, combinado com nossa experiência, nos leva a acreditar que esse recurso vai agregar valor significativo desde o início, sem a necessidade de testes A/B. As transições de visualização são uma etapa para reduzir a diferença entre apps e a Web com uma experiência de navegação tranquila.
Anoop Menon, CTO da redBus
CyberAgent
A CyberAgent é uma empresa de TI com sede no Japão que oferece muitos serviços on-line, incluindo publicação de blogs e notícias.
Por que a CyberAgent implementou transições de visualização?
A CyberAgent já tinha pensado em usar animações CSS ou um framework para implementar transições animadas e melhorar a experiência do usuário, mas se preocupava com o desempenho ruim na renderização do DOM e a capacidade de manutenção do código. Quando o Chrome adicionou suporte à API View Transitions, a equipe ficou animada para usá-la e criar transições de página envolventes que superassem esses desafios.
A CyberAgent implementou transições de visualização entre a lista e a página do blog. Aqui, observe como eles adicionaram a transição de elemento à imagem principal. Acesse o site e confira ao vivo hoje mesmo.
Eles também usaram consultas de mídia para projetar diferentes experiências de animação para diferentes dispositivos. Para páginas de dispositivos móveis, eles incluíram transições de elementos, mas esse efeito tinha muito movimento para computadores.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Detalhes técnicos da implementação
A CyberAgent usa o Next.js para criar o SPA. O exemplo de código a seguir demonstra como eles usam a 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]);
};
Confira mais exemplos de código do Next.js.
Transições de visualização para MPA com tecnologia de pré-renderização
A CyberAgent também testou nossa nova API View Transitions para apps de várias páginas (MPA) (atualmente na flag chrome://flags/#view-transition-on-navigation) em um serviço chamado Ameba News, um site de portal de notícias.
As transições de visualização foram usadas em dois lugares: o primeiro é ao mudar as categorias das notícias, mostrado no vídeo a seguir.
A segunda é entre a página de destaque de notícias, em que um trecho do conteúdo é mostrado, e quando o usuário clica em Ver mais detalhes, o restante do artigo aparece.
O interessante é que eles só adicionaram animação à parte que vai mudar depois que o botão for clicado. Essa pequena mudança no design da animação faz com que a página MPA pareça mais um SPA do ponto de vista do usuário, com apenas o novo conteúdo sendo animado:
Para fazer isso, eles atribuíram um view-transition-name diferente às diferentes partes da página. Por exemplo, eles atribuíram um view-transition-name à parte de cima do artigo, outro à parte de baixo e não adicionaram animação à parte de cima.
::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;
}
Outro aspecto interessante do uso da API View Transitions pela CyberAgent é que ela usou o quicklink para implementar facilmente regras de pré-renderização na página de detalhes. Confira o exemplo de código:
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}/`);
});
Leia mais sobre a implementação de links rápidos neste artigo.
Depoimento
Kazunari Hara, líder técnico do serviço Ameba na CyberAgent, disse que as transições de visualização podem ter um impacto significativo nos negócios por dois motivos.
Primeiro, eles orientam os usuários na página. As transições de visualização permitem focar visualmente os usuários na mensagem mais importante e ajudam a aproveitar ao máximo a página da Web. Além disso, eles melhoram e enfatizam a marca com animação. A CyberAgent tem um design de animação específico para comunicar a marca. Com as transições de visualização, eles podem implementar essa experiência de marca sem adicionar o custo de manutenção de bibliotecas externas.
A API View Transitions é uma das minhas favoritas. A capacidade de adicionar animações como um recurso padrão do navegador facilita a implementação e a manutenção das transições de visualização em comparação com outras soluções dependentes de bibliotecas. Estamos ansiosos para implementar transições de visualização em mais serviços para comunicar nossa marca.
Kazunari Hara, CTO da Ameba
Nykaa
A Nykaa é a maior plataforma de e-commerce de moda e beleza da Índia. O objetivo é deixar a experiência na Web para dispositivos móveis o mais parecida possível com a experiência do app nativo. Antes, ao tentar implementar animações de transição, eles tinham dificuldade em escrever JavaScript personalizado complexo. Isso também afetou marginalmente a performance do site.
Por que a Nykaa implementou transições de visualização?
Com a chegada das transições de visualização, a equipe da Nykaa viu uma oportunidade em que essas transições disponíveis de forma nativa significavam que a UX das transições de página poderia ser significativamente melhorada sem custo para o desempenho. A Nykaa usa muito as transições de visualização para passar da página de detalhes do produto para a página de informações do produto.
Detalhes técnicos da implementação
A Nykaa usou o React e o Emotion (em inglês) para criar o SPA. Mais exemplos de código sobre como usar transições de visualização com React podem ser encontrados aqui.
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 animação da gaveta 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};
}
Depoimento
Sunit Jindal, chefe de apps da Nykaa, disse que o maior benefício da transição de visualização foi a "percepção de velocidade". A Nykaa usou os efeitos de brilho para aguardar o carregamento do conteúdo do back-end, mas descobriu que mostrar esse efeito não informava aos usuários quanto tempo eles precisariam esperar. Com as transições de visualização, a transição em si dava aos usuários a sensação de que "algo está prestes a acontecer", o que tornava a espera menos dolorosa.
A Nykaa ficou muito satisfeita com a UX aprimorada da página da Web com transições de visualização e está pronta para implementar transições de visualização em outras páginas também. Veja o que o vice-presidente de design disse:
Estamos trabalhando para implementar transições de visualização em todos os próximos recursos em que isso fizer sentido. Algumas áreas já foram identificadas, e a equipe está investindo nelas.
Krishna R V, vice-presidente de design
PolicyBazaar
Com sede em Gurgaon, a PolicyBazaar é a maior agregadora de seguros e empresa multinacional de tecnologia financeira da Índia.
Por que a PolicyBazaar implementou transições de visualização?
Como uma empresa que prioriza a Web, a equipe da PolicyBazaar sempre buscou oferecer a melhor experiência possível ao usuário em todas as jornadas críticas. Era comum implementar transições personalizadas usando JavaScript e CSS, mesmo antes do lançamento da API View Transitions, porque elas melhoravam a experiência do usuário, criavam um fluxo de navegação integrado e aumentavam o apelo visual geral dos sites.
No entanto, essas implementações personalizadas resultaram em atrasos ocasionais baseados em desempenho, complexidades de manutenção de código e compatibilidade abaixo do ideal com os frameworks usados. A API View Transitions ajudou a superar a maioria desses desafios ao fornecer uma interface fácil de usar com benefícios de performance disponíveis de forma nativa.
A PolicyBazaar usou transições de visualização em diferentes elementos nas jornadas de pré-cotação para tornar mais interessante aos compradores em potencial fornecer os detalhes necessários para comprar apólices de seguro.
Detalhes técnicos da implementação
Eles usam uma abordagem de framework híbrido com Angular e React dominando a maior parte da base de código. Confira o trecho do VT do código escrito em Angular e compartilhado por Aman Soni (desenvolvedor principal de front-end da 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');
}
Depoimento
Rishabh Mehrotra, chefe de design (Life BU), disse que as transições de visualização tiveram um papel importante na melhoria da experiência do site para os usuários, aumentando a usabilidade, o engajamento e a satisfação geral. Isso ajudou a oferecer navegação tranquila, interação guiada, redução da carga cognitiva, estética moderna e muito mais.
Melhorar a experiência na Web é um objetivo fundamental para a PB, e a VT provou ser uma ferramenta essencial para alcançar isso com uma integração notável. O apelo generalizado entre nossa comunidade de desenvolvedores e base de usuários deixou nossa equipe muito animada. Ao contemplar a integração em vários PODs, prevemos um impacto positivo abrangente nos níveis de satisfação e na excelência operacional.
Saurabh Tiwari (CTO, PolicyBazaar)
Próximas etapas
Você tem interesse em testar as transições de visualização? Confira alguns recursos para saber mais: