As transições têm inúmeros benefícios para os usuários, incluindo ajudar a mantê-los em contexto e reduzir a percepção de latência. Os desenvolvedores querem criar transições perfeitas entre as páginas, ajudando a aumentar o engajamento do usuário com o site.
No entanto, ativar as transições de estado era muito difícil porque exigia que os desenvolvedores gerenciassem estados de dois elementos diferentes. Mesmo algo como um simples cross-fade envolve a presença dos dois estados 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" ficam no DOM ao mesmo tempo. Além disso, as coisas podem se mover ao redor da árvore de uma maneira que seja visualmente boa, mas pode facilmente perder a posição de leitura e o foco.
Lançada no Chrome 111, a API View Transitions permite a criação de transições simples e suaves entre páginas. Ele permite que você faça mudanças no DOM sem nenhuma sobreposição entre estados e tenha uma animação de transição entre os estados usando visualizações com snapshots.
Você deve estar se perguntando: qual é o grau de facilidade da implementação? Que tipo de casos de uso existem? Como outros desenvolvedores estão usando as transições de visualização?
Este artigo mostra a implementação de transições de visualização em quatro sites diferentes: RedBus (viagem), CyberAgent (editora de notícias/blog), Nykaa (e-commerce) e PolicyBazaar (seguros) e como os sites se beneficiaram de diferentes maneiras usando a API View Transitions.
redBus
A redBus, parte do grupo MakeMyTrip, é um site de reservas e passagens de ônibus com sede em Bangalore, Índia, com presença em diferentes regiões geográficas 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 da redBus acredita firmemente em fornecer uma experiência na Web unificada, semelhante à de aplicativo, que seja o mais próxima possível de seus aplicativos 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 do desenvolvimento da API View Transitions. No entanto, isso significava que eles precisavam lidar com o gerenciamento de desempenho em segmentos menores de rede e dispositivos, ocasionalmente levando a uma experiência diferencial com uma estratégia de carregamento adaptável em vigor.
A redBus usou transições de visualização para várias jornadas do usuário. Por exemplo, na seção de autoajuda no 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 página a página mais suave e resultaram em um aumento em sua taxa de conversão. Isso foi resultado de uma melhor experiência do usuário e de uma performance melhor, enquanto as operações pesadas, como buscar o inventário mais atualizado disponível, eram executadas.
Detalhes técnicos da implementação
A redBus usa React e EJS como um conjunto de tecnologias de front-end, com uma combinação de SPAs e MPAs em diferentes jornadas. O exemplo de código abaixo 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 frames-chave 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 decidiu implementar transições de visualizações junto com os esforços de melhoria da INP em todo o site, o que levou a um aumento de 7% nas vendas. Amit Kumar, gerente de engenharia sênior da redBus, disse que as transições de visualização são realmente incríveis para quem realmente quer uma melhor experiência do usuário e menos sobrecarga de manutenção.
Realizamos sessões abrangentes de feedback dos usuários, incorporando insights valiosos de um grupo diversificado de usuários. Nosso conhecimento profundo da nossa base de usuários (ônibus e trens) e as necessidades deles, combinado com nossa experiência, nos levou a acreditar que esse recurso trará um valor significativo desde o início, sem a necessidade de testes A/B. As transições de visualização são uma etapa para preencher a lacuna entre o app e a Web com uma experiência de navegação tranquila.
Anoop Menon, CTO da redBus
CyberAgent
A CyberAgent é uma empresa de TI sediada no Japão que oferece muitos serviços on-line, incluindo publicação de blogs e de notícias.
Por que o CyberAgent implementou transições de visualização?
No passado, a CyberAgent considerou usar animações CSS ou um framework para implementar transições animadas e melhorar a experiência do usuário, mas estava preocupada com o baixo desempenho na renderização do DOM e a manutenção do código. Quando o Chrome incluiu o suporte para a API View transições, a empresa adorou usá-la para criar transições de página envolventes que superaram esses desafios.
O CyberAgent implementou transições de visualização entre a lista de blogs e a página do blog. Observe como eles adicionaram a transição de elementos à imagem principal. Acesse o site e teste o recurso hoje mesmo.
Ela também usou consultas de mídia para criar diferentes experiências de animação para diferentes dispositivos. Nas páginas para dispositivos móveis, elas incluíam transições de elementos, mas esse efeito causava muito movimento para computadores.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Detalhes técnicos da implementação
O CyberAgent usa o Next.js para criar o SPA. O exemplo de código abaixo 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.
Ver transições para MPA com tecnologia de pré-renderização
O CyberAgent também testou nossa nova API View Transitions for Multiple Page Apps (MPA) (atualmente sob a flag chrome://flags/#view-transition-on-navigation) em um serviço chamado Ameba News, que é 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, mostradas no vídeo a seguir.
O segundo é entre a página de destaques de notícias, onde um trecho do conteúdo é exibido, e quando o usuário clica para Ver mais detalhes, o restante do artigo é exibido.
O interessante é que eles só adicionaram animação à parte que será alterada depois que o botão for clicado. Esse pequeno ajuste do design da animação faz com que a página da MPA pareça mais como um SPA do ponto de vista do usuário, com a animação do novo conteúdo em:
Confira como eles fizeram isso: eles atribuiram um view-transition-name diferente para as diversas partes da página. Por exemplo, ele atribuiu uma view-transition-name à parte de cima do artigo e outra à parte de baixo, sem adicionar 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;
}
Outra coisa interessante sobre o uso da API de transições de visualização pela CyberAgent é que eles usaram o quicklink para implementar facilmente regras de pré-renderização na página de detalhes. Confira um 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 dos links rápidos neste artigo.
Depoimento
Kazunari Hara, líder de tecnologia 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 possibilitam focar visualmente na mensagem mais importante e os ajudam a aproveitar ao máximo a página da Web. Além disso, eles melhoram e enfatizam a marca com animações. A CyberAgent tem um design de animação designado para comunicar a marca. Com as transições de visualização, é possível implementar essa experiência de marca sem adicionar o custo de manutenção de bibliotecas externas.
View Transitions é uma das minhas APIs favoritas. A capacidade de adicionar animações como um recurso padrão do navegador torna as transições de visualização mais fáceis de implementar e manter em comparação com outras soluções dependentes de bibliotecas. Estamos ansiosos para implementar transições de visualização para 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 deles é tornar a experiência na Web para dispositivos móveis o mais próxima possível da experiência no aplicativo nativo. Antes, quando tentavam implementar animações de transição, eles tinham dificuldade para escrever JavaScript personalizado complexo. Isso também teve um impacto marginal no desempenho do site.
Por que Nykaa implementou transições de visualização?
Com a chegada das transições de visualização, a equipe de Nykaa viu uma oportunidade em que essas transições estavam disponíveis nativamente fez com que a UX das transições de página pudesse ser significativamente aprimorada sem custo para o desempenho. Nykaa está usando bastante as transições de visualização para mudar da página de detalhes do produto para a de informações do produto.
Detalhes técnicos da implementação
A Nykaa usou React e Emotion para criar o SPA. Confira aqui mais exemplos de código sobre como usar transições de visualizações com o 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 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 é a "percepção da velocidade". Nykaa usou os efeitos de brilho para aguardar o carregamento do conteúdo no back-end, mas descobriu que mostrar esse efeito não indicava aos usuários quanto tempo eles precisariam esperar. Com as transições de visualização, a própria transição deu aos usuários a sensação de que "algo está prestes a acontecer", o que tornou a espera menos chata.
Nykaa estava muito animada com a UX recém-aprimorada da página da Web com transições de visualização e está pronta para implementar essas transições também em outras páginas. Aqui está o que o vice-presidente de design dele disse:
Estamos levemente comprometidos em implementar transições de visualização em todos os próximos recursos, quando fizer sentido. Algumas áreas já foram identificadas e a equipe está investindo ativamente nelas.
Krishna R V, vice-presidente de design
PolicyBazaar
Com sede em Gurgaon, a PolicyBazaar é a maior empresa multinacional de tecnologia financeira e agregador de seguros da Índia.
Por que o PolicyBazaar implementou transições de visualização?
Como uma empresa que prioriza a Web, a equipe da PolicyBazaar sempre buscou fornecer a melhor experiência do usuário possível em suas jornadas ideais. Era uma prática comum implementar transições personalizadas usando JavaScript e CSS mesmo antes do lançamento da API View Transitions, já que elas aprimoravam a experiência do usuário, criavam um fluxo de navegação contínuo e melhoravam o apelo visual geral dos sites.
No entanto, essas implementações personalizadas tiveram um custo de atrasos ocasionais com base no desempenho, complexidades de manutenção de código e compatibilidade abaixo do ideal com os frameworks usados. A API View Transitions ajudou a empresa a superar a maioria desses desafios, oferecendo uma interface fácil de usar com benefícios de desempenho disponíveis de forma nativa.
O PolicyBazaar usou transições de visualização em diferentes elementos na jornada antes da cotação para que os compradores em potencial pudessem fornecer os detalhes necessários para a compra de apólices de seguro.
Detalhes técnicos da implementação
Ela usa uma abordagem de framework híbrido com o Angular e o React dominando a maior parte da base de código. Veja o trecho da VT do código escrito em Angular e compartilhado por Aman Soni (desenvolvedor líder de front-end do 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 da organização Life BU, disse que as transições de visualização desempenham um papel significativo na melhoria da experiência no site para os usuários, melhorando a usabilidade, o engajamento e a satisfação geral. Ele ajudou a proporcionar uma navegação tranquila, interação guiada, carga cognitiva reduzida, estética moderna e muito mais.
Melhorar a experiência na Web é um objetivo fundamental para o PB, e a VT provou ser uma ferramenta fundamental para alcançar esse objetivo com uma perfeição notável. Seu amplo apelo entre nossa comunidade de desenvolvedores e base de usuários infundiu nossa equipe com um senso de entusiasmo. Ao contemplar a integração entre diversos PODs, prevemos um impacto positivo de grande alcance 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 que você pode consultar para saber mais: