Digital Transformation
Skeleton Screen
Skeleton Screen adalah placeholder visual berupa garis atau blok abu-abu yang ditampilkan saat konten sedang dimuat, memberi kesan halaman lebih cepat dibanding spinner.
TL;DR: Skeleton Screen adalah teknik UI yang menampilkan kerangka halaman (placeholder abu-abu) selagi konten asli dimuat. Dibandingkan spinner loading tradisional, skeleton terbukti menurunkan perceived waiting time dan meningkatkan kesan kecepatan.
Apa itu Skeleton Screen?
Skeleton Screen, kadang disebut "content placeholder", adalah pola UI/UX yang menampilkan kotak atau garis kelabu yang meniru struktur konten final. Saat data datang, placeholder diganti konten sungguhan.
Luke Wroblewski yang memperkenalkan istilah ini pada 2013 berargumen bahwa user merasa menunggu lebih sebentar dengan skeleton dibanding spinner karena otak fokus pada struktur, bukan pada pergerakan berulang.
Skeleton vs Spinner vs Progress Bar
| Teknik | Cocok untuk | Efek Persepsi |
|---|---|---|
| Spinner | Aksi singkat (under 1 detik) | Netral |
| Progress Bar | Proses dengan durasi diketahui | Paling informatif |
| Skeleton Screen | Loading konten halaman (list, feed, dashboard) | Paling cepat terasa |
Kenapa Penting?
Skeleton Screen secara tidak langsung memperbaiki CLS karena sudah mem-reserve ruang untuk konten, sehingga tidak ada layout shift saat data datang. Ini penting bagi Core Web Vitals.
Dalam beberapa proyek dashboard klien, saya melihat skeleton menurunkan bounce rate pada halaman berat dibanding penggunaan spinner penuh-layar. Laporan NN/g menyebut skeleton paling efektif untuk konten yang sudah terstruktur dan tinggal diisi data.
Pertanyaan Umum
Apakah skeleton mempercepat loading sebenarnya?
Tidak. Skeleton tidak mempercepat loading teknis, tetapi meningkatkan "perceived performance" yaitu kesan kecepatan.
Kapan sebaiknya tidak pakai skeleton?
Untuk aksi singkat seperti form submit under 1 detik, spinner lebih cocok. Untuk upload besar, progress bar lebih informatif.
Istilah Terkait