Desain Web - Navigasi

Sumber : blog.hubspot.com >

Navigasi yang baik adalah salah satu fitur terpenting dari sebuah situs web. Dan tidak hanya mengatakan itu — ada penelitian untuk mendukungnya .

Sangat mudah untuk memahami mengapa navigasi sangat penting bagi pengunjung. Ini mendukung dengan cepat dan mudah menemukan informasi yang cari, seperti blog atau halaman produk. Ini juga dapat membantu menemukan informasi penting yang tidak tahu pesanan , seperti paket harga, halaman pendaftaran email, atau informasi kontak.

Ini menjadikan navigasi sebagai bagian penting dari pengalaman pengguna dan situs web strategi . Sistem yang mendukung pengunjung menemukan konten dengan menelusuri dan menjelajahi tidak hanya dapat meningkatkan peluang menjelajahi situs lebih lama — tetapi juga dapat meningkatkan peluang mengambil tindakan di situs.

Unduh Kit Penelitian & Pengujian UX

Untuk membantu merancang sistem navigasi yang memenuhi kebutuhan pengunjung , mari kita lihat lebih jauh apa itu situs navigasi web dan berbagai cara untuk menerapkannya di situs . Kemudian, kita akan melihat contoh dari situs web nyata dan menjelajahi beberapa praktik terbaik untuk merancang antarmuka yang dapat dinavigasi. Mari kita mulai.

Apa itu navigasi situs web?

Navigasi situs web adalah kumpulan komponen antarmuka pengguna yang membantu pengunjung menemukan konten dan fitur di situs. Komponen-komponen tersebut berupa, teks tautan dan tombol, dan menu.

Item terakhir itu sangat relevan dalam navigasi, jadi mari kita definisikan dengan cepat apa arti menu sebenarnya dalam desain web:

Apa itu menu navigasi?

Di situs web, menu navigasi adalah daftar tautan yang terorganisir ke halaman web lain, biasanya halaman internal. Menu navigasi paling sering muncul di header halaman atau sidebar di seluruh situs web, memungkinkan pengunjung mengakses halaman yang paling berguna dengan cepat.

Sekarang, akan mudah untuk meninggalkannya di sana dan disebut sehari. Namun, navigasi tidak hanya membantu kita berpindah dari satu halaman web ke halaman lain — navigasi juga membantu kita memahami hubungan antara halaman individu di situs web.

Itu karena navigasi dianggap sebagai puncak gunung es yang merupakan arsitektur informasi (IA) situs web , menurut analis IA Nathaniel Davis dalam sebuah artikel untuk UXmatters . Di bawah permukaan air adalah bagian dari gunung es yang tidak dapat dilihat oleh pengunjung front-end: penelitian, strategi , manajemen, dan organisasi yang digunakan untuk membangun situs web IA. Di atas permukaan adalah antarmuka navigasi, paling sering direpresentasikan sebagai tautan hypertext dan bilah pencarian .

Sumber Gambar

Dengan kata lain, IA situs web tidak terlihat di antarmuka navigasi, tetapi merupakan dasar dari antarmuka itu. Ini memberi pengunjung perasaan bahwa konten terhubung dan dikategorikan benar untuk memenuhi kebutuhan dan harapan — tanpa benar menunjukkan semua spreadsheet dan diagram yang digunakan untuk menentukan dan mengatur hubungan tersebut di antara konten .

Berikut adalah contoh hierarki situs web. Mengungkapkan pandangan pada pandangan pertama, bukan? Di menu navigasi utama, mungkin hanya akan melihat tiga nama bagian dari tingkat pertama itu. Subhalaman harus bersarang di menu sub-navigasi. Mari kita definisikan istilah itu di bawah ini.

Sumber Gambar

Apa itu sub-navigasi di situs web?

Sub-navigasi — juga dikenal sebagai pengunjung navigasi lokal — adalah antarmuka tempat dapat menemukan kategori tingkat yang lebih rendah dari situs IA. Ini biasanya sub-kategori dari tautan navigasi utama.

