Pola Desain Frustrasi: Menu Mega-Dropdown Hover

Situs web yang kompleks sering kali mengandalkan navigasi yang rumit. Ketika sebuah situs web menampung ribuan halaman, sering kali dikombinasikan dengan situs web mikro dan ratusan subbagian, akhirnya navigasinya akan semakin dalam dan luas. Dan dengan navigasi multi-level yang kompleks, menampilkan pilihan yang luas membutuhkan cukup banyak ruang. Pikirkan pengecer eCommerce besar dan situs perusahaan besar, yang melayani banyak audiens dan memiliki banyak titik masuk.

Tidak heran bahwa cara umum untuk mengatasi kerumitan ini adalah dengan memaparkan pelanggan ke sejumlah besar navigasi dengan cepat. Itulah mengapa mega-dropdown telah menjadi semacam institusi di web – meskipun sebagian besar untuk proyek yang kompleks dan besar. Mega-dropdown pada dasarnya adalah hamparan besar yang muncul di tindakan pengguna. Biasanya itu mencakup sekumpulan tautan campuran, tombol, gambar mini, dan terkadang tarik-turun dan hamparan bersarang sendiri.

Selama beberapa dekade, perilaku umum untuk jenis navigasi ini adalah membuka menu saat mengarahkan mouse . Dan selama beberapa dekade, keluhan pengguna umum tentang pola ini adalah kurangnya kepastian dan kontrol mutlak tentang bagaimana dan kapan sub-navigasi membuka dan menutup.

Terkadang submenu muncul secara tidak terduga , dan terkadang tiba-tiba menghilang, dan terkadang tetap berada di layar untuk beberapa saat, meskipun penunjuk mouse sudah berada di bagian halaman yang sangat berbeda, atau di halaman lain sama sekali.

Mengapa Mega-Dropdowns Hover Menu Membuat Frustasi?

Alasan utama mengapa mega-dropdown bisa menjadi rumit untuk digunakan adalah karena ketidakcocokan niat dan ekspektasi . Dengan menu hover, kami mencoba menyimpulkan dan bertindak berdasarkan maksud tertentu dengan melacak perilaku mouse, namun pelanggan kami mungkin memiliki tujuan yang sangat berbeda dan batasan yang sangat berbeda saat mengakses halaman.

Perilaku pelanggan biasanya tidak dapat diprediksi, meskipun analitik kami mungkin menceritakan kisah yang sedikit berbeda dengan poin data yang dikumpulkan dan dinormalisasi dalam jangka waktu yang lebih lama. Kami jarang dapat memprediksi perilaku secara akurat.

Skenario umum yang biasanya kami jelajahi adalah:

  1. Pelanggan membidik tautan kategori dan pergi ke sana secara langsung untuk menjelajahi item sub-navigasi dalam kategori itu.
  2. Pelanggan menggerakkan mouse ke arah target di layar , tetapi lintasan yang harus dilalui mouse mencakup link navigasi yang membuka mega-dropdown.

Namun, ada juga banyak situasi lain yang perlu dipertimbangkan. Hanya untuk beberapa nama:

  1. Pelanggan ingin mencari opsi mega-dropdown saat mengetik di pelengkapan otomatis penelusuran. Untuk melakukan itu, mereka harus tetap membuka kembali mega-dropdown, atau menggunakan tab jelajah terpisah, ditempatkan berdampingan.
  2. Pelanggan mungkin menggunakan trackpad (atau mouse) untuk mengoperasikan layar sekunder yang besar, sehingga gerakan penunjuk akan lebih lambat, tiba-tiba, dan tidak akurat. Ini akan menyebabkan mega-dropdown terbuka tanpa sengaja setiap kali pengguna berhenti saat melakukan perjalanan ke CTA atau keranjang belanja di bagian atas halaman.
  3. Pelanggan ingin membuka halaman kategori , jadi mereka menuju ke link kategori, mengkliknya, tetapi mengalami kedipan karena mega-dropdown tampak tertunda.
  4. Dengan sub-menu bersarang dalam mega-dropdown , pelanggan ingin menjelajahi item serupa dalam kategori di mana mereka saat ini, tetapi karena bersarang, mereka harus membuka kembali mega-dropdown berulang kali, dan melakukan perjalanan ke terowongan melayang yang sama berulang kali.
  5. Bayangkan situasi ketika Anda ingin mengubah ukuran jendela , dan saat Anda akan menjepret ke tepi kanan jendela, menu hover terus muncul – hanya karena Anda telah menggerakkan kursor mouse terlalu dekat.
  6. Pengguna mulai menggulir ke bawah secara perlahan untuk menilai konten di halaman, tetapi menu terus bermunculan. Dan setiap kali pengguna menggeser kursor untuk membaca konten mega-dropdown, menu tersebut secara tidak sengaja menghilang.

