Le transizioni presentano numerosi vantaggi per gli utenti, ad esempio la possibilità di mantenerli nel contesto e di ridurre la percezione della latenza. Gli sviluppatori vogliono avere la possibilità di creare transizioni fluide tra le pagine, contribuendo ad aumentare il coinvolgimento degli utenti con il loro sito.
Tuttavia, abilitare le transizioni di stato era molto difficile, in quanto gli sviluppatori dovevano gestire gli stati di due elementi diversi. Anche qualcosa come una semplice dissolvenza incrociata prevede 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 dopo si trovano contemporaneamente nel DOM. Inoltre, è possibile che gli oggetti si muovano intorno all'albero in un modo che non sia un problema visivo, ma possono facilmente causare la perdita della posizione di lettura e della perdita dell'attenzione.
Lanciata in Chrome 111, l'API View Transiziones consente di creare transizioni semplici e fluide tra le pagine. Consente di apportare modifiche al DOM senza sovrapposizioni tra stati e di creare un'animazione di transizione tra gli stati utilizzando le viste istantanee.
Potresti chiederti quanto è facile implementarlo. 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 della visualizzazione in quattro diversi siti web: RedBus (viaggi), CyberAgent (editore di notizie/blog), Nykaa (e-commerce) e PolicyBazaar (assicurazioni) e i diversi vantaggi ottenuti dai loro siti web utilizzando l'API View Transiziones.
redBus
redBus, parte del gruppo MakeMyTrip, è un sito web per la prenotazione e l'acquisto di biglietti per 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 transizioni di visualizzazione?
Il team di redBus crede fermamente nell'intento di offrire un'esperienza web unificata, simile a quella di un'app, il più simile possibile alle app native. Infatti, nel corso degli anni aveva implementato più 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 che dovevano fare i conti con la gestione delle prestazioni in segmenti più bassi di rete e dispositivi, portando occasionalmente a un'esperienza differenziale con una strategia di caricamento adattivo.
redBus ha utilizzato transizioni di visualizzazione per più percorsi dell'utente. Ad esempio, nella sezione di assistenza guidata all'interno dell'app mobile che ha aperto pagine web in 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 più fluida la navigazione tra le pagine e hanno generato un aumento del tasso di conversione. Questo risultato è stato il risultato di una migliore esperienza utente e di un miglior rendimento percepito durante l'esecuzione delle operazioni più complesse, come il recupero dell'inventario più aggiornato disponibile.
Dettagli tecnici dell'implementazione
redBus utilizza React ed EJS come stack tecnico frontend, con una combinazione di APS e MPA in percorsi diversi. 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();
}
};
Nei seguenti CSS, slide-to-right, slide-to-left, slide-from-right e slide-from-left sono fotogrammi chiave dell'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 di miglioramento INP in tutto il sito, con un aumento delle vendite del 7%. Amit Kumar, Senior Engineering Manager di redBus, ha affermato che le transizioni di visualizzazione sono davvero eccezionali per coloro che desiderano davvero una migliore esperienza utente e meno attività di manutenzione.
Abbiamo condotto sessioni complete di feedback degli utenti, incorporando preziose informazioni da un gruppo eterogeneo di utenti. La profonda comprensione della nostra base utenti (autobus e ferroviari) e delle sue esigenze, unita alla nostra esperienza, ci ha portato a credere 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 per colmare il divario tra app e web con un'esperienza di navigazione fluida.
Anoop Menon, CTO di redBus
CyberAgent
CyberAgent è una società IT con sede in Giappone che offre numerosi servizi online, inclusa la pubblicazione di blog e notizie.
Perché CyberAgent ha implementato transizioni di visualizzazione?
In passato CyberAgent aveva considerato l'utilizzo di animazioni CSS o di un framework per implementare transizioni animate al fine di migliorare l'esperienza utente, ma era preoccupata delle scarse prestazioni del rendering del DOM e della manutenibilità del codice. Quando Chrome ha aggiunto il supporto per l'API View Transactions, ha deciso di utilizzarla per creare transizioni di pagina coinvolgenti che superavano queste sfide.
CyberAgent ha implementato le transizioni delle visualizzazioni tra l'elenco dei blog e la pagina del blog. Qui puoi notare come è stata aggiunta la transizione dell'elemento all'immagine hero. Puoi visitare il sito e provarlo in diretta oggi stesso.
Inoltre, ha utilizzato le query supporti per progettare diverse esperienze di animazione per dispositivi diversi. Nelle pagine per dispositivi mobili erano incluse transizioni di elementi, ma questo effetto era troppo movimentato per i computer 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. L'esempio di codice seguente 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 qualche altro codice Next.js di esempio.
Visualizza transizioni per MPA con tecnologia di prerendering
CyberAgent ha anche provato la nostra nuova API View Transizione per app a più pagine (MPA) (attualmente sotto il flag chrome://flags/#view-transition-on-navigation) in un servizio chiamato Ameba News, che è un sito di portale di notizie.
Le transizioni di tipo visualizzazione sono state utilizzate in due modi: il primo è stato durante la modifica delle categorie delle notizie, come mostrato nel video seguente.
Il secondo si trova tra la pagina dei momenti salienti delle notizie, dove viene mostrato un estratto dei contenuti, e quando l'utente fa clic su Visualizza altri dettagli, il resto dell'articolo appare sbiadito.
L'aspetto interessante è che hanno aggiunto l'animazione solo alla parte che cambierà dopo il clic sul pulsante. Questa piccola modifica al design dell'animazione rende la pagina MPA più simile a un'APS dal punto di vista dell'utente, con solo i nuovi contenuti animati in:
Ecco come ha fatto: è stato assegnato uno view-transition-name diverso alle varie parti della pagina. Ad esempio, ha assegnato uno view-transition-name alla parte superiore dell'articolo e un altro alla parte inferiore e non ha aggiunto alcuna animazione nella 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 transizionis da parte di CyberAgent è che hanno utilizzato quicklink per implementare facilmente le regole di prerendering nella pagina dei dettagli. Ecco il loro codice campione:
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}/`);
});
Per saperne di più sulla loro implementazione di link rapidi, consulta questo articolo.
Testimonianza
Kazunari Hara, Tech Lead del servizio Ameba in CyberAgent, ha affermato che le transizioni della vista potrebbero avere un impatto significativo sull'attività per due motivi.
In primo luogo, guidano gli utenti sulla pagina. Le transizioni di tipo Visualizzazione consentono di concentrare visivamente gli utenti sul messaggio più importante e li aiutano a ottenere il massimo dalla pagina web. Inoltre, migliorano e mettono in risalto il brand con le animazioni. CyberAgent ha un design di animazione appositamente progettato per comunicare il proprio brand. Grazie alle transizioni di visualizzazione, è possibile implementare questa esperienza brandizzata senza aggiungere i costi di gestione delle librerie esterne.
Visualizza transizioni è 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 che dipendono dalle librerie. Non vediamo l'ora di implementare le transizioni della vista a più servizi per far conoscere il nostro brand.
Kazunari Hara, CTO di Ameba
Nykaa
Nykaa è la più grande piattaforma di e-commerce di moda e bellezza in India. Il loro obiettivo è rendere l'esperienza sul web mobile il più simile possibile a quella dell'app nativa. Durante il tentativo in precedenza di implementare animazioni di transizione, il team ha avuto difficoltà a scrivere codice JavaScript personalizzato complesso. Ciò ha influito anche marginalmente sul rendimento del suo sito web.
Perché Nykaa ha implementato transizioni di visualizzazione?
Con l'arrivo delle transizioni di visualizzazione, il team di Nykaa ha intravisto un'opportunità per cui, essendo disponibili a livello nativo, l'esperienza utente delle transizioni di pagina poteva essere migliorata significativamente senza costi in termini di prestazioni. Nykaa sta molto utilizzando le transizioni di visualizzazione per passare dalla pagina dei dettagli del prodotto alla pagina della scheda di prodotto.
Dettagli tecnici dell'implementazione
Nykaa ha utilizzato React ed Emotion per creare la propria SPA. Puoi trovare altri esempi di codice su come utilizzare le transizioni View 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 più grande vantaggio della transizione della visualizzazione è stata la "percezione della velocità". Nykaa ha utilizzato gli effetti luccicanti per attendere il caricamento dei contenuti dal backend, ma ha scoperto che la visualizzazione dell'effetto scintillante non indicava agli utenti quanto tempo dovevano attendere per il caricamento dei contenuti. Grazie alle transizioni di tipo visualizzazione, la transizione stessa ha dato agli utenti la sensazione che "stava per accadere qualcosa", rendendo l'attesa meno pesante.
Nykaa era entusiasta della nuova UX migliorata della sua pagina web con transizioni di visualizzazione ed è pronta a implementare le transizioni di visualizzazione anche su altre pagine. Ecco cosa ha detto il VP di Design:
Siamo poco impegnati a implementare le transizioni di visualizzazione in tutte le funzionalità future laddove opportuno. Alcune aree sono già state identificate e il team sta investendo attivamente in queste aree.
Krishna R V, VP di Design
PolicyBazaar
Con sede a Gurgaon, PolicyBazaar è il più grande aggregatore assicurativo e multinazionale di tecnologia finanziaria dell'India.
Perché PolicyBazaar ha implementato le transizioni delle viste?
Essendo un'azienda incentrata sul web, il team di PolicyBazaar ha sempre puntato a offrire la migliore esperienza utente possibile durante i loro percorsi critici. Era pratica comune implementare transizioni personalizzate utilizzando JavaScript e CSS anche prima del lancio dell'API View Transiziones, poiché l'API View Transiziones migliorava l'esperienza utente, creava un flusso di navigazione fluido e migliorava l'aspetto visivo generale dei siti web.
Tuttavia, queste implementazioni personalizzate hanno comportato ritardi occasionali in termini di prestazioni, complessità di 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 offrendo un'interfaccia di facile utilizzo con vantaggi in termini di prestazioni disponibili a livello nativo.
PolicyBazaar ha utilizzato le transizioni delle viste tra diversi elementi nei loro percorsi di pre-citazione per rendere entusiasmante per i potenziali acquirenti fornire i dettagli richiesti per l'acquisto di polizze assicurative.
Dettagli tecnici dell'implementazione
Utilizzano un approccio basato su framework ibrido, in cui Angular e React dominano la maggior parte del codebase. Ecco un estratto del loro 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 migliorare l'esperienza sul sito web degli utenti migliorando l'usabilità, il coinvolgimento e la soddisfazione generale. Ha contribuito a fornire una navigazione fluida, un'interazione guidata, un carico cognitivo ridotto, un'estetica moderna e molto altro.
Migliorare l'esperienza sul web rappresenta un obiettivo fondamentale per PB e VT ha dimostrato di essere uno strumento essenziale per raggiungere questo obiettivo con una notevole fluidità. Il suo ampio richiamo tra la community di sviluppatori e la base di utenti ha conferito al nostro team un senso di entusiasmo. Mentre pensiamo alla sua integrazione in diversi POD, prevediamo un impatto positivo di vasta portata sui livelli di soddisfazione ed eccellenza operativa.
Saurabh Tiwari (CTO, PolicyBazaar)
Passaggi successivi
Ti interessa provare le transizioni della vista? Ecco alcune risorse che puoi consultare per saperne di più: