Apa itu Skeleton Screen? Dan Apakah Mereka Bekerja?

Situs web dapat mengirimkan semua barang, tetapi tidak masalah jika halaman lambat dimuat. Menurut pencarian oleh Portent, tingkat konversi turun rata-rata 4,42% dengan setiap detik tambahan waktu buka. Orang tidak hanya menginginkan kecepatan mereka mengharapkannya.

Saat ini, sebagian besar audiens mungkin berinteraksi dengan situs web berkinerja tinggi (Facebook, YouTube, Instagram, dll). Secara teratur, yang berarti ekspektasi mereka sama tinggi dengan situs web yang mereka kunjungi. Itu mungkin tampak menakutkan, tetapi ada keuntungannya: Selain membuat situs web lebih cepat, ada cara untuk membuat pengguna berpikir bahwa situs web lebih cepat, meskipun sebenarnya tidak.

Dalam posting ini, saya akan membahas salah satu metode tersebut, skeleton screens. Kami akan membongkar apa itu, mengapa mereka bekerja, dan kapan menggunakannya untuk membuat pengguna tetap terlibat.

Apa itu Skeleton Screen?

Skeleton Screen adalah tempat penampung visual yang muncul sebelum konten halaman dirender sepenuhnya. Ini memberikan pratinjau fidelitas rendah dari halaman yang dirender sepenuhnya untuk memberi kesan waktu buka yang lebih cepat. Skeleton screens terdiri dari bentuk, garis, dan teks berwarna terang yang menguraikan struktur halaman sebelum konten akhir dimuat di tempatnya.

Istilah “Skeleton screens” diperkenalkan pada tahun 2013 oleh desainer produk Luke Wroblewski dalam sebuah postingan blog tentang mengurangi waktu tunggu yang dirasakan. Dalam postingan tersebut, ia menjelaskan bagaimana mengungkapkan konten halaman secara bertahap mengalihkan perhatian pengguna ke konten yang sedang dimuat, dan mematikan waktu pemuatan itu sendiri. Kita dapat melihat contoh layar kerangka yang digunakan pada salah satu aplikasi awal Wroblewski, Polar :

Melihat layar ini dari kiri ke kanan, kita melihat bagaimana proses pemuatan dimulai dengan skeleton screens yang menampilkan pratinjau struktur dasar laman, tidak seperti bingkai gambar. Skeleton screens muncul terlebih dahulu, lalu layar secara bertahap diisi dengan konten hingga halaman penuh ditampilkan.

Sejak posting asli, pendekatan Wroblewski telah diadopsi secara luas oleh situs web utama, aplikasi web, dan aplikasi seluler.

Mari kita lihat beberapa contoh situs web lainnya. Ini salah satu dari YouTube: Saat mengakses beranda, pertama kali melihat layar kerangka ini :

Tidak lama setelah itu, konten halaman terakhir menggantikannya :

Ini contoh lain dari Facebook. Inilah yang pertama kali dilihat pengguna saat mereka memuat halaman :

Dan berikut ini adalah halaman yang dirender sepenuhnya :

Beberapa skeleton screens menambahkan komponen animasi juga. Itu umum untuk melihat skeleton screens dengan gradien bergerak dari kiri ke kanan, seperti ini :

Untuk membuat kode sendiri skeleton screens animasi, ada beberapa tutorial yang bisa diikuti.

Mengapa Skeleton Screen Bekerja?

Skeleton screens tidak benar-benar membuat halaman dimuat lebih cepat. Sebaliknya, mereka dirancang untuk membuatnya terasa seperti halaman dimuat lebih cepat.

Skeleton screens memiliki fungsi yang sama seperti pemintal dan animasi pemuatan lainnya : isyarat visual bahwa pengguna harus menunggu sebentar hingga konten dimuat.

Namun, tidak seperti pemintal, skeleton screens menciptakan ilusi kemajuan. Animasi pemintal tidak terkait dengan konten dan tidak memberi tahu kami berapa lama lagi kami harus menunggu. Dengan skeleton screens, seolah-olah kita sedang menonton konten mulai terlihat. Akibatnya, pengguna menganggap waktu pemuatan lebih pendek durasinya saat diperlihatkan skeleton screens daripada saat diperlihatkan pemintal atau layar kosong, bahkan saat masa tunggunya sama.

Terus terang, skeleton screens menipu kita untuk mendapatkan pengalaman pengguna yang lebih baik tanpa kita sadari. Pikirkan tentang ini : hampir pasti pernah melihat teknik ini digunakan sebelumnya, tetapi tahukah apa yang terjadi?

Cara Menggunakan Skeleton Screen di Situs Web

Skeleton screen adalah salah satu metode yang dapat meningkatkan pengalaman pengguna di situs web dengan memberikan persepsi waktu muat yang lebih singkat. Namun, itu bukan solusi sempurna untuk setiap skenario pemuatan.

Umumnya, skeleton screens bekerja paling baik pada :

• Laman yang membutuhkan banyak sumber daya

Misalnya, laman yang memerlukan beberapa skrip latar belakang akan memakan waktu lebih lama untuk dimuat. Hal ini biasa terjadi pada aplikasi web, yang menarik data dari beberapa sumber untuk membentuk halaman yang lengkap.

• Halaman web dengan banyak gambar

Jika perlu memuat banyak gambar sekaligus, skeleton screens mungkin bisa menjadi pengganti yang baik. Untuk halaman ini, pertimbangkan untuk menerapkan pemuatan lambat terlebih dahulu, yang merupakan teknik serupa untuk mengurangi waktu pemuatan yang dirasakan.

Dan berikut adalah beberapa kasus ketika harus menghindarinya :

• Sebagai pengganti kinerja yang buruk

Skeleton screen tidak berfungsi selamanya dan akhirnya kehilangan efeknya saat waktu muat terlalu lama. Jika dapat lebih mengoptimalkan situs web untuk memuat konten lebih cepat, selalu lakukan itu terlebih dahulu. Jika baru dalam menurunkan waktu muat, panduan utama untuk kinerja situs web adalah tempat yang tepat untuk memulai.

• Pada halaman yang dimuat dengan cepat

Untuk halaman yang dimuat dalam waktu kurang dari 500 milidetik, layar kerangka kemungkinan tidak akan membuat perbedaan dalam pengalaman.

• Video

Pengguna masih mengaitkan buffering video dengan pemintal. Hindari skeleton screen setiap kali video dimuat di halaman.

• Proses yang lebih lama

Unggahan, unduhan, konversi file, dan proses lain yang membutuhkan waktu lebih lama untuk diselesaikan harus menggunakan isyarat visual yang berbeda, seperti bilah kemajuan.

• Layar kerangka yang tidak cocok dengan konten yang dirender

Cobalah untuk membuat skeleton screen sedekat mungkin dengan konten akhir dalam ukuran dan penempatan. Ketika pengguna melihat skeleton screen diikuti oleh konten yang tidak mengikuti secara logis, ini merongrong harapan mereka dan meniadakan manfaat apa pun.

Terakhir, seperti semua pengoptimalan UX, kami menyarankan untuk menguji layar kerangka pada pengunjung jika memiliki sarana untuk melakukannya. Meskipun penelitian telah menemukan mereka efektif, itu tidak berarti mereka dijamin bekerja pada audiens. Skeleton screen bahkan dapat menyebabkan kebingungan, tetapi satu-satunya cara untuk mengetahuinya adalah dengan mengujinya dengan pengguna.