Navigasi yang lancar dapat dilakukan dengan transisi tampilan

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

Namun, mengaktifkan transisi status sangat sulit karena mengharuskan developer mengelola status dua elemen yang berbeda. Bahkan hal-hal seperti cross-fade sederhana melibatkan kedua status yang ada secara bersamaan. Hal ini memunculkan 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 berpindah di sekitar hierarki dengan cara yang baik secara visual, tetapi dapat dengan mudah menyebabkan posisi dan fokus membaca hilang.

View Transitions API yang diluncurkan di Chrome 111 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 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 (travel), CyberAgent (penerbit berita/blog), Nykaa (eCommerce), dan PolicyBazaar (asuransi), serta cara situs mereka mendapatkan manfaat 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 menerapkan transisi tampilan?

Tim di redBus sangat yakin untuk memberikan pengalaman web terpadu seperti aplikasi, yang sedekat mungkin dengan aplikasi native mereka. Bahkan, mereka telah menerapkan beberapa solusi yang disesuaikan 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 pengalaman yang berbeda 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 yang mengarahkan pengguna dari halaman listingan inventaris ke halaman pembayaran. Dalam kasus kedua, transisi tampilan membuat navigasi dari halaman ke halaman menjadi lebih lancar dan menghasilkan peningkatan rasio konversi. Hal ini dihasilkan dari pengalaman pengguna yang lebih baik dan performa yang dirasakan lebih baik saat operasi yang berat—seperti mengambil inventaris terbaru yang tersedia—dijalankan.

Detail teknis penerapan

redBus menggunakan React dan EJS sebagai stack teknologi frontend mereka, 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 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 menggabungkan insight berharga dari berbagai 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 blog dan publikasi berita.

Mengapa CyberAgent menerapkan transisi tampilan?

CyberAgent telah mempertimbangkan untuk menggunakan animasi CSS atau menggunakan framework untuk menerapkan transisi animasi guna meningkatkan pengalaman pengguna sebelumnya, tetapi mereka khawatir dengan performa yang buruk dalam merender DOM dan pemeliharaan kode. Saat Chrome menambahkan dukungan untuk View transitions API, mereka sangat antusias untuk menggunakannya guna 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 hero. Anda dapat mengunjungi situsnya dan mencobanya 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 gerakan untuk desktop.

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

Detail teknis penerapan

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

Melihat Transisi untuk MPA dengan teknologi pra-rendering

CyberAgent juga mencoba View Transitions API untuk Aplikasi Multihalaman (MPA) baru kami (saat ini dalam tanda 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, sisa artikel akan diburamkan.

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 terlihat 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 berbagai bagian 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 dari 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 pengguna berfokus secara visual pada pesan yang paling penting, dan membantu mereka mendapatkan hasil maksimal dari halaman web. Selain itu, ia meningkatkan dan menekankan brand dengan animasi. CyberAgent memiliki desain animasi yang ditetapkan untuk menyampaikan brand mereka. Dengan transisi tampilan, mereka dapat menerapkan 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 menerapkan transisi tampilan ke lebih banyak layanan untuk menyampaikan brand kami.

Kazunari Hara, CTO Ameba

Nykaa

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

Mengapa Nykaa mengimplementasikan transisi tampilan?

Dengan munculnya transisi tampilan, tim Nykaa melihat peluang bahwa transisi ini tersedia secara native sehingga UX transisi halaman dapat ditingkatkan secara signifikan tanpa mengorbankan performa. Nykaa sangat 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, kepala aplikasi 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 tahu pengguna berapa lama mereka harus menunggu 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. Berikut adalah pernyataan VP Design 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

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

Mengapa PolicyBazaar menerapkan transisi tampilan?

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

Namun, implementasi kustom ini menimbulkan biaya berupa penundaan berbasis performa yang sesekali terjadi, 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 merasa senang memberikan detail yang diperlukan untuk membeli polis asuransi.

Detail teknis penerapan

Mereka menggunakan pendekatan framework campuran 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. Hal 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 kalangan komunitas developer dan basis pengguna kami telah membangkitkan antusiasme tim kami. Saat 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 tindak lanjuti untuk mempelajari lebih lanjut:

• Dokumentasi developer.chrome.com untuk transisi tampilan
• Penjelasan transisi tampilan untuk MPA
• Proposal interop untuk membuat transisi tampilan tersedia di seluruh browser