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

Yuriko Hirota

Saurabh Rajpal

Przenoszenie ma wiele zalet dla użytkowników, m.in. pomaga uwzględnić je w kontekście i zmniejszyć wrażenie czasu oczekiwania. Deweloperzy chcą mieć możliwość płynnego przejścia między stronami, co pomaga zwiększyć zaangażowanie użytkowników w witrynie.

Jednak włączenie przejścia między stanami było bardzo trudne, ponieważ wymagało od deweloperów zarządzania stanami 2 różnych elementów. Nawet coś w rodzaju prostego przenikania wymaga obecności obu stanów w tym samym czasie. 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 stan „przed” i „po” występuje w tym samym czasie w DOM. Poza tym elementy mogą poruszać się po drzewie w dobrze widoczny wizualnie sposób, ale jednocześnie mogą zniechęcać do czytania i utraty uwagi.

W Chrome 111 dostępny jest interfejs View Przenoszenies API, który umożliwia tworzenie płynnych i prostych przejść między stronami. Umożliwia on wprowadzanie zmian DOM bez konieczności pokrywania się stanów. Zapewnia też animację przejścia między stanami przy użyciu widoków migawek.

Być może zastanawiasz się, jak łatwo jest wdrożyć tę funkcję. Jakiego rodzaju zastosowania można tu znaleźć? W jaki sposób inni deweloperzy korzystają z przejścia między widokami?

Z tego artykułu dowiesz się, jak wdrożyć przejścia między widokami w 4 różnych witrynach: RedBus (podróże), CyberAgent (wydawca wiadomości/blogów), Nykaa (e-commerce) i PolicyBazaar (ubezpieczenia) i jakie korzyści odnosiły się do tych witryn dzięki interfejsowi View przejść API.

redBus

redBus, należący do grupy MakeMyTrip, to witryna z siedzibą w Bangalore w Indiach, która umożliwia rezerwowanie i sprzedaż biletów autobusowych 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ół redBus mocno wierzy w zapewnianie ujednoliconego, podobnego do aplikacji środowiska internetowego, jak najbardziej zbliżonego do aplikacji natywnych. Co więcej, na przestrzeni lat firma wdrożyła wiele spersonalizowanych rozwiązań. Na przykład zespół wdrożył niestandardowe animacje oparte na języku JavaScript i CSS dla przejść między stronami jeszcze przed opracowaniem interfejsu View przejśćs API. Oznaczało to jednak konieczność zarządzania wydajnością w mniejszych segmentach sieci i urządzeń, co czasem prowadziło do różnic w wynikach ze względu na strategię wczytywania adaptacyjnego.

Firma redBus używała przejść z widoku na wiele ścieżek użytkownika. Dotyczy to na przykład sekcji samodzielnego rozwiązywania problemów w aplikacji mobilnej, która otwierała strony internetowe na niestandardowych kartach w Chrome, oraz na ścieżce rezerwacji biletów autobusowych, na której użytkownicy przechodzą ze strony z informacjami o asortymencie do strony płatności. W tym drugim przypadku przejścia ze strony do strony przebiegały płynniej, co zaowocowało wzrostem współczynnika konwersji. Przełożyło się to na lepsze wrażenia użytkowników i większą widoczną wydajność w czasie, gdy wykonywana była duża liczba operacji – takich jak pobieranie najbardziej zaktualizowanych dostępnych zasobów reklamowych.

Szczegóły techniczne wdrożenia

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ż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 kodzie CSS slide-to-right, slide-to-left, slide-from-right i slide-from-left są 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 postanowiła wdrożyć przejścia między widokami i poprawić wskaźnik INP w witrynie, co zaowocowało wzrostem sprzedaży o 7%. 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 nie muszą poświęcać tyle czasu na 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 analiza naszych użytkowników (autobusów i kolejów) i ich potrzeb w połączeniu z naszą doświadczeniem utwierdziła nas w przekonaniu, że ta funkcja od samego początku będzie przydatna, bez potrzeby przeprowadzania testów A/B. Przejścia w widoku danych to krok w kierunku wypełnienia luki między aplikacją a stroną internetową, zapewniając bezproblemową nawigację.

Anoop Menon, dyrektor ds. technologii, redBus

CyberAgent

CyberAgent to japońska firma IT, która świadczy wiele usług online, w tym blogi i publikacje wiadomości.

Dlaczego w programie CyberAgent wprowadzono przejścia między widokami?

W przeszłości wydawca CyberAgent rozważał użycie animacji CSS lub użycie platformy do wdrożenia animowanych przejść, aby zwiększyć wygodę użytkowników, ale martwił się niską wydajnością renderowania DOM i łatwością obsługi kodu. Gdy przeglądarka Chrome dodała obsługę interfejsu View Moves API, zespół z radością korzystał z niego do tworzenia atrakcyjnych przejść między stronami, które pozwoliły rozwiązać te problemy.

W programie CyberAgent zaimplementowano 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ć ich stronę i wypróbować ją na żywo już dziś.

Wykorzystała też zapytania o multimedia, aby zaprojektować różne animacje dla różnych urządzeń. W przypadku stron mobilnych uwzględniały one przejścia elementów, ale w przypadku komputerów efekt ten był zbyt intensywny.

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

Szczegóły techniczne wdrożenia

CyberAgent używa biblioteki Next.js do utworzenia aplikacji SPA. Poniższy przykładowy kod pokazuje, jak można korzystać z interfejsu View Transfer 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

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

Przejścia wyświetlania wykorzystano w 2 miejscach. Pierwszy z nich dotyczy zmiany kategorii wiadomości, pokazanego w poniższym filmie.