Masalahnya adalah kita perlu mendukung semua niat ini dan semua kecelakaan ini, tetapi pada saat yang sama kita perlu memastikan bahwa kita juga tidak menciptakan pengalaman yang menjengkelkan dan membuat frustrasi untuk kasus-kasus ini. Tentu saja, sebagai desainer dan pengembang, kami telah menemukan sejumlah teknik untuk mengatasi masalah ini.

Arahkan Penundaan Masuk / Keluar

Salah satu solusi pertama, dan juga salah satu yang paling umum, adalah memperkenalkan penundaan masuk / keluar hover . Kita perlu memastikan bahwa enu m tidak terbuka dan tidak menutup terlalu dini . Untuk mencapai itu, kami memperkenalkan penundaan, biasanya sekitar 0,5 detik. Itu berarti kami memberi pelanggan buffer sekitar 0,5 detik untuk:

  • Seberangi lintasan ke target jarak jauh jika perlu, atau
  • Tunjukkan bahwa mereka bermaksud menjelajahi navigasi dengan tetap berada di tautan kategori mega-dropdown, atau
  • Memperbaiki kesalahan jika mereka meninggalkan batas mega-dropdown secara tidak sengaja.

Dengan kata lain, selama pelanggan tetap berada dalam mega-dropdown overlay, kami terus menampilkannya. Dan kami menyembunyikan hamparan setelah pelanggan memindahkan kursor mouse mereka ke luar hamparan sub-navigasi setidaknya selama 0,5 detik.

Sementara itu memecahkan masalah kedipan yang tidak disengaja pada halaman, itu memperkenalkan jeda jika pengguna telah meninggalkan mega-dropdown selama lebih dari 0,5 detik. Akibatnya, ini memperlambat setiap interaksi dengan mega-dropdown di seluruh situs. Sayangnya, ini menjadi sangat cepat terlihat, terutama jika navigasi banyak digunakan.

Selama pengguna tetap berada di dalam segitiga atau di seluruh area mega-dropdown, hamparan masih ditampilkan. Jika pengguna memilih untuk bepergian ke luar segitiga , konten hamparan mega-dropdown akan berubah sesuai. Dan tentu saja itu akan hilang sama sekali setelah pengguna keluar dari daftar kategori sama sekali.

Chris Coyier menyoroti beberapa kerumitan teknis dari teknik ini dalam posnya di Menu Dropdown dengan Lebih Banyak Jalur Pergerakan Tikus yang Memaafkan , bersama dengan demo JavaScript vanilla oleh Alexander Popov pada "Menu Sadar Aim".

Dengan teknik ini kami meminimalkan gesekan hilangnya mendadak dan kemunculan kembali sub-navigasi. Tetapi ini mungkin menjadi tidak efektif jika tautan kategori diposisikan terlalu dekat satu sama lain, atau kami menampilkan menu hover dengan mengarahkan kursor ke tombol yang lebih besar. Kami dapat melakukan sedikit lebih baik dengan area keluar jalur SVG.

Area Keluar Jalur SVG

Saat menghitung segitiga lintasan dengan teknik sebelumnya, terkadang kita tidak hanya melacak posisi tepat penunjuk tetikus, tetapi juga menghitung ulang segitiga dengan setiap gerakan penunjuk – sepanjang waktu. Kami dapat meningkatkan strategi dengan menghitung keseluruhan area hamparan SVG satu kali dan melacak apakah penunjuk mouse ada di dalamnya – tanpa menghitung ulang segitiga sepanjang waktu. Contoh yang bagus adalah implementasi Hakim el Hattab yang menggambar area secara dinamis dengan SVG berdasarkan posisi item navigasi di layar.

