Toast

Anatomi

Jenis dan variasi

Action link

Toast dengan Action Link dapat digunakan ketika ada aksi spesifik yang dapat diambil oleh user sebagai tindak lanjut dari informasi yang ditampilkan.

Default

Digunakan untuk aksi yang bersifat netral.

Success

Digunakan untuk menginformasikan aksi yang berhasil. Icon ditambahkan untuk mempertegas visual bahwa aksi yang dilakukan telah berhasil.

Behaviors

Durasi

Untuk memastikan keterbacaan, Toast memiliki durasi muncul selama minimal 4 detik.

Dismissing Toast

Toast akan hilang dengan sendirinya setelah durasi waktu yang ditentukan. Selain itu, pengguna dapat menghilangkan Toast secara manual dengan interaksi swipe up untuk mobile.

Multiple Toast

Jika aksi yang dilakukan pengguna memunculkan Toast berulang, maka Toast baru akan menggantikan Toast yang sebelumnya.

Panduan penggunaan

Gunakan Toast untuk informasi yang singkat dan tidak membutuhkan aksi mendesak

Toast merupakan komponen desain yang akan hilang setelah durasi tertentu. Jika ingin memberikan informasi/konten yang lebih panjang atau ada aksi mendesak yang harus dilakukan pengguna, disarankan untuk menggunakan komponen yang lebih prominen seperti Banner. Pastikan tombol aksi dapat diakses di tempat lain selain Toast dan berisi aksi yang umum. Jika tombol berisi aksi yang spesifik, diskusikan apa info tersebut tepat ditempatkan di Toast atau justru di komponen lain.

Peletakan di tengah layar

Jumlah baris

Panduan penulisan

Komponen Toast menyediakan cara untuk menampilkan pesan sementara yang informatif kepada pengguna. Komponen ini dapat digunakan untuk menunjukkan pesan keberhasilan, pesan kesalahan, atau jenis pesan lainnya. Komponen Toast juga dapat dikatakan sebagai cara langsung, singkat, dan tidak mengganggu untuk menginformasikan pengguna tentang hasil tindakan mereka. Berikut panduan menulis untuk komponen ini.

Perhatikan batas karakter

Toast biasanya muncul selama 4 detik, setelah itu otomatis hilang. Sehingga, pastikan untuk memberikan pesan yang ringkas dan sebaiknya tidak melebihi batas karakter berikut ini.

1. Untuk versi mobile, komponen memiliki ruang yang kecil:
   1. 1 baris maksimal 64 karakter. Lebih dari itu akan menjadi 2 baris.
   2. 2 baris maksimal 84 karakter. Lebih dari itu akan terpotong dengan elipsis (“...”).
2. Untuk versi desktop, tidak ada batas karakter. Namun, lebih singkat lebih baik.
   1. 1 baris maksimal 66 karakter. Lebih dari itu akan menjadi 2 baris dan seterusnya.

Tentukan jenis pesan

Penulisan Toast bergantung pada jenis pesannya, baik itu pesan informatif yang netral, pesan kesalahan, atau pesan keberhasilan.

Pesan informatif

Pesan informatif biasanya menggunakan bentuk umum (default) dari Toast.

Formula yang disarankan:
subjek + kata kerja (bisa disertai kata sifat) + keterangan opsional + tanda titik.

Pesan kesalahan

Pesan kesalahan juga biasanya menggunakan bentuk umum (default) dari Toast.

Formula yang disarankan:
“Gagal” + kata kerja + objek + “Coba lagi” + tanda titik.

Pesan keberhasilan

Pesan keberhasilan biasanya menggunakan bentuk berhasil (success) dari Toast. Bentuk ini mencakup ikon centang untuk memberi tahu pengguna secara cepat bahwa aksi mereka berhasil.

Formula yang disarankan:
“Berhasil” + kata kerja + objek + tanda seru.

Pesan dengan tombol aksi

Komponen Toast memiliki varian dengan tombol aksi (call to action) seperti di bawah:

Penulisan yang disarankan:

1. Pastikan tombol aksi mendukung pesan di Toast dan sebaiknya diawali dengan kata kerja
2. Karena Toast hanya muncul sementara, pastikan tombol aksi dapat diakses di tempat lain selain Toast dan berisi aksi yang umum. Jika tombol berisi aksi yang spesifik, diskusikan apa info tersebut tepat ditempatkan di Toast atau justru di komponen lain

Gunakan kalimat singkat, kata benda umum, dan bahasa yang straightforward

Tempatkan kata yang paling penting di awal kalimat

Terutama untuk komponen seperti Toast yang hanya muncul sepersekian detik saja, kadang pengguna tidak sempat melihat keseluruhan kalimat. Dalam hal ini, kata “Gagal” dan “Berhasil” lebih penting dari kata lainnya karena dengan langsung menginformasikan hasil dari aksi pengguna.

Sebaiknya gunakan kata benda umum

Hal ini dilakukan untuk menjaga panjang kalimat menjadi 1 baris saja. Kata benda umum biasanya lebih singkat dan bisa digunakan untuk kasus serupa.

Straightforward

Karena hanya muncul sepersekian detik, sebaiknya jangan menyorot gaya bahasa. Langsung sampaikan pesan saja, lalu biarkan pengguna kembali ke hal yang mereka sedang lakukan. Toast juga kurang cocok untuk pesan promosi atau penawaran yang menunjukkan manfaat mencoba atau melakukan sesuatu.