Płynna nawigacja możliwa dzięki przejściam między widokami

Przenoszenie ma wiele korzyści dla użytkowników, w tym pomaga zachować kontekst i zmniejszyć postrzeganie czasu oczekiwania. Deweloperzy chcą mieć możliwość płynnego przejścia między stronami, co pozwoli zwiększyć zaangażowanie użytkowników w witrynie.

Włączenie przenoszenia poszczególnych stanów było jednak naprawdę trudne, ponieważ wymagało od programistów zarządzania stanami dwóch różnych elementów. Nawet proste przenikanie polega na obecności obu stanów w tym samym czasie. Wiąże się to z problemami z użytecznością, na przykład obsługą dodatkowych interakcji w elemencie wychodzącym. W przypadku użytkowników urządzeń wspomagających występuje okres, w którym w DOM w tym samym czasie jest dostępny stan „przed” i „po”. Poza tym obiekty mogą poruszać się po drzewie w sposób nieskomplikowany pod względem wizualnym, ale łatwo może powodować utratę ostrości i miejsca czytania.

Interfejs View Transitions API, wprowadzony w Chrome 111, umożliwia tworzenie płynnych i prostych przejść między stronami. Pozwala wprowadzić zmianę DOM bez nakładania się między stanami oraz uzyskać animację przejścia między stanami za pomocą widoków zrzutów.

Być może zastanawiasz się, jak łatwo jest go wdrożyć? Jakie to są przypadki użycia? W jaki sposób inni deweloperzy korzystają z przejść widoku?

Z tego artykułu dowiesz się, jak zmienić liczbę wyświetleń w 4 witrynach: RedBus (podróże), CyberAgent (wydawca wiadomości/blogów), Nykaa (e-commerce) i PolicyBazaar (ubezpieczenia), a także pokazujemy, jakie korzyści przyniosły ich witryny na różne sposoby dzięki interfejsowi View Transitions API.

redBus

redBus, część grupy MakeMyTrip, to witryna służąca do rezerwacji autobusów i sprzedaży biletów z siedzibą w Bangalore w Indiach, która działa w różnych regionach świata. Była to jedna z pierwszych witryn, w których wdrożyliśmy doświadczenie za pomocą interfejsu View Transitions API.

Dlaczego Redbus wdrożył funkcję przenoszenia obejrzeń?

Członkowie zespołu redBus głęboko wierzą w możliwość zapewnienia ujednoliconego interfejsu internetowego przypominającego aplikację, który jest jak najbliższy użytkownikom ich aplikacji natywnych. Przez lata wdrożono też wiele niestandardowych rozwiązań. Jeszcze przed opracowaniem interfejsu View Transitions API firma wdrożyła niestandardowe animacje oparte na języku JavaScript i CSS na potrzeby przejść między stronami. Oznaczało to jednak konieczność zarządzania wydajnością w niższych segmentach sieci i urządzeń, co czasami prowadziło do różnicowania wyników dzięki zastosowaniu strategii ładowania adaptacyjnego.

Firma redBus wykorzystywała przejścia między widokami w przypadku różnych ścieżek użytkownika. Na przykład w sekcji samopomocy w aplikacji mobilnej, która otwierała strony internetowe w niestandardowych kartach Chrome, oraz w ścieżce rezerwacji biletów autobusowych, gdzie użytkownicy przechodzą ze strony z informacjami o asortymencie na stronę płatności. W tym drugim przypadku przejścia między poszczególnymi wyświetleniami usprawniły nawigację między stronami i spowodowały wzrost współczynnika konwersji. Pozwoliło to zwiększyć wygodę użytkowników i widoczną skuteczność podczas intensywnych działań, takich jak pobieranie najaktualniejszych dostępnych zasobów reklamowych.

Szczegóły techniczne implementacji

redBus wykorzystuje React i EJS jako stos technologiczny frontendu, który łączy aplikacje SPA i MPA na różnych etapach. Ten fragment kodu pokazuje, jak używane są przejścia 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 poniższych kodach CSS slide-to-right, slide-to-left, slide-from-right i slide-from-left to klatki kluczowe 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ć zmiany obejrzeń i poprawić wskaźnik INP w swojej witrynie, co przełożyło się na o 7% wzrost sprzedaży. Amit Kumar, starszy menedżer ds. technicznych w redBus, stwierdził, że przenoszenie widoków danych jest naprawdę przydatne dla tych, którym zależy na lepszej obsłudze i zmniejszeniu kosztów związanych z konserwacją.

Przeprowadziliśmy wyczerpujące sesje opinii użytkowników, w których wykorzystaliśmy cenne informacje od zróżnicowanej grupy użytkowników. Dokładne zrozumienie naszej bazy użytkowników (autobusów i kolei) oraz ich potrzeb w połączeniu z doświadczeniem pozwoliło nam stwierdzić, że ta funkcja od samego początku przyniesie znaczącą wartość bez konieczności przeprowadzania testów A/B. Przejścia widoku to krok w kierunku wypełnienia luki między aplikacją a stroną dzięki płynnej nawigacji.

