- Layar loading dapat meningkatkan pengalaman pengguna dengan memberikan visibilitas tentang apa yang sedang dilakukan sistem.
- Ada beberapa hal yang perlu dipertimbangkan untuk membuat layar loading yang tepat.
- Sebelum mendesain, sistem loading perlu diperiksa terlebih dahulu.
- Misalnya, apakah loading memblokir input pengguna, apakah progres dapat diketahui, seberapa banyak informasi yang dimuat, seperti apa pengalaman di perangkat mobile, dan sebagainya.
- Apakah itu loading pasif (sistem memuat lebih dulu) atau loading aktif (dimuat berdasarkan tindakan pengguna), dan sebagainya.
- Perubahan berdasarkan jumlah yang ditampilkan sekaligus
- Untuk komponen yang kompleks, menampilkannya satu per satu bisa menjadi pilihan yang lebih baik.
- Untuk komponen yang relatif sederhana, lebih baik menampilkannya sekaligus setelah loading selesai.
- Jika jumlah komponen banyak, diperlukan lazy loading.
- Gunakan pendekatan seperti infinite scroll, tombol "lihat lebih banyak", atau paging.
- Perubahan berdasarkan frekuensi
- Jika terus berubah, UI yang menampilkan loading harus diminimalkan.
- Lihat UI penyimpanan real-time di Google Drive sebagai referensi.
- Jika hanya sesekali berubah, lebih baik segera ditampilkan kepada pengguna.
- Misalnya popup yang memberi tahu bahwa konten yang sedang dilihat telah diperbarui dan meminta pengguna me-refresh layar.
- Perubahan berdasarkan waktu yang dibutuhkan
- Pertama, perlu ditinjau apakah progres bisa diketahui dengan jelas atau tidak pasti.
- Jika kurang dari 0,1 detik
- Cukup tampilkan hasilnya secara langsung.
- Dalam beberapa kasus, menampilkan layar loading palsu justru bisa lebih baik.
- Misalnya ketika tugas tersebut terasa penting bagi pengguna (seperti menyimpan), atau ketika diperlukan jeda agar pengguna bisa mengambil tindakan (seperti tombol batal kirim pada email).
- Jika antara 0,1 detik hingga 1 detik
- Ini adalah jeda yang sangat umum dan biasanya tidak terlihat oleh pengguna, jadi lebih baik tidak menambahkan layar loading.
- Jika lebih dari 1 detik
- Begitu melewati 1 detik, pengguna mulai menyadari waktu tunggu, jadi sebaiknya tambahkan layar loading yang sesuai.
- Jika komponen yang dimuat kecil, loading spinner adalah pilihan yang baik. (seperti upload file)
- Jika layar berubah, layar loading skeleton adalah pilihan yang baik.
- Jika gambar adalah konten utama, mengekstrak warna dominan lalu membuatnya blur bisa menjadi pilihan yang sangat baik.
- Jika antara 2 detik hingga 10 detik
- Indikator waktu seperti "memerlukan sekitar 5 detik" bisa efektif.
- Progress bar selalu merupakan pilihan yang baik.
- Jika terdiri dari beberapa tahap, menampilkan tahap-tahap tersebut juga bisa menjadi cara yang baik.
- Bahkan jika tidak ada tahap yang jelas, pesan umum tetap bisa digunakan. (seperti sedang menghubungkan ke server)
- Jika memerlukan lebih dari 10 detik
- Jika progres bisa diketahui dengan jelas, sebaiknya tampilkan persentase dan sisa waktu. (seperti 50% pada upload file)
- Namun, berhenti di 99% sangat fatal, jadi jika itu mungkin terjadi, gunakan cara lain.
- Jika memerlukan waktu lebih lama tetapi progres tidak bisa diketahui dengan jelas, sebaiknya beri tahu bahwa pengguna akan diberi notifikasi lewat email atau cara lain ketika pekerjaan selesai, sambil tetap memberi pengguna kontrol.
- Menjalankannya sepenuhnya di latar belakang tanpa menghalangi seluruh tindakan pengguna juga merupakan pilihan yang baik. (seperti status progres upload di Google Drive)
3 komentar
Terima kasih untuk tulisannya yang bagus.
. Saya pribadi tidak menampilkannya sampai 250ms, tapi saya belum yakin apakah masih oke kalau ini diperpanjang sampai 1 detik
Oh, saya memang sedang mencari dasar untuk layar loading! Terima kasih, hehe
Ringkasannya sepertinya jadi terlalu panjang... Bagaimanapun, karena isinya banyak yang bagus, saya membawa sebanyak mungkin.
Menarik bahwa adanya layar loading palsu bisa meningkatkan rasa percaya. Di Hacker News juga cukup banyak yang membahas topik itu.