Menu Navigasi Website Perusahaan: Cara Menyusun dan Mengujinya

Menu navigasi website yang baik membuat pengunjung cepat paham apa yang ditawarkan perusahaan Anda dan ke mana harus melangkah berikutnya. Kuncinya, susun menu berdasarkan cara calon pelanggan mencari informasi, bukan berdasarkan bagan organisasi atau nama divisi di kantor.

Dalam praktiknya, ada empat pekerjaan utama: mendata tujuan pengunjung, mengelompokkan halaman, memberi label yang mudah ditebak, lalu menguji menu di desktop, ponsel, dan keyboard. Panduan ini membahas setiap langkah, lengkap dengan contoh struktur untuk website company profile dan daftar periksa sebelum website diluncurkan.

Langkah-langkah di bawah berlaku untuk website baru maupun website lama yang ingin dirapikan. Bila Anda sedang menyiapkan proyek baru, hasilnya juga bisa langsung dimasukkan ke dokumen brief untuk vendor.

Mulai dari tujuan pengunjung, bukan struktur organisasi

Pengunjung tidak peduli apakah sebuah layanan dikelola divisi A atau divisi B. Mereka datang dengan pertanyaan: perusahaan ini bisa membantu apa, sudah pernah mengerjakan apa, dan bagaimana cara menghubunginya. Karena itu, mulailah dengan mencatat tujuan kunjungan yang paling umum.

1. Daftar tujuan kunjungan. Contohnya: mengenal layanan, melihat contoh proyek, membaca panduan, mencari lowongan, atau meminta penawaran.
2. Inventaris halaman. Tulis semua halaman yang sudah ada atau akan dibuat. Tandai halaman yang isinya tumpang tindih atau tidak pernah diperbarui.
3. Kelompokkan halaman per tujuan. Satu kelompok menjadi calon item menu utama. Halaman untuk audiens sekunder, seperti karier atau kebijakan privasi, cukup ditaruh di footer.
4. Tentukan prioritas. Layanan utama yang paling sering ditanyakan harus bisa dicapai dari menu tanpa harus membuka banyak tingkat.

Daftar ini sebaiknya disusun bersama tim yang sering menjawab pertanyaan calon pelanggan, misalnya admin WhatsApp atau tim penjualan. Mereka paling tahu istilah yang dipakai pelanggan. Hasilnya juga berguna saat menyusun checklist brief website untuk vendor, karena jumlah dan jenis halaman memengaruhi ruang lingkup pekerjaan.

Contoh struktur menu navigasi website perusahaan

Nielsen Norman Group dalam daftar pedoman desain menunya menyarankan agar menu ditempatkan di lokasi yang sudah diharapkan pengguna: navigasi utama di header, navigasi utilitas (misalnya pilihan bahasa) di atasnya, dan tautan untuk audiens sekunder seperti investor atau pelamar kerja di footer. Dengan pola itu, struktur menu navigasi website perusahaan yang umum bisa terlihat seperti ini:

• Layanan: daftar layanan, dikelompokkan berdasarkan kebutuhan pelanggan bila jumlahnya banyak.
• Portofolio atau Proyek: contoh pekerjaan yang bisa diperiksa.
• Tentang Kami: profil, tim, dan legalitas perusahaan.
• Artikel atau Panduan: konten edukasi.
• Kontak: alamat, formulir, dan nomor yang aktif.

Struktur ini bukan aturan baku. Website satu halaman atau landing page untuk kampanye iklan biasanya cukup memakai tautan lompat ke bagian tertentu, sedangkan company profile dengan banyak layanan membutuhkan submenu. Bila Anda masih menimbang bentuk website yang tepat, baca perbandingan landing page atau company profile untuk UMKM sebelum menentukan jumlah menu.

Label yang jelas dan submenu yang tidak terlalu dalam

Label menu adalah janji tentang isi halaman. Nama seperti Layanan, Portofolio, Artikel, dan Kontak langsung bisa ditebak. Label kreatif seperti "Jelajahi Dunia Kami" justru membuat pengunjung menebak-nebak. NN/g menyarankan label yang jelas, spesifik, dan familier, serta menaruh kata kunci di awal label agar mudah dipindai.