Anoop Menon, dyrektor ds. technologii w redBusie

CyberAgent

CyberAgent to japońska firma IT świadcząca różne usługi online, w tym blogi i publikowanie wiadomości.

Dlaczego aplikacja CyberAgent wdrożyła przenoszenie widoków?

Firma CyberAgent rozważała wykorzystanie animacji CSS lub platformy do zaimplementowania animowanych przejść w celu poprawy wrażeń użytkownika w przeszłości, ale obawiał się, że wydajność w renderowaniu DOM i łatwość obsługi kodu będą niskie. Gdy w Chrome dodaliśmy obsługę interfejsu View przejściowego API, użytkownicy z radością korzystali z niego do tworzenia atrakcyjnych przejść, które pozwolą sprostać tym wyzwaniom.

CyberAgent wdrożył przejścia między widokami między listą blogów a stroną bloga. Zwróć uwagę na to, jak dodano przejście elementu do banera powitalnego. Możesz odwiedzić jego stronę i zobaczyć, jak działa na żywo już dziś.

Wykorzystała też zapytania o multimedia, aby zaprojektować różne animacje na różne urządzenia. W przypadku stron mobilnych obejmowały one przejścia elementów, ale w wersji na komputery było to zbyt intensywny efekt.

@media screen and (min-width: 769px) {
  .main-visual {
    view-transition-name: none !important;
  }
}

Szczegóły techniczne implementacji

CyberAgent używa Next.js do utworzenia swojej SPA. Poniższy przykładowy kod pokazuje, jak użytkownicy korzystają z 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świetlanie przejść dla MPA z technologią renderowania wstępnego

