Studi Kasus Aris Setiawan: Shared Element Transitions Naikkan Completion Onboarding Personal Brand dari 54 ke 81 Persen di 2026

TL;DR: Aris Setiawan, konsultan personal branding di Jakarta, mengubah alur onboarding portfolionya dari empat halaman terpisah menjadi alur kontinu pakai Shared Element Transitions berbasis View Transitions API. Selama tiga minggu, completion rate onboarding naik dari 54 persen ke 81 persen. Kuncinya: tiap langkah menampilkan elemen ringkasan yang sama (foto profil, tagline, kartu service), sehingga pengunjung merasa berada dalam satu alur, bukan diseret pindah halaman.

Aris Setiawan menjalankan praktik konsultasi personal branding solo. Sebelum revamp, halaman portfolionya punya empat langkah onboarding terpisah: pilih kategori, isi profil, pilih paket, jadwal konsultasi. Saat saya bantu audit funnel di awal April 2026, drop-off paling tajam terjadi antara langkah 2 dan 3, di mana pengunjung melihat halaman load ulang penuh dan banyak menutup tab.

Masalah Sebenarnya Bukan Loading, Tapi Diskontinuitas Visual

Di awal kami mengira masalah utama TTFB. Padahal field data menunjukkan TTFB sudah di 180 ms (cepat). Yang bermasalah adalah hilangnya konteks: tiap halaman menampilkan elemen profil dan ringkasan paket dengan posisi dan ukuran berbeda, sehingga otak pengunjung harus reorientasi ulang setiap klik. Konsep ini terkait erat dengan Field Data dan persepsi kecepatan, bukan kecepatan teknis. Praktik standar di industri UX menyebut fenomena ini sebagai "transition tax".

Riset Nielsen Norman tentang smooth transitions in UX menyatakan bahwa transisi visual yang konsisten membuat pengguna mempertahankan konteks tugas lebih lama. Dalam kasus Aris, ini berarti dua hal: ringkasan progres (foto profil + nama + kategori yang dipilih) harus selalu terlihat dan bergerak halus, dan kartu paket yang dipilih harus terbawa ke halaman berikutnya tanpa load ulang.

Eksperimen: Shared Element Transitions di Empat Titik Kritis

Saya pakai View Transitions API dengan cross-document transition di Next.js App Router. Empat elemen mendapat view-transition-name unik: foto profil (hero-avatar), tagline (hero-tagline), kartu kategori terpilih (category-card), dan kartu paket (package-card). Untuk halaman tujuan terasa instant, Speculation Rules diaktifkan untuk prerender tiga halaman berikutnya saat hover.

Implementasi terkunci di tiga aturan: pertama, transisi maksimal 300 ms supaya tidak terasa lambat. Kedua, semua transition honor prefers-reduced-motion untuk aksesibilitas. Ketiga, fallback ke navigasi standar di Firefox dan browser lama tanpa degradasi fungsi. Untuk yang baru mulai, ada glosarium Shared Element Transitions yang menjelaskan dasar polanya.

Studi Kasus: Hasil dalam 21 Hari

Yang menarik: TTFB dan LCP nyaris tidak berubah. Yang berubah adalah persepsi pengunjung bahwa mereka berada dalam satu alur, bukan empat halaman terpisah. Aris sekarang punya alur onboarding yang terasa seperti aplikasi native, dijalankan murni di browser. Untuk konteks lebih luas tentang persepsi kecepatan, lihat Core Web Vitals.

Pertanyaan Umum

Apakah Shared Element Transitions bekerja di semua browser di 2026?

Chrome, Edge, dan Safari sudah stabil. Firefox masih bertahap. Selalu sediakan fallback navigasi standar agar pengguna di browser lama tetap dapat alur lengkap meski tanpa animasi.

Apakah animasi ini akan menurunkan skor Core Web Vitals?

Tidak, asal durasi transisi pendek (di bawah 300 ms) dan tidak memicu layout shift. Browser melakukan compositor-only animation di GPU sehingga CLS tetap nol dan INP justru sering membaik karena navigasi terasa lebih ringan.

Bagaimana dengan SEO? Apakah konten tetap terindeks?

Ya, karena ini cross-document transition, setiap halaman tetap memiliki URL sendiri dan tetap di-render server-side. Crawler melihat halaman terpisah seperti biasa. Yang berubah hanya pengalaman navigasi di sisi pengguna.

Berapa effort implementasi untuk site Next.js sedang?

Untuk site dengan 4 sampai 6 halaman alur seperti milik Aris, implementasi memakan 2-3 hari penuh termasuk testing aksesibilitas. Tantangan terbesar bukan kode, tapi memutuskan elemen mana yang layak punya kesinambungan visual.

Apakah pola ini berlebihan untuk personal brand kecil?

Tergantung pada fungsi alur. Untuk landing page tunggal, tidak relevan. Untuk multi-step onboarding atau konfigurasi paket, dampaknya signifikan pada completion rate seperti yang kami amati di kasus Aris.

Pelajaran: Persepsi Kecepatan Adalah Konversi

Yang paling sering saya lihat dari proyek personal brand: optimasi performa dianggap selesai begitu skor Lighthouse hijau. Padahal ada satu level di atasnya, yaitu persepsi kontinuitas. Kalau pengunjung merasa alur Anda mulus dan koheren, mereka menyelesaikannya. Shared Element Transitions adalah jalan paling murah dan paling rapi untuk mencapai persepsi itu di web modern, tanpa library animasi berat.

Untuk yang ingin mulai, sebutkan dulu dua sampai tiga elemen kunci yang sebaiknya kontinu di alur Anda, lalu beri view-transition-name di kedua halaman. Sisa kerjanya browser yang lakukan.