GUI Component – Dialog Box

Definisi

Dialog Box adalah sebuah jendela kecil dimana jendela tersebut digunakan oleh sistem informasi untuk berkomunikasi untuk bertukar informasi dan untuk meminta tanggapan pengguna.


Ragam/Tipe

Simple-Alert-Dialog-Box-Plugin-For-jQuery-al-js

Alert Dialog Box

Alert Dialog menampilkan informasi, rincian, dan tindakan yang penting.

Simple-Flexible-jQuery-Dialog-Popup-Plugin-dialogBox.jpg

Simple Dialog Box

Simple Dialog Box menampilkan informasi yang memiliki efek langsung saat dipilih.
mio-design_assets_15bN9cs12hC90Rju5Fsnqy7sbSgbvtADK_dialogs-confirmationdialog

Confirmation Dialog Box

Confirmation dialog box digunakan untuk mengkonfirmasi pilihan pengguna sebelum dialog box dihilangkan.


Anatomi

mio-design_assets_1MgAQ5OcmR0XFXN-CnHRsCkQ6fI-MlLKj_dialogs-elements-1

  1. Container
  2. Judul (opsional)
  3. Teks Pendukung
  4. Tombol
  5. Scrim

Judul

Tujuan dari dialog yang akan disampaikan harus digambarkan melalui judulnya.

Judul harus:

  • Memiliki informasi, kalimat yang jelas ataupun pertanyaan.
  • Menghindari permohonan maaf, alarm, atau ambiguitas.

Tombol

Side-by-side buttons

Menampilkan tombol bersebelahan satu dengan yang lain.

mio-design_assets_1Aod90RW5SVhD-LPWjVCGhVQu3OGdWedQ_dialogs-buttons-sidebyside-1

Stacked full-width buttons

Menampilkan tombol menggunakan satu baris penuh kontainer.

mio-design_assets_1PDm0EPybkBWq6GzeWhb2mflYiQ5UKfmL_dialogs-buttons-stacked-1.png


Penempatan

mio-design_assets_1Uv8i44fG8XbpTJoQbNwAIwcy5L6BMgB7_dialog-when-to-use

Penempatan dialog box baiknya ditempatkan saat:

  • Error yang mengganggu operasional dari aplikasi yang berjalan.
  • Informasi penting yang membutuhkan penanganan, pengambilan keputusan pengguna.

Behavior

Interaction

Dialog Box muncul tanpa pemberitahuan, membutuhkan pengguna untuk mengentikan semua yang dikerjakan.

Position

Dialogs Box mempertahankan fokus pengguna selama pengguna belum mengambil tindakan, seperti memilih pengaturan. Dialog Box menampilkan diri dilayar tedepan saat aplikasi membutuhkan tindakan dari pengguna.

Dismissing dialogs box

Dialog box dapat dihilangkan dengan cara:

  • Pengguna mengetuk layar diluar dialog box
  • Pengguna mengetuk tombol “Cancel”
  • Pengguna menekan tombol system back button (Hanya untuk android)

Bila kemampuan pengguna untuk menghilangkan tombol dialog dinonaktifkan, maka pengguna harus memilih tindakan yang ditampilkan didalam dialog box.


Usage

Dialog box adalah jenis jendela yang muncul didepan aplikasi yang digunakan untuk memberitahukan informasi atau meminta tindakan dari user. Dialog box menonaktifkan semua fungsi aplikasi ketika muncul, dan akan terus muncul hingga ada pengambilan keputusan.

Principles

mio-design_assets_12I6ZaJv72hxln-g66nPT9yGAgd7GTP5g_dialogs-illos-03

Focused

Dialog box memfokuskan perhatian pengguna terhadap konten yang ditampilkan oleh dialog box.

mio-design_assets_1zRDZb1XA1Uau4Kz4bKmWosMnVlDMqiB3_dialogs-illos-01

Direct

Dialog box harus berkomunikasi langsung mengenai informasi dan didadikasikan untuk menyelesaikan pekerjaan.

mio-design_assets_1DdlsZU8nZy5sDZpAgmBtTzYPMEU6FMb6_dialogs-illos-02

Helpful

Dialog box harus muncul sebagai respon dari pekerjaan pengguna ataupun tindakan pengguna, dengan informasi yang kontekstual.


Spesifikasi

Mobile

Simple dialog

0

 

Alert dialog

1

Confirmation dialog

2

Desktop

Mobile Alert

3


Implementasi Dialog Box Pada Aplikasi Buatan Anak Bangsa

Implementasi Alert Dialog Box

Smadav-2018-free-download.png

Implementasi dari dialog box itu sangat membantu pengguna untuk menjaga keamanan komputer pengguna dari virus yang ingin menjangkit komputer pengguna. Menurut saya implementasi Alert Dialog Box itu dapat ditambahkan dengan fitur pengambilang keputusan dari pengguna agar dapat langsung menghilangkan ancaman tersebut.

Smadav Antivirus


Daftar Pustaka:

Tinggalkan komentar