Navigasi yang lancar dapat dilakukan dengan transisi tampilan

Yuriko Hirota

Saurabh Rajpal

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

Namun, mengaktifkan transisi status sangat sulit karena mengharuskan developer mengelola status dua elemen yang berbeda. Bahkan sesuatu seperti cross-fade sederhana melibatkan kedua status yang ada pada saat yang sama. Hal ini memunculkan tantangan kegunaan, seperti menangani interaksi tambahan pada elemen yang keluar. Untuk pengguna perangkat bantuan, ada periode di mana status sebelum dan sesudah berada di DOM secara bersamaan. Selain itu, benda-benda mungkin bergerak di sekitar pohon dengan cara yang tidak bermasalah secara visual, tetapi dapat dengan mudah menyebabkan hilangnya posisi membaca dan fokus.

View Transitions API yang diluncurkan di Chrome 111 memungkinkan pembuatan transisi yang lancar dan sederhana antarhalaman. 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 jenis kasus penggunaan yang ada? Bagaimana developer lain menggunakan transisi tampilan?

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

redBus

redBus, bagian dari grup MakeMyTrip, adalah situs pemesanan dan penjualan tiket bus yang berkantor pusat di Bangalore, India yang hadir di berbagai wilayah geografis di seluruh dunia. Ini adalah salah satu situs pertama yang mengimplementasikan pengalaman menggunakan View Transitions API.

Mengapa Redbus mengimplementasikan transisi tampilan?

Tim di redBus sangat yakin dalam memberikan pengalaman web yang terpadu dan seperti aplikasi, yang semirip mungkin dengan aplikasi asli mereka. Bahkan, mereka telah menerapkan beberapa solusi kustom selama bertahun-tahun. Misalnya, mereka meluncurkan JavaScript dan animasi berbasis 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 menghasilkan pengalaman diferensial dengan menerapkan strategi pemuatan adaptif.

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

Detail teknis penerapan

redBus menggunakan React dan EJS sebagai tech stack frontend, dengan kombinasi SPA dan MPA di berbagai perjalanan. Cuplikan 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 beserta upaya peningkatan INP di seluruh situs mereka, yang menghasilkan 7% lebih banyak penjualan. Amit Kumar, Senior Engineering Manager di redBus, mengatakan bahwa transisi tampilan sangat bermanfaat bagi pengguna 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 menggabungkan insight berharga dari berbagai kelompok pengguna. Pemahaman mendalam kami tentang basis pengguna (bus dan kereta api) dan kebutuhan mereka, ditambah dengan keahlian, membuat kami yakin bahwa fitur ini akan memberikan manfaat yang signifikan sejak awal, tanpa memerlukan 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 berbasis di Jepang yang menyediakan banyak layanan online, termasuk publikasi blog dan berita.

Mengapa CyberAgent mengimplementasikan transisi tampilan?

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

CyberAgent menerapkan transisi tampilan antara daftar blog dan halaman blog. Di sini, perhatikan bagaimana mereka menambahkan transisi elemen ke gambar utama. Anda dapat mengunjungi situs mereka dan mencobanya secara langsung sekarang.

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 pergerakan untuk desktop.

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

Detail teknis penerapan

CyberAgent menggunakan Next.js untuk membuat SPA. Contoh kode berikut menunjukkan cara penggunaan 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 beberapa contoh kode Next.js lainnya.

Lihat Transisi untuk MPA dengan teknologi pra-rendering

