Anatomi
Progress Bar
Spinner
Shimmer
Jenis dan variasi
Progress Bar
Elemen visual yang menunjukkan kemajuan proses dalam bentuk bar horizontal atau vertikal yang terisi seiring berjalannya waktu.
Spinner
Elemen berbentuk lingkaran atau ikon berputar yang menunjukkan bahwa proses sedang berjalan tetapi tidak memberi estimasi waktu.
Shimmer
Efek animasi berkilau atau bergeser pada placeholder yang menyerupai konten sebenarnya, biasanya digunakan untuk memberi kesan bahwa konten sedang dimuat.
Behaviors
Memberikan umpan balik ke pengguna
Loading harus menunjukkan bahwa proses sedang berjalan untuk mencegah pengguna merasa aplikasi tidak responsif.
Memberikan informasi estimasi waktu
Jika memungkinkan, informasikan durasi proses agar pengguna dapat memutuskan untuk menunggu atau bertindak.
Menjaga keterlibatan pengguna dengan visual atau animasi yang menarik
Gunakan animasi, ilustrasi, atau teks mikro untuk menghibur atau menginformasikan pengguna selama waktu tunggu yang lama.
Panduan penggunaan
Progress Bar
Ketika sesaat melakukan aksi (contoh: submit, unduh, unggah, simpan, dll) kemudian dibutuhkan waktu untuk memproses suatu data atau aksi. Maka, Progress Bar ini diharapkan akan memberikan informasi, gambaran, atau feedback dalam bentuk diagram batang horizontal, tentang seberapa lama user harus menunggu untuk sebuah data atau aksi diproses.
Spinner
Penggunaannya masih sama dengan Progress Bar. Namun, Spinner menyampaikannya dalam bentuk visual berupa objek bulat dilengkapi dengan indikator progres yang berputar-putar mengelilingi objek bulat tersebut.
Shimmer
Shimmer biasanya berbentuk menyerupai anatomi yang sama persis dengan komponen yang akan dimuat, namun masih dalam bentuk kerangka dari komponen tersebut. Pada umumnya, Shimmer digunakan untuk memuat komponen secara bertahap dalam suatu halaman.
Disarankan
Berikan umpan balik waktu nyata, estimasi waktu tunggu yang ditampilkan harus sesuai.
Dihindari
Hindari memberikan harapan palsu kepada pengguna yang membuat waktu tunggu seolah-olah sudah selesai.
Panduan penulisan
Loading berfungsi sebagai pemberitahuan kepada pengguna bahwa sistem sedang menjalankan aksi. Biasanya tak banyak yang dapat pengguna lakukan selain menunggu sampai sistem selesai menjalankan aksi tersebut. Berikut panduan menulis untuk komponen ini.
Berikan informasi tentang aksi yang sedang berjalan
Apakah Loading disebabkan karena halaman sedang dimuat? Atau karena data sedang dialirkan? Atau mungkin karena dokumen sedang disimpan? Apa pun yang sedang dijalankan sistem, pastikan pengguna tahu dengan jelas dan spesifik. Panduan teknisnya:
- Letakkan info di judul.
- Sebaiknya gunakan kalimat aktif (“Sedang memuat halaman”). Namun, kalimat pasif juga tidak dihindari jika ingin menggunakan struktur kalimat yang diawali subjek (“Halaman sedang dimuat”).
- Selalu gunakan elipsis untuk memberi tahu proses masih berlangsung.
Pastikan berapa lama pengguna harus menunggu
Tentukan estimasi waktu Loading akan ditampilkan. Apakah beberapa detik saja? Atau butuh beberapa hari? Berikan ekspektasi ke pengguna agar dapat melanjutkan aksi atau perjalanannya di sistem. Panduan teknisnya:
- Letakkan info di deskripsi atau subtitle.
- Kalimat yang paling umum digunakan adalah “Mohon tunggu sebentar”. Namun, tergantung juga dengan estimasi waktu Loading tersebut.
- Jika estimasi waktu Loading lebih lama dari beberapa detik atau perkiraan sistem, gunakan deskripsi untuk memberi ketenangan atau kenyamanan selama pengguna menunggu. Misalnya, fakta unik tentang sistem atau produk, atau visual dan motion.
- Catatan: Pastikan untuk cek gaya bahasa dan objektif produk juga.
