Merancang Sebuah Menu Navigasi yang inspiratif dan contohnya

Sebuah artikel panjang Merancang Sebuah Menu Navigasi yang inspiratif dan beberapa contoh-contohnya

Menu navigasi pada sebuah situs web seperti tanda jalan di jalan atau direktori tingkat di pusat perbelanjaan. Anda tidak dapat mencapai tujuan Anda tanpa terlebih dahulu mengetahui di mana Anda berada. Seperti dalam kehidupan nyata, navigasi dalam desain web sangat penting dan memainkan peran utama dalam kegunaan sebuah website serta dalam pengalaman pengguna.

Saat ini Anda dapat melihat banyak berbagai jenis menu navigasi dengan desain yang menarik, kreatif dan tidak biasa. Tapi bagaimana tentang navigasi efektif dalam sebuah website, apa yang akan terlihat seperti, bagaimana seharusnya terlihat seperti?

Hari ini saya ingin berbagi pengamatan dan pengetahuan saya tentang pentingnya navigasi dalam desain web. Saya akan mengungkapkan beberapa tips sederhana yang dapat Anda gunakan untuk meningkatkan navigasi website Anda dan kegunaan. Ada juga akan beberapa contoh menu navigasi yang efektif untuk memberikan beberapa gagasan tentang bagaimana merencanakan desain berikutnya.

Informasi Arsitektur

Perencanaan Navigasi harus dimulai dengan arsitektur informasi. Sangat penting untuk duduk dan bertukar pikiran tentang arsitektur informasi sebuah website. Anda harus mencari tahu apa jenis fitur situs web menawarkan, apa yang paling penting dan apa yang bisa ditempatkan di tingkat yang lebih rendah dalam hirarki informasi.
Arsitektur informasi mencakup fitur, kebutuhan pengguna, sitemap, pengujian dan wireframes. Anda dapat membaca lebih lanjut tentang arsitektur informasi dalam artikel oleh Cameron Chapman
Information Architecture 101: Techniques and Best Practices.

Gunakan teknologi yang mudah digunakan (user-enabled)

Hindari menggunakan Flash, JavaScript, jQuery atau hal lain yang menghambat akses risiko ke navigasi website Anda dalam membangun bar navigasi Anda, atau setidaknya pastikan mereka mampu menurunkan anggun.

Gunakan istilah yang User-friendly

Hal ini lebih baik menggunakan istilah yang sederhana, jelas dan yang mudah untuk mengetahui daripada menjaga industri-satunya istilah untuk menu navigasi Anda. Setiap link yang akan membawa pengguna lebih dari satu atau dua detik untuk mencari tahu mungkin tidak cocok untuk digunakan.
Jika pengguna perlu untuk mengklik pada link untuk mencari tahu apa yang mengarah ke link maka ini akan memberikan kontribusi untuk pengalaman pengguna yang buruk bagi pengunjung Anda.

Contoh-contoh

Ketentuan dalam menu navigasi dari situs 'Larissa Ness’yang mudah dipahami dan cukup umum. Pengguna tidak akan menemukan membingungkan karena mereka sudah memiliki pengalaman dengan menu seperti ini.

Berikut adalah contoh lain yang baik dari menu navigasi situs bersih dan jelas dengan istilah umum yang digunakan di csupport.

Creative agency Eighty8Four menggunakan "showroom" istilah yang dapat membingungkan bagi pengunjung. Istilah ini mungkin berarti portofolio atau pekerjaan tetapi tidak jelas dan pengunjung tidak punya pilihan selain untuk klik di untuk check it out.

Desain Navigasi Standar

Gunakan model navigasi yang sama di semua halaman Anda. Hal ini sangat penting karena tanpa desain yang konsisten, pengguna dapat benar-benar berpikir dia berada di situs web lain. Pastikan bahwa Anda menggunakan model navigasi yang sama sehingga pengguna dapat dengan mudah pergi tentang situs web Anda tanpa hilang.
Bluegg, ditunjukkan di bawah ini, menggunakan desain navigasi yang sederhana dan bersih yang tetap sama di semua Subpages. Satu-satunya perbedaan adalah indikator warna, yang menunjukkan halaman pengunjung saat ini

Menunjukkan dimana Anda

Hal ini penting untuk membiarkan pengguna tahu di mana dia setiap saat. Anda dapat melakukan ini dengan mengubah latar belakang link, warna nama halaman atau mengubah teks tebal dalam menu navigasi untuk membuatnya berbeda dari orang lain.

Austin Eastciders menggunakan warna yang berbeda dan latar belakang untuk menunjukkan halaman pengguna aktif. Indikator ini juga dapat bekerja sebagai perubahan desain yang halus, misalnya dengan menggunakan latar belakang yang berbeda navigasi yang menciptakan perasaan bahwa item menu lain secara mendalam.

Media Surgery menggunakan warna yang lebih gelap sebagai indikator untuk subhalaman dibuka. Sederhana namun efektif.

Gunakan konvensi web

Ini adalah semua tentang mudah digunakan dan navigasi intuitif situs. Konvensi web membuatnya jauh lebih mudah bagi para desainer untuk bekerja di sekitar desain mereka. Sebagian besar pengguna akan mengklik pada logo website untuk kembali ke homepage, sehingga desain logo Anda untuk melakukan itu.
Jika Anda tidak, Anda membuat mereka menghabiskan waktu untuk belajar sesuatu yang baru atau dalam beberapa kasus ketidaknyamanan mereka dengan tidak memberikan apa yang mereka harapkan akan diterima norma-norma umum navigasi.
You can learn more about web conventions here:

Inject tempat Desain logo di sudut kiri atas yang cocok salah satu konvensi web yang paling banyak digunakan saat ini.

Adams Creation menggunakan salah satu konvensi web yang paling umum - logo ditempatkan di sudut kiri atas dari website dan link ke homepage.

Coba dulu: Libatkan pihak ketiga

Selalu menguji desain navigasi Anda dengan orang yang telah menggunakan internet sebelumnya. Anda mungkin ingin membawa orang-orang yang tidak terkait dengan proses desain untuk mengujinya. Amati preferensi mereka ketika mereka menavigasi situs Anda dan menganalisa waktu yang dibutuhkan bagi mereka untuk menemukan halaman yang mereka.
Untuk akurasi yang lebih baik, melibatkan lebih banyak orang, mengumpulkan data, menganalisis dan meringkas untuk lebih cocok. Melakukan survei setelah uji-jika diperlukan. Anda mungkin mendapatkan beberapa ide yang tak terduga dan masukan yang seharusnya tidak terdeteksi tanpa uji coba ini.

Menyediakan context

Agar konsisten dengan konten Anda dan navigasi memberikan beberapa konteks untuk pengguna situs untuk menemukan hal-hal yang mereka butuhkan dengan cepat. Anda dapat menempatkan ikon kecil yang berhubungan dengan konten Anda link atau deskripsi singkat untuk memberikan gambaran tentang apa halaman sekitar.
My Own Bike menggunakan ikon sederhana untuk memberikan pengguna informasi lebih lanjut tentang apa yang mereka dapat temukan di subhalaman tertentu.

Sarah Parmenter menggunakan keterangan singkat dan bagus di bawah navigasi utama untuk memberikan beberapa informasi tentang Subpages navigasi utama terhubung ke.

Tujuan SEO

Google menyukai navigasi yang konsisten. Adalah baik untuk memiliki navigasi yang konsisten tidak hanya bagi pengguna untuk memahami dan mendapatkan ide tentang bagaimana untuk menavigasi melalui website Anda, tetapi juga untuk mesin pencari untuk mengindeks situs web Anda.
Robot mesin pencari akan merangkak melalui website Anda untuk mengindeks situs web Anda dan menempatkan link di halaman hasil mesin pencari. Jika Anda ingin terlihat, memperhatikan desain navigasi yang baik dan mendapatkan lebih banyak lalu lintas.

Free navigation scripts (CSS, and jQuery)

Berikut adalah daftar singkat dari menu navigasi terbaru Anda mungkin menemukan berguna untuk proyek-proyek Anda. Script ini akan membuat expererience pengguna produk Anda lebih baik dengan menambahkan beberapa fitur bagus dan membuatnya menyenangkan untuk digunakan.

XML-driven Vertical News Scroller Script using HTML and jQuery: vScroller

Flexible Nav jQuery library

Filtrify

Page Scroller

Timeline Portfolio

HorizontalNav

CSS3 Minimalistic Navigation Menu

Circle Navigation Effect with CSS3

Grid Navigation Effects with jQuery

Ascensor

HTML5/CSS3 Gray Navigation Menu

Create An Elegant CSS3 Navigation Menu

Showcase navigasi horisontal yang indah

setidaknya beberapa inspirasi menu navigasi horisontal. Periksa situs ini menakjubkan dan mereka navigasi menu untuk menemukan solusi ide-ide baru untuk proyek-proyek Anda.

Ch3mical