Tuesday, August 16, 2022
spot_imgspot_imgspot_imgspot_img
HomeVisual DesignPraktik Terbaik yang Bisa Kamu Coba untuk Merancang Overlay UI

Praktik Terbaik yang Bisa Kamu Coba untuk Merancang Overlay UI

Menu drop-down, keyboard yang geser ke atas dan lightbox adalah semua contoh overlay UI. Overlay UI adalah solusi desain yang sangat kuat yang memiliki banyak kegunaan. Tugas yang coba dilakukan pengguna menjadi semakin kompleks, dan hamparan benar-benar dapat membantu menghilangkan tekanan. Terkadang memulai overlay tidak dapat dihindari, dan mereka sangat bagus untuk pelaporan kesalahan, persetujuan keamanan, pengambilan data, serta interaksi tambahan. Namun, mereka berkisar dari yang informatif hingga yang membuat frustrasi, jadi kami ingin menggali sedikit lebih dalam dan mencari tahu praktik terbaik apa yang harus Anda ingat ketika bekerja dengan modals dan overlay.

Pertama, mari kita lihat beberapa lakukan dan larangan:

Lakukan

  • Gunakan modals untuk fokus dan hal-hal yang akan menguntungkan pengguna.
  • Gunakan overlay untuk mengambil tekanan antarmuka pengguna yang kompleks (UI) (mis., Kontrol lanjutan, pilihan kompleks dengan multi opsi, penjelasan dan teks bantuan, mendukung hal-hal yang dibutuhkan dengan cepat).
  • Tempatkan fokus keyboard pada elemen interaktif pertama di dalam modal dan jebak di dalam konten modal.
  • Izinkan pengguna untuk menutup modals (dengan mengklik di luarnya dan dengan tombol ‘tutup’ eksplisit), kecuali diperlukan tindakan untuk bergerak maju.
  • Kembalikan fokus pada elemen interaktif yang memicu ketika modal ditutup.
  • Sertakan dokumentasi untuk komponen pelapis dan modal dalam sistem desain Anda (seperti yang dilakukan oleh penanggung asuransi kesehatan Australia:  overlay  dan  modal ).
  • Lihat  denda Google  untuk pengantara yang menonjol.

Larangan

  • Jangan gunakan modal kecuali kontennya membutuhkan fokus 100 persen.
  • Jangan menutupi konten yang relevan secara kontekstual dengan modal / tampilan yang ditampilkan.
  • Jangan gunakan overlay untuk hanya menjual sesuatu.
  • Jangan membuat modal yang hanya muncul ketika Anda mencoba untuk pergi.
  • Jangan mengandalkan satu cara untuk menutup. Tombol keluar dan mengklik di luar harus berfungsi serta “X”.
  • Jangan letakkan modals di dalam modals. Jangan terlalu fokus pada JavaScript dan gunakan CSS ringan jika memungkinkan.
  • Jangan abaikan  pedoman aksesibilitas .

Jangan pernah mengganggu perjalanan pengguna

Informasi kontekstual di Duolingo, yang dirancang agar tidak terlalu mencolok, memberikan informasi kunci kepada pengguna tentang hal-hal yang berpotensi kecil, dan tidak menghalangi tetapi menarik fokus.

Tangkapan layar aplikasi Duolingo
Gambar oleh Duolingo

“Memastikan bahwa hamparan tidak mengganggu perjalanan pengguna yang lancar dan lancar dapat turun menggunakan interaksi yang tepat pada waktu yang tepat,” kata  Karl Randay , kepala desain di studio pengalaman pelanggan digital studio  383 . “Memahami bagaimana orang berpikir ketika mereka sedang mengikuti suatu proses atau mencoba untuk menyelesaikan tugas adalah penting dalam mengetahui kapan dan bagaimana memasukkan overlay sebagai metode interaksi yang berpotensi dipaksakan. Jelaskan apa yang akan terjadi ketika Anda mengklik sesuatu dan apa yang terjadi selanjutnya dalam setiap interaksi, ”katanya.

Salah satu cara untuk menetapkan tingkat harapan yang tepat adalah dengan menggunakan bahasa yang sederhana dan manusiawi, kata Karl. Kurangi bahasa di sekitar tugas yang kompleks dan gunakan label salin dan kancing yang dibuat dengan cermat. Putuskan kapan harus menggunakan overlay sebagai cara halus untuk menangkap perhatian pengguna atau ketika perubahan layar penuh diperlukan.

Pilih hamparan Anda dengan bijak

Saat pengguna menavigasi produk atau layanan digital, mungkin ada sejumlah langkah yang mereka ikuti, peristiwa yang mereka memicu, dan input yang mereka selesaikan. “Menjaga fokus seseorang pada konten dan interaksi biasanya membutuhkan penggunaan perubahan layar penuh, mendedikasikan perhatian penuh UI untuk tugas yang ada,” kata Karl.

RELATED ARTICLES

Most Popular

Recent Comments