Misalnya, di situs web nirlaba untuk Kebun Binatang Nashville , menu navigasi utama yang berisi navigasi item “Dukungan”. Saat mengarahkan kursor ke item itu, sub-navigasi menu muncul menawarkan beberapa cara untuk mendukung kebun binatang. Ada tautan ke halaman donasi, karier, dan sukarelawan, antara lain.

Sumber Gambar

Jenis Navigasi Situs Web

Navigasi adalah salah satu - jika tidak yang - elemen desain yang paling penting pada sebuah situs web. Ini pada akhirnya memengaruhi apakah pengunjung tiba di beranda dan menjelajah, atau mengklik tombol "Kembali".

Bagaimana menyusun navigasi situs web format audiens pada target , dan apa yang menurut paling intuitif dan dapat diakses oleh . Mari kita lihat beberapa jenis situs navigasi web paling umum yang dapat dipilih.

Navigasi Horisontal/Horizontal Navigation Bar

Bilah navigasi horizontal adalah jenis navigasi menu yang paling umum. Ini halaman utama secara langsung dan ditempatkan di header situs web . Banyak situs web menampilkan bagian yang sama, seperti "Tentang", "Produk", "Harga", "Kontak", karena pengunjung berharap untuk melihatnya. Namun bagian ini belum tentu menjadi bagian yang paling membantu pengunjung di semua situs.

Ambil bilah navigasi di Blavity sebagai contoh. Bagian yang ditampilkan mencakup tiga kategori konten — “Berita”, “Op-Eds”, dan “Gaya Hidup” — serta tautan ke halaman pengiriman dan halaman pendaftaran. Ini lebih cenderung memberi pengunjung akses mudah ke halaman yang cari daripada halaman Tentang, Harga, dan Kontak standar.

Sumber Gambar

Navigasi Dropdown/Dropdown Navigation Menu

Menu navigasi dropdown ideal untuk situs kaya konten dengan IA kompleks. Jika ingin menyertakan banyak tautan ke halaman di bilah navigasi, tidak dapat menampilkan semuanya secara acak — itu akan terlihat berantakan atau tidak mungkin untuk memuat semuanya secara horizontal. Sebagai, buat daftar item navigasi yang paling penting atau umum di bilah tingkat atas dan sertakan sisanya di menu tarik-turun.

Sephora adalah contoh yang bagus karena menawarkan begitu banyak produk dan layanan. Di situs webnya, dapat mengarahkan kursor ke navigasi navigasi apa pun dan menu tarik-turun akan muncul. Menu tarik-turun akan berisi semua kategori untuk bagian situs tertentu.

Sumber Gambar

Navigasi Hamburger/Hamburger Navigation Menu

Menu hamburger paling sering terlihat dalam desain web seluler. Dengan pendekatan ini, navigasi item sering ditampilkan secara horizontal pada ukuran layar yang lebih besar dan diciutkan di belakang tombol hamburger pada ukuran layar yang lebih kecil. Saat pengunjung mengklik ikon tiga baris ini, drop-down vertikal atau pop-out horizontal muncul dengan tautan navigasi. Jenis desain ini sangat ideal untuk aplikasi seluler atau situs di mana real estate terbatas.

Lihat menu hamburger di situs seluler Nettle Studio.

Sumber Gambar

Navigasi Sidebar Vertikal/Vertical Sidebar Navigation Menu

Dengan jenis menu ini, item ditumpuk di atas satu sama lain dan pujian di bilah sisi. Meskipun kurang populer dibandingkan dengan navigasi horizontal, navigasi vertikal memang menawarkan beberapa manfaat. Karena real estate tidak terbatas, dapat mengungkapkan tautan navigasi yang lebih panjang dan menyertakan lebih banyak opsi tingkat atas. Ini juga lebih menarik, yang membuat gaya ini bekerja dengan baik untuk agensi dan bisnis kreatif lainnya.

kualitas sidebar vertikal Arbor Restaurant di bawah ini.

Sumber Gambar

Navigasi Footer/Footer Navigation Menu

Menu footer biasanya dipasangkan dengan — dan diperluas — bilah navigasi horizontal. Jika pengunjung tidak menemukan tautan yang cari di header, dapat menggulir ke halaman bawah untuk opsi lainnya.

The New York Times memiliki 19 navigasi navigasi di menu navigasi horizontal di bagian atas halaman. Menu footernya memiliki lebih dari 50 tautan, yang sebagian besar termasuk dalam salah satu kategori yang tercantum di menu navigasi utama. Ini menawarkan akses mudah ke sub-kategori bagian situs web yang paling populer.

Sumber Gambar

Desain Navigasi Situs Web

Tidak ada satu cara yang "benar" untuk mendesain navigasi situs web . hanya perlu mempertimbangkan bagaimana dapat mengaktifkan pengunjung pertama kali dan pengunjung berulang untuk mendapatkan hasil maksimal dari situs .

Dengan proses desain pada pengunjung unik, struktur navigasi mungkin terlihat dan bekerja berbeda dari struktur navigasi di situs lain, dan hal yang baik.

Dengan mengingat target audiens , mari kita telusuri tahapan proses desain bilah navigasi situs web di bawah ini.

Apa yang harus disertakan dalam navigasi situs web ?

Dengan semua halaman di situs web , mungkin sulit untuk menentukan mana yang cukup penting untuk menjadi bagian dari navigasi universal. Demi SEO dan pengalaman pengguna, Orbit Media merekomendasikan agar navigasi dibatasi paling banyak tujuh item .

Jadi, bagaimana mulai mempersempit lapangan? Pemangku kepentingan dari seluruh perusahaan mungkin memiliki pendapat yang berbeda tentang apa yang layak dan tidak, tetapi pada akhirnya harus melihat pengunjung situs web untuk membantu menentukan arah terbaik.

Kartu penyortiran/Card Sorting

Penyortiran kartu adalah teknik pengalaman pengguna sederhana yang membantu memahami pikiran pengunjung situs web dan mendesain navigasi dari sudut pandang . Kabar baik, tidak harus memiliki pengalaman UX untuk menjalankan latihan ini.

Undang orang dari luar organisasi untuk berolahraga sederhana selama 20 menit. meja setumpuk kartu indeks di atas, masing-masing mewakili halaman utama di situs . Kemudian minta peserta untuk mengatur kartu dengan cara apa pun yang diinginkan. Cari tren bagaimana peserta mengelompokkan halaman di situs , dan cinta bagaimana akan menamai setiap kategori. Organisasi yang dihasilkan dapat membantu membangun tulang punggung situs navigasi .

Sumber Gambar

Laporan Atribusi/Attribution Reports

Jika perangkat lunak analisis pemasaran menyediakannya, pelaporan atribusi sangat cocok untuk memutuskan apa yang harus masuk ke navigasi utama . Laporan ini dikaitkan dengan jumlah kontak yang baru dibuat dengan interaksi dengan bisnis, sehingga dapat lebih memahami konten dan fungsi di situs yang mengubah pengunjung menjadi prospek. Berikut ini beberapa contoh laporan yang tersedia di alat pelaporan atribusi HubSpot.

Sumber Gambar

Ambil situs web HubSpot sendiri, misalnya. Sementara beberapa konten menawarkan mengumpulkan banyak lintas, halaman yang paling umum dilihat oleh orang-orang yang akhirnya membeli perangkat lunak HubSpot adalah halaman produk, harga, studi kasus, dan mitra. Jika beranda , akan melihat bahwa navigasi melihat mencerminkan temuan ini dan memprioritaskan halaman penting tersebut.

Alur Pengguna/Users Flow

Jika tidak memiliki laporan atribusi, masih bisa mengetahui halaman mana yang penting di situs melalui laporan Alur Pengguna di Google Analytics. Meskipun ini tidak membedakan dan lalu lintas standar dari pelanggan, laporan ini tentang bagaimana cara menavigasi pengalaman di situs . Dengan kata-kata Google sendiri : "Laporan Alur Pengguna adalah representasi grafis dari jalur yang diambil pengguna melalui situs , dari sumber, melalui berbagai laman, dan di mana di sepanjang jalur keluar dari situs ."

Bagaimana seharusnya memesan navigasi item ?

Memesan hal-hal dalam navigasi situs web. Studi kognitif memberikan bukti bahwa pemirsa halaman web menemukan tautan di kedua ujung navigasi dengan paling jelas. Sering disebut sebagai efek keutamaan dan kebaruan , berbicara tentang fenomena bahwa kata-kata yang disajikan pertama atau terakhir dalam daftar cenderung lebih menarik perhatian pemirsa. Jadi untuk situs web , harus sangat berhati-hati tentang item apa yang tempatkan di tempat-tempat ini. Pikirkan tentang apa yang paling penting bagi pengunjung biasa .

Dalam sebuah artikel untuk blog Neil Patel , ahli strategi web Andy Crestodina mengatakan, "Letakkan item terpenting di awal navigasi dan item yang paling tidak penting di tengah. 'Kontak' harus menjadi item terakhir dalam daftar, letakkan di paling kanan di navigasi horizontal tingkat atas , lokasi standar."

Bagaimana mengutarakan opsi navigasi ?

Cara menyusun opsi navigasi berdasarkan jenis bisnis atau organisasi . dapat memilih langsung, atau bereksperimen dengan label yang lebih kreatif. Yang paling penting untuk diingat saat memilih kata yang akan digunakan di tautan navigasi utama adalah terlebih dahulu terlebih dahulu tentang istilah yang akan digunakan pelanggan untuk mendeskripsikan halaman tersebut. Kemudian, menemukan optimasi mesin pencari.

Berbasis Objek/Object-Based

Bisa dibilang opsi yang paling jelas untuk situs web adalah navigasi berbasis objek. Navigasi berbasis objek menempatkan konten di bawah kategori konkret (biasanya hanya kata benda). HubSpot.com adalah contoh navigasi berbasis objek, seperti situs Emerson College di bawah ini. Jenis organisasi ini memperlakukan navigasi sebagai daftar isi dan mengelompokkan halaman ke dalam topik atau kategori yang paling sesuai.

Sumber Gambar

Perhatikan bahwa navigasi ke kanan lebih berbasis tindakan daripada berbasis objek. Mari kita definisikan di bawah ini.

Berbasis Aksi/Action-Based

Beberapa situs mungkin lebih baik dilayani oleh navigasi yang berorientasi pada tindakan. Untuk mengetahui kapan ini tepat, cinta kepada audiens apakah datang ke situs web untuk mempelajari sesuatu, atau untuk mengambil tindakan tertentu. Dalam contoh di bawah ini dari Howard University, pengunjung jelas datang dengan pikiran untuk melakukan suatu tindakan. tidak berkunjung untuk membaca halaman "tentang" -- datang untuk melamar, mengunjungi, atau Mereka membaca.

Sumber Gambar

Audiens Berbasis/Audience-Based

Untuk perusahaan yang memiliki beberapa audiens dengan garis yang jelas, mungkin ingin mempertimbangkan navigasi atau sub-navigasi berbasis audiens seperti contoh di bawah ini. Namun, ini hanya berfungsi jika pengunjung dapat dengan mudah mengklasifikasikan diri sendiri. Misalnya, tidak ingin menggunakan perusahaan ukuran kecil vs. menengah, atau pemasaran vs. biro iklan, karena garis tersebut sering kabur dan mungkin membuat audiens bingung ke mana harus pergi terlebih dahulu.

Dalam contoh di bawah ini, Boston College melakukan pekerjaan yang baik dalam menggunakan pendekatan berbasis audiens dalam kombinasi dengan navigasi berbasis objek.

Sumber Gambar

Dioptimalkan Mesin Pencari/Search Engine Optimized

Selain cara audiens secara naluriah mengatur situs, harus mencoba cara terbaik untuk mengoptimalkan navigasi untuk pencarian. Dalam artikel Distilled , ahli strategi SEO Kristina Kledzik menyarankan penggunaan Google Analytics dan Alat Kata Kunci Google untuk Sebuah Penemuan yang paling sering membawa orang ke situs , dan menggunakan variasi kata-kata tersebut sebagai panduan untuk navigasi situs web .

Contoh Navigasi Situs Web

Seperti disebutkan di atas, tidak ada cara yang "benar" untuk membuat bilah navigasi situs web selama itu memungkinkan pengunjung menemukan informasi yang cari dan mendorong untuk mengambil tindakan — baik dengan melakukan pembelian, membuat akun , dan seterusnya. Mari kita lihat contoh di bawah ini yang melakukan hal itu.

Propa Beauty

Propa Beauty memiliki bilah navigasi horizontal minimalis yang dirancang untuk menghasilkan penjualan atau mengubah pengunjung menjadi anggota. Logonya ada di sebelah kiri. Di tengah adalah tautan ke halaman arsip produk. Di sebelah kanan, ada tiga ikon, masing-masing mewakili kotak pencarian, tautan ke halaman login anggota, dan tautan ke keranjang belanja.

Sumber Gambar

NWP

NWP adalah situs e-niaga lain dengan bilah navigasi horizontal. Namun, tidak seperti Propa Beauty, bilah navigasi NWP adalah menu gabungan. Saat halaman dimuat, hanya dapat melihat tautan navigasi utama. Namun, jika mengarahkan kursor ke "Belanja", menu tarik-turun akan muncul berbagai subkategori pakaian yang dapat dibeli di situs.

Sumber Gambar

The Shade Room

Shade Room juga menggunakan dua gaya navigasi menu. Di bagian atas halaman, melihat header horizontal standar. Perhatikan bahwa header ini berisi tombol hamburger di sebelah kanan. Jika mengklik tombol sebelah ini, antarmuka navigasi sekunder muncul di kanan. Ini bertindak seperti sembulan lightbox , memblokir beberapa dan meredupkan sisa konten di latar belakang, dan berisi lebih banyak tautan navigasi yang dapat digunakan untuk menjelajahi situs.

Sumber Gambar

Patagonia

Untuk mengakomodasi katalog barangnya yang besar, Patagonia menerapkan mega menu di situs webnya. Saat pengguna mengarahkan kursor ke item "Toko" di bilah navigasi horizontal, daftar tautan raksasa muncul untuk apa pun yang mungkin ingin jelajahi. Perhatikan juga bahwa item lain di bilah navigasi, yaitu "Aktivitas" dan "Cerita", tidak memicu menu mega saat mouse di atas.

Sumber Gambar

briogeo

Seperti Patagonia, situs navigasi di Briogeo.com berpusat pada menu navigasi horizontal yang menampilkan opsi navigasi berbeda tergantung item mana yang arahkan. Item utama "belanja semua" (digambarkan di bawah) menunjukkan menu mega dengan tautan di seluruh situs, ditambah gambar untuk mewakili koleksinya. Sebaliknya, opsi "perbedaan" membuat penggunaan gambar lebih banyak untuk membentuk hubungan emosional yang lebih kuat dengan pengunjung.

Sumber Gambar

Twitter

Twitter menampilkan salah satu jenis navigasi standar — menu bilah sisi vertikal — tetapi dengan twist. Alih-alih hanya menampilkan item navigasi teks, ini menyertakan ikon di sebelah setiap item. Perhatikan juga strategi penggunaan warna yang. Rumah berwarna biru, karena itu halaman tempat saya berada. Satu-satunya pop warna lain di bilah navigasi adalah tombol CTA.

Sumber Gambar

Olivier Gilaizeau

Situs portofolio Direktur Kreatif Olivier Gillaizeau menampilkan menu bilah sisi vertikal menarik yang menampilkan proyeknya pada garis waktu. Saat mengarahkan kursor ke satu item navigasi, video proyek akan ditampilkan. Mengklik navigasi item akan membawa ke halaman dengan informasi lebih lanjut tentang dan proyek visual.

Sumber Gambar

Pipcorn

Sejauh ini, sebagian besar telah membahas fungsionalitas navigasi menu, tetapi mengubah gaya dapat membuat pengalaman pengguna yang menyenangkan juga. Ambil contoh situs web Pipcorn — navigasi horizontalnya mengungkapkan dropdown vertikal yang meluas dalam animasi yang indah. Ini adalah detail yang sepenuhnya mendukung situs artisan branding dan membuat pengunjung merasa lebih tenggelam dan terlibat.

Sumber Gambar

Praktik Terbaik Navigasi Situs Web

Aturan emas navigasi situs web? Jangan membuat orang berpikir. Konsultan kegunaan Steve Krug mendasarkan seluruh buku pada sentimen ini . Untuk memungkinkan pengguna menavigasi situs web dengan mudah tanpa merasa tersesat atau frustrasi, ikuti praktik terbaik ini.

1. Konsisten.

Konsisten dalam cara memformat dan mendesain antarmuka navigasi . Idenya adalah tidak konsisten demi konsistensi. Ini tentang menyelaraskan dengan pengetahuan dan harapan pengunjung saat ini.

Katakanlah di beranda, tautan berwarna hitam dan garis bawah muncul saat mengarahkan mouse ke atas. Maka itu harus menjadi gaya semua tautan navigasi di setiap halaman situs . Jika tidak, pengunjung tidak akan tahu teks mana yang di-hyperlink dan mana yang tidak ada di menu navigasi .

Perhatikan bahwa menu utama dan sub-navigasi Madewell memiliki gaya tautan yang konsisten. Teks sedikit lebih kecil dan tidak dicetak tebal di menu sub-navigasi, yang merupakan pencarian visual bahwa tautan ini tidak penting.

Sumber Gambar

2. Desain untuk setiap ukuran layar.

Dengan perangkat seluler ini menghasilkan lebih dari setengah kunjungan mesin telusur organik tahun ini , mengoptimalkan situs web untuk seluler dan ukuran layar lainnya menjadi sangat penting. Itu termasuk menu navigasi.

Saat mendesain navigasi situs web terlebih dahulu, dengan terlebih dahulu memastikan seluler terlebih dahulu. Dengan memulai dengan ukuran layar terkecil, harus memprioritaskan tautan apa yang paling penting untuk disertakan dalam navigasi utama , dan dalam urutan apa. juga harus memutuskan fitur navigasi apa — seperti tombol hamburger — yang diperlukan di seluler, dan bagaimana fitur itu cocok dengan desain desktop . Ini akan membantu mengubah desain untuk ukuran layar yang lebih besar dengan gagasan yang jelas tentang halaman dan fitur navigasi apa yang paling penting.

3. Membuat informasi yang paling penting dapat diakses.

mendengar tentang aturan tiga klik? Ini adalah gagasan bahwa setiap struktur navigasi situs web harus memungkinkan seseorang untuk mendarat di halaman mana pun di situs web dan menemukan apa yang memesan dalam tiga klik.

Meskipun ide ini telah mengakar kuat di dunia desain web, sebagian besar telah didiskreditkan. Fact, satu studi menemukan bahwa pengguna tidak lagi mungkin untuk keluar dari tugas setelah tiga klik daripada setelah 12 klik. Bagan di bawah ini menunjukkan bahwa beberapa pengguna terus berusaha menemukan konten yang diinginkan setelah sebanyak 25 klik.

Namun, dasar aturannya bagus. ingin membatasi jumlah upaya yang diperlukan pengunjung untuk mengakses informasi penting atau menyelesaikan tugas di situs . Menghitung klik adalah metrik yang terlalu dangkal. Sebagai, harus fokus pada pembuatan jalur yang jelas, mengurangi waktu buka halaman, dan menghapus titik-titik lainnya dalam perjalanan pengguna.

4. Tambahkan breadcrumbs

Untuk memahami navigasi breadcrumbs , membayangkan dongeng di Hansel dan Gretel. Saat melakukan perjalanan ke hutan, dua anak menjatuhkan remah roti sehingga dapat menemukan jalan pulang. Navigasi Breadcrumb dirancang untuk tujuan yang sama: untuk memungkinkan pengguna memvisualisasikan di mana dalam struktur situs web dan dapat menelusuri kembali langkah-langkah ke halaman tingkat yang lebih tinggi.

Itu juga tidak memakan banyak real estate. Bilah navigasi sekunder ini biasanya terdiri dari tautan teks yang dipisahkan oleh simbol "lebih besar dari" (>) dan ditempatkan di bawah header.

Dalam contoh dari Best Buy di bawah ini, dapat menjelajahi PC laptop dan menyadari bahwa menginginkan tablet. Alih-alih memulai dari awal dengan kueri baru di kotak pencarian, cukup mengeklik tautan "Komputer & Tablet" di menu remah roti.

Sumber Gambar