Le transizioni offrono numerosi vantaggi per gli utenti, tra cui la possibilità di mantenere il contesto e ridurre la percezione della latenza. Gli sviluppatori vogliono la possibilità di creare transizioni fluide tra le pagine, contribuendo ad aumentare il coinvolgimento degli utenti con il loro sito.
Tuttavia, l'attivazione delle transizioni di stato era molto difficile, in quanto richiedeva agli sviluppatori di gestire gli stati di due elementi diversi. Anche un semplice crossfade richiede la presenza di entrambi gli stati contemporaneamente. che presenta problemi di usabilità, ad esempio la gestione di interazioni aggiuntive sull'elemento in uscita. Per gli utenti di dispositivi assistivi, c'è un periodo in cui sia lo stato precedente che quello successivo si trovano contemporaneamente nel DOM. Inoltre, gli elementi potrebbero spostarsi nell'albero in modo visivamente accettabile, ma che può facilmente causare la perdita della posizione di lettura e della messa a fuoco.
L'API View Transitions, lanciata in Chrome 111, consente di creare transizioni fluide e semplici tra le pagine. Ti consente di apportare modifiche al DOM senza sovrapposizioni tra gli stati e di avere un'animazione di transizione tra gli stati utilizzando le visualizzazioni acquisite.
Ti starai chiedendo quanto sia facile da implementare. Quali tipi di casi d'uso esistono? In che modo altri sviluppatori utilizzano le transizioni di visualizzazione?
Questo articolo illustra l'implementazione delle transizioni di visualizzazione in quattro diversi siti web: RedBus (viaggi), CyberAgent (editore di notizie/blog), Nykaa (e-commerce) e PolicyBazaar (assicurazioni) e come i loro siti web hanno tratto vantaggio in modi diversi dall'utilizzo dell'API View Transitions.
redBus
redBus, parte del gruppo MakeMyTrip, è un sito web di prenotazione e biglietteria di autobus con sede a Bangalore, in India, e presente in diverse aree geografiche a livello globale. È stato uno dei primi siti web a implementare un'esperienza utilizzando l'API View Transitions.
Perché Redbus ha implementato le transizioni di visualizzazione?
Il team di redBus crede fermamente nell'offerta di un'esperienza web unificata e simile a un'app, il più possibile vicina alle loro app native. Infatti, nel corso degli anni aveva implementato diverse soluzioni personalizzate. Ad esempio, hanno implementato animazioni JavaScript e CSS personalizzate per le transizioni di pagina prima ancora che venisse sviluppata l'API View Transitions. Tuttavia, ciò significava che dovevano gestire la gestione delle prestazioni nei segmenti inferiori di rete e dispositivi, il che a volte portava a un'esperienza differenziale con una strategia di caricamento adattivo in atto.
redBus ha utilizzato le transizioni di visualizzazione per più percorsi utente. Ad esempio, nella sezione di autoassistenza all'interno dell'app mobile, che apriva pagine web in Schede personalizzate di Chrome, e nel funnel di prenotazione dei biglietti dell'autobus, in cui gli utenti passano dalla pagina dell'elenco dell'inventario alla pagina dei pagamenti. In quest'ultimo caso, le transizioni di visualizzazione hanno reso più fluida la navigazione da una pagina all'altra e hanno comportato un aumento del tasso di conversione. Ciò è stato il risultato di una migliore esperienza utente e di una migliore percezione delle prestazioni durante l'esecuzione delle operazioni pesanti, come il recupero dell'inventario disponibile più aggiornato.
Dettagli tecnici dell'implementazione
redBus utilizza React e EJS come stack tecnologico frontend, con una combinazione di SPA e MPA in diversi percorsi. Il seguente estratto di codice mostra come vengono utilizzate le transizioni di visualizzazione:
/* 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();
}
};
Nel seguente CSS, slide-to-right, slide-to-left, slide-from-right e slide-from-left sono keyframe di animazione 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;
}
Impatto sul business
redBus ha scelto di implementare le transizioni di visualizzazione insieme agli sforzi per migliorare l'INP sul proprio sito, il che ha portato a un aumento delle vendite del 7%. Amit Kumar, Senior Engineering Manager di redBus, ha affermato che le transizioni di visualizzazione sono davvero fantastiche per chi vuole un'esperienza utente migliore e desidera meno overhead di manutenzione.
Abbiamo condotto sessioni complete di feedback degli utenti, incorporando informazioni preziose provenienti da un gruppo eterogeneo di utenti. La nostra profonda conoscenza della base utenti (autobus e treni) e delle loro esigenze, combinata con la nostra esperienza, ci ha portato a ritenere che questa funzionalità fornirà un valore significativo fin dall'inizio, senza la necessità di test A/B. Le transizioni di visualizzazione sono un passo avanti verso la riduzione del divario tra app e web con un'esperienza di navigazione fluida.
Anoop Menon, CTO redBus
CyberAgent
CyberAgent è un'azienda IT con sede in Giappone che fornisce molti servizi online, tra cui la pubblicazione di blog e notizie.
Perché CyberAgent ha implementato le transizioni di visualizzazione?
In passato, CyberAgent aveva preso in considerazione l'utilizzo di animazioni CSS o di un framework per implementare transizioni animate per migliorare l'esperienza utente, ma era preoccupata per le scarse prestazioni nel rendering del DOM e per la manutenibilità del codice. Quando Chrome ha aggiunto il supporto per l'API View Transitions, gli sviluppatori erano entusiasti di utilizzarla per creare transizioni di pagina coinvolgenti che superassero queste sfide.
CyberAgent ha implementato le transizioni di visualizzazione tra l'elenco dei blog e la pagina del blog. Qui, nota come hanno aggiunto la transizione dell'elemento all'immagine hero. Puoi visitare il sito e provarlo oggi stesso.
Hanno anche utilizzato le query supporti per progettare diverse esperienze di animazione per dispositivi diversi. Per le pagine mobile hanno incluso le transizioni degli elementi, ma questo effetto era troppo dinamico per il desktop.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Dettagli tecnici dell'implementazione
CyberAgent utilizza Next.js per creare la propria SPA. Il seguente esempio di codice mostra come utilizzano l'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]);
};
Visualizza altri esempi di codice Next.js.
Visualizzare le transizioni per le MPA con la tecnologia di prerendering
CyberAgent ha anche provato la nostra nuova API View Transitions per le app multipagina (MPA) (attualmente contrassegnata dal flag chrome://flags/#view-transition-on-navigation) su un servizio chiamato Ameba News, un sito portale di notizie.
Le transizioni di visualizzazione sono state utilizzate in due punti: il primo è quando si cambiano le categorie delle notizie, come mostrato nel video seguente.
Il secondo è tra la pagina di evidenziazione delle notizie, in cui viene mostrato un estratto dei contenuti, e il momento in cui l'utente fa clic su Mostra altri dettagli, il resto dell'articolo viene visualizzato gradualmente.
La cosa interessante è che hanno aggiunto l'animazione solo alla parte che cambierà dopo che è stato fatto clic sul pulsante. Questa piccola modifica del design dell'animazione fa apparire la pagina MPA più simile a una SPA dal punto di vista dell'utente, con l'animazione dei soli nuovi contenuti:
Ecco come hanno fatto: hanno assegnato un view-transition-name diverso alle diverse parti della pagina. Ad esempio, hanno assegnato un view-transition-name alla parte superiore dell'articolo, un altro alla parte inferiore e non hanno aggiunto animazioni alla parte superiore.
::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;
}
Un altro aspetto interessante dell'utilizzo dell'API View Transitions da parte di CyberAgent è che ha utilizzato quicklink per implementare facilmente le regole di prerendering nella pagina dei dettagli. Ecco il codice di esempio:
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}/`);
});
Puoi scoprire di più sull'implementazione dei quicklink in questo articolo.
Testimonianza
Kazunari Hara, Tech Lead del servizio Ameba di CyberAgent, ha affermato che le transizioni di visualizzazione potrebbero avere un impatto significativo sull'attività per due motivi.
Innanzitutto, guidano gli utenti nella pagina. Le transizioni di visualizzazione consentono di concentrare visivamente l'attenzione degli utenti sul messaggio più importante e di ottenere il massimo dalla pagina web. Inoltre, migliorano ed enfatizzano il brand con l'animazione. CyberAgent ha un design dell'animazione dedicato per comunicare il proprio brand. Con le transizioni di visualizzazione, possono implementare questa esperienza brandizzata senza aggiungere il costo di manutenzione delle librerie esterne.
View Transitions è una delle mie API preferite. La possibilità di aggiungere animazioni come funzionalità standard del browser rende le transizioni di visualizzazione più facili da implementare e gestire rispetto ad altre soluzioni dipendenti dalle librerie. Non vediamo l'ora di implementare le transizioni di visualizzazione in altri servizi per comunicare il nostro brand.
Kazunari Hara, CTO di Ameba
Nykaa
Nykaa è la più grande piattaforma di e-commerce di moda e bellezza dell'India. Il loro obiettivo è rendere l'esperienza sul web mobile il più simile possibile a quella dell'app nativa. Quando in precedenza hanno tentato di implementare animazioni di transizione, hanno avuto difficoltà a scrivere codice JavaScript personalizzato complesso. Ciò ha influito anche in modo marginale sulle prestazioni del loro sito web.
Perché Nykaa ha implementato le transizioni di visualizzazione?
Con l'arrivo delle transizioni di visualizzazione, il team di Nykaa ha visto un'opportunità in cui queste transizioni disponibili in modo nativo significavano che l'esperienza utente delle transizioni di pagina poteva essere migliorata in modo significativo senza costi per il rendimento. Nykaa utilizza molto le transizioni di visualizzazione per passare dalla pagina dei dettagli del prodotto alla pagina dell'elenco dei prodotti.
Dettagli tecnici dell'implementazione
Nykaa ha utilizzato React ed Emotion per creare la propria SPA. Altri esempi di codice su come utilizzare le transizioni di visualizzazione con React sono disponibili qui.
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 per l'animazione del riquadro laterale:
::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};
}
Testimonianza
Sunit Jindal, responsabile delle app di Nykaa, ha affermato che il vantaggio principale della transizione di visualizzazione è la "percezione di velocità". Nykaa ha utilizzato gli effetti luccicanti per attendere il caricamento dei contenuti dal backend, ma ha scoperto che la visualizzazione dell'effetto luccicante non forniva agli utenti un'indicazione del tempo di attesa per il caricamento dei contenuti. Con le transizioni di visualizzazione, la transizione stessa ha dato agli utenti la sensazione che "qualcosa sta per accadere", il che ha reso l'attesa meno dolorosa.
Nykaa è rimasta molto entusiasta della UX della sua pagina web appena migliorata con le transizioni di visualizzazione ed è pronta a implementarle anche in altre pagine. Ecco cosa ha dichiarato il loro VP of Design:
Ci impegniamo a implementare le transizioni di visualizzazione in tutte le funzionalità future in cui è opportuno. Alcune aree sono già state identificate e il team sta investendo attivamente in queste.
Krishna R V, VP of Design
PolicyBazaar
Con sede a Gurgaon, PolicyBazaar è il più grande aggregatore di assicurazioni e società multinazionale di tecnologia finanziaria dell'India.
Perché PolicyBazaar ha implementato le transizioni di visualizzazione?
In quanto azienda incentrata sul web, il team di PolicyBazaar ha sempre mirato a fornire la migliore esperienza utente possibile nei percorsi utente critici. Era prassi comune implementare transizioni personalizzate utilizzando JavaScript e CSS anche prima del lancio dell'API View Transitions, in quanto miglioravano l'esperienza utente, creavano un flusso di navigazione senza interruzioni e miglioravano l'aspetto visivo complessivo dei siti web.
Tuttavia, queste implementazioni personalizzate hanno comportato ritardi occasionali basati sulle prestazioni, complessità di manutenzione del codice e compatibilità non ottimale con i framework utilizzati. L'API View Transitions li ha aiutati a superare la maggior parte di queste sfide fornendo un'interfaccia facile da usare con vantaggi in termini di prestazioni disponibili in modo nativo.
PolicyBazaar ha utilizzato le transizioni di visualizzazione in diversi elementi dei percorsi pre-preventivo per rendere più interessante per i potenziali acquirenti fornire i dettagli richiesti per l'acquisto di polizze assicurative.
Dettagli tecnici dell'implementazione
Utilizzano un approccio di framework ibrido con Angular e React che dominano la maggior parte del codebase. Ecco l'estratto di VT dal codice scritto in Angular e condiviso da Aman Soni (Lead Frontend Developer di 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');
}
Testimonianza
Rishabh Mehrotra, responsabile del design (Life BU), ha affermato che le transizioni di visualizzazione hanno svolto un ruolo significativo nel migliorare l'esperienza del sito web per gli utenti, migliorando usabilità, coinvolgimento e soddisfazione complessiva. Ha contribuito a fornire una navigazione fluida, un'interazione guidata, un carico cognitivo ridotto, un'estetica moderna e molto altro ancora.
Migliorare l'esperienza web è un obiettivo fondamentale per PB e VT si è dimostrato uno strumento essenziale per raggiungere questo obiettivo con una fluidità straordinaria. Il suo ampio appeal sia per la nostra community di sviluppatori sia per la base utenti ha infuso nel nostro team un senso di entusiasmo. Man mano che ne valutiamo l'integrazione in diversi POD, prevediamo un impatto positivo di vasta portata sui livelli di soddisfazione e sull'eccellenza operativa.
Saurabh Tiwari (CTO, PolicyBazaar)
Passaggi successivi
Ti interessa provare le transizioni di visualizzazione? Ecco alcune risorse che puoi consultare per saperne di più: