Bila hendak menggunakan (dan tidak menggunakan) menu mega untuk navigasi

Menu Giant dan Pengalaman Pengguna

Prinsip utama menggunakan menu gergasi harus dapat menjawab soalan mudah:

Bolehkah menu gergasi memudahkan pengguna melayari laman web saya?

Anda tidak boleh menambahnya hanya kerana mereka adalah barangan bergaya terkini. Menambah menu gergasi di laman web anda harus mengambil kira pengalaman pengguna (UX). Jika menu mega anda membuat proses navigasi lebih lancar dan lebih intuitif, tambahkan satu. Jika tidak, atau anda hanya memerlukan beberapa item dalam menu, berpegang pada menu drop-down biasa.

Apabila memutuskan sama ada menggunakan menu mega, anda juga mungkin ingin bertanya kepada diri sendiri soalan lain:

Bolehkah menu gergasi membantu laman web saya mencapai matlamatnya?

Anda mungkin berfikir ini adalah soalan yang samar -samar yang sukar dijawab, tetapi semua aspek reka bentuk dan kandungan laman web harus dikaitkan dengan apa yang cuba dicapai oleh laman web anda. Ini mungkin salah satu situasi berikut:

• Menjual Produk dalam talian
• Galakkan orang ramai untuk menghubungi anda untuk membeli perkhidmatan anda
• Membangunkan pengikut
• mempromosikan amal
• Buat komuniti
• Dapatkan pelanggan
• Tiket untuk acara jualan

Saya percaya laman web mungkin mempunyai lebih banyak matlamat, tetapi ini adalah beberapa yang paling biasa. Memahami matlamat anda akan membantu anda mengetahui dengan tepat halaman mana yang anda mahu pengguna melawat untuk mencapai matlamat anda.

Jadi jika anda mahu orang membeli produk dalam talian dan anda mempunyai kedai yang besar dan kompleks, menu gergasi mungkin menjadi pilihan terbaik. Tetapi jika anda hanya mempunyai produk atau perkhidmatan yang sangat spesifik dan anda ingin mengarahkan orang ke halaman jualan produk atau perkhidmatan itu, maka menu gergasi boleh mengganggu.

Sebelum anda membuat keputusan sama ada untuk menambah menu gergasi, luangkan sedikit masa untuk memikirkan apa yang anda mahu laman web anda dicapai, di mana anda mahu pelawat pergi ke laman web ini, dan jenis navigasi yang akan mendorong mereka untuk berbuat demikian.

Berikut adalah beberapa contoh khusus menu gergasi yang dapat meningkatkan laman web anda.

bila menggunakan menu mega

Mari kita lihat beberapa menu mega sebagai penambahan berguna ke laman web.

1.

Jika laman web anda adalah laman web runcit, pengguna akan digunakan untuk melihat menu gergasi dan menggunakannya untuk melayari pelbagai jabatan kedai.

Sebagai contoh, laman web John Lewis yang ditunjukkan di bawah menggunakan menu mega yang berbeza untuk setiap bahagian utama kedai. Berikut adalah bahagian pakaian wanita:

Orang biasa menggunakan menu gergasi di laman web kedai -kedai besar dan tidak keliru. Sebagai contoh, jika saya melawat tapak untuk pakaian, saya boleh memasuki bahagian tapak yang sama dengan satu klik.

2.

Dalam beberapa kes, menu drop-down atau satu siri menu drop-down akan mengandungi banyak pilihan yang akan mengurangkan pengalaman pengguna.

Kajian yang dijalankan oleh Jakob Nielsen dan Angie Li menunjukkan bahawa untuk menu navigasi besar, menu gergasi meningkatkan pengalaman pengguna berbanding menu drop-down. Ini kerana menu drop-down dengan banyak kandungan akan meminta pengguna untuk menatal ke bawah, kadang-kadang perlu menatal ke bawah dan kemudian tatal semula. Ini mengambil masa yang lebih lama, meletakkan lebih banyak tekanan pada ingatan jangka pendek, dan boleh mengelirukan.

Oleh itu, jika laman web anda perlu memasukkan banyak elemen dalam menu navigasi, menu mega mungkin meningkatkan pengalaman pengguna. Tetapi pastikan jika anda menggunakan menu gergasi, anda membinanya dengan cara yang intuitif kepada pengguna, dan anda menggunakan petua reka bentuk seperti warna, kesan teks, dan fon untuk memudahkan untuk melayari.

Laman web permainan di bawah adalah contoh hebat siri menu gergasi, masing -masing berkaitan dengan bahagian laman web. Menu ini menggunakan jarak dan kesan teks seperti teks berani dan latar belakang untuk menjadikan menu intuitif dan mudah dinavigasi.

### 3. Apabila reka bentuk menu meningkatkan laman web

Kadang -kadang, anda mempunyai peluang untuk menambah kandungan ke laman web anda yang lebih daripada sekadar pautan teks.

Laman web Moleskine yang ditunjukkan di bawah ini mempunyai menu mega yang unik. Sebagai tambahan kepada pautan teks, ia juga mempunyai gambar produk utama yang bertindak sebagai pautan dengan teks yang meliputi mereka.

Ini menggalakkan pelawat untuk melawat halaman ini dan menjadikan menu mega lebih daripada sekadar aspek berfungsi laman web - ia meningkatkan reka bentuk dan membantu mencapai matlamat jualan.

apabila tidak menggunakan menu mega

Kadang -kadang anda tidak boleh menggunakan menu mega. Berikut adalah beberapa contoh.

1.

Jika laman web anda tidak mempunyai beratus -ratus halaman, maka menu gergasi akan kelihatan berlebihan. Untuk laman web atau blog perniagaan kecil biasa, menu gergasi hanya akan mengelirukan pelawat -dan ia juga akan kelihatan kosong.

Laman web Envato Tuts menggunakan gabungan menu gergasi dan menu drop-down biasa. Untuk bahagian laman web yang mempunyai beberapa pautan, menu drop-down biasa dapat menyelesaikan tugas dan meliputi halaman yang lebih sedikit:

### 2. Apabila laman utama anda hanyalah pautan

Jika laman utama anda hanyalah halaman yang menghubungkan ke subpage, maka anda tidak memerlukan menu gergasi sama ada.

laman web kerajaan British adalah contoh.

Sebaik sahaja anda menavigasi lagi ke laman web, akan ada menu navigasi kiri yang dapat diperluas:

Ini juga merupakan contoh yang baik untuk tidak menggunakan menu mega dalam persekitaran di mana pengguna mungkin tidak mengharapkan untuk menggunakan menu mega. Sebagai contoh, di laman web sektor awam, menu mega kurang biasa daripada di tapak runcit.

3.

Kadang -kadang laman web anda direka untuk menjual satu atau dua produk atau perkhidmatan, atau untuk menggalakkan mendaftar untuk senarai mel.

Jika ini berlaku, anda mungkin mempunyai sepanduk di halaman utama yang mengarahkan pelawat ke halaman log masuk.

Dalam kes ini, anda mahu navigasi disimpan minimum. Menu gergasi memberikan pengunjung begitu banyak pilihan yang mereka kurang berkemungkinan untuk melawat halaman yang anda mahu mereka melawat. Oleh itu, pastikan navigasi anda minimum dan fokus pada mengarahkan pelawat ke halaman log masuk anda.

Laman web Pemeriksa Media Sosial adalah contoh yang baik. Sekarang, mereka mahu pelawat melakukan satu daripada dua perkara: mendaftar untuk senarai mel mereka atau membeli tiket ke mesyuarat mereka. Banner mencerminkan titik kedua, sementara panggilan untuk tindakan yang menduduki bahagian atas halaman utama mencerminkan titik pertama.

Jika mereka memberi pelawat menu besar, gergasi, ia mengurangkan kemungkinan bahawa mereka melakukan salah satu daripada dua perkara ini, jadi mereka menyimpan navigasi mudah.

### 4. Pada peranti mudah alih

Membuat menu mega yang mudah dibaca pada skrin kecil akan menjadi sukar. Untuk menjadikannya berfungsi, anda perlu membuat pautan kecil, yang bermaksud orang tidak akan dapat mengkliknya atau memperkenalkan skrol. Menggabungkan menu gergasi dengan menatal boleh mengelirukan kerana sukar untuk mengetahui di mana menu gergasi berakhir dan di mana kandungan halaman bermula.

Pada peranti mudah alih, lebih baik menggunakan menu hamburger: menu yang tidak akan dapat dilihat sehingga anda mengklik simbolnya. Ia sering dipanggil menu hamburger kerana simbol: tiga garis menegak kelihatan seperti hamburger.

Laman web John Lewis yang disebutkan di atas mempunyai menu sedemikian. Klik simbol dan pilihan menu akan berkembang di bawahnya.

Perkara yang perlu diperhatikan semasa menambahkan menu gergasi ke laman web anda

Kami hanya membincangkan apabila kita perlu dan tidak boleh menambah menu gergasi ke laman web anda. Jika anda fikir menu gergasi akan meningkatkan kebolehgunaan laman web anda, sudah tiba masanya untuk mengetahui beberapa perkara penting yang perlu diingat sebelum menambah menu gergasi ke laman web anda.

pautan harus teratur

Menu gergasi biasanya mengandungi banyak pautan. Oleh itu, adalah penting untuk dianjurkan dan dibahagikan kepada bahagian yang sesuai. Ini terbukti dalam tangkapan skrin menu gergasi di laman web John Lewis. Pautan di bawah seksyen wanita diletakkan lagi ke dalam kategori yang berbeza yang mudah dinavigasi.

pautan harus mudah dibaca dan diklik

Anda juga perlu memastikan semua pautan dalam menu mega mudah dibaca dan diklik. Harus ada jarak yang cukup antara pautan supaya pengguna tidak sengaja mengklik kandungan yang mereka tidak mahu mengakses. Mereka harus mengandungi teks terhad, tetapi masih membantu pengguna memahami di mana mereka akan mengambil pengguna sekali diklik.

tambah petua visual untuk membantu pengguna

Anda juga mungkin ingin menambah beberapa petua visual ke menu navigasi untuk membantu pengguna memahami bagaimana pautan dianjurkan. Sebagai contoh, ikon anak panah akan menunjukkan kepada pengguna yang mengklik pada item submenu tertentu akan memaparkan sekumpulan pautan baru. Item yang boleh diklik dan tidak boleh diklik harus mudah dibezakan.

Prestasi Pengoptimuman

Menu gergasi adalah kompleks dan intensif sumber. Mereka memerlukan banyak tag, CSS, dan JavaScript untuk berfungsi seperti yang diharapkan di mana -mana sahaja. Sesetengah menu gergasi juga menggunakan imej. Ini boleh menjejaskan menu dan masa pemuatan laman web. Anda tidak akan mahu prospek anda bosan dengan menunggu dan kemudian berpaling kepada pesaing anda. Oleh itu, menjaga menu mega yang dioptimumkan harus menjadi keutamaan.

menyediakan alternatif untuk peranti mudah alih

Seperti yang telah dibincangkan sebelumnya, menu gergasi tidak berfungsi dengan baik pada peranti mudah alih kerana saiz skrin kecil. Anda harus mempertimbangkan untuk menyediakan satu lagi cara navigasi pada skrin yang lebih kecil untuk memastikan laman web anda responsif. Sebagai contoh, anda boleh menggunakan menu burger pada peranti mudah alih anda dan mungkin memadam imej dalam menu navigasi pada skrin kecil, hanya menggunakan pautan asas.

tambahkan butang panggilan ke tindakan

Pengguna sering akan menggunakan menu gergasi anda untuk melompat ke bahagian lain laman web. Anda boleh menggunakan pengetahuan ini untuk meningkatkan penglibatan pengguna dengan dengan bijak menambah beberapa tindakan atau promosi di tempat yang betul.

Meningkatkan kebolehgunaan melalui ujian pengguna

Apa yang kelihatan jelas dan betul kepada anda dalam menu mega mungkin tidak berlaku untuk pengguna. Oleh itu, adalah penting bahawa anda perlu menyimpan ujian A/B menu mega anda untuk mengetahui susun atur mana yang terbaik untuk keadaan anda.

menguji menu mega pada pelbagai peranti

juga penting bahawa anda harus menguji menu mega anda pada seberapa banyak pelayar dan peranti yang mungkin. Menu raksasa adalah unsur -unsur UI yang kompleks, menjadikan mereka kelihatan betul boleh menjadi sedikit rumit. Pada masa yang sama, pastikan semua pautan dalam menu mega berfungsi dengan betul.

tambahkan menu gergasi ke laman web anda

Jika anda telah memutuskan bahawa menu mega adalah pilihan yang tepat untuk laman web anda, cara paling mudah untuk menambah menu mega adalah melalui plugin.

CodeCanyon menawarkan banyak plugin menu gergasi untuk pilihan anda. Beberapa yang paling popular termasuk:

• UberMenu adalah plugin menu gergasi terlaris. Ia membolehkan anda membuat menu mega sepenuhnya untuk laman web anda. Ia termasuk pemilih CSS untuk membantu anda merancang menu mega yang cantik dengan fon dan kesan teks, dan datang dalam pelbagai susun atur.
• Mega Main Menu membolehkan anda meletakkan pelbagai jenis objek ke dalam menu anda. Jadi jika anda mahukan imej seperti laman web Moleskine di atas, ini mungkin membantu.
• Menu Hero direka untuk menjadi mudah digunakan dan dapat membantu anda bangun dan menjalankan menu mega dalam beberapa minit dan dilengkapi dengan pembina menu seret dan drop.

Untuk lebih banyak inspirasi untuk mencipta menu gergasi, anda mungkin ingin menyemak jawatan -jawatan lain di Envato Tuts:

Gunakan menu gergasi dengan bijak dan mereka akan meningkatkan laman web anda

Menu gergasi boleh menjadi cara yang baik untuk meningkatkan pengalaman pengguna laman web. Jika anda mempunyai laman web yang besar dengan banyak pautan, menambah menu gergasi akan membantu pengguna anda menavigasi. Jika laman web anda memenuhi keperluan, cuba tambah menu gergasi hari ini.

Atas ialah kandungan terperinci Bila hendak menggunakan (dan tidak menggunakan) menu mega untuk navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!