Merancang Ide dan Inspirasi Menu Navigasi yang Menang
Menu navigasi di situs web seperti tanda jalan di jalan atau direktori level di pusat perbelanjaan. Anda tidak dapat mencapai tujuan tanpa terlebih dahulu mengetahui di mana Anda berada. Seperti dalam kehidupan nyata, navigasi dalam desain web sangat penting dan memainkan peran utama dalam kegunaan situs web serta dalam pengalaman pengguna..
Saat ini Anda dapat melihat banyak jenis menu navigasi dengan desain yang menarik, kreatif dan tidak biasa. Tapi bagaimana dengan navigasi yang efektif di situs web, seperti apa tampilannya; bagaimana seharusnya terlihat?
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 dan kegunaan situs web Anda. Juga akan ada beberapa contoh menu navigasi yang efektif untuk memberi Anda beberapa ide tentang bagaimana merencanakan desain Anda berikutnya.
Arsitektur Informasi
Perencanaan navigasi harus dimulai dengan arsitektur informasi. Sangat penting untuk duduk dan bertukar pikiran tentang arsitektur informasi situs web. Anda harus mencari tahu fitur seperti apa yang ditawarkan situs web, apa yang paling penting dan apa yang bisa ditempatkan di tingkat yang lebih rendah dalam hierarki informasi.
Arsitektur informasi termasuk fitur, kebutuhan pengguna, sitemap, pengujian dan gambar rangka. Anda dapat membaca lebih lanjut tentang arsitektur informasi dalam artikel oleh Cameron Chapman dalam Arsitektur Informasi 101: Teknik dan Praktik Terbaik.
Menggunakan teknologi yang diaktifkan pengguna
Hindari menggunakan Flash, JavaScript, jQuery atau apa pun yang berisiko menghambat akses ke navigasi situs web Anda dalam membangun bilah navigasi Anda, atau setidaknya memastikan mereka dapat menurunkan anggun.
Untuk referensi lebih lanjut tentang penurunan javascript yang anggun, lihat posting ini di 10 Metode Fallback Berguna untuk CSS dan Javascript.
Gunakan istilah yang sederhana dan mudah digunakan
Lebih baik digunakan sederhana, jelas, dan istilah-istilah yang mudah diketahui daripada mempertahankan ketentuan industri saja untuk menu navigasi Anda. Tautan apa pun yang membutuhkan pengguna lebih dari satu atau dua detik untuk mencari tahu mungkin tidak cocok untuk digunakan.
Jika pengguna perlu mengklik tautan untuk mencari tahu apa yang mengarah ke tautan maka ini akan berkontribusi pada pengalaman pengguna yang buruk bagi pengunjung Anda.
Contohnya
Istilah dalam menu navigasi situs web Larissa Ness mudah dipahami dan cukup umum. Pengguna tidak akan merasa bingung karena mereka sudah memiliki pengalaman dengan menu seperti ini.
Berikut ini contoh bagus lain dari menu navigasi situs web yang bersih dan jernih dengan istilah umum yang digunakan, di csupport.
Agen kreatif Eighty8Four menggunakan istilah "ruang pamer" yang dapat membingungkan bagi pengunjung. Istilah ini mungkin berarti portofolio atau berfungsi tetapi tidak jelas dan pengunjung tidak punya pilihan selain mengklik untuk memeriksanya.
Standarisasi desain Navigasi
Gunakan model navigasi yang sama di semua halaman Anda. Ini sangat penting karena tanpa desain yang konsisten, pengguna mungkin benar-benar berpikir dia ada di situs web lain. Pastikan Anda menggunakan model navigasi yang sama sehingga pengguna dapat dengan mudah pergi ke situs web Anda tanpa harus tersesat.
Bluegg, ditunjukkan di bawah, menggunakan desain navigasi yang sederhana dan bersih yang tetap sama di semua subhalaman. Satu-satunya perbedaan adalah indikator warna, yang menunjukkan halaman saat ini pengunjung.
Tunjukkan di mana Anda berada
Sangat penting untuk memberi tahu pengguna di mana dia berada setiap saat. Anda dapat melakukannya dengan mengubah latar belakang tautan, warna nama halaman atau putar teks tebal di menu navigasi untuk membuatnya berbeda dari yang lain.
Austin Eastciders menggunakan warna dan latar belakang yang berbeda untuk menunjukkan halaman tempat pengguna berada. Indikator ini juga dapat berfungsi sebagai perubahan desain yang tidak kentara, misalnya dengan menggunakan a latar belakang navigasi yang berbeda yang menciptakan perasaan bahwa item menu lainnya mendalam.
Bedah Media menggunakan warna yang lebih gelap sebagai indikator untuk subhalaman yang terbuka. Sederhana tetapi efektif.
Gunakan konvensi web
Ini semua tentang navigasi situs web yang mudah digunakan dan intuitif. Konvensi web memudahkan desainer untuk mengerjakan desain mereka. Sebagian besar pengguna akan mengklik logo situs web untuk kembali ke beranda, jadi rancang logo Anda untuk melakukannya.
Jika tidak, Anda membuat mereka menghabiskan waktu untuk mempelajari sesuatu yang baru atau dalam beberapa kasus membuat mereka tidak nyaman dengan tidak memberikan apa yang mereka harapkan sebagai norma navigasi yang diterima secara umum.
Anda dapat mempelajari lebih lanjut tentang konvensi web di sini:
- 10 Konvensi Desain Web
- Jangan Menemukan Kembali Roda Desain Web
- Desain Dengan Konvensi Web
Desain Injeksi menempatkan logo di sudut kiri atas yang sesuai dengan salah satu konvensi web yang paling banyak digunakan saat ini.
Penciptaan Adams menggunakan salah satu konvensi web yang paling umum - logo ditempatkan di sudut kiri atas situs web dan tautan ke beranda.
Uji itu: Libatkan pihak ketiga
Selalu uji desain navigasi Anda dengan orang yang pernah menggunakan Internet sebelumnya. Anda mungkin ingin membawa orang yang tidak terkait dengan proses desain untuk mengujinya. Amati preferensi mereka ketika mereka menavigasi melalui situs Anda dan menganalisis waktu yang diperlukan bagi mereka untuk menemukan halaman yang mereka cari.
Untuk akurasi yang lebih baik, melibatkan lebih banyak orang, mengumpulkan data, menganalisis dan merangkumnya untuk kesesuaian yang lebih baik. Lakukan survei setelah tes jika perlu. Anda mungkin mendapatkan beberapa ide dan masukan yang tidak terduga yang tidak akan terdeteksi tanpa uji coba ini.
Berikan konteks
Agar konsisten dengan konten dan navigasi Anda, berikan beberapa konteks bagi pengguna situs web untuk menemukan hal-hal yang mereka butuhkan dengan cepat. Anda dapat menempatkan ikon kecil yang terkait dengan konten yang Anda tautkan atau deskripsi singkat untuk memberikan gambaran umum tentang apa halaman tersebut.
Sepeda saya sendiri menggunakan ikon sederhana untuk memberi pengguna lebih banyak informasi tentang apa yang dapat mereka temukan di subhalaman tertentu.
Sarah Parmenter menggunakan teks pendek dan bagus di bawah navigasi utama untuk memberikan beberapa informasi tentang subhalaman yang ditautkan oleh navigasi utama.
Tujuan SEO
Google menyukai navigasi yang konsisten. Adalah baik untuk memiliki navigasi yang konsisten tidak hanya bagi pengguna untuk memahami dan mendapatkan ide tentang cara menavigasi melalui situs web Anda tetapi juga untuk mesin pencari untuk mengindeks situs web Anda.
Robot mesin pencari akan merayapi melalui situs web Anda untuk mengindeks situs web Anda dan meletakkan tautan di halaman hasil mesin pencari. Jika Anda ingin terlihat, perhatikan desain navigasi yang baik dan dapatkan lebih banyak lalu lintas.
Script navigasi gratis (CSS, dan jQuery)
Berikut adalah daftar singkat menu navigasi terbaru yang mungkin berguna untuk proyek Anda. Skrip ini akan membuat pengalaman pengguna produk Anda lebih baik dengan menambahkan beberapa fitur yang bagus dan menjadikannya menyenangkan untuk digunakan.
Script Scroller Berita Vertikal yang digerakkan XML menggunakan HTML dan jQuery: vScroller
Filtrify
Penggulung Halaman
Portofolio Garis Waktu
HorizontalNav
Menu Navigasi Minimalis CSS3
Efek Navigasi Lingkaran dengan CSS3
Efek Navigasi Kotak dengan jQuery
Ascensor
Buat Menu Navigasi CSS3 yang Elegan
Menampilkan navigasi horizontal yang indah
Terakhir, beberapa menu navigasi horisontal yang menginspirasi. Periksa situs web yang luar biasa ini dan solusi menu navigasi mereka untuk menemukan ide-ide baru untuk proyek Anda.
Ch3mical
Pemasaran Pencarian Bloom Inc.
Alex Perez
Libor Zezulka
Hauska!
Kepulauan Emas
Neil Carpenter
Marc Thomas
Polystyren 3D
Liechtenecker
Dunia Petualangan
Fotografi Arbutus
OMDRL
4 Pines Beer
Anggur pemburu
Semoga artikel ini bermanfaat dan informatif. Jika Anda memiliki pemikiran atau jika Anda tidak setuju, silakan bagikan pendapat Anda di bagian komentar.
