Anda mungkin pernah ke sana sebelumnya. Bagaimana kita memilih antara menampilkan modal kepada pengguna, dan kapan kita mengarahkan mereka ke halaman baru yang terpisah? Dan apakah itu penting? Sebenarnya memang demikian. Keputusan tersebut memengaruhi alur pengguna, konteksnya, kemampuan mereka untuk mencari detail, serta frekuensi kesalahan dan penyelesaian tugas. Kedua pilihan tersebut dapat mengganggu dan membuat frustrasi — pada waktu dan tempat yang salah. Jadi sebaiknya kita melakukannya dengan benar. Baiklah, mari kita lihat bagaimana melakukan hal itu. Modal vs. Dialog vs. Overlay vs. Lightbox Meskipun kita sering berbicara tentang satu komponen modal UI, kita sering mengabaikan nuansa halus dan rumit di antara semua jenis modals yang berbeda. Faktanya, tidak semua modal itu sama. Modal, dialog, overlay, dan lightbox — semuanya terdengar serupa, namun sebenarnya sangat berbeda:
DialogIstilah umum untuk “percakapan” (pengguna ↔ sistem). OverlayPanel konten kecil ditampilkan di bagian atas halaman. ModalUser harus berinteraksi dengan overlay + latar belakang dinonaktifkan. NonmodalUser harus berinteraksi dengan overlay + latar belakang diaktifkan. Latar belakang LightboxDimmed untuk memusatkan perhatian pada modal.
Seperti yang disoroti oleh Anna Kaley, sebagian besar overlay muncul pada waktu yang salah, mengganggu pengguna saat melakukan tugas penting, menggunakan bahasa yang buruk, dan mengganggu alur pengguna. Sifatnya bersifat interupsi, dan biasanya memiliki tingkat keparahan yang tinggi tanpa adanya kebutuhan yang kuat akan hal tersebut.
Tentu saja pengguna harus diperlambat dan diinterupsi jika konsekuensi dari tindakan mereka memiliki dampak yang besar, namun untuk sebagian besar skenario, non-modal jauh lebih halus dan merupakan pilihan yang lebih ramah untuk membawa sesuatu ke perhatian pengguna. Jika ada, saya selalu menyarankannya sebagai default. Modal → Untuk Tugas Tunggal dan Mandiri Sebagai desainer, kita sering menganggap modals sebagai hal yang tidak relevan dan mengganggu — dan sering kali memang demikian! — namun mereka juga memiliki nilainya. Mereka bisa sangat membantu untuk memperingatkan pengguna tentang potensi kesalahan atau membantu mereka menghindari kehilangan data. Mereka juga dapat membantu melakukan tindakan terkait atau menelusuri detailnya tanpa mengganggu status halaman saat ini. Namun keuntungan terbesar dari modals adalah membantu pengguna menjaga konteks layar saat ini. Bukan hanya UI saja, tapi juga input yang diedit, posisi scroll, keadaan akordeon, pemilihan filter, pengurutan, dan sebagainya.
Terkadang, pengguna perlu mengonfirmasi pilihan dengan cepat (misalnya, filter seperti yang ditunjukkan di atas) lalu segera melanjutkan dari sana. Tentu saja, penyimpanan otomatis dapat mencapai hal yang sama, tetapi hal ini tidak selalu diperlukan atau diinginkan. Dan memblokir UI sering kali bukan ide bagus. Namun, modals tidak digunakan untuk tugas apa pun. Biasanya, kami menggunakannya untuk tugas tunggal dan mandiri di mana pengguna harus langsung masuk, menyelesaikan tugas, dan kemudian kembali ke tempat mereka sebelumnya. Tidak mengherankan, mereka bekerja dengan baik untuk interaksi singkat dan berprioritas tinggi (misalnya, peringatan, tindakan merusak, konfirmasi cepat). Ketika modals membantu: 🚫 Modal sering kali mengganggu, invasif, dan membingungkan.🚫 Modal menyulitkan untuk membandingkan dan menyalin-menempel.✅ Namun modal memungkinkan pengguna untuk mempertahankan banyak konteks.✅ Berguna untuk mencegah kesalahan permanen dan kehilangan data.✅ Berguna jika mengarahkan pengguna ke halaman baru akan mengganggu. ✅ Tampilkan modal hanya jika pengguna menghargai gangguan tersebut. ✅ Secara default, lebih memilih dialog non-pemblokiran (“nonmodals”). Halaman → Untuk Alur Kerja Multi-Langkah yang Kompleks Wizard atau navigasi tab dalam modals tidak berfungsi dengan baik, bahkan pada produk perusahaan yang kompleks — di sana, panel samping atau laci biasanya berfungsi lebih baik. Masalah dimulai ketika pengguna perlu membandingkan atau mereferensikan titik data — namun modals memblokir perilaku ini, sehingga mereka membuka kembali halaman yang sama di beberapa tab.
Untuk alur yang lebih kompleks dan proses multi-langkah, halaman mandiri berfungsi paling baik. Halaman juga berfungsi lebih baik jika menuntut perhatian penuh pengguna, dan referensi ke layar sebelumnya tidak terlalu membantu. Dan laci berfungsi untuk subtugas yang terlalu rumit untuk modal sederhana, namun tidak memerlukan navigasi halaman penuh. Kapan harus menghindari modals: 🚫 Hindari modals untuk pesan kesalahan.🚫 Hindari modals untuk notifikasi fitur.🚫 Hindari modals untuk pengalaman orientasi.🚫 Hindari modals untuk tugas multi-langkah yang rumit dan panjang.🚫 Hindari beberapa modals yang bertumpuk dan gunakan prev/next sebagai gantinya.🚫 Hindari modals yang dipicu secara otomatis kecuali benar-benar diperlukan. Hindari KeduanyaUntuk Tugas Berulang Dalam banyak produk yang kompleks dan memiliki banyak tugas, pengguna akan mendapati diri mereka melakukan tugas yang sama berulang kali. Di sana, modals dan navigasi halaman baru menambah gesekan karena mengganggu alur atau memaksa pengguna mengumpulkan data yang hilang di antara semua tab atau tampilan yang berbeda. Seringkali, pengguna mendapatkan pengalaman yang buruk, penuh dengan konfirmasi yang tidak pernah berakhir, peringatan yang berlebihan, instruksi yang panjang lebar, atau hanya titik referensi yang hilang. Seperti yang disebutkan oleh Saulius Stebulis, dalam skenario ini, bagian yang dapat diperluas atau pengeditan di tempat sering kali bekerja lebih baik — mereka mempertahankan tugas tetap pada layar saat ini. Dalam praktiknya, dalam banyak skenario, pengguna tidak menyelesaikan tugasnya secara terpisah. Mereka perlu mencari data, menyalin-menempelkan nilai, menyaring entri di tempat berbeda, atau sekadar meninjau catatan serupa saat mereka mengerjakan tugas mereka. Overlay dan laci lebih membantu dalam menjaga akses ke data latar belakang selama tugas berlangsung. Akibatnya, konteksnya selalu ada pada tempatnya, tersedia untuk referensi atau copy-paste. Simpan modals dan navigasi halaman untuk momen ketika gangguan benar-benar menambah nilai — terutama untuk mencegah kesalahan kritis. Modal vs. Halaman: Pohon Keputusan Beberapa waktu lalu, Ryan Neufeld menyusun panduan yang sangat berguna untuk membantu desainer memilih antara modals dan halaman. Muncul dengan lembar contekan PNG yang praktis dan templat Google Doc dengan pertanyaan yang dibagi menjadi 7 bagian. Ini panjang, sangat menyeluruh, tetapi sangat mudah diikuti:
Ini mungkin terlihat menakutkan, tetapi prosesnya cukup sederhana dalam 4 langkah:
Konteks layar. Pertama, kami memeriksa apakah pengguna perlu mempertahankan konteks layar yang mendasarinya. Kompleksitas dan durasi tugas. Tugas yang lebih sederhana, terfokus, dan tidak mengganggu dapat menggunakan modal, namun alur yang panjang dan kompleks memerlukan sebuah halaman. Referensi ke halaman yang mendasarinya. Kemudian, kami memeriksa apakah pengguna sering kali perlu merujuk ke data di latar belakang atau apakah tugas tersebut hanyalah konfirmasi atau pilihan sederhana. Memilih overlay yang tepat. Terakhir, jika overlay memang merupakan pilihan yang baik, ini akan memandu kita untuk memilih antara modal atau nonmodal (condong ke arah nonmodal).
Menyelesaikan Jika memungkinkan, hindari memblokir seluruh UI. Buat dialog mengambang, menutupi sebagian UI, namun memungkinkan navigasi, pengguliran, dan salin-tempel. Atau tampilkan isi modal sebagai laci samping. Atau gunakan akordeon vertikal sebagai gantinya. Atau arahkan pengguna ke halaman terpisah jika Anda perlu menampilkan banyak detail. Namun jika Anda ingin meningkatkan efisiensi dan kecepatan pengguna, hindari modals dengan cara apa pun. Gunakan mereka untuk memperlambat pengguna, untuk menggabungkan perhatian mereka, untuk mencegah kesalahan. Seperti yang dikatakan Therese Fessenden, tidak ada orang yang suka diganggu, namun jika harus, pastikan biayanya sepadan. Temui “Pola Desain Antarmuka Cerdas” Anda dapat menemukan seluruh bagian tentang modal dan alternatif di Pola Desain Antarmuka Cerdas, kursus video berdurasi 15 jam dengan 100 contoh praktis dari proyek kehidupan nyata — dengan pelatihan UX langsung akhir tahun ini. Semuanya, mulai dari mega-dropdown hingga tabel perusahaan yang kompleks — dengan 5 segmen baru ditambahkan setiap tahun. Lompat ke pratinjau gratis. Gunakan kode BIRDIE untuk menghemat 15%. Temui Pola Desain Antarmuka Cerdas, kursus video kami tentang desain antarmuka & UX.
Pelatihan Video + UXHanya videoVideo + Pelatihan UX$ 495,00 $ 699,00
Dapatkan Pelatihan Video + UX25 pelajaran video (15 jam) + Pelatihan UX Langsung. Jaminan uang kembali 100 hari. Hanya video$ 300,00$ 395,00
Dapatkan kursus video40 pelajaran video (15 jam). Diperbarui setiap tahun. Juga tersedia sebagai Paket UX dengan 2 kursus video.
Sumber Daya Berguna
Berbagai Jenis Popup, oleh Anna Kaley Praktik Terbaik untuk Merancang Modal UI, oleh Uxcel Kami Menggunakan Terlalu Banyak Modal Sial: Pedoman UX, oleh Adrian Egger Dialog Modal & Nonmodal, oleh Therese Fessenden Desain UI Perusahaan Modern: Dialog Modal, oleh James Jacobs Modal dalam Sistem Desain
