Image

QUICK CONTACT













Image

Kenali Beberapa Aturan Penting Dalam UX Untuk Desain Dialog Box    

23 Jun 2022 by Billy Gani
Dialog box merupakan elemen antarmuka pengguna yang efektif saat Anda merancang desain dan menggunakannya dengan benar. Elemen ini dapat membantu pengguna Anda sepenuhnya mencapai tujuan mereka lebih cepat dan lebih mudah. Tetapi dialog box dapat membuat pengguna frustasi ketika terjadi kesalahan. Mengetahui cara mendesain dialog box yang tepat akan memungkinkan Anda untuk menggunakannya dengan cara yang tidak mengganggu pengguna.

Apa Yang Dimaksud Dengan Dialog Box?

 
Dialog box atau kotak dialog adalah overlay yang mengharuskan pengguna untuk berinteraksi dengannya dan dirancang untuk mendapatkan respons dari pengguna. Dialog box ini memberitahu pengguna tentang informasi penting, mengharuskan pengguna untuk membuat keputusan, atau melibatkan banyak tindakan. Dialog box ini semakin banyak digunakan untuk mengarahkan perhatian pengguna pada tindakan tertentu, tanpa mengalihkannya dari konteks layar mereka saat itu.
 
Sekarang mari kita lihat praktek dari desain dialog box dan penggunaannya:
 
Mengurangi Gangguan
 
Gunakan dialog box seminimal mungkin karena kehadirannya cukup menganggu pengguna. Kemunculannya yang tiba-tiba memaksa pengguna untuk menghentikan tugas mereka dan fokus pada konten dari dalam dialog box tersebut. Untuk dialog box yang penting, pengguna harus berurusan dengan tindakan dalam dialog sebelum dapat melanjutkan dan tidak dapat lagi dapat mengakses halaman di bawahnya.
 
Terkadang hal ini menjadi hal yang baik, seperti ketika pengguna harus mengkonfirmasi tindakan penting (seperti "Apakah Anda ingin menghapus akun Anda?"), tetapi untuk banyak tindakan lain, hal tersebut tidak perlu dan seringkali sangat mengganggu.
 
  • Memerlukan Konfirmasi




    Masuk akal untuk menggunakan dialog box dalam situasi di mana Anda membutuhkan pengguna untuk berinteraksi sebelum melanjutkan, atau ketika biaya dari kesalahan dapat menjadi sangat tinggi.
  • Tidak Memberikan Dialog Box Secara Mendadak

    Tiba-tiba membuka dialog box tanpa pengguna melakukan apapun adalah ide yang sangat buruk. Sayangnya, banyak website yang membombardir pengunjung dengan kotak berlangganan seperti contoh di bawah ini.



    Kotak dialog harus selalu terbuka saat pengguna melakukan (atau melakukan) tindakan pada halaman. Tindakan tersebut dapat berupa mengklik tombol, mengikuti tautan, atau memilih opsi.
 
Dialog Box sesuai dengan Pengguna
 
Kotak dialog harus dapat mencerminkan bahasa yang digunakan oleh pengguna (menggunakan kata, frasa, dan konsep yang familiar), dibandingkan dengan memberikan istilah sistem yang terdengar rumit.
 
  • Memberikan Opsi & Pertanyaan Yang Jelas

    Anda harus dapat menulis pertanyaan menggunakan bahasa yang jelas. Misalnya, ketika Anda memberikan pertanyaan tentang apakah mereka perlu menghapus file, jika dibandingkan dengan berkata “bersihkan storage Anda?” Anda dapat bertanya dengan “Apakah Anda ingin menghapus file yang Anda miliki?”

    Secara umum, Anda perlu menghindari permintaan maaf, ambiguitas, atau pernyataan seperti “Peringatan!” atau “Apakah Anda yakin?” karena hal tersebut memberikan gangguan visual yang lebih berantakan.

  • Masukkan Informasi Yang Penting Saja

    Penting agar kotak dialog tidak mengaburkan informasi yang mungkin bermanfaat bagi pengguna. Misalnya, kotak dialog yang meminta pengguna untuk mengonfirmasi penghapusan beberapa item harus mencantumkan item yang dihapus.

    Hindari juga menggunakan tindakan "Pelajari lebih lanjut" untuk mengakses dokumentasi bantuan; ekspansi in-line dalam dialog harus digunakan sebagai gantinya. Jika informasi yang lebih luas diperlukan, masukkan sebelum memasuki kotak dialog.

  • Tawarkan Respon Balik Yang Informatif

    Ketika sebuah proses selesai dilaksanakan, ingatlah untuk  menampilkan pesan notifikasi (atau respon balik secara visual). Biarkan pengguna mengetahui bahwa mereka telah melakukan setiap tindakan yang memang mereka perlukan.

Gunakan Prinsip Minimalisme

 
Anda sebaiknya tidak memberikan terlalu banyak informasi dalam kotak dialog. Tetap buat kotak dialog Anda rapi dan sederhana. Tetapi, minimalisme tidak berarti terbatas. Setiap informasi yang Anda berikan harusnya bernilai dan relevan.
  • Jumlah Elemen & Opsi 

    Kotak dialog harus terlihat secara menyeluruh dalam halaman. Anda juga diharapkan tidak menggunakan konten yang perlu digeser dalam kotak dialog.

  • Jumlah Tindakan

    Kotak dialog yang Anda rancang tidak dapat berisikan lebih dari dua tindakan. Tindakan ketiga, seperti “pelajari lebih lanjut” yang biasanya digunakan untuk menavigasi pengguna untuk keluar dari sebuah tindakan, meningkatkan risiko pengguna untuk meninggalkan tindakan yang sedang mereka lakukan dan tidak menyelesaikannya.

  • Tidak Memasukkan Langkah Bertahap Dalam Kotak Dialog

    Memecah tugas yang kompleks menjadi beberapa langkah adalah ide yang bagus, tetapi hal tersebut juga umumnya merupakan tanda bahwa ada sesuatu yang terlalu rumit untuk diminta pengguna untuk diselesaikan dalam batas-batas kotak dialog.


Berikut adalah beberapa informasi tentang aturan penting dalam merancang desain UX untuk dialog box yang mungkin perlu Anda perhatikan ketika merancang produk digital seperti website ataupun mobile apps dari bisnis Anda. Jika Anda masih membutuhkan bantuan dalam mengelola dan mengembangkan website dan UI UX Design yang sesuai dan diperlukan untuk bisnis Anda dengan harga yang bersaing dan juga kualitas yang tidak diragukan, Eannovate hadir untuk Anda.
 
Selain itu, untuk melengkapi hal diatas, kami juga memberikan layanan SEO Digital Marketing di Jakarta lengkap dengan copywriter untuk mendukung aktivitas online dari bisnis Anda. 
 

CONTACT US

Let's Work Together

Have cool projects to work on ?

CONTACT

Image
LOKASI
INDONESIA

Ruko Kosambi Baru blok A ext 1 no 66. Jakarta Barat.

Image
TELEPON
INDONESIA
+62813 8251 8448
Image
E-MAIL
hello@eannovate.com

Office hours of Web, UI UX Design, Mobile App Development, SEO in Jakarta, Indonesia
JAM KERJA
Mon-Fri 9.30am - 6.00pm
icon
icon
Free Consultation
icon