Navigasi yang lancar dapat dilakukan dengan transisi tampilan

Yuriko Hirota

Saurabh Rajpal

Transisi memiliki banyak manfaat bagi pengguna, termasuk membantu mereka tetap berada dalam konteks dan mengurangi persepsi latensi. Developer menginginkan kemampuan untuk membuat transisi yang lancar antarhalaman, sehingga membantu meningkatkan engagement pengguna dengan situs mereka.

Namun, transisi status sangat sulit diaktifkan karena developer harus mengelola status dua elemen yang berbeda. Bahkan sesuatu seperti cross-fade sederhana melibatkan kedua status yang ada pada waktu yang sama. Hal ini menimbulkan tantangan kegunaan, seperti menangani interaksi tambahan pada elemen yang keluar. Untuk pengguna perangkat pendukung, ada periode saat status sebelum dan sesudah berada di DOM secara bersamaan. Selain itu, hal-hal dapat bergerak di sekitar hierarki dengan cara yang baik secara visual, tetapi dapat dengan mudah menyebabkan posisi baca dan fokus hilang.

Diluncurkan di Chrome 111, View Transitions API memungkinkan pembuatan transisi yang lancar dan sederhana antarhalaman. Hal ini memungkinkan Anda membuat perubahan DOM tanpa tumpang-tindih antar-status, dan memiliki animasi transisi antar-status menggunakan tampilan yang di-snapshot.

Anda mungkin bertanya-tanya, seberapa mudah penerapannya? Apa saja kasus penggunaannya? Bagaimana cara developer lain menggunakan transisi tampilan?

Artikel ini akan memandu Anda menerapkan transisi tampilan di 4 situs berbeda: RedBus (perjalanan), CyberAgent (penerbit berita/blog), Nykaa (eCommerce), dan PolicyBazaar (asuransi) serta manfaat yang diperoleh situs mereka dengan menggunakan View Transitions API.

redBus

redBus, bagian dari grup MakeMyTrip, adalah situs pemesanan dan penjualan tiket bus yang berkantor pusat di Bangalore, India, dengan kehadiran di berbagai wilayah geografis secara global. Situs ini adalah salah satu situs pertama yang menerapkan pengalaman menggunakan View Transitions API.

Mengapa Redbus menerapkan transisi tampilan?

Tim di redBus sangat yakin dalam memberikan pengalaman web yang terpadu dan seperti aplikasi, yang sedekat mungkin dengan aplikasi native mereka. Bahkan, mereka telah menerapkan beberapa solusi khusus selama bertahun-tahun. Misalnya, mereka meluncurkan animasi berbasis JavaScript dan CSS yang disesuaikan untuk transisi halaman bahkan sebelum View Transitions API dikembangkan. Namun, hal itu berarti mereka harus menangani pengelolaan performa di segmen jaringan dan perangkat yang lebih rendah, yang terkadang menyebabkan perbedaan pengalaman dengan strategi pemuatan adaptif yang diterapkan.

redBus menggunakan transisi tampilan untuk beberapa perjalanan pengguna. Misalnya, di bagian bantuan mandiri dalam aplikasi seluler mereka yang membuka halaman web di Tab Chrome Kustom, dan di funnel pemesanan tiket bus mereka tempat pengguna berpindah dari halaman listingan inventaris ke halaman pembayaran. Dalam kasus terakhir, transisi tampilan membuat navigasi halaman ke halaman lebih lancar dan menghasilkan peningkatan rasio konversi. Hal ini merupakan hasil dari pengalaman pengguna yang lebih baik dan performa yang dirasakan lebih baik saat operasi berat—seperti mengambil inventaris yang tersedia dan paling terbaru—dieksekusi.

Detail teknis penerapan

redBus menggunakan React dan EJS sebagai stack teknologi frontend mereka, dengan kombinasi SPA dan MPA di berbagai perjalanan. Kutipan kode berikut menunjukkan cara penggunaan transisi tampilan:

