Dialog dan flyout

Dialog dan flyout adalah elemen UI sementara yang muncul ketika sesuatu terjadi yang memerlukan pemberitahuan, persetujuan, atau informasi tambahan dari pengguna.

Dialog

Dialog adalah overlay UI modal yang menyediakan informasi aplikasi kontekstual. Dialog memblokir interaksi dengan jendela aplikasi hingga diberhentikan secara eksplisit. Mereka sering meminta semacam tindakan dari pengguna.

Flyout

Flyout adalah popup kontekstual ringan yang menampilkan UI yang terkait dengan apa yang dilakukan pengguna. Ini termasuk logika penempatan dan ukuran, dan dapat digunakan untuk mengungkapkan kontrol sekunder atau menunjukkan detail selengkapnya tentang item.

Tidak seperti dialog, flyout dapat dengan cepat dimatikan dengan mengetuk atau mengklik di suatu tempat di luar flyout, menekan tombol Escape atau tombol Back, mengubah ukuran jendela aplikasi, atau mengubah orientasi perangkat.

Apakah ini kontrol yang tepat?

Dialog dan flyout memastikan bahwa pengguna mengetahui informasi penting, tetapi mereka juga mengganggu pengalaman pengguna. Karena dialog bersifat modal (memblokir), mereka mengganggu pengguna, mencegah mereka melakukan hal lain sampai mereka berinteraksi dengan dialog. Flyout memberikan pengalaman yang kurang menyenangkan, tetapi menampilkan terlalu banyak flyout dapat mengganggu.

Setelah menentukan bahwa Anda ingin menggunakan dialog atau flyout, Anda perlu memilih mana yang akan digunakan.

Mengingat bahwa dialog memblokir interaksi dan flyout tidak, dialog harus dicadangkan untuk situasi di mana Anda ingin pengguna menghilangkan semuanya untuk fokus pada sedikit informasi tertentu atau menjawab pertanyaan. Flyout, di sisi lain, dapat digunakan ketika Anda ingin menarik perhatian pada sesuatu, tetapi tidak masalah jika pengguna ingin mengabaikannya.

Gunakan dialog untuk...

• Mengekspresikan informasi penting yang harus dibaca dan diakui pengguna sebelum melanjutkan. Contohnya meliputi:
  • Ketika keamanan pengguna mungkin disusupi
  • Ketika pengguna akan mengubah aset berharga secara permanen
  • Saat pengguna akan menghapus aset berharga
  • Untuk mengonfirmasi pembelian dalam aplikasi
• Pesan kesalahan yang berlaku untuk konteks aplikasi keseluruhan, seperti kesalahan konektivitas.
• Pertanyaan, ketika aplikasi perlu mengajukan pertanyaan pemblokiran kepada pengguna, seperti kapan aplikasi tidak dapat memilih atas nama pengguna. Pertanyaan pemblokiran tidak dapat diabaikan atau ditunda, dan harus menawarkan pilihan yang ditentukan dengan baik kepada pengguna.

Gunakan flyout untuk...

• Mengumpulkan informasi tambahan yang diperlukan sebelum tindakan dapat diselesaikan.
• Menampilkan info yang hanya relevan beberapa waktu. Misalnya, di aplikasi galeri foto, saat pengguna mengklik gambar mini gambar, Anda mungkin menggunakan flyout untuk menampilkan versi gambar yang besar.
• Menampilkan informasi selengkapnya, seperti detail atau deskripsi item yang lebih panjang di halaman.

Cara untuk menghindari penggunaan dialog dan flyout

Pertimbangkan pentingnya informasi yang ingin Anda bagikan: apakah cukup penting untuk mengganggu pengguna? Pertimbangkan juga seberapa sering informasi perlu ditampilkan; jika Anda menampilkan dialog atau pemberitahuan setiap beberapa menit, Anda mungkin ingin mengalokasikan ruang untuk info ini di antarmuka pengguna utama sebagai gantinya. Misalnya, di klien obrolan, daripada menampilkan flyout setiap kali teman masuk, Anda mungkin menampilkan daftar teman yang sedang online saat ini dan menyoroti teman saat mereka masuk.

Dialog sering digunakan untuk mengonfirmasi tindakan (seperti menghapus file) sebelum mengeksekusinya. Jika Anda mengharapkan pengguna sering melakukan tindakan tertentu, pertimbangkan untuk memberikan cara bagi pengguna untuk membatalkan tindakan jika itu adalah kesalahan, daripada memaksa pengguna untuk mengonfirmasi tindakan setiap kali.

Contoh

• API Penting: Kelas ContentDialog, kelas Flyout

• Jika Anda telah menginstal aplikasi Galeri WinUI 3, klik di sini untuk membuka aplikasi dan lihat ContentDialog atau Flyout yang sedang beraksi. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub.

Cara membuat dialog

Lihat artikel Dialog.

Cara membuat flyout

Lihat artikel Flyout.