Solusi Hakim sebenarnya responsif , jadi jika sub-navigasi tidak muat di layar, itu akan mengambang di sebelah item navigasi utama , ditampilkan dalam lebar atau tinggi penuh. Area jalur SVG akan dihitung ulang, tetapi hanya jika pengguna menggulir secara vertikal atau horizontal. Anda dapat melihat demo kerja dari teknik beraksi pada mode tampilan debug Hakim dari pola Menu.

Jika Anda harus berurusan dengan navigasi kompleks semacam ini, mungkin ada baiknya menguji jika masalah hilang ketika hanya satu (bukan dua) menu hover yang digunakan. Menu itu akan sedikit lebih besar dan menampung semua opsi di dalam kolom. Atau jika memungkinkan, untuk setiap kategori, pertimbangkan untuk menampilkan semua opsi navigasi dalam kategori itu sebagai bilah navigasi permanen (bilah sisi atau bilah atas lengket) – biasanya itu harus menghilangkan semua masalah ini sama sekali.

Judul kategori melakukan terlalu banyak hal

Seperti yang telah kita lihat sebelumnya, terkadang judul kategori memiliki dua fungsi yang berbeda . Di satu sisi, setiap judul kategori dapat ditautkan ke halaman kategori, sehingga pelanggan dapat mengkliknya untuk langsung membuka halaman. Di sisi lain, mereka juga dapat membuka hamparan dropdown mega. Jadi, jika pengguna mengarahkan kursor ke judul untuk waktu yang cukup lama, mega-dropdown akan terbuka, tetapi pengguna mungkin telah mengklik tautan, dan ini akan menyebabkan kedipan. Bagi pelanggan, sulit untuk memiliki ekspektasi yang tepat ketika antarmuka tidak benar-benar memberikan petunjuk apa pun.

Ada beberapa opsi untuk mengatasi masalah ini:

  1. Untuk menunjukkan bahwa judul kategori adalah sebuah tautan, mungkin berguna untuk menggarisbawahinya ,
  2. Untuk membuat perbedaan antara judul kategori dan dropdown lebih jelas, tambahkan pemisah vertikal (misalnya garis vertikal) dan ikon (chevron),
  3. Biarkan judul kategori hanya membuka mega-dropdown, dan menambahkan link ke bagian "Home" kategori dalam mega-dropdown overlay. Ini juga bisa menjadi tombol "Lihat semua opsi" yang menonjol (lihat contoh The Guardian di atas).

Seperti disebutkan di atas, terkadang Anda dapat melihat ikon tambahan yang digunakan untuk menunjukkan bahwa menu membuka hamparan, sedangkan judul kategori adalah tautan. Dalam uji kegunaan kami, kami memperhatikan bahwa setiap kali ikon ada (dan tidak masalah ikon mana), pengguna sering membuat perbedaan mental antara tindakan yang akan diminta oleh klik pada ikon, dan tindakan yang diminta. dengan mengklik judul kategori.

Dalam kasus pertama, mereka biasanya mengharapkan dropdown terbuka, dan dalam kasus terakhir, halaman kategori muncul. Lebih penting lagi, mereka tampaknya mengharapkan menu terbuka dengan tap / klik, daripada mengarahkan kursor .

Jika Anda mencari implementasi teknis, Anda dapat memeriksa In Praise of the Unambiguous Click Menu , di mana Mark Root-Wiley menunjukkan bagaimana membangun menu klik yang dapat diakses . Idenya adalah mulai membangun menu sebagai menu hover khusus CSS yang menggunakan li:hover > ul dan li:focus-within > ul untuk menampilkan submenu.

Kemudian, kami menggunakan JavaScript untuk membuat elemen <button> , menyetel aria , dan menambahkan penangan kejadian. Hasil akhir tersedia sebagai contoh kode di CodePen dan sebagai repo GitHub . Ini juga bisa menjadi titik awal yang baik untuk menu Anda.

Accordions vs. Overlay vs. Split-Menus Di Seluler

Tak perlu dikatakan bahwa tidak semua mega-dropdown pada tap / klik berkinerja baik. Target.com adalah contoh menarik lainnya untuk navigasi besar yang dapat diakses yang menghindari tata letak multi-kolom dan hanya menampilkan satu tingkat navigasi pada saat itu – semua dibuka dengan ketuk / klik.

"Merek kami" mengarah ke halaman terpisah sementara setiap label di bawahnya membuka overlay navigasi baru di atas mega-dropdown. Apakah Anda memperhatikan bahwa "Semua merek" digarisbawahi, sedangkan opsi navigasi lainnya tidak? Bisa dilihat niat para desainer membuat menu. Memang, "Semua merek" adalah tautan, sementara label lain membuka hamparan:

Dengan semua opsi ini, bagaimana kita akan menampilkan navigasi mega-dropdown di seluler ? Ternyata, mengelompokkan hamparan mega-dropdown seperti itu pada perangkat seluler itu sulit: biasanya tidak ada cukup ruang atau bantuan visual untuk menyorot berbagai level secara berbeda dan membuatnya mudah dibedakan. Pada contoh di atas, mungkin perlu beberapa saat untuk mencari tahu di halaman mana kita sebenarnya telah mendarat.

Sedikit lebih mudah untuk memahami di level mana kita saat ini dan opsi apa yang kita miliki dengan pendekatan akordeon, seperti yang bisa kita lihat di Dinoffentligetransport.dk . Namun, mungkin ada baiknya untuk menggarisbawahi tautan dalam setiap subbagian saat mereka mengarahkan pelanggan ke laman kategori. Selain itu, seluruh bilah kategori mungkin harus dapat diklik dan memperluas akordeon.

Dalam contoh di atas, sebagian besar waktu kami mungkin dapat menampilkan bagian navigasi dalam jumlah terbatas pada satu waktu. Tetapi jika judul setiap bagian relatif pendek, kami dapat membagi layar secara horizontal dan menampilkan beberapa level pada saat yang bersamaan. LCFC.com adalah contoh yang baik dari pola kerja ini.

Opsi Mana yang Paling Berfungsi?

Dalam pengalaman pribadi saya, ketika kami membandingkan implementasi mega-dropdown di seluler, akordeon vertikal tampak lebih cepat dan lebih dapat diprediksi daripada overlay (baik itu kolom tunggal atau beberapa lapisan). Dan menu terpisah tampaknya lebih cepat dan lebih dapat diprediksi daripada akordeon.

Ada beberapa keuntungan yang disediakan oleh akordeon dan menu terpisah:

  • Tidak perlu menampilkan tombol "Kembali" untuk kembali ke halaman induk.
  • Mata tidak harus melompat di antara bagian atas menu navigasi dan sub-navigasi bagian dengan setiap lompatan.
  • Pelanggan dapat menavigasi di antara beberapa level dengan lebih cepat: daripada menekan "Kembali" beberapa kali, mereka dapat melompat ke akordeon yang mereka anggap menarik.
  • Pelanggan dapat menjelajahi beberapa bagian pada waktu yang sama (kecuali jika penerapan secara otomatis menutup satu akordeon ketika yang lain telah dibuka). Tidak mungkin dengan overlay.

Secara umum, akordeon dan menu terpisah tampaknya merupakan pilihan yang lebih baik . Tapi sepertinya mereka tidak berfungsi dengan baik ketika ada banyak navigasi di tempat. Kapan pun setiap kategori memiliki lebih dari 6–7 item , itu terbukti menjadi ide yang baik untuk menambahkan tombol "Jelajahi semua" di bawah 6–7 item dalam akordeon lain (atau pada halaman terpisah), atau gunakan overlay sebagai gantinya.

Jadi tergantung pada jumlah navigasi, kita bisa mulai dengan menu terpisah , lalu jika tidak memungkinkan, pindah ke akordeon, dan jika navigasi menjadi semakin rumit, akhirnya ubah akordeon menjadi overlay.

Ketika Mega-Dropdown Mungkin Tidak Diperlukan Lagi

Kami telah mereferensikan pekerjaan tim Gov.uk di artikel sebelumnya , tetapi wawasan mereka juga berharga dalam konteks mega-dropdown. Untuk navigasi multi-level yang besar, tim telah memutuskan temuan yang digunakan oleh ahli formulir, prinsip satu hal per halaman, Caroline Jarrett . Menurut Caroline, "pertanyaan yang secara alami 'berjalan bersama' dari sudut pandang desainer […] tidak perlu berada di halaman yang sama agar dapat bekerja untuk pengguna”. Caroline terutama menerapkannya pada desain formulir web, tetapi kami juga dapat menerapkannya dalam konteks navigasi.

Idenya, kemudian, adalah untuk menghindari mega-dropdown yang kompleks sama sekali , dan memberi pelanggan cara yang jelas dan terstruktur untuk menavigasi melalui parit situs web, dari satu halaman ke halaman lain. Dalam kasus Gov.uk , tampaknya terjadi melalui arsitektur informasi dan panduan yang dipertimbangkan dengan baik, yang mengarahkan pengunjung melalui langkah-langkah yang dapat diprediksi menuju tujuan.

Kanton Zürich menggunakan pola yang sama. Alih-alih lapisan navigasi mega-dropdown, semua opsi ditampilkan secara terstruktur, dengan topik utama ditampilkan di bagian atas sebagai "Topik teratas" dan navigasi dalam setiap bagian ditampilkan sebagai bilah navigasi yang melekat di bagian atas.

Pendekatan alternatif adalah dengan menggunakan pola navigasi "Saya-ingin-untuk" . Selain navigasi konvensional, kami dapat menyediakan "navigasi dropdown" untuk memungkinkan pelanggan membuat kueri navigasi pilihan mereka, dan diarahkan langsung ke halaman yang mereka cari. Pada dasarnya, ini adalah rangkaian tarik-turun yang muncul di bawah yang lain untuk memungkinkan pengguna memilih apa yang ingin mereka lakukan atau temukan di situs web.

Untuk sementara, pola digunakan pada Commonbond (lihat video di atas), dan juga digunakan di Corkchamber.ie . Cara yang menarik, meskipun tidak konvensional untuk menyediakan akses ke navigasi tingkat dalam tanpa harus menggunakan mega-dropdown sama sekali.

Daftar Periksa Desain Navigasi Mega-Dropdown

Setiap kali kami membuka percakapan tentang menu mega-dropdown, semua orang tampaknya menetap dalam beberapa kelompok : beberapa rekan lebih suka mengarahkan kursor, yang lain lebih suka ketuk dan klik, beberapa lebih suka keduanya, dan yang lain tidak keberatan selama di sana adalah tautan kategori dan ikon yang membuka menu.

Tidak mungkin untuk mengatakan bahwa satu pendekatan selalu lebih baik daripada yang lain, tetapi baik dalam hal implementasi teknis dan UX, membuka menu dengan ketuk / klik biasanya menyebabkan masalah yang jauh lebih sedikit dan lebih sedikit frustrasi sambil memungkinkan penerapan yang sederhana, dan dengan demikian menghasilkan dalam navigasi yang dapat diprediksi dan tenang. Sebelum pindah ke menu hover, kita bisa mencoba menjaga tap / click behavior terlebih dahulu, mengukur engagement, dan mempelajari apakah hover diperlukan.

Dan seperti biasa, berikut beberapa hal umum yang perlu diingat saat merancang dan membangun mega-dropdown:

  • Hindari menempatkan item penting dan sering digunakan di dekat navigasi mega-dropdown (mis. Bilah pencarian, CTA, ikon keranjang belanja) (jika mengarahkan kursor),
  • Hindari beberapa sub-navigasi dalam mega-dropdown yang muncul setelah satu sama lain dengan penundaan (jika melayang),
  • Hindari membebani judul kategori dengan banyak fungsi.
  • Judul kategori yang digarisbawahi untuk mengidentifikasinya sebagai link ke halaman kategori (tentu saja jika terhubung ke halaman kategori).
  • Jika Anda bisa, tambahkan tautan "Beranda" atau tombol "Jelajahi semua" dalam setiap subkategori alih-alih menautkan kategori secara langsung.
  • Hindari overlay horizontal dan pertimbangkan untuk menggantinya dengan akordeon vertikal dan menu terpisah,
  • Tambahkan ikon untuk menunjukkan bahwa judul kategori memicu mega-dropdown saat diklik (mis. Chevron) dan selalu membuatnya cukup besar untuk mengetuk dengan nyaman (mis. 50 × 50px),
  • Hindari transisi panjang fade-in / fade-out saat mega-dropdown muncul / menghilang (paling banyak 300ms),
  • Pertimbangkan untuk menguji panduan terstruktur atau kueri navigasi (pola navigasi "Saya ingin") sebagai gantinya atau sebagai tambahan ke mega-dropdown.
  • Hindari menu mega-dropdown hover jika memungkinkan.

Artikel Terkait

Jika Anda merasa artikel ini bermanfaat, berikut adalah ikhtisar dari artikel serupa yang telah kami terbitkan selama bertahun-tahun – dan beberapa lagi akan segera hadir.

May 19, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *