Modal

Anatomi

Jenis dan Variasi

Passive Modal

Modal yang hanya menampilkan informasi, tidak membutuhkan aksi dari pengguna.

Transactional Modal

Modal yang meminta pengguna melakukan aksi tertentu, misalnya menyimpan atau menghapus data.

Scrollable Modal

Digunakan ketika konten lebih panjang dari kontainer modal dan perlu digulir.

Behaviors

Seek for Attention

Modal muncul untuk menarik perhatian atau meminta konfirmasi agar pengguna segera melakukan aksi.

Feedback

Modal digunakan untuk meminta atau memberikan umpan balik agar proses yang sedang berlangsung dapat berlanjut.

Progress

Modal menjadi bagian dari alur yang lebih besar untuk menampilkan status atau tahapan proses.

Additional Space

Modal menyediakan ruang tambahan untuk menampilkan informasi yang tidak muat dalam halaman utama.

Panduan Penggunaan

As Support

Modal berfungsi sebagai pendukung alur, bukan penghambat. Ia membantu pengguna mencapai tujuan lebih mudah.

Context First

Tampilkan modal hanya bila relevan dengan konteks dan alur pengguna agar tidak mengganggu pengalaman.

Problem Solving

Pastikan modal menyelesaikan masalah atau menyampaikan informasi penting. Pegang prinsip: “No one likes to be interrupted, but if you must, make sure it’s worth the cost.”

Modal sebagai Dialog

• Anggap modal sebagai percakapan singkat antara sistem dan pengguna.
• Sistem mengajukan pertanyaan atau memberikan informasi → pengguna memberi respons.
• Pastikan setiap modal hanya membahas satu topik atau keputusan.
• Hindari memaksa pengguna membaca konten panjang yang seharusnya berada di halaman penuh.
• Gunakan bahasa yang alami, ringkas, dan seolah “berbicara” langsung dengan pengguna.

Layering & Prioritas

• Hindari menumpuk lebih dari satu modal pada saat bersamaan.
• Jika sangat diperlukan, tentukan prioritas dengan jelas dan gunakan overlay berbeda untuk menandakan hierarki.
• Usahakan modal hanya muncul sekali dalam satu alur agar tidak membingungkan.

Close Behavior

• Selalu sediakan cara yang jelas untuk menutup modal (tombol "Batal" atau ikon ×).
• Tentukan apakah modal bisa ditutup dengan klik area luar (overlay dismiss).
  • Gunakan overlay dismiss untuk modal informatif.
  • Nonaktifkan overlay dismiss jika aksi kritis (misalnya penghapusan data) agar tidak terjadi kesalahan pengguna.
• Izinkan tombol Esc untuk menutup modal di desktop.

Responsive

Modal harus fleksibel mengikuti perangkat yang digunakan:

• Desktop:
  Ditampilkan di tengah layar sebagai overlay.

• Mobile:
  Gunakan bottom sheet untuk memaksimalkan keterbacaan dan interaksi.
  • Bottom sheet menempel di bagian bawah layar.
  • Tinggi menyesuaikan konten, namun jangan menutupi seluruh layar kecuali untuk kasus khusus (misalnya konten sangat panjang).
  • Untuk modal sederhana (misalnya konfirmasi singkat), gunakan pola in-page lain agar tidak mengganggu alur.

Lihat panduan untuk bottom sheets.

Ukuran

Terdapat tiga variasi ukuran:

1. Small – gunakan untuk konten ringkas.
2. Medium (default) – ukuran standar untuk sebagian besar kasus.
3. Large – gunakan bila konten membutuhkan ruang lebih luas.

Panduan Penulisan

Modal dapat memuat teks panjang, namun tetap jaga keterbacaan dengan gaya ringkas.

1. Tentukan Jenis Pesan

2. Struktur Pesan

Judul

• Wajib ada pada setiap modal.
• Ringkas, komunikatif, dan langsung menyampaikan inti pesan.
• Gunakan sentence case, tanpa tanda titik.

Deskripsi

• Memberikan konteks tambahan atau instruksi yang lebih jelas.
• Gunakan kalimat lengkap dengan tanda baca akhir.
• Jangan mengulang isi judul.

Tombol

• Gunakan kata kerja imperatif seperti “Simpan”, “Hapus”, “Kirim”.
• Untuk konteks yang lebih halus, gunakan kata netral seperti “Lanjut”.
• Upayakan konsistensi dengan judul aksi.

Ilustrasi

• Opsional.
• Gunakan bila dapat mendukung pesan atau menambah delight.
• Diskusikan dengan desainer bila ilustrasi diperlukan.