it-swarm.asia

Apakah ada nama untuk anti-pola tarik-turun ini?

Baru-baru ini saya telah melihat masalah kecil UI di drop-down mouse-over. Berikut adalah contoh drop-down tersebut (meskipun Bloomberg bukan satu-satunya pelaku):

https://www.bloomberg.com/view/articles/2017-08-09/yogurt-liquidity-and-listings

edit : Menambahkan tangkapan layar yang ditandai untuk tujuan historis. Garis merah adalah jalur mouse pengguna. Memasuki kotak merah akan langsung menyembunyikan drop-down Opini.

Bloomberg View - Menu issue

Jika Anda mengarahkan kursor ke "Opini" di bilah atas, Anda akan disajikan tautan yang terkait dengan bagian Opini.

Masalahnya: Jalur garis lurus dari posisi dalam tombol Opini ke beberapa tautan akan melewati bagian "Politik", yang secara instan menghapus opsi Opini. Ini berarti pengguna harus secara sadar memikirkan jalur mouse mereka saat mereka memilih tautan.

Apakah ada nama untuk masalah ini? Apa cara terbaik untuk mengatasinya?

edit : Berikut adalah gif tambahan yang menampilkan masalah, milik blog Ben Kamens , yang juga ditautkan oleh Midas di bawah :

Gif demonstrating menu issue

244
N. Quest

Salah satu saran untuk nama solusi adalah dari artikel hebat ini adalah menu arah yang bertujuan .

Ini menunjukkan bagaimana Amazon mencegah pengguna memilih elemen yang tidak diinginkan dengan salah saat mengarahkan 'menu-mega' mereka, tanpa menggunakan penundaan, dengan mendeteksi jalur kursor.

Di setiap posisi kursor, Anda dapat menggambarkan segitiga antara posisi mouse saat ini dan sudut kanan atas dan bawah dari menu dropdown. Jika posisi mouse berikutnya berada di dalam segitiga itu, pengguna mungkin memindahkan kursor ke submenu yang sedang ditampilkan. Amazon menggunakan ini untuk efek yang bagus. Selama kursor berada di dalam segitiga biru itu, submenu saat ini akan tetap terbuka.

Amazon Hover Menu direction

289
Midas

Masalah yang Anda bicarakan kadang-kadang disebut sebagai " koridor mouse sempit ". Memiliki koridor mouse yang sempit dapat mengakibatkan pengguna menjadi frustrasi oleh kurangnya kontrol pengguna .

Alternatif pendekatan segitiga Amazon (yang semula dilakukan oleh Bruze Tognazzini pada tahun 1986 dengan Apple) adalah menggunakan kotak kecil untuk memperpanjang koridor . Satu keuntungan dari implementasi khusus ini adalah bahwa itu murni CSS (elemen semu) sehingga menghilangkan ketergantungan pada jQuery (atau Vanilla JS).

Image from: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

(Gambar dari: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ )

96
Jonathan

Di tempat saya bekerja, kami menyebutnya "menu parit bintang kematian". Saya cukup yakin kami tidak menemukan nama itu, tetapi saya tidak dapat menemukan buku itu dari mana.

36
Matthew

Dari perspektif programer, saya akan menyarankan fungsi melayang maksud (menunda reaksi lingkungan sekitar 300ms. Ini tidak terlalu terlihat dan akan mengurangi risiko penutupan/pembukaan menu yang tidak disengaja). Meskipun Anda mungkin menemukan bahwa 300ms akan bertambah di pohon menu dan sub-menu yang lebih kompleks.

9
Snsa90

Nama yang saya gunakan untuk pola ini adalah hover tunnel .

Terowongan melayang telah lama dikenal sebagai masalah: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Salah satu hal terburuk tentang menu hover adalah mereka memaksa pengguna untuk memindahkan mouse mereka melalui terowongan hover. Hover Tunnels adalah bagian-bagian yang harus dipindahkan pengguna untuk meng-klik suatu item. Pengguna yang lebih tua yang kurang paham teknologi akan sering mengalami kesulitan melakukan hal ini. Bahkan pengguna yang mengerti teknologi dapat merasa menjengkelkan karena mereka harus menggerakkan mouse mereka di jalur yang terbatas.

Saya menduga 'anti-pola' hanyalah efek samping dari hover tunnel yang runtuh karena, sama sekali, itu tidak akan menjadi cara yang dapat diandalkan untuk mengarahkan pengguna ke iklan atau konten lainnya.

4
Michael Heraghty

Tidak ada nama untuk pola ini.

Ini hanya menu melayang, menu melayang adalah sampah ketika datang ke UX. Bahkan saya, pengguna internet yang berpengalaman memiliki masalah menavigasi melalui menu tersebut dan dalam 9 dari 10 kali saya marah ketika saya harus menggunakan menu hover.

Satu hal untuk membuat menu seperti itu lebih ramah pengguna adalah misalnya untuk mengatur penundaan kecil ketika pengguna menavigasi keluar dari tabel sehingga menu tidak segera menutup tetapi memiliki penundaan seperti 1-1.5s sehingga pengguna memiliki kesempatan untuk pindah mouse kembali sementara dalam aliran normalnya.

1
Pectoralis Major