Anatomi
Jenis dan Variasi
Passive Modal
Tidak membutuhkan aksi.
Transactional Modal
Membutuhkan aksi.
Scrollable Modal
Digunakan saat konten yang ditampilkan melebihi kontainer modal.
Behaviors
Seek for Attention
Modal muncul untuk menarik atensi atau meminta konfirmasi dari pengguna agar segera melakukan aksi tertentu.
Feedback
Modal digunakan untuk meminta umpan balik sehingga proses yang sedang berjalan dapat berlanjut.
Progress
Modal muncul sebagai bagian dari proses yang lebih besar yang sedang berlangsung.
Additional Space
Modal memberi ruang tambahan untuk menampilkan informasi yang tidak dapat ditampung dalam satu halaman.
Panduan Penggunaan
As Support
Modal berfungsi sebagai komponen pendukung, bukan penghambat. Ia membantu pengguna melanjutkan alur mereka hingga mencapai tujuan.
Context First
Tampilkan modal sesuai konteks dan alur pengguna agar tidak terasa mengganggu.
Problem Solving
Modal harus menyelesaikan masalah atau memberi informasi yang relevan. Ingat prinsip ini: “No one likes to be interrupted, but if you must, make sure it’s worth the cost.”
Panduan Penulisan
Modal dapat menampilkan berbagai konten, sehingga panjang tulisan tidak dibatasi. Namun tetap gunakan prinsip ringkas agar keterbacaan terjaga.
1. Tentukan Jenis Pesan
| Jenis Pesan | Keterangan | Panduan Penulisan |
|---|---|---|
| Konfirmasi | Meminta pengguna mengonfirmasi aksi yang ingin dilakukan. | Instruktif |
| Informasi | Membagikan informasi penting (termasuk peringatan). | Membantu |
| Kesalahan | Menyampaikan masalah kritis yang harus diselesaikan sebelum pengguna melanjutkan. | Mendukung |
2. Struktur Pesan
Judul
- Wajib ada di setiap modal.
- Komunikasikan inti pesan: hasil akhir, dampak, atau kesimpulan.
- Gunakan kalimat lengkap (subjek + kata kerja).
- Gunakan sentence case, tanpa titik di akhir.
Deskripsi
- Menjelaskan konteks tambahan, alasan modal muncul, serta apa yang perlu dilakukan pengguna.
- Gunakan kalimat lengkap dengan tanda baca akhir.
- Hindari mengulang isi judul.
Tombol
- Gunakan kata kerja imperatif seperti “Simpan”, “Hapus”, “Kirim”.
- Untuk konteks tertentu, gunakan kata yang lebih netral seperti “Lanjut” bila imperatif terasa terlalu keras.
- Selaraskan teks tombol dengan judul aksi bila memungkinkan.
Ilustrasi
- Opsional. Diskusikan dengan desainer/ilustrator bila diperlukan.
- Gunakan ilustrasi untuk mendukung atau menegaskan pesan, atau memberi sentuhan delight.
Responsiveness
Modal harus beradaptasi dengan perangkat yang digunakan:
-
Desktop:
Ditampilkan sebagai modal di tengah layar. -
Mobile:
Modal berubah menjadi bottom sheet untuk memaksimalkan keterbacaan dan kenyamanan interaksi.- Bottom sheet menempel di bawah layar.
- Tinggi bottom sheet dapat menyesuaikan konten, namun jangan menutupi seluruh layar kecuali untuk kasus khusus (misalnya konten yang sangat panjang).