Drugi znajduje się między stroną z najciekawszymi informacjami, na której wyświetla się fragment treści, a gdy użytkownik kliknie Zobacz więcej szczegółów, reszta artykułu jest niewyraźna.

Co ciekawe, animację dodano tylko do części, która zmienia się po kliknięciu przycisku. To niewielkie poprawki w projekcie animacji sprawiają, że z punktu widzenia użytkownika strona MPA wygląda bardziej jak SPA, lecz zawiera tylko nową treść:

Oto, jak to się stało: przypisali różnym elementom view-transition-name różne części strony. Na przykład przypisali jeden element view-transition-name do górnej części artykułu, inny dla dolnej części artykułu, a jego górną nie dodano bez 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;
}

Inną ciekawą rzeczą w korzystaniu z interfejsu View Processs API jest to, że CyberAgent skorzystała z quicklink, aby łatwo wdrożyć reguły renderowania wstępnego 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 na temat 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, prowadzą użytkowników na stronie. Przejścia w widoku pozwalają użytkownikom skupić się na najważniejszym komunikacie i w pełni wykorzystać potencjał strony internetowej. Wzmacniają one też charakter marki za pomocą animacji. CyberAgent ma specjalny projekt animacji, który pozwala zaprezentować markę. Dzięki zmianom w widoku mogą wdrożyć ten model marki bezpłatnie utrzymania 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 firmie Ameba

Nykaa

Nykaa to największa w Indiach platforma e-commerce zajmująca się modą i kosmetykami. Firmie zależy na tym, aby interfejs w przeglądarce mobilnej był jak najbardziej zbliżony do interfejsu aplikacji natywnej. Wcześniej próbując zaimplementować animacje przejścia, miał problem z napisaniem złożonego niestandardowego kodu JavaScript. Wpłynęło to również nieznacznie na skuteczność witryny.

Dlaczego Nykaa wdrożyła przejścia między widokami?

Wraz z wprowadzeniem zmian w wyświetlaniu zespół Nykai dostrzegł możliwość, że takie zmiany mogą być dostępne natywnie, co oznacza, że można znacznie poprawić wygodę przechodzenia między stronami bez ponoszenia żadnych kosztów. Nykaa intensywnie korzysta z funkcji przejść między widokami, aby przejść ze strony ze szczegółami produktu do strony z informacjami o produkcie.

Szczegóły techniczne wdrożenia

Nykaa użyła reakcji i emocji, aby stworzyć SPA. Więcej przykładowego kodu, który wyjaśnia, jak używać przejść z widokiem przejść 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 Nykaa, powiedział, że największą zaletą przejścia w widoku było „postrzeganie szybkości”. Nykaa użyła efektów połysku, aby czekać na wczytanie treści z backendu, ale okazało się, że po ich wyświetleniu użytkownicy nie musieli czekać na załadowanie treści. Dzięki przemianom widoku samo przejście dało użytkownikom poczucie, że coś się wydarzy, co sprawiło, że oczekiwanie było mniej uciążliwe.

Firma Nykaa była bardzo zadowolona z nowo udoskonalonych UX na swojej stronie internetowej z możliwością przejścia między widokami i jest gotowa na wdrożenie tej funkcji również na innych stronach. Oto co powiedział wiceprezes ds. projektowania:

Jesteśmy zobowiązani, by wdrożyć przejścia między widokami we wszystkich nadchodzących funkcjach, jeśli ma to sens. Niektóre obszary zostały już wskazane, a zespół aktywnie w nie inwestuje.

Krishna R V, wiceprezeska ds. projektowania

PolicyBazaar

Firma PolicyBazaar z siedzibą w Gurgaon jest największym agregatorem ubezpieczeniowym w Indiach i międzynarodową firmą z branży technologii finansowych.

Dlaczego w zasadzie 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. Powszechną praktyką było wdrażanie niestandardowych przejść za pomocą JavaScriptu i CSS jeszcze przed wprowadzeniem interfejsu View Przenoszenie API. Powszechnie wykorzystywano to rozwiązanie, ponieważ zwiększyło to wygodę użytkowników, stworzyła płynną nawigację i poprawiła ogólną wizualną atrakcyjność witryny.

Takie niestandardowe implementacje wiązały się jednak z opóźnieniami, złożonością związaną z konserwacją kodu i nieoptymalną zgodnością z używanymi platformami. Interfejs View Migrates API pomógł rozwiązać większość tych problemów, oferując łatwy w użyciu interfejs z dostępnymi natywnie korzyściami w zakresie wydajności.

Firma PolicyBazaar wykorzystała przejścia między widokami różnych elementów ścieżki przed wyceną, aby zachęcić potencjalnych nabywców do podania szczegółów wymaganych do zakupu polis ubezpieczeniowych.

Szczegóły techniczne wdrożenia

Firma korzysta z platformy hybrydowej, w której większość kodu w bazie kodu została dominowana przez 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.

Głównym celem PB jest zwiększanie wygody korzystania z internetu, a VT jest kluczowym narzędziem umożliwiającym osiągnięcie tego celu z nadzwyczajną sprawnością. Ogromna popularność aplikacji zarówno w naszej społeczności programistów, jak i w bazie użytkowników sprawia, że nasz zespół jest entuzjazmem. Zastanawiając się nad integracją tej usługi z różnymi podami, przewidujemy, że będzie ona miała bardzo pozytywny wpływ na poziom satysfakcji użytkowników i doskonałość operacyjną.

Saurabh Tiwari (dyrektor ds. technologii, PolicyBazaar)

Dalsze kroki

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

• Dokumentacja na temat przejścia między widokami danych na stroniedeveloper.chrome.com
• Wyświetlanie przejść do objaśnienia MPA
• Integrowanie ofert, aby umożliwić przejścia między widokami w różnych przeglądarkach