/* 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();
  }
};

Dalam CSS berikut, slide-to-right, slide-to-left, slide-from-right, dan slide-from-left adalah keyframe animasi 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;
}

Dampak bisnis

redBus memilih untuk menerapkan transisi tampilan bersama dengan upaya peningkatan INP di seluruh situs mereka, yang menghasilkan peningkatan penjualan sebesar 7%. Amit Kumar, Senior Engineering Manager di redBus, mengatakan bahwa transisi tampilan sangat bagus bagi mereka yang benar-benar menginginkan pengalaman pengguna yang lebih baik dan menginginkan overhead pemeliharaan yang lebih sedikit.

Kami telah melakukan sesi masukan pengguna yang komprehensif, dengan menyertakan insight berharga dari beragam kelompok pengguna. Pemahaman mendalam kami tentang basis pengguna (bus dan kereta api) dan kebutuhan mereka, dikombinasikan dengan keahlian kami, telah membuat kami yakin bahwa fitur ini akan memberikan nilai yang signifikan sejak awal, tanpa perlu pengujian A/B. Transisi tampilan adalah langkah untuk menjembatani kesenjangan antara aplikasi dan web dengan pengalaman navigasi yang lancar.

Anoop Menon, CTO redBus

CyberAgent

CyberAgent adalah perusahaan IT yang berbasis di Jepang yang menyediakan banyak layanan online, termasuk penerbitan blog dan berita.

Mengapa CyberAgent menerapkan transisi tampilan?

CyberAgent sebelumnya telah mempertimbangkan untuk menggunakan animasi CSS atau framework untuk menerapkan transisi animasi guna meningkatkan pengalaman pengguna, tetapi mereka khawatir dengan performa yang buruk dalam merender DOM dan kemampuan pemeliharaan kode. Saat Chrome menambahkan dukungan untuk View Transitions API, mereka sangat antusias menggunakannya untuk membuat transisi halaman yang menarik dan mengatasi tantangan ini.

CyberAgent menerapkan transisi tampilan antara daftar blog dan halaman blog. Di sini, perhatikan cara mereka menambahkan transisi elemen ke gambar utama. Anda dapat mengunjungi situs mereka dan mengalaminya secara langsung hari ini.

Mereka juga menggunakan kueri media untuk mendesain pengalaman animasi yang berbeda untuk perangkat yang berbeda. Untuk halaman seluler, mereka menyertakan transisi elemen, tetapi efek ini memiliki terlalu banyak gerakan untuk desktop.

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

Detail teknis penerapan

CyberAgent menggunakan Next.js untuk membangun SPA mereka. Contoh kode berikut menunjukkan cara mereka menggunakan 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]);
};

Lihat contoh kode Next.js lainnya.

Transisi Tampilan untuk MPA dengan teknologi pra-render

CyberAgent juga mencoba View Transitions API untuk Aplikasi Multi-Halaman (MPA) baru kami (saat ini dalam tanda chrome://flags/#view-transition-on-navigation) pada layanan yang disebut Ameba News, yang merupakan situs portal berita.

Transisi tampilan digunakan di dua tempat: Yang pertama adalah saat mengubah kategori berita, seperti yang ditunjukkan dalam video berikut.

Yang kedua adalah antara halaman sorotan berita, tempat cuplikan konten ditampilkan, dan saat pengguna mengklik Lihat detail selengkapnya, bagian artikel lainnya akan ditampilkan.

Hal yang menarik adalah mereka hanya menambahkan animasi ke bagian yang akan berubah setelah tombol diklik. Penyesuaian kecil pada desain animasi ini membuat halaman MPA tampak lebih seperti SPA dari sudut pandang pengguna, dengan hanya konten baru yang dianimasikan:

Berikut cara mereka melakukannya: mereka menetapkan view-transition-name yang berbeda ke bagian halaman yang berbeda. Misalnya, mereka menetapkan satu view-transition-name ke bagian atas artikel, satu lagi untuk bagian bawah, dan tidak menambahkan animasi ke bagian atas.

::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;
}

Hal menarik lainnya tentang penggunaan API transisi tampilan oleh CyberAgent adalah mereka menggunakan quicklink untuk menerapkan aturan pra-rendering dengan mudah di halaman detail. Berikut contoh kodenya:

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}/`);
  });

Anda dapat membaca lebih lanjut penerapan link cepat mereka dari artikel ini.

Testimoni

Kazunari Hara, Tech Lead layanan Ameba di CyberAgent, mengatakan bahwa transisi tampilan dapat memberikan dampak signifikan pada bisnis karena dua alasan.

Pertama, mereka memandu pengguna di halaman. Transisi tampilan memungkinkan pengguna berfokus secara visual pada pesan yang paling penting, dan membantu mereka mendapatkan manfaat maksimal dari halaman web. Selain itu, animasi ini meningkatkan dan menekankan brand. CyberAgent memiliki desain animasi khusus untuk mengomunikasikan merek mereka. Dengan transisi tampilan, mereka dapat menerapkan pengalaman bermerek ini tanpa menambah biaya untuk memelihara pustaka eksternal.

View Transitions adalah salah satu API favorit saya. Kemampuan untuk menambahkan animasi sebagai fitur browser standar membuat transisi tampilan lebih mudah diterapkan dan dipertahankan dibandingkan dengan solusi lain yang bergantung pada library. Kami berharap dapat menerapkan transisi tampilan ke lebih banyak layanan untuk mengomunikasikan merek kami.

Kazunari Hara, CTO Ameba

Nykaa

Nykaa adalah platform e-Commerce mode dan kecantikan terbesar di India. Mereka berupaya membuat pengalaman web seluler mereka sedekat mungkin dengan pengalaman aplikasi native mereka. Saat sebelumnya mencoba menerapkan animasi transisi, mereka kesulitan menulis JavaScript kustom yang kompleks. Hal ini juga sedikit memengaruhi performa situs mereka.

Mengapa Nykaa menerapkan transisi tampilan?

Dengan hadirnya transisi tampilan, tim Nykaa melihat peluang bahwa transisi ini yang tersedia secara native berarti UX transisi halaman dapat ditingkatkan secara signifikan tanpa memengaruhi performa. Nykaa banyak menggunakan transisi tampilan untuk bertransisi dari halaman detail produk ke halaman listingan produk.

Detail teknis penerapan

Nykaa menggunakan React dan Emotion untuk membangun SPA mereka. Kode contoh lainnya tentang cara menggunakan Transisi View dengan React dapat ditemukan di sini.

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 untuk animasi panel samping:

::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};
}

Testimoni

Sunit Jindal, kepala aplikasi di Nykaa, mengatakan bahwa manfaat terbesar transisi tampilan adalah "Persepsi kecepatan". Nykaa menggunakan efek kilau untuk menunggu konten dimuat dari backend, tetapi mendapati bahwa menampilkan efek kilau tidak memberi tahu pengguna berapa lama mereka harus menunggu konten dimuat. Dengan transisi tampilan, transisi itu sendiri memberikan kesan kepada pengguna bahwa "sesuatu akan terjadi", yang membuat penantian tidak terlalu menyakitkan.

Nykaa sangat antusias dengan UX halaman web mereka yang baru ditingkatkan dengan transisi tampilan, dan siap menerapkan transisi tampilan di halaman tambahan juga. Berikut pernyataan VP Desain mereka:

Kami berkomitmen untuk menerapkan transisi tampilan di semua fitur mendatang yang sesuai. Beberapa area telah diidentifikasi dan tim secara aktif berinvestasi di area tersebut.

Krishna R V, VP of Design

PolicyBazaar

Berkantor pusat di Gurgaon, PolicyBazaar adalah agregator asuransi dan perusahaan teknologi keuangan multinasional terbesar di India.

Mengapa PolicyBazaar menerapkan transisi tampilan?

Sebagai perusahaan yang mengutamakan web, tim PolicyBazaar selalu berupaya memberikan pengalaman pengguna terbaik di seluruh perjalanan pengguna yang penting. Sebelum peluncuran View Transitions API, developer sudah sering menerapkan transisi kustom menggunakan JavaScript dan CSS karena transisi tersebut meningkatkan pengalaman pengguna, menciptakan alur navigasi yang lancar, dan meningkatkan daya tarik visual situs mereka secara keseluruhan.

Namun, penerapan kustom ini menimbulkan biaya berupa penundaan berbasis performa sesekali, kompleksitas pemeliharaan kode, dan kompatibilitas yang kurang optimal dengan framework yang digunakan. View Transitions API membantu mereka mengatasi sebagian besar tantangan ini dengan menyediakan antarmuka yang mudah digunakan dengan manfaat performa yang tersedia secara native.

PolicyBazaar menggunakan transisi tampilan di berbagai elemen dalam perjalanan pra-penawaran mereka untuk membuat calon pembeli tertarik memberikan detail yang diperlukan untuk membeli polis asuransi.

Detail teknis penerapan

Mereka menggunakan pendekatan framework hibrida dengan Angular dan React yang mendominasi sebagian besar codebase mereka. Berikut kutipan VT dari kode mereka yang ditulis di Angular dan dibagikan oleh Aman Soni (Lead Frontend Developer 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');
  }

Testimoni

Rishabh Mehrotra, Head of Design (Life BU), mengatakan bahwa transisi tampilan memainkan peran penting dalam meningkatkan pengalaman situs bagi pengguna mereka dengan meningkatkan kegunaan, engagement, dan kepuasan secara keseluruhan. Hal ini membantu memberikan navigasi yang lancar, interaksi terpandu, mengurangi beban kognitif, estetika modern, dan banyak lagi.

Meningkatkan pengalaman web adalah tujuan utama PB, dan VT telah terbukti menjadi alat yang sangat penting dalam mencapai tujuan ini dengan kelancaran yang luar biasa. Daya tariknya yang luas di kalangan komunitas developer dan basis pengguna kami telah menumbuhkan antusiasme tim kami. Saat kami mempertimbangkan integrasinya di berbagai POD, kami mengantisipasi dampak positif yang luas terhadap tingkat kepuasan dan keunggulan operasional.

Saurabh Tiwari (CTO, PolicyBazaar)

Langkah berikutnya

Apakah Anda tertarik untuk mencoba transisi tampilan? Berikut beberapa referensi yang dapat Anda ikuti untuk mempelajari lebih lanjut:

• Dokumentasi developer.chrome.com untuk transisi tampilan
• Transisi tampilan untuk penjelasan MPA
• Proposal interoperabilitas untuk membuat transisi tampilan tersedia di seluruh browser