Le transizioni offrono numerosi vantaggi agli utenti, tra cui la possibilità di mantenere il contesto e ridurre la percezione della latenza. Gli sviluppatori vogliono poter creare transizioni fluide tra le pagine, contribuendo ad aumentare il coinvolgimento degli utenti con il loro sito.
Tuttavia, abilitare le transizioni di stato è stato molto difficile, in quanto richiedeva agli sviluppatori di gestire gli stati di due elementi diversi. Anche una semplice dissolvenza incrociata comporta la presenza di entrambi gli stati contemporaneamente. Ciò presenta problemi di usabilità, come la gestione di interazioni aggiuntive sull'elemento in uscita. Per gli utenti di dispositivi di assistenza, c'è un periodo in cui lo stato precedente e successivo sono nel DOM contemporaneamente. Inoltre, gli oggetti potrebbero muoversi intorno all'albero in un modo che non sia ben visibile, ma possono facilmente causare la perdita del punto di lettura e della messa a fuoco.
L'API View Transiziones, lanciata in Chrome 111, consente di creare transizioni semplici e fluide tra le pagine. Consente di apportare modifiche nel DOM senza sovrapposizioni tra gli stati e di creare un'animazione di transizione tra gli stati utilizzando le visualizzazioni istantanee.
Potresti chiederti quanto sia facile implementarla. Che tipo di casi d'uso esistono? In che modo gli altri sviluppatori utilizzano le transizioni di visualizzazione?
Questo articolo illustra l'implementazione delle transizioni delle visualizzazioni in quattro diversi siti web: RedBus (viaggi), CyberAgent (editore di notizie/blog), Nykaa (e-commerce) e PolicyBazaar (assicurazione) e i diversi vantaggi dei loro siti web usando l'API View Transiziones.
redBus
redBus, che fa parte del gruppo MakeMyTrip, è un sito web per la prenotazione e la vendita di biglietti di autobus con sede a Bangalore, in India, ed è presente in diverse aree geografiche a livello globale. È stato uno dei primi siti web a implementare un'esperienza utilizzando l'API View Transiziones.
Perché Redbus ha implementato le transizioni delle visualizzazioni?
Il team di redBus crede fermamente nella fornitura di un'esperienza web unificata, simile a un'app, che sia il più vicina possibile alle app native. Di fatto, nel corso degli anni aveva implementato molteplici soluzioni personalizzate. Ad esempio, ha implementato animazioni personalizzate basate su JavaScript e CSS per le transizioni di pagina anche prima dello sviluppo dell'API View Transiziones. Tuttavia, ciò significava dover gestire la gestione del rendimento in segmenti inferiori della rete e dei dispositivi, generando occasionalmente un'esperienza differenziale con l'implementazione di una strategia di caricamento adattivo.
redBus ha utilizzato le transizioni delle visualizzazioni per più percorsi degli utenti. ad esempio nella sezione di assistenza guidata all'interno dell'app mobile che ha aperto pagine web nelle schede di Chrome personalizzate e nella canalizzazione di prenotazione dei biglietti dell'autobus, in cui gli utenti passano dalla pagina della scheda dell'inventario alla pagina dei pagamenti. Nel secondo caso, le transizioni di visualizzazione hanno reso la navigazione da una pagina all'altra più fluida e hanno portato a un aumento del tasso di conversione. Questo è stato il risultato di una migliore esperienza utente e di prestazioni percepite migliori durante l'esecuzione delle operazioni più impegnative, come il recupero dell'inventario disponibile più aggiornato.
Dettagli tecnici dell'implementazione
redBus utilizza React ed EJS come stack tecnico di frontend, con una combinazione di SPA e MPA in diversi percorsi. Il seguente estratto di codice mostra come vengono utilizzate le transizioni delle visualizzazioni:
/* 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();
}
};
Nei seguenti CSS, slide-to-right, slide-to-left, slide-from-right e slide-from-left sono fotogrammi chiave 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 delle visualizzazioni insieme agli sforzi di miglioramento INP nel proprio sito, ottenendo un aumento delle vendite del 7%. Amit Kumar, Senior Engineering Manager di redBus, ha affermato che le transizioni delle visualizzazioni sono davvero fantastiche per coloro che vogliono davvero un'esperienza utente migliore e vogliono meno costi di manutenzione.
Abbiamo condotto delle sessioni complete di feedback degli utenti, incorporando informazioni preziose da un gruppo eterogeneo di utenti. La nostra profonda conoscenza della nostra base di utenti (autobus e ferroviari) e delle loro esigenze, unita alla nostra esperienza, ci ha portato a credere che questa funzionalità offrirà un valore aggiunto significativo fin dall'inizio, senza la necessità di test A/B. Le transizioni delle visualizzazioni sono un passo avanti per colmare il divario tra l'app e il web con un'esperienza di navigazione fluida.
Anoop Menon, CTO di redBus
CyberAgent
CyberAgent è una società IT con sede in Giappone che fornisce molti servizi online, tra cui blog e pubblicazioni di notizie.
Perché CyberAgent ha implementato le transizioni di visualizzazione?
In passato CyberAgent aveva preso in considerazione l'utilizzo di animazioni CSS o l'utilizzo di un framework per implementare transizioni animate al fine di migliorare l'esperienza utente, ma era preoccupata delle scarse prestazioni nel rendering del DOM e della manutenibilità del codice. Quando Chrome ha aggiunto il supporto per l'API View Transactions, era entusiasta di usarla per creare transizioni di pagina coinvolgenti che hanno superato queste sfide.
CyberAgent ha implementato le transizioni di visualizzazione tra l'elenco e la pagina del blog. Qui, osserva come è stata aggiunta la transizione degli elementi all'immagine hero. Puoi visitare il sito e scoprirlo subito dal vivo.
Inoltre, ha utilizzato query supporti per progettare esperienze di animazione diverse per dispositivi diversi. Nelle pagine mobile sono state incluse le transizioni degli elementi, ma questo effetto ha avuto un movimento eccessivo sulle pagine desktop.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Dettagli tecnici dell'implementazione
CyberAgent utilizza Next.js per creare il proprio SPA. Il seguente esempio di codice mostra come utilizzano l'API View Transizione.
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 altro codice Next.js di esempio.
Visualizza le transizioni per MPA con la tecnologia di prerendering
CyberAgent ha anche provato la nostra nuova API View Transiziones for Multiple Page Apps (MPA) (attualmente sotto il flag chrome://flags/#view-transition-on-navigation) su un servizio chiamato Ameba News, un sito di portale di notizie.
Le transizioni della visualizzazione sono state usate in due posizioni: la prima riguarda la modifica delle categorie delle notizie, mostrata nel seguente video.
Il secondo si trova tra la pagina in evidenza della notizia, dove viene mostrato un estratto dei contenuti e quando l'utente fa clic su Visualizza altri dettagli, il resto dell'articolo viene sbiadito.
Il punto interessante è che hanno aggiunto solo l'animazione alla parte che cambierà dopo il clic sul pulsante. Questa piccola modifica al design dell'animazione fa apparire la pagina MPA più simile a una SPA dal punto di vista dell'utente, con l'animazione solo dei nuovi contenuti:
Ecco come ha fatto: ha assegnato un view-transition-name diverso alle diverse parti della pagina. Ad esempio, ha assegnato view-transition-name alla parte superiore dell'articolo e un altro alla parte inferiore, senza aggiungere 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'uso dell'API View Transazione da parte di CyberAgent è l'utilizzo di quicklink per implementare facilmente le regole di prerendering nella pagina dei dettagli. Ecco il suo 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 leggere ulteriori informazioni sull'implementazione dei link rapidi in questo articolo.
Testimonianza
Kazunari Hara, Tech Lead del servizio Ameba di CyberAgent, ha affermato che le transizioni delle visualizzazioni potrebbero avere un impatto significativo sull'attività per due motivi.
Innanzitutto, guidano gli utenti nella pagina. Le transizioni della vista consentono di concentrare visivamente gli utenti sul messaggio più importante e li aiutano a sfruttare al massimo la pagina web. Inoltre, migliorano ed enfatizzano il brand con animazioni. CyberAgent ha un design di animazione designato per comunicare il proprio brand. Grazie alle transizioni di tipo View, gli utenti sono in grado di implementare questa esperienza con il brand senza aggiungere i costi di gestione delle librerie esterne.
View Transiziones è una delle mie API preferite. La possibilità di aggiungere animazioni come funzionalità standard del browser semplifica l'implementazione e la gestione delle transizioni di visualizzazione rispetto ad altre soluzioni dipendenti dalle librerie. Non vediamo l'ora di implementare le transizioni di visualizzazione a più 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. L'obiettivo è rendere la loro esperienza sul web mobile il più simile possibile a quella dell'app nativa. Quando precedentemente tentavano di implementare animazioni di transizione, aveva difficoltà a scrivere codice JavaScript personalizzato complesso. Ciò ha influito in modo marginale sul rendimento del sito web.
Perché Nykaa ha implementato le transizioni di tipo visualizzazione?
Con l'arrivo delle transizioni di visualizzazione, il team di Nykaa ha intravisto un'opportunità per cui queste transizioni erano disponibili in modo nativo e ciò significava che l'UX delle transizioni di pagina poteva essere notevolmente migliorata senza alcun costo in termini di rendimento. Nykaa fa molto uso delle transizioni di visualizzazione per passare dalla pagina dei dettagli del prodotto alla pagina della scheda del prodotto.
Dettagli tecnici dell'implementazione
Nykaa ha usato Reazioni ed Emozione per creare la propria SPA. Puoi trovare altri codici di esempio su come utilizzare Visualizza transizioni con React 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 a scomparsa 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 maggiore vantaggio della transizione di visualizzazione è stata la "percezione della velocità". Nykaa ha utilizzato gli effetti shimmer per attendere il caricamento dei contenuti dal backend, ma ha scoperto che mostrare questo effetto non forniva agli utenti il tempo di attesa del caricamento dei contenuti. Con le transizioni di visualizzazione, la transizione stessa ha fornito agli utenti la sensazione che "qualcosa stava per accadere", il che ha reso l'attesa meno difficile.
Nykaa era molto entusiasta dell'esperienza utente migliorata della sua pagina web con transizioni di visualizzazione ed è pronto a implementare queste transizioni anche in altre pagine. Ecco cosa ha detto il suo VP of Design:
Ci impegniamo a fondo per implementare le transizioni delle visualizzazioni in tutte le prossime funzionalità quando opportuno. Alcune aree sono già state identificate e il team sta investendo attivamente in queste.
Krishna R V, VP of Design
PolicyBazaar
PolicyBazaar, con sede a Gurgaon, è il più grande aggregatore assicurativo e multinazionale di tecnologia finanziaria dell'India.
Perché PolicyBazaar ha implementato le transizioni delle visualizzazioni?
Essendo un'azienda che punta sul web, il team di PolicyBazaar ha sempre cercato di fornire la migliore esperienza utente possibile durante tutti i loro percorsi critici. È prassi comune implementare transizioni personalizzate utilizzando JavaScript e CSS anche prima del lancio dell'API View Transiziones, in quanto queste ultime hanno migliorato l'esperienza utente, creato un flusso di navigazione senza interruzioni e migliorato l'attrattiva generale dei siti web.
Tuttavia, queste implementazioni personalizzate costavano a volte ritardi basati sulle prestazioni, complessità nella manutenzione del codice e compatibilità non ottimale con i framework utilizzati. L'API View Transiziones ha aiutato l'azienda a superare la maggior parte di queste sfide fornendo un'interfaccia facile da usare e vantaggi in termini di prestazioni disponibili in modo nativo.
PolicyBazaar ha utilizzato le transizioni delle visualizzazioni tra diversi elementi nei percorsi precedenti il preventivo per consentire ai potenziali acquirenti di fornire i dettagli richiesti per l'acquisto di polizze assicurative.
Dettagli tecnici dell'implementazione
Usa un approccio a framework ibrido, con Angular e React che dominano la maggior parte del codebase. Ecco l'estratto del 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, Head of Design (Life BU), ha affermato che le transizioni di visualizzazione hanno svolto un ruolo significativo nel miglioramento dell'esperienza degli utenti sul sito web, migliorando usabilità, coinvolgimento e soddisfazione generale. Ha contribuito a fornire una navigazione fluida, interazioni guidate, un carico cognitivo ridotto, un'estetica moderna e molto altro ancora.
Migliorare l'esperienza sul web è un obiettivo fondamentale per PB e VT ha dimostrato di essere uno strumento fondamentale per raggiungere questo obiettivo con una fluidità straordinaria. Il suo richiamo diffuso sia tra la nostra community di sviluppatori sia nella nostra base utenti ha inondato il nostro team con un senso di entusiasmo. Mentre contempliamo la sua 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 delle visualizzazioni? Di seguito sono riportate alcune risorse che puoi consultare per saperne di più: