Praktik Terbaik Desain Menu Multilevel

Navigasi dan kemampuan untuk ditemukan adalah aspek utama dari desain pengalaman pengguna. Jika pengguna tidak dapat mencapai tujuan yang mereka tuju atau menemukan apa yang mereka butuhkan, mereka akan menjadi frustrasi dan mungkin memutuskan untuk mencari di tempat lain. Pada situs web dengan arsitektur informasi yang sangat kompleks, menu bertingkat adalah cara yang efektif untuk meningkatkan navigasi dan kemampuan menemukan, sehingga menawarkan pengalaman web yang efisien yang mempromosikan kepercayaan produk dan meningkatkan konversi.

Karena produk dan perangkat yang digunakan sangat bervariasi, tidak ada solusi satu ukuran untuk semua yang akan menghasilkan menu bertingkat yang sempurna. Namun, ada aturan praktis yang akan membantu Anda membuat menu bertingkat yang meningkatkan navigasi dan kemudahan untuk ditemukan di semua ukuran layar.

Tip Desain untuk Semua Ukuran Layar

Menu bertingkat yang baik harus membawa pengguna ke tempat yang mereka butuhkan dengan cepat dengan menyajikan informasi dengan cara yang jelas dan intuitif. Sebelum kita masuk ke pedoman khusus ukuran, mari kita lihat beberapa praktik yang berlaku untuk semua menu.

Gunakan tidak lebih dari dua tingkat submenu. Lebih dari dua tingkat submenu kemungkinan akan membingungkan dan membanjiri pengguna. Menjaga navigasi relatif datar meningkatkan kemudahan ditemukan bagi pengguna dan mengurangi beban kognitif yang diperlukan untuk mengingat di mana mereka berada. Jika struktur halaman situs dalam, pertimbangkan untuk menambahkan menu navigasi lokal ke bagian atas halaman yang terkait erat. Misalnya, Zoho, yang mendesain produk pendukung bisnis yang kompleks, telah menempatkan menu lokal khusus produk di bagian atas setiap halaman produk, tepat di bawah menu utama. Sementara menu utama di bagian atas menyebutkan penawaran inti Zoho, menu lokal menyediakan akses ke halaman dengan informasi yang lebih detail, seperti kasus penggunaan dan harga.

Tandai submenu dengan ikon. Kelola ekspektasi pengguna dengan selalu memperjelas jika ada submenu yang tersedia. Pilihan yang familier termasuk ikon sudut bawah kecil atau ikon segitiga. Juga, pertimbangkan untuk membalik ikon penunjuk saat submenu terbuka.

Atur informasi secara intuitif. Pastikan hierarki informasi selaras dengan model mental pengguna. Di situs e-niaga, misalnya, pertimbangkan apakah pembeli lebih cenderung mengharapkan barang diatur menurut merek atau jenis barang. Jika pengguna mengklik kategori “Sepatu”, apakah mereka mengharapkan submenu untuk menyajikan opsi untuk sepatu kets, sandal, dan sepatu bot? Atau akankah mereka berharap melihat submenu yang mencantumkan setiap merek sepatu yang dibawa toko? Melihat riset pengguna dan riset pesaing Anda akan memperjelas hal ini.

Pastikan pengguna tahu di mana mereka berada setiap saat. Selalu sorot tautan pada menu utama yang sesuai dengan halaman tempat pengguna berada. Jika halaman saat ini berada dalam submenu, sorot tautan submenu dan item induk pada menu utama juga. Misalnya, jika seseorang yang menggunakan situs web pemerintah untuk memperbarui SIM mereka akan menavigasi dari tautan "Penduduk" di menu utama ke tautan "Layanan Pengemudi" di submenu dan kemudian ke halaman dengan formulir perpanjangan, baik " Tautan Penghuni" dan "Layanan Pengemudi" akan tetap disorot.

Buat salinan tetap sederhana. Menu bukanlah tempat untuk permainan kata yang cerdas; pastikan label tautan memiliki aroma informasi yang kuat. Ini berarti menjaga nama label tetap lugas dan deskriptif sehingga pengguna akan langsung tahu apa yang akan mereka temukan saat mereka mengklik. Semakin jelas salinannya, semakin cepat pengguna akan menemukan apa yang mereka butuhkan.

Prioritaskan keterbacaan. Gunakan jenis huruf sans-serif sederhana dan pastikan jarak yang cukup di sekitar item untuk menghindari kekacauan. Pastikan latar belakang cukup buram untuk memblokir apa pun yang ada di belakang menu. Tapi jangan abaikan branding situs secara keseluruhan. Meskipun keterbacaan didahulukan, pastikan gaya menu melengkapi tampilan dan nuansa situs lainnya.

Jadikan klik dan ketuk dapat diakses. Untuk membuat menu dapat diakses oleh pengguna dengan gangguan kontrol motorik halus, ikuti pedoman Desain Material Google dan format elemen yang dapat diklik setidaknya berukuran 48 x 48 piksel.

Tip Desain untuk Desktop

Bahkan dengan tren yang berkembang ke arah seluler, masih ada banyak alasan mengapa klien mungkin memerlukan situs desktop berfitur lengkap. Misalnya, mereka mungkin perlu menyediakan lebih banyak informasi secara online daripada yang layak untuk situs seluler—seperti situs web untuk universitas atau lembaga keuangan. Atau penelitian mereka mungkin menunjukkan bahwa pengguna mereka lebih mengandalkan desktop.

Menu desktop harus mudah dipindai, menawarkan interaksi yang jelas, dan, tentu saja, responsif. Itu juga harus sekonsisten mungkin dengan situs seluler untuk membuat pengalaman menjadi intuitif bagi pengunjung yang kembali.

Menu harus terbuka saat diklik, bukan mengarahkan kursor. Salah satu keputusan paling mendasar yang perlu Anda buat adalah bagaimana pengguna akan mengakses menu situs. Apakah hanya dengan mengarahkan kursor ke item induk—nama kategori—cukup untuk memicu tampilan menu atau apakah pengguna perlu mengkliknya?

Pendekatan hover populer tetapi klik untuk membuka adalah cara terbaik untuk memastikan menu bekerja dengan andal dan intuitif di semua perangkat. Pendekatan klik memungkinkan situs web bekerja lebih konsisten di seluruh monitor komputer dan layar sentuh tradisional, dan menghindari banyak frustrasi yang terjadi dengan pendekatan hover, termasuk:

• Terowongan melayang sempit. Terowongan hover adalah jalur yang harus diambil mouse untuk menavigasi sambil menjaga menu tetap terbuka. Jika terlalu sempit, menu mungkin hilang sebelum pengguna mencapai tautan yang diinginkan.
• Pembukaan yang tidak disengaja. Menu hover cenderung terbuka secara tidak sengaja jika pengguna mencoba menavigasi melaluinya dalam perjalanan ke lokasi lain di halaman. Menyetel penundaan singkat memecahkan masalah itu tetapi dapat menyebabkan frustrasi ketika pengguna ingin membuka menu.
• UX tidak konsisten pada layar sentuh. Menu hover tidak berfungsi pada layar sentuh. Mereka memerlukan perbaikan kode untuk mendeteksi layar sentuh dan beralih ke tap-to-open; karena garis semakin kabur antara laptop dan tablet, solusi tersebut mungkin menjadi usang.
• Pertanyaan tentang apa yang dapat diklik. Dengan menu arahkan kursor, pengguna tidak selalu tahu apakah tautan induk dapat diklik atau tidak sampai mereka mencoba mengeklik. Itu kebalikan dari intuitif.
• Aksesibilitas. Menu hover dapat menimbulkan masalah bagi pengguna yang menggunakan pembaca layar atau bernavigasi melalui keyboard.

Pilih tata letak yang tepat: Menu drop-down vs. Mega. Jika situs desktop menggunakan tata letak menu tradisional (bilah menu horizontal terletak di bagian atas halaman), ada dua jenis submenu yang dapat Anda pertimbangkan: drop-down satu kolom standar atau mega menu multikolom.

Pertimbangkan untuk menggunakan tarik-turun jika kategori induk berisi kurang dari delapan tautan. Jika menu tarik-turun cukup panjang sehingga memerlukan pengguliran vertikal, Anda harus mempertimbangkan untuk mengatur informasi secara berbeda—mungkin sebagai menu besar atau dengan menyempurnakan kategori induk.

Menu mega adalah jenis menu bersarang yang biasanya menggunakan tata letak lebar yang dapat memperluas lebar browser. Anda harus menggunakan menu jenis ini jika submenu berisi banyak tautan berbeda yang dapat dikelompokkan dalam kolom. Biasanya, Anda melihat menu seperti ini di situs e-commerce besar.

Saat merancang menu mega, pertimbangkan hal berikut:

• Tambahkan gambar atau ikon untuk membuat informasi lebih mudah dipindai.
• Tambahkan judul ke halaman terkait grup.
• Tambahkan deskripsi jika nama kategori tidak jelas.

Menu mega bisa sulit dibaca dan dinavigasi di seluler, tetapi terkadang peningkatan UX di layar yang lebih besar membuatnya layak untuk melakukan pekerjaan ekstra untuk mengonfigurasi ulang informasi untuk perangkat seluler.

Tambahkan status hover yang jelas. Bahkan dengan menu klik untuk membuka, termasuk status hover yang jelas untuk semua elemen yang dapat diklik membuat interaksi memuaskan dan meyakinkan pengguna bahwa tautannya aktif. Anda dapat membuat latar belakang area yang dapat diklik sedikit lebih gelap untuk menunjukkan status melayang. Pastikan area hover cocok dengan area yang dapat diklik. Jika pengujian menunjukkan bahwa pengguna memerlukan lebih banyak panduan atau konteks, pertimbangkan untuk menambahkan nama label atau keterangan alat yang lebih deskriptif, selama itu tidak memblokir sesuatu yang penting.

Klik untuk menutup submenu. Buat semuanya tetap intuitif dengan menutup menu saat pengguna mengklik di tempat lain atau saat mereka membuka submenu lain. Beginilah cara kerja bidang input drop-down dalam formulir, jadi sebagian besar pengguna akan menganggap ini familier.

Aktifkan navigasi keyboard di desktop. Tidak semua orang menggunakan mouse untuk bernavigasi, jadi menu harus memungkinkan pengguna untuk menavigasi hanya menggunakan keyboard. Ini berarti bahwa semua tautan harus memiliki status fokus yang berbeda sehingga pengguna dapat melihat di mana mereka berada secara sekilas. Biasanya bingkai berwarna lebih gelap berfungsi dengan baik untuk menunjukkan status fokus.

Tip Desain untuk Layar Seluler

Jika Anda belum mendesain seluler terlebih dahulu, Anda harus mengoptimalkan menu untuk perangkat genggam. Tata letak menu tradisional jarang berfungsi dengan baik pada layar yang sangat kecil—jika Anda hanya mengecilkan bilah menu desktop, tidak ada yang dapat membacanya. Panduan ini akan membantu Anda berhasil melakukan transisi ke layar kecil.

Sederhanakan menu utama. Karena layar ponsel cerdas sangat kecil, sebagian besar informasi yang Anda temukan di menu desktop harus disembunyikan terlebih dahulu. Bilah menu utama harus sangat sederhana, tetapi merupakan ide yang baik untuk menampilkan tautan yang paling penting untuk meningkatkan kemampuan untuk ditemukan. Anda dapat menempelkan bilah menu ke bagian bawah atau atas layar.

Tambahkan pemicu menu. Karena semua atau sebagian menu seluler mungkin disembunyikan, pengguna perlu cara untuk menemukannya. Menambahkan ikon hamburger ke bilah menu atau tombol mengambang yang mudah dijangkau adalah solusi populer, yang akan dikenali banyak pengguna. Namun, menu hamburger bukanlah satu-satunya pilihan. Jika Anda mendesain untuk pengguna yang lebih tua, mungkin lebih baik menggunakan kotak dengan kata "Menu", misalnya. Atau, jika Anda ingin membuat fitur situs lebih menonjol, Anda mungkin ingin menampilkannya di menu tab di bagian atas atau bawah.

