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.

“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.

“Jika terjadi sesuatu yang membutuhkan perhatian tiba-tiba pengguna, input pengguna lebih lanjut diperlukan, atau informasi kontekstual tambahan diperlukan, gunakan panel modal dan panel overlay, yang memungkinkan fungsionalitas atau pesan tambahan sambil tetap menjaga konteks konteks di mana pengguna di latar belakang. “

Pilih jenis pelapisan dengan bijak karena ini bisa menjadi cara cepat untuk mengacaukan dan memberikan pengalaman terputus-putus dan tidak alami selama apa yang sebaliknya bisa menjadi aliran yang cukup alami.

Jelajahi psikologi di balik perilaku pengguna

Periscope adalah contoh yang bagus dari persyaratan pengguna bersyarat. Inilah yang terjadi ketika Anda dengan anggun merancang kegagalan. Semua hal ini perlu dijaga agar pengguna dapat menyelesaikan tugasnya.

Menggunakan sedikit ilmu kognitif dan memahami kebiasaan pengguna juga merupakan cara cepat untuk menentukan kapan dan bagaimana memanfaatkan overlay.

“Jika suatu tugas dan UI terasa agak akrab atau relatif mudah dipahami, pengguna akan bergerak lebih cepat,” saran Karl. “Ini disebut kefasihan kognitif – tugas yang akrab membutuhkan upaya mental yang jauh lebih sedikit. Seorang pengguna lebih pasif dan jenis drive pada autopilot sampai mereka menemukan sesuatu yang tidak mereka harapkan atau kesalahan, pada titik mana mereka beralih ke pemikiran sadar dan cukup banyak menabrak dinding bata. “

Saat kami menggunakan autopilot, kami mampu memikirkan hingga 11 juta keputusan per detik. Sebaliknya, keadaan kita yang sepenuhnya sadar hanya 40 keputusan per detik. “Jadi beralih dari autopilot ke kondisi sadar sepenuhnya adalah setara dengan gaya yang diperlukan untuk mendorong dummy test crash yang diikat dengan baik melalui dinding tangki.”

Keakraban bisa menjadi cara yang baik untuk memastikan pengguna dapat dengan cepat memahami apa yang Anda katakan kepada mereka. “Ini dapat melibatkan segala sesuatu mulai dari posisi tombol, mengadopsi gaya dan ukuran – dari UI yang mendasari dan pola desain umum hingga meniru objek yang lebih berhubungan selama tugas kompleks – memecah nomor kartu kredit menjadi blok empat, dan mendesain UI sekitar objek fisik. Ini adalah cara sederhana untuk menggunakan referensi dunia nyata heuristik untuk sesuatu sebagai cara yang lebih mudah untuk memecah pengalaman harus mengisi formulir – karena tidak ada yang suka melakukan itu. “

Overlay digunakan untuk pelaporan kegagalan dan kesalahan

Penggunaan chrome iOS default di aplikasi Hodinkee memberi pengguna pilihan ukuran, sambil tetap memberikan konteks untuk situasi yang mereka pilih.

Tidak cukup hanya memberi tahu pengguna bahwa ada sesuatu yang rusak. Itu tidak membantu Anda memahami apa yang telah terjadi atau apa yang dapat Anda lakukan untuk memperbaiki masalah dan kembali ke apa yang Anda lakukan.

Contoh klasik dari tidak merancang untuk kegagalan adalah halaman kesalahan 404, Karl menjelaskan. “Bahkan istilah 404 adalah referensi teknik yang telah menemukan jalannya ke dalam bahasa yang sama, berkat meluap-luapnya jalan buntu teknis ini. Anda dapat menggunakan overlay dan modal windows untuk menyoroti masalah potensial, tetapi mereka harus jelas, dan memotong terminologi teknis apa pun untuk menggambarkan dengan jelas apa yang terjadi. “

Juga, sajikan berbagai pilihan sehingga pengguna dapat membuat keputusan terbaik untuk memperbaiki situasi dan kembali ke jalur atau perjalanan awal mereka. Ini tidak perlu lengkap, tetapi mereka perlu mempertimbangkan apa yang mungkin menjadi tujuan pengguna ketika perjalanan mereka berhenti – jadi gunakan akal sehat dan pastikan selalu ada cara untuk menutup dialog itu sangat penting.

Pertimbangkan dampaknya

Satu hal yang perlu diingat ketika mendesain untuk overlay adalah dampak yang diberikan pada situasi yang berbeda.

“Di ponsel, ada area layar yang jauh lebih sedikit, jadi setiap jendela pengantara akan jauh lebih terlihat daripada di desktop,” Karl memperingatkan. “Pastikan segala sesuatu yang penting diperhatikan, terutama saat menavigasi layar yang rumit secara visual.”

Karl merekomendasikan penggunaan lapisan berwarna semi-buram antara overlay dan UI yang mendasarinya. Pastikan bahwa lapisannya cukup buram sehingga overlay mengambil fokus pengguna, tetapi tidak begitu buram sehingga Anda benar-benar memutuskan koneksi visual dengan pengalaman yang mendasarinya.

Overlay telah menerima banyak rap buruk selama beberapa tahun terakhir, dan banyak yang sepantasnya, tetapi mereka juga dapat menguntungkan pengguna dan membantu memberikan fokus untuk tugas-tugas kompleks. Gunakan prinsip dan pedoman yang dicakup di atas untuk memastikan Anda membantu pengguna Anda dan tidak membuat mereka frustrasi.

Dengan terima kasih kepada Karl Randay atas bantuannya pada artikel ini, dan kepada Eric Eggert, Dylan Smith, Laurie Jones, Benjamin Hollway, Daniel Filler, Joe Leech, Eric Bailey ,  dan Scott Cole atas saran mereka tentang dos dan larangan.

sumber: xd.adobe.com