CyberAgent juga mencoba View Transitions API for Multiple Page Apps (MPA) baru (saat ini di bawah flag chrome://flags/#view-transition-on-navigation) di layanan yang disebut Ameba News, yang merupakan situs portal berita.

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

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

Poin yang menarik adalah bahwa mereka hanya menambahkan animasi ke bagian yang akan berubah setelah tombol diklik. Perubahan kecil pada desain animasi ini membuat halaman MPA lebih mirip SPA dari sudut pandang pengguna, dengan hanya konten baru yang dianimasikan di:

Berikut cara mereka melakukannya: mereka menetapkan view-transition-name yang berbeda ke bagian yang berbeda pada halaman. 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 ia menggunakan link cepat untuk menerapkan aturan pra-rendering dengan mudah di halaman detail. Berikut adalah kode contohnya:

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 selengkapnya tentang penerapan link cepat dari artikel ini.

Testimoni

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

Pertama, mereka memandu pengguna di laman. Transisi tampilan memungkinkan Anda memfokuskan pengguna secara visual pada pesan yang paling penting, dan membantu mereka mendapatkan manfaat maksimal dari halaman web. Selain itu, tema tersebut meningkatkan dan menekankan brand dengan animasi. CyberAgent memiliki desain animasi yang ditetapkan untuk menyampaikan brand mereka. Dengan transisi tampilan, mereka dapat mengimplementasikan pengalaman bermerek ini tanpa menambah biaya pemeliharaan library eksternal.

View Transitions adalah salah satu API favorit saya. Kemampuan untuk menambahkan animasi sebagai fitur browser standar membuat transisi tampilan lebih mudah diterapkan dan dikelola dibandingkan dengan solusi lain yang bergantung pada library. Kami berharap dapat mengimplementasikan 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 ingin membuat pengalaman web seluler semirip mungkin dengan pengalaman aplikasi native. Saat sebelumnya mencoba menerapkan animasi transisi, mereka kesulitan menulis JavaScript kustom yang kompleks. Hal ini juga sedikit memengaruhi performa situs mereka.

Mengapa Nykaa mengimplementasikan transisi tampilan?

Dengan tibanya transisi tampilan, tim Nykaa melihat peluang di mana transisi ini tersedia secara native berarti UX transisi halaman dapat ditingkatkan secara signifikan tanpa biaya untuk 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 membuat SPA mereka. Kode contoh lainnya tentang cara menggunakan Transisi Tampilan 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, Head of Apps di Nykaa, mengatakan bahwa manfaat terbesar dari transisi tampilan adalah "Persepsi kecepatan". Nykaa menggunakan efek shimmer untuk menunggu konten dimuat dari backend, tetapi mendapati bahwa menampilkan efek shimmer tidak memberi pengguna durasi waktu tunggu konten dimuat. Dengan transisi tampilan, transisi itu sendiri memberi pengguna perasaan bahwa "sesuatu akan terjadi", yang membuat waktu tunggu tidak terlalu menyakitkan.

Nykaa sangat senang dengan peningkatan UX halaman web mereka yang baru dengan transisi tampilan, dan juga siap untuk menerapkan transisi tampilan pada halaman tambahan. Inilah yang dikatakan VP Desain mereka:

Kami berkomitmen untuk mengimplementasikan transisi tampilan di semua fitur mendatang jika memang perlu. Beberapa area telah diidentifikasi dan tim secara aktif berinvestasi di area tersebut.

Krishna R V, VP Desain

PolicyBazaar

PolicyBazaar yang berkantor pusat di Gurgaon adalah perusahaan teknologi keuangan multinasional dan agregator asuransi terbesar di India.

Mengapa PolicyBazaar mengimplementasikan transisi tampilan?

Sebagai perusahaan yang mengutamakan web, tim PolicyBazaar selalu berupaya memberikan pengalaman pengguna sebaik mungkin di seluruh perjalanan penting pengguna mereka. Menerapkan transisi kustom menggunakan JavaScript dan CSS merupakan praktik umum bahkan sebelum peluncuran View Transitions API, karena transisi kustom tersebut meningkatkan pengalaman pengguna, membuat alur navigasi yang lancar, dan meningkatkan daya tarik visual situs secara keseluruhan.

Namun, implementasi kustom ini terkadang mengakibatkan penundaan berbasis performa, 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-kutipan mereka untuk memudahkan calon pembeli memberikan detail yang diperlukan untuk membeli polis asuransi.

Detail teknis penerapan

Mereka menggunakan pendekatan framework hybrid dengan Angular dan React yang mendominasi sebagian besar codebase mereka. Berikut adalah kutipan VT dari kode mereka yang ditulis dalam 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, kepala Desain (Life BU) mereka, mengatakan bahwa transisi tampilan memainkan peran penting dalam meningkatkan pengalaman {i>website<i} bagi pengguna dengan meningkatkan kegunaan, keterlibatan, dan kepuasan secara keseluruhan. Alat ini membantu memberikan navigasi yang lancar, interaksi terpandu, mengurangi beban kognitif, estetika modern, dan banyak lagi.

Meningkatkan pengalaman web merupakan tujuan penting bagi PB, dan VT telah terbukti menjadi alat yang berperan penting dalam mencapai hal ini dengan lancar yang luar biasa. Daya tariknya yang luas di antara komunitas developer dan basis pengguna kami telah menginspirasi tim kami dengan antusiasme. Selagi kami mempertimbangkan integrasinya di berbagai POD, kami mengantisipasi dampak positif yang besar 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 tindak lanjuti untuk mempelajari lebih lanjut:

• dokumentasi developer.chrome.com untuk transisi tampilan
• Lihat transisi untuk penjelasan MPA
• Proposal interop untuk membuat transisi tampilan tersedia di seluruh browser