Beberapa kebiasaan yang membantu:

• Pakai istilah yang sama di menu, judul halaman, dan tautan di dalam artikel. Jangan menyebut "Solusi" di menu lalu "Layanan" di judul halaman.
• Kelompokkan layanan berdasarkan kebutuhan pelanggan, misalnya "Website", "Aplikasi", dan "Konsultasi IT", bukan berdasarkan nama tim internal.
• Ikon boleh membantu, tetapi teks tetap wajib. Ikon tanpa label sering disalahartikan.

Untuk submenu, beri penanda seperti panah kecil agar pengunjung tahu item itu bisa dibuka. NN/g menganjurkan submenu yang dibuka dengan klik atau ketukan, bukan hanya saat kursor diarahkan (hover), karena layar sentuh tidak mengenal hover dan menu hover mudah terbuka atau tertutup tanpa sengaja. Dropdown biasa nyaman untuk sekitar dua tingkat. Bila struktur Anda lebih dalam, gunakan mega menu yang menampilkan beberapa tingkat sekaligus, atau buat halaman induk yang merangkum isi kelompok tersebut.

Bedakan menu, tombol tindakan, dan penanda lokasi

Menu membantu pengunjung berpindah halaman. Tombol tindakan utama, seperti "Minta Penawaran" atau "Konsultasi", membantu mereka memulai langkah berikutnya. Keduanya boleh berdampingan di header, tetapi perannya harus terlihat berbeda. Cukup satu tombol yang ditonjolkan. Bila ada tiga tombol dengan warna dan ukuran yang sama, pengunjung justru bingung memilih.

Pengunjung juga perlu tahu sedang berada di mana. NN/g menyebut tidak menandai lokasi saat ini sebagai salah satu kesalahan menu yang paling umum. Ini penting karena banyak pengunjung masuk langsung ke halaman dalam, misalnya artikel dari hasil pencarian Google, bukan dari beranda. Tandai item menu yang aktif dan tambahkan breadcrumb di halaman yang letaknya dalam. Tutorial menu dari W3C WAI juga menekankan bahwa status seperti halaman aktif harus mudah dikenali, sebaiknya dengan penanda visual yang tidak hanya mengandalkan warna.

Dari halaman artikel, sediakan jalur yang relevan menuju layanan. Pengunjung yang membaca panduan tentang website toko online, misalnya, seharusnya bisa langsung menemukan halaman layanan terkait tanpa kembali ke beranda.

Menu navigasi website di ponsel dan keyboard

Di desktop, sebaiknya jangan menyembunyikan menu utama di balik ikon hamburger. Studi NN/g tahun 2016 terhadap 179 peserta menemukan bahwa navigasi tersembunyi lebih jarang dipakai dan membuat tugas lebih lama diselesaikan dibanding navigasi yang terlihat, dan dampaknya lebih besar di desktop daripada di ponsel. Di layar kecil, menu hamburger masih wajar, terutama bila item menu utama lebih dari empat.

Standar aksesibilitas WCAG 2.2, yang diterbitkan W3C sebagai Recommendation pada 5 Oktober 2023, memberi beberapa patokan yang relevan:

• Ukuran target sentuh. Kriteria 2.5.8 (level AA) meminta area klik minimal 24 x 24 piksel CSS, dengan beberapa pengecualian seperti jarak antar-target yang cukup.
• Navigasi yang konsisten. Kriteria 3.2.3 (level AA) meminta navigasi yang berulang di banyak halaman tampil dalam urutan relatif yang sama.
• Fokus tidak tertutup. Kriteria 2.4.11 (level AA) berkaitan dengan elemen yang sedang difokus agar tidak tertutup sepenuhnya oleh konten lain, misalnya header lengket atau tombol chat melayang.

Daftar periksa praktis untuk menu Anda:

• Menu di ponsel bisa dibuka, ditutup, dan dipilih tanpa terpotong layar.
• Semua item menu bisa dicapai dengan tombol Tab, urutannya masuk akal, dan fokus keyboard terlihat jelas.
• Submenu bisa dibuka tanpa hover, baik dengan klik, ketukan, maupun keyboard.
• Tombol chat atau WhatsApp melayang tidak menutupi menu atau tautan terakhir di halaman.
• Header lengket (sticky) tidak memakan terlalu banyak ruang layar ponsel.

Uji struktur menu sebelum diluncurkan

Struktur yang terlihat logis di rapat belum tentu mudah dipakai orang lain. Ada dua metode sederhana yang bisa dicoba. Card sorting meminta peserta mengelompokkan daftar halaman dan menamai kelompoknya, sehingga Anda tahu cara pikir mereka. Tree testing meminta peserta mencari informasi tertentu di struktur menu berbentuk teks saja, tanpa desain. NN/g menjelaskan bahwa card sorting cocok untuk menemukan pengelompokan, sedangkan tree testing untuk menguji struktur yang sudah disusun. Saat menulis tugas, jangan memakai kata yang sama persis dengan label menu agar hasilnya tidak bias.

Versi paling sederhana bisa dilakukan tanpa alat khusus. Minta tiga sampai lima orang di luar tim untuk menyelesaikan tugas nyata, misalnya "temukan layanan pembuatan aplikasi, lalu hubungi perusahaannya". Catat di mana mereka ragu atau salah klik. Sering kali satu perubahan label lebih membantu daripada animasi menu yang rumit.

Sisi teknis juga perlu diperiksa karena berpengaruh pada SEO. Google Search Central menjelaskan bahwa Google umumnya hanya bisa merayapi tautan berupa elemen <a> dengan atribut href yang mengarah ke URL sungguhan. Menu yang dibangun dengan elemen lain dan dijalankan hanya lewat JavaScript berisiko tidak terbaca. Google juga menyarankan agar setiap halaman penting mendapat tautan dari setidaknya satu halaman lain di situs Anda, dan agar teks tautan bersifat deskriptif. Navigasi yang rapi membantu pengunjung sekaligus mesin pencari memahami hubungan antarhalaman, termasuk halaman yang ingin Anda kuatkan lewat SEO lokal dan Google Maps.

Bila Anda sedang menyiapkan website baru atau ingin merapikan struktur website lama, Anaverse dapat membantu dari pemetaan halaman, desain UI/UX, hingga pengembangan. Lihat cakupan layanan pembuatan website company profile dan toko online, atau diskusikan struktur menu website Anda dengan tim Anaverse dengan membawa daftar halaman saat ini dan layanan yang ingin diprioritaskan.

Pertanyaan yang sering diajukan

Berapa jumlah ideal item di menu utama?

Tidak ada angka baku yang berlaku untuk semua website. Patokan yang lebih berguna: setiap item harus mewakili tujuan kunjungan yang penting, dan pengunjung bisa membaca seluruh menu sekilas. Di ponsel, NN/g menyarankan tautan yang terlihat langsung bila item utama berjumlah empat atau kurang.

Apakah menu hamburger boleh dipakai di desktop?

Sebaiknya tidak untuk menu utama. Riset NN/g menunjukkan navigasi tersembunyi lebih jarang ditemukan dan memperlambat pengguna, terutama di desktop. Di ponsel, menu hamburger masih wajar.

Apakah dropdown yang muncul saat hover bermasalah?

Hover tidak tersedia di layar sentuh dan menyulitkan pengguna keyboard. Bila tetap memakai hover, pastikan submenu juga bisa dibuka dengan klik dan keyboard, serta tidak langsung hilang saat kursor sedikit bergeser.

Apakah menu navigasi berpengaruh pada SEO?

Menu yang memakai tautan HTML biasa membantu Google menemukan dan merayapi halaman penting. Namun, menu bukan jaminan peringkat. Isi halaman tetap harus relevan dan berguna bagi pencari.

Referensi

• Nielsen Norman Group: Menu-Design Checklist, 17 UX Guidelines
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt UX Metrics (2016)
• Nielsen Norman Group: Tree Testing
• W3C WAI: Menus Tutorial
• W3C WAI: What's New in WCAG 2.2
• W3C: Understanding SC 2.5.8 Target Size (Minimum)
• W3C: Understanding SC 3.2.3 Consistent Navigation
• Google Search Central: Link Best Practices