Digital Transformation
Toast Notification
TL;DR: Toast notification adalah pesan singkat yang muncul sementara di tepi layar setelah pengguna melakukan aksi, misalnya setelah data tersimpan. Sifatnya non-blocking, artinya pengguna tetap bisa melanjutkan pekerjaan tanpa menutup pesan itu.
Apa itu Toast Notification?
Toast notification adalah komponen antarmuka berupa kotak pesan kecil yang muncul beberapa detik lalu menghilang sendiri. Namanya berasal dari analogi roti yang melompat keluar dari pemanggang: muncul, terlihat sebentar, lalu turun lagi.
Fungsinya adalah menutup lingkaran umpan balik. Pengguna menekan tombol simpan, sistem memproses, lalu toast muncul dengan pesan seperti Perubahan berhasil disimpan. Tanpa umpan balik ini, pengguna tidak yakin apakah aksinya berhasil dan sering menekan tombol berulang kali.
Toast berbeda dari modal dialog. Modal memblokir interaksi dan menuntut keputusan. Toast tidak. Karena itu, teks di dalamnya termasuk kategori microcopy yang harus sangat ringkas.
Kapan Dipakai dan Kapan Tidak
| Situasi | Komponen yang tepat |
|---|---|
| Konfirmasi aksi ringan (simpan, salin, hapus item) | Toast |
| Error yang butuh keputusan pengguna | Modal atau inline error |
| Proses sedang berjalan | Skeleton screen atau spinner |
| Halaman belum punya data | Empty state |
| Informasi permanen yang harus dibaca | Banner statis |
Praktik yang lazim dipakai tim produk: durasi tampil sekitar 4 sampai 6 detik, satu toast dalam satu waktu, dan aksi yang merusak seperti hapus sebaiknya disertai tombol Urungkan di dalam toast itu sendiri.
Kenapa Penting?
Toast yang dirancang baik menurunkan aksi berulang yang tidak perlu dan mengurangi keraguan pengguna. Sebaliknya, toast yang salah pakai menimbulkan masalah nyata. Menaruh pesan error kritis di toast berisiko membuat pesan itu hilang sebelum sempat dibaca, terutama oleh pengguna yang membaca lebih lambat.
Ada juga sisi aksesibilitas. Toast yang muncul dan hilang otomatis tidak selalu terbaca oleh pembaca layar kecuali diberi atribut peran yang benar. Panduan teknisnya dijelaskan di dokumentasi ARIA live region MDN. Untuk situs bisnis di Indonesia yang penggunanya beragam, mengabaikan hal ini berarti sebagian pengguna kehilangan informasi penting.
Pertanyaan Umum
Berapa lama toast sebaiknya tampil?
Rentang yang umum dipakai adalah 4 sampai 6 detik untuk pesan pendek. Pesan yang lebih panjang atau yang memuat tombol aksi sebaiknya diberi waktu lebih lama, atau dibuat menetap sampai pengguna menutupnya.
Apakah toast boleh dipakai untuk pesan error?
Boleh untuk error ringan yang tidak butuh tindakan lanjutan. Untuk error yang memblokir proses, misalnya pembayaran gagal, gunakan pesan inline di dekat elemen yang bermasalah agar tidak hilang.
Di mana posisi toast yang paling baik?
Tidak ada posisi tunggal yang benar. Yang penting konsisten di seluruh produk. Pada tampilan mobile, posisi bawah lebih mudah dijangkau, tetapi perlu dipastikan tidak menutupi tombol utama.