CyberAgent wypróbował też nowy interfejs View Transitions API for Multiple Page Apps (MPA) (obecnie oznaczony flagą chrome://flags/#view-transition-on-navigation) w usłudze Ameba News, która jest witryną portalu z wiadomościami.

Przejścia po wyświetleniu zostały użyte w 2 miejscach. Pierwsze dotyczy zmiany kategorii wiadomości, którą widać w następnym filmie.

Druga znajduje się między stroną z najciekawszymi momentami wiadomości, na której wyświetlany jest fragment wiadomości, a gdy użytkownik kliknie Zobacz więcej szczegółów, reszta artykułu jest wyszarzona.

Ciekawe jest to, że dodali animację tylko do tej części, która zmieni się po kliknięciu przycisku. Ta niewielka zmiana w strukturze animacji sprawia, że strona MPA z punktu widzenia użytkownika wygląda bardziej jak SPA – animowana jest tylko nowa treść:

Oto jak to się stało: przypisano inny element view-transition-name do różnych części strony. Na przykład przypisano jeden element view-transition-name do górnej części artykułu, inny do dolnej i nie dodał animacji do górnej części.

::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ą w wyniku korzystania przez CyberAgent z interfejsu View przejściowego API jest to, że za pomocą szybkiego linku można łatwo wdrożyć reguły 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 w wyświetlaniu mogą mieć znaczny wpływ na działalność firmy z 2 powodów.

Przede wszystkim kierują użytkowników na stronę. Przejścia widoku umożliwiają wizualne skupienie użytkowników na najważniejszych komunikatach i pomaga im w pełni wykorzystać potencjał strony internetowej. Wzmacniają i uwydatniają markę za pomocą animacji. CyberAgent ma wyznaczony projekt animacji, który przedstawia jego markę. Dzięki przeniesieniu widoków firma może wdrożyć tę markę bez dodatkowych kosztów związanych z utrzymywaniem bibliotek zewnętrznych.

View Transitions to jeden z moich ulubionych interfejsów API. W porównaniu z innymi rozwiązaniami zależnymi od bibliotek możliwość dodawania animacji jako standardowej funkcji przeglądarki ułatwia wdrożenie i obsługę przejść widoków. Nie możemy się już doczekać udostępnienia kolejnych usług, które pozwolą zaprezentować naszą markę.

Kazunari Hara, dyrektor ds. technologii w firmie Ameba

nykaa

Nykaa to największa w Indiach platforma e-commerce z branży mody i urody. Celem jest umożliwienie korzystania z internetu mobilnego jak najbardziej zbliżonego do działania aplikacji natywnej. Gdy wcześniej próbowali wdrożyć animacje przejścia, mieli problemy z pisaniem złożonego niestandardowego kodu JavaScript. To również miało minimalny wpływ na skuteczność strony.

Dlaczego Nykaa wprowadziła przejścia po obejrzeniu?

Wraz z nadejściem przenoszenia widoku zespół Nykaa dostrzegł możliwość, w ramach której zmiany te są natywnie dostępne, co oznacza, że można znacznie poprawić wygodę użytkowników bez obniżania wydajności. Nykaa intensywnie korzysta z przejść między widokami, aby przejść ze strony ze szczegółami produktu na stronę z informacjami o produkcie.

Szczegóły techniczne implementacji

Firma Nykaa stworzyła swoją ofertę SPA za pomocą React i Emotion. Więcej przykładowego kodu na temat korzystania z funkcji wyświetlania przejść w funkcji 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); }
`

CSS dla 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, szef działu aplikacji w firmie Nykaa, stwierdził, że największą zaletą zmiany widoku jest „postrzeganie szybkości”. Nykaa używała efektów połysku, aby czekać na wczytanie zawartości z backendu, ale stwierdziła, że pokazanie tego efektu nie pokazało użytkownikom, ile czasu muszą czekać na wczytanie treści. Dzięki nim użytkownicy czuli, że coś się wydarzy, a czekanie było mniej uciążliwe.

Firma Nykaa bardzo się ucieszyła z nowo ulepszonego sposobu korzystania z jej strony internetowej z przejściami widoku. Jest gotowa do wdrożenia tego rozwiązania także na innych stronach. Oto co powiedział wiceprezes ds. projektowania:

Zdecydowaliśmy się na korzystanie z przejścia widoku we wszystkich nadchodzących funkcjach, nawet jeśli ma to sens. Niektóre obszary zostały już określone i zespół aktywnie w nie inwestuje.

Krishna R V, wiceprezes ds. projektowania

PolicyBazaar

PolicyBazaar to największa indyjska firma ubezpieczeniowa i międzynarodowa firma z branży technologii finansowych. Ma siedzibę w Gurgaon.

Dlaczego firma PolicyBazaar wprowadziła przenoszenie wyświetleń?

Firma PolicyBazaar, jako firma działająca na pierwszym miejscu, zawsze dążyła do zapewnienia użytkownikom jak najlepszych wrażeń podczas korzystania z ich krytycznych ścieżek. Powszechną praktyką implementacji niestandardowych przejść za pomocą JavaScriptu i CSS było wdrożenie niestandardowych przejść jeszcze przed wprowadzeniem interfejsu View Transitions API, ponieważ zwiększały one wygodę użytkowników, usprawniły nawigację i poprawiły ogólną atrakcyjność wizualną witryn.

Takie niestandardowe implementacje wiążą się jednak ze sporadycznymi opóźnieniami związanymi z wydajnością, zawiłościami związanymi z obsługą kodu i nieoptymalnej zgodności z używanymi platformami. Interfejs View Transitions API pomógł im przezwyciężyć większość z tych wyzwań, zapewniając łatwy w obsłudze interfejs z bezpośrednimi korzyściami w zakresie wydajności.

Firma PolicyBazaar wykorzystała zmiany wyświetleń w różnych elementach ścieżki przed wyceną, aby zachęcić potencjalnych klientów do podawania wymaganych danych do zakupu polisy ubezpieczeniowej.

Szczegóły techniczne implementacji

Wykorzystują hybrydową strukturę, przy czym Angular i React dominują w ich bazie kodu. Oto fragment kodu VT napisany w Angular i udostępniony przez Aman Soni (głównego dewelopera frontendu 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, szef działu projektowania (Life BU), stwierdził, że zmiany widoków danych odegrały istotną rolę w poprawie wygody użytkowników strony internetowej przez zwiększenie łatwości obsługi, zaangażowania i ogólnej satysfakcji. Usługa ta pomogła m.in. poprawić płynność nawigacji, poprawić interakcję z przewodnikiem, zmniejszyć obciążenie poznawcze i zadbać o nowoczesną estetykę.

Zwiększenie wygody korzystania z internetu jest dla firmy PB najważniejszym celem, a VT okazał się kluczowym narzędziem w osiągnięciu tego celu z niezwykłą szybkością. Popularność programu wśród społeczności deweloperów i użytkowników napełnia nasz zespół entuzjazmem. Rozważając integrację tej funkcji z różnymi podami, przewidujemy, że może ona mieć bardzo pozytywny wpływ na poziom zadowolenia i doskonałość operacyjną.

Saurabh Tiwari (dyrektor ds. technologii, PolicyBazaar)

Dalsze kroki

Czy chcesz wypróbować przejścia widoku? Oto materiały, z których możesz skorzystać, aby dowiedzieć się więcej:

• Dokumentacja dla deweloperów.chrome.com na temat przenoszenia widoków
• Wyświetlanie przejść do wyjaśnienia MPA
• Integruj propozycje, aby umożliwiać przełączanie widoku w różnych przeglądarkach