Letakkan menu di bilah sisi. Ada banyak cara berbeda untuk mendesain menu seluler. Anda dapat menggunakan tata letak lebar penuh, yang berfungsi dalam situasi apa pun; laci bawah, yang terbaik jika hanya ada beberapa tautan; atau menu sudut melingkar, yang merupakan opsi yang tampak futuristik untuk menu kecil tanpa submenu. Pilihan yang baik adalah menggunakan bilah sisi dengan latar belakang gelap dan tembus cahaya yang menghalangi konten halaman, sehingga menghilangkan gangguan, dan memungkinkan pengguna dengan mudah mengetuknya untuk menutupnya. Juga pertimbangkan untuk menggunakan animasi slide-dari-kiri untuk menghindari pengalaman yang menggelegar. Untuk menu bilah sisi dan laci bawah, pastikan menu dapat digulir secara vertikal sehingga tidak ada yang terpotong di layar yang lebih kecil atau dalam mode lanskap.

Memungkinkan pengguna untuk menutup menu dengan mudah. Pengguna dapat secara intuitif mengetuk menu untuk menutupnya, tetapi pertimbangkan untuk menambahkan tombol X juga. Anda dapat mengubah ikon hamburger menjadi X atau menambahkannya ke pojok kanan atas menu.

Gunakan bagian yang diperluas untuk submenu tunggal. Pertimbangkan untuk menggunakan bagian yang diperluas jika menu hanya memiliki satu tingkat submenu. Anda dapat memperluasnya di bawah item induk dan menggunakan warna latar belakang yang berbeda untuk kejelasan. Anda juga dapat mengizinkan pengguna untuk memperluas beberapa submenu secara bersamaan. Pertimbangkan untuk menggunakan ikon sudut bawah atau segitiga di sisi kanan item induk untuk menunjukkan bahwa submenu tersedia.

Ganti menu mega dan beberapa submenu dengan menu yang tumpang tindih. Jika Anda perlu memperluas lebih dari satu submenu atau mengonfigurasi ulang menu mega, pilih pendekatan yang tumpang tindih: Alih-alih memperluas submenu di bawah atau di samping induknya, minta submenu menggantikan induknya. Dengan pendekatan ini Anda harus menyertakan tautan "Kembali" di semua panel kecuali untuk tingkat pertama. Untuk menu tingkat atas, pertimbangkan untuk menggunakan ikon sudut kanan atau panah kanan untuk item induk.

Submenu pra-buka. Di desktop, sangat membantu untuk menyorot halaman saat ini dan induknya. Pada layar kecil, pertimbangkan untuk mengambil langkah ini lebih jauh. Jika pengguna mengetuk untuk membuka menu utama dan halaman yang sedang mereka buka berada di dalam submenu, pertimbangkan untuk membuka submenu juga secara otomatis, sehingga pengguna memahami di mana mereka relatif terhadap item menu lainnya.

Tetap Jelas dan Konsisten

Navigasi adalah komponen penting dari pengalaman pelanggan. Pengguna tidak ingin pergi berburu atau menghabiskan lebih banyak waktu untuk menelusuri menu daripada yang seharusnya. Jika mereka tidak dapat dengan mudah menemukan apa yang mereka butuhkan, mereka mungkin mengikat sumber daya klien Anda dengan panggilan dukungan atau, lebih buruk lagi, membawa bisnis mereka ke tempat lain.

Menu bertingkat yang dirancang dengan baik adalah komponen kunci dari situs web apa pun dengan arsitektur informasi yang kompleks. Meskipun pedoman ini tidak boleh menggantikan penelitian dan pengujian pengguna, pedoman ini akan membantu Anda dengan baik di berbagai kasus penggunaan.

Bacaan lebih lanjut di Blog Toptal:

• Panduan Komprehensif untuk Arsitektur Informasi
• Desain Responsif: Praktik Terbaik dan Pertimbangan
• Prinsip Arsitektur Informasi untuk Seluler (dengan Infografis)