Przenoszenie ma wiele zalet dla użytkowników, m.in. pomaga uwzględnić je w kontekście i zmniejszyć wrażenie czasu oczekiwania. Programistom zależy na możliwości płynnego przejścia między stronami, co pozwoli zwiększyć zaangażowanie użytkowników w witrynie.
Jednak przechodzenie między stanami było bardzo trudne, ponieważ wymagało od deweloperów zarządzania stanami 2 różnych elementów. Nawet proste przejście powoduje, że oba stany są obecne jednocześnie. Wiąże się to z trudnościami w obsłudze, takimi jak obsługa dodatkowej interakcji z elementem wychodzącym. W przypadku użytkowników urządzeń wspomagających jest okres, w którym stan przed i po znajduje się w DOM jednocześnie. Ponadto elementy mogą się poruszać po drzewie w sposób, który jest przyjemny dla oka, ale może łatwo spowodować utratę pozycji czytania i punktu skupienia.
W Chrome 111 dostępny jest interfejs View Migrates API, który umożliwia tworzenie płynnych i prostych przejść między stronami. Umożliwia ona zmianę DOM bez nakładania się stanów oraz tworzenie animacji przejścia między stanami za pomocą widoków z migawką.
Zastanawiasz się pewnie, jak łatwo je wdrożyć? Jakiego rodzaju zastosowania można tu znaleźć? Jak inni deweloperzy korzystają z przejść między widokami?
W tym artykule opisujemy wdrażanie przejść między widokami w 4 różnych witrynach: RedBus (podróże), CyberAgent (wydawca wiadomości/blogów), Nykaa (e-commerce) i PolicyBazaar (ubezpieczenia). Dowiesz się też, jak ich witryny korzystały z interfejsu View Transitions API.
redBus
redBus, należący do grupy MakeMyTrip, to witryna do rezerwacji i kupowania biletów na autobusy z siedzibą w bangalorskim Indiach, która działa w różnych regionach świata. Była to jedna z pierwszych witryn, w których zaimplementowano środowisko korzystające z interfejsu View Przenoszenie API.
Dlaczego Redbus wdrożył przejścia między widokami?
Zespół redBusa wierzy w zapewnienie spójnego, zbliżonego do aplikacji internetowej środowiska, które jest jak najbardziej zbliżone do natywnych aplikacji. W ciągu lat wdrożyły wiele niestandardowych rozwiązań. Na przykład jeszcze przed opracowaniem interfejsu API View Transitions wprowadziliśmy niestandardowe animacje oparte na JavaScriptie i CSS-ie, które służą do przechodzenia między stronami. Oznaczało to jednak, że musieli oni zarządzać wydajnością w mniejszych segmentach sieci i urządzeń, co czasami prowadziło do różnic w działaniu strategii ładowania adaptacyjnego.
redBus używał przejść między widokami w przypadku wielu ścieżek użytkowników. Na przykład w sekcji samoobsługowej w aplikacji mobilnej, która otwierała strony internetowe na kartach niestandardowych Chrome, oraz w ścieżce rezerwacji biletów na autobus, na której użytkownicy przechodzą ze strony z listą asortymentu do strony płatności. W tym drugim przypadku przejścia między stronami były płynniejsze, a w efekcie wzrósł współczynnik konwersji. Wynikało to z lepszej wygody użytkowników i lepszej postrzeganej skuteczności podczas wykonywania czasochłonnych operacji, takich jak pobieranie najnowszego dostępnego asortymentu.
Szczegóły techniczne implementacji
redBus korzysta ze stosu technologicznego frontendu (React i EJS) jako połączenia aplikacji SPA i MPA na różnych ścieżkach. Ten fragment kodu pokazuje, jak używać przejść między widokami:
/* 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();
}
};
W tym kodzie CSS elementy slide-to-right, slide-to-left, slide-from-right i slide-from-left to kluczowe klatki animacji 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;
}
Skutki biznesowe
Firma redBus zdecydowała się wdrożyć przejścia widoku wraz z ulepszeniami w zakresie INP w swojej witrynie, co przełożyło się na 7% wzrost sprzedaży. Amit Kumar, starszy kierownik ds. inżynierii w redBus, powiedział, że przejście między widokami jest świetną opcją dla tych, którzy naprawdę chcą wygodnie korzystać z urządzenia i mają mniejsze nakłady pracy związane z konserwacją.
Przeprowadziliśmy kompleksowe sesje zbierania opinii użytkowników, w którym uwzględniliśmy cenne informacje pochodzące od zróżnicowanej grupy użytkowników. Dogłębna znajomość użytkowników (autobusów i pociągów) oraz ich potrzeb w połączeniu z naszym doświadczeniem skłoniły nas do przekonania, że ta funkcja będzie przydatna od samego początku, bez potrzeby przeprowadzania testów A/B. Przejścia między widokami to krok w kierunku połączenia aplikacji i przeglądarki z płynną nawigacją.
Anoop Menon, dyrektor ds. technologii dla redBus
CyberAgent
CyberAgent to japońska firma informatyczna, która oferuje wiele usług online, w tym blogi i publikowanie wiadomości.
Dlaczego CyberAgent wdrożył przejścia między widokami?
W przeszłości zespół CyberAgent rozważał użycie animacji CSS lub użycie frameworku do implementacji animowanych przejść w celu poprawy wrażeń użytkowników, ale obawiał się niskiej wydajności podczas renderowania DOM i możliwości utrzymania kodu. Gdy Chrome dodał obsługę interfejsu API Przejścia widoku, chętnie wykorzystali go do tworzenia atrakcyjnych przejść między stronami, które pozwoliły im rozwiązać te problemy.
CyberAgent wdrożył przejścia między widokiem listy blogów a widokiem strony bloga. Zwróć uwagę, jak dodano przejście elementu do głównego obrazu. Możesz odwiedzić ich stronę i sprawdzić, jak działa na żywo.
Wykorzystała też zapytania o multimedia, aby zaprojektować różne animacje dla różnych urządzeń. Na stronach mobilnych dodali przejścia między elementami, ale ten efekt był zbyt dynamiczny na komputerach.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Szczegóły techniczne implementacji
CyberAgent używa Next.js do tworzenia aplikacji SPA. Poniższy przykładowy kod pokazuje, jak używać interfejsu View Transition API.
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]);
};
Zobacz więcej przykładowego kodu Next.js.
Wyświetl przejścia dla MPA z technologią wstępnego renderowania
Firma CyberAgent przetestowała też nasz nowy interfejs View Transitions API dla aplikacji wielostronicowych (MPA) (obecnie oznaczony flagą chrome://flags/#view-transition-on-navigation) w usłudze Ameba News, która jest portalem z wiadomościami.
Przejścia między widokami zostały użyte w 2 miejscach: pierwsze podczas zmiany kategorii wiadomości, co pokazano w tym filmie.
Drugi to link na stronie z najważniejszymi wiadomościami, gdzie wyświetlany jest fragment treści. Gdy użytkownik kliknie Więcej szczegółów, reszta artykułu będzie wyświetlana w tle.
Co ciekawe, animację dodano tylko do części, która zmienia się po kliknięciu przycisku. Ta niewielka zmiana w projektowaniu animacji sprawia, że strona MPA wygląda bardziej jak strona SPA z perspektywy użytkownika, ponieważ tylko nowe treści są animowane:
Oto jak to działa: przypisali różne view-transition-name do poszczególnych części strony. Na przykład przypisano jedną animację view-transition-name do górnej części artykułu, inną do dolnej części, a do górnej części nie dodano żadnej animacji.
::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;
}
Kolejną ciekawą rzeczą na temat korzystania przez CyberAgenta z interfejsu API view_transitions jest to, że firma ta wykorzystała quicklink do łatwego implementowania reguł wstępnego renderowania na stronie z informacjami. Oto przykładowy kod:
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}/`);
});
Więcej informacji o implementacji szybkich linków znajdziesz w tym artykule.
Opinia klienta
Kazunari Hara, kierownik ds. technicznych usługi Ameba w firmie CyberAgent, stwierdził, że zmiany widoków mogą mieć istotny wpływ na firmę z 2 powodów.
Po pierwsze, pomagają użytkownikom poruszać się po stronie. Przejścia między widokami umożliwiają skupienie uwagi użytkowników na najważniejszych informacjach i ułatwiają im korzystanie ze strony internetowej. Ponadto animacja wzmacnia i podkreśla markę. CyberAgent ma specjalny projekt animacji, który promuje jego markę. Dzięki przejściom między widokami mogą wdrażać te funkcje związane z marką bezpłatnie związanych z utrzymaniem bibliotek zewnętrznych.
Widok przenoszonych danych to jeden z moich ulubionych interfejsów API. Możliwość dodawania animacji jako standardowej funkcji przeglądarki ułatwia wdrażanie i utrzymywanie przejść między widokami w porównaniu z innymi rozwiązaniami zależnych od bibliotek. Z niecierpliwością czekamy na możliwość przejścia na tryb wyświetlania w kolejnych usługach, aby promować naszą markę.
Kazunari Hara, dyrektor ds. technologii w Ameba
Nykaa
Nykaa to największa platforma e-commerce w Indiach zajmująca się modą i kosmetycznymi. Ich celem jest zapewnienie użytkownikom wygody korzystania z internetu mobilnego zbliżonej do tej w natywnej aplikacji. Podczas próby wdrożenia animacji przejścia zespół miał problemy z tworzeniem skomplikowanego niestandardowego kodu JavaScript. Wpłynęło to również nieznacznie na skuteczność witryny.
Dlaczego firma Nykaa wdrożyła przejścia między widokami?
Wraz z wprowadzeniem przejść między widokami zespół Nykaa dostrzegł możliwość wykorzystania tych przejść wbudowanych w systemie do znacznego ulepszenia UX przejść między stronami bez wpływu na wydajność. Firma Nykaa często używa przejść między stronami, aby przejść ze strony ze szczegółami produktu na stronę z informacjami o produkcie.
Szczegóły techniczne implementacji
Firma Nykaa wykorzystała React i Emotion do stworzenia SPA. Więcej przykładowych kodów dotyczących korzystania z przejść widoku w React znajdziesz tutaj.
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); }
`
Kod CSS animacji panelu bocznego:
::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};
}
Opinia klienta
Sunit Jindal, dyrektor ds. aplikacji w firmie Nykaa, powiedział, że największą zaletą przejścia na widok listy jest „szybkość”. Firma Nykaa używała efektu migotania, aby oczekiwać na załadowanie treści z back-endu, ale okazało się, że wyświetlanie tego efektu nie pozwalało użytkownikom dowiedzieć się, jak długo będą musieli czekać na załadowanie treści. W przypadku przejść między widokami samo przejście dawało użytkownikom poczucie, że „coś się zaraz wydarzy”, co uczyniło oczekiwanie mniej uciążliwym.
Firma Nykaa była bardzo zadowolona z ulepszonego UX strony internetowej z przechodzeniem między widokami i gotowa do wdrożenia przejść między widokami na dodatkowych stronach. Oto co powiedział wiceprezes ds. projektowania:
Zamierzamy wprowadzić przejścia między widokami we wszystkich nadchodzących funkcjach, w których to ma sens. Niektóre obszary zostały już zidentyfikowane i zespół aktywnie w nie inwestuje.
Krishna R V, wiceprezeska ds. projektowania
PolicyBazaar
Firma PolicyBazaar, z siedzibą w Gurgaon, jest największym w Indiach agregatorem ubezpieczeń i międzynarodową firmą zajmującą się technologiami finansowymi.
Dlaczego w aplikacji PolicyBazaar wprowadzono przejścia między widokami?
Jako firma skupiająca się głównie na internecie, zespół PolicyBazaar od zawsze dążył do zapewnienia użytkownikom jak najlepszych wrażeń na kluczowych etapach ich obsługi. Jeszcze przed wprowadzeniem interfejsu View Transitions API powszechną praktyką było wdrażanie niestandardowych przejść za pomocą JavaScriptu i CSS, ponieważ poprawiały one wrażenia użytkowników, tworzyły płynną ścieżkę nawigacji i zwiększały ogólną atrakcyjność wizualną witryn.
Jednak takie niestandardowe implementacje wiązały się z czasemami z opóźnieniami w działaniu, złożonością konserwacji kodu i nieoptymalną zgodnością z ramami. Interfejs View Migrates API pomógł w pokonaniu większości z tych wyzwań dzięki łatwemu w użyciu interfejsowi zapewniającemu lepszą wydajność dostępną natywnie.
PolicyBazaar wykorzystała przejścia między różnymi elementami ścieżki do wyceny, aby zachęcić potencjalnych kupujących do podania wymaganych informacji na potrzeby zakupu polis ubezpieczeniowych.
Szczegóły techniczne implementacji
Używają hybrydowego frameworka, w którym w większości kodu dominują Angular i React. Oto fragment kodu VT napisany w Angular i udostępniony przez Amana Soni (głównego dewelopera interfejsu 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');
}
Opinia klienta
Rishabh Mehrotra, dyrektor ds. projektowania (Life BU), stwierdził, że zmiany liczby wyświetleń odegrały istotną rolę w poprawie wygody korzystania z witryny przez użytkowników, poprawiając jej łatwość obsługi, zaangażowanie i ogólny poziom zadowolenia. Pomogła w płynnej nawigacji, obsłudze interakcji z przewodnikiem, zmniejszeniu obciążenia poznawczego, nowoczesnej estetyce i nie tylko.
Poprawa jakości korzystania z Internetu jest dla nas priorytetem, a testowanie aplikacji mobilnej okazało się skutecznym narzędziem do osiągnięcia tego celu. Jej popularność w środowisku deweloperów i użytkowników bardzo nas cieszy. Rozważamy integrację tej funkcji w różnych zespołach operacyjnych, ponieważ spodziewamy się, że przyniesie ona dalekosiężne pozytywne skutki w zakresie satysfakcji i doskonałości operacyjnej.
Saurabh Tiwari (CTO, PolicyBazaar)
Dalsze kroki
Czy chcesz wypróbować przejścia między widokami? Oto materiały, z których możesz dowiedzieć się więcej: