Dalam dongeng Hansel dan Gretel, dua anak menjatuhkan remah roti di hutan untuk menemukan jalan pulang. Saat ini, Anda mungkin tidak mengalami terlalu banyak pengalaman tersesat, tetapi saya berani bertaruh Anda merasa bingung pada situs web yang dirancang dengan buruk.
Dalam desain web, navigasi breadcrumb adalah cara untuk menunjukkan kepada pengguna Anda lokasi mereka dan bagaimana mereka sampai di sana. Seperti remah roti Hansel, ini membantu pengguna menelusuri kembali jalur mereka dan melihat di mana mereka berada dalam skema situs Anda yang lebih besar.
Navigasi breadcrumb adalah cara bagi pengguna untuk memvisualisasikan lokasi mereka di situs web. Ini adalah bilah navigasi sekunder yang biasanya muncul sebagai tautan teks horizontal, dipisahkan oleh tanda kurung sudut. Navigasi breadcrumb meningkatkan kemampuan menemukan halaman arahan Anda, dan membantu pengguna mencapai halaman tingkat yang lebih tinggi lebih cepat jika mereka awalnya menemukan situs Anda dari pencarian atau tautan dalam.
Meskipun Anda dapat menata remah roti sesuka Anda, remah roti cenderung terlihat sama di seluruh situs web yang menggunakannya. Berikut ini sederhana contoh remah roti dari Basis Pengetahuan HubSpot:
Jakob Nielsen, salah satu pendiri yang terkenal Grup Nielsen Norman, telah merekomendasikan navigasi remah roti sejak 1995, dan menegaskan kegunaan dan efisiensinya: “Semua yang dilakukan remah roti adalah memudahkan pengguna untuk bergerak di sekitar situs, dengan asumsi konten dan struktur keseluruhannya masuk akal. Itu kontribusi yang cukup untuk sesuatu yang hanya membutuhkan satu baris dalam desain.”
Jika situs web bisnis Anda berlapis-lapis, Anda dapat mempertimbangkan untuk menerapkan navigasi breadcrumb untuk buat situs Anda lebih mudah dinavigasi. Namun, seperti elemen desain lainnya, ada cara yang benar dan salah dalam melakukannya. Di sini, kami akan menjelajahi sembilan tip dan contoh untuk memastikan Anda membuat navigasi breadcrumb yang paling efektif untuk pengguna Anda.
Navigasi breadcrumb memiliki struktur linier, jadi Anda hanya ingin menggunakannya jika masuk akal dengan hierarki situs web Anda. Jika Anda memiliki halaman tingkat rendah yang dapat diakses dari halaman arahan yang berbeda, menggunakan navigasi breadcrumb hanya akan membingungkan pembaca yang terus mengakses halaman yang sama dari titik awal yang berbeda. Selain itu, jika situs Anda relatif sederhana, dengan hanya beberapa halaman, Anda mungkin tidak memerlukan navigasi breadcrumb.
Navigasi breadcrumb Anda adalah alat sekunder untuk bilah navigasi utama Anda, sehingga tidak boleh terlalu besar atau menonjol di halaman. Misalnya, pada DHL’s situs web, bilah navigasi utama mereka besar dan dapat dikenali, dengan kolom seperti “Ekspres” “Paket & eCommerce” “Logistik”, dll. Navigasi remah roti mereka adalah bagian yang lebih kecil di bawah yang bertuliskan, “DHL Global | > Logistik | > Transportasi Barang” . Anda tidak ingin pengguna Anda salah mengira navigasi breadcrumb Anda sebagai bilah navigasi utama.
Saya mencari di Google “Mahasiswa Non-Gelar Universitas Elon” untuk mencapai halaman arahan ini, tetapi Elon pintar untuk menyertakan jalur navigasi lengkap, termasuk “Home” dan “Admissions”. Jika Anda mengabaikan level tertentu, Anda akan membingungkan pengguna dan jalur breadcrumb tidak akan terasa membantu. Meskipun pengguna tidak memulai di beranda, Anda ingin memberi mereka cara mudah untuk menjelajahi situs Anda dari awal.
Penting bahwa navigasi breadcrumb Anda terbaca dari kiri ke kanan, dengan tautan terdekat ke kiri adalah beranda Anda, dan tautan terdekat ke kanan adalah laman pengguna saat ini. Sebuah studi oleh Nielsen Norman Group menemukan pengguna menghabiskan 80% waktu mereka untuk melihat bagian kiri halaman dan 20% melihat bagian kanan, membuat alasan kuat untuk desain kiri-ke-kanan. Plus, tautan yang paling dekat ke kiri akan muncul sebagai awal rantai, jadi Anda ingin itu menjadi halaman tingkat tertinggi Anda.
Untuk menghindari kebingungan, Anda harus tetap konsisten dengan judul halaman dan breadcrumb Anda, terutama jika Anda menargetkan kata kunci tertentu dalam judul tersebut. Anda juga ingin menautkan dengan jelas judul remah roti Anda ke halaman. Jika judul breadcrumb tidak memiliki tautan, perjelas. Bersarang secara efektif memberipada judul breadcrumbnya agar sesuai dengan judul halaman. “Area dampak & komitmen”, misalnya, terbaca sama di navigasi breadcrumb seperti halnya di halaman.
Nestle juga melakukan pekerjaan yang baik dalam membedakan tautan dari non-tautan dengan warna berbeda — tautannya berwarna biru, sedangkan non-tautan tetap abu-abu.
Navigasi breadcrumb tradisional terlihat seperti ini: Beranda > Tentang Kami > Karier. Namun, Anda tidak perlu mengikuti cara tradisional jika Anda merasa desain yang berbeda dapat lebih menarik bagi audiens Anda, atau terlihat lebih baik di situs Anda.
Contohnya, Target menggunakan navigasi breadcrumb di halaman produk mereka (karena siapa yang tidak akan tersesat di bagian sepatu virtual?), tetapi menggunakan simbol “https://blog.hubspot.com/” dan teks hitam dan abu-abu sederhana. Dalam hal ini, variasi desain yang halus masuk akal untuk estetika situs mereka.
Navigasi remah roti Anda hanyalah bantuan bagi pengguna, dan idealnya tidak boleh diperhatikan kecuali jika pengguna mencarinya. Untuk alasan ini, Anda tidak ingin mengacaukan navigasi breadcrumb Anda dengan teks yang tidak perlu.
Eionet, misalnya, dapat melakukannya tanpa teks “Anda di sini”. Meskipun dimaksudkan untuk membantu, teks mengacaukan halaman. Dengan desain yang tepat, navigasi breadcrumb harus cukup terlihat tanpa pengenalan.
Ada beberapa jenis remah roti yang mungkin Anda gunakan — berbasis lokasi, berbasis atribut, dan berbasis riwayat. Breadcrumb berbasis lokasi menunjukkan kepada pengguna di mana mereka berada dalam hierarki situs. Breadcrumb berbasis atribut menunjukkan kepada pengguna di kategori mana halaman mereka masuk. Terakhir, remah roti berbasis riwayat menunjukkan kepada pengguna jalur spesifik yang mereka ambil untuk sampai di halaman saat ini.
Tempat Tidur Mandi & Seterusnya menggunakan navigasi breadcrumb berbasis atribut untuk menunjukkan kepada pengguna kategori mana halaman produk mereka berada, sehingga pengguna dapat mengklik kembali ke “Dapur” atau “Peralatan Kecil” untuk membaca dengan teliti item serupa. Jenis navigasi breadcrumb ini paling efektif untuk pelanggan Bed Bath & Beyond. Saat Anda membuat navigasi breadcrumb, pertimbangkan apa yang paling berguna bagi pengunjung situs Anda.
Praktik terbaik dalam navigasi breadcrumb mendesak desainer web untuk menempatkan navigasi di bagian atas halaman — tetapi apel, salah satunya perusahaan paling berharga sepanjang masa, menentang logika ini dengan meletakkan navigasi breadcrumb mereka di bagian bawah situs mereka. Pada akhirnya, penting bagi Anda untuk mengetahui audiens Anda. Pelanggan Apple biasanya paham teknologi, dan kemungkinan akan menemukan navigasi jika mereka membutuhkannya. Pertimbangkan kebutuhan pelanggan Anda, dan terapkan pengujian A/B jika Anda tidak yakin.
Breadcrumb tidak hanya berguna — mereka juga mudah ditambahkan ke situs web Anda dengan sedikit kode HTML dan CSS.
Mari kita mulai dengan HTML, yang akan kita gunakan untuk membuat tautan itu sendiri. Cara termudah untuk melakukannya adalah dengan mengatur tautan Anda dalam daftar yang tidak berurutan (
Berikut adalah template HTML untuk remah roti yang dapat Anda gunakan:
Perhatikan bagaimana saya juga menyertakan daftar tidak berurutan dalam HTML
Tanda tangan email berfungsi sebagai cara ampuh bagi individu dan bisnis untuk meninggalkan kesan abadi…
Apakah kesalahan 'ERR_SSL_VERSION_OR_CIPHER_MISMATCH' menghentikan Anda mengakses situs web WordPress? Kesalahan ini hanya terlihat saat mengunjungi…
Jika Anda adalah individu yang banyak akal dan berpikiran maju yang bekerja di bidang pemasaran,…
Siap menguasai Google Analytics 4 dengan sedikit bantuan dari MonsterInsights? GA4 adalah alat analitik yang…
Apakah Anda mencari cara untuk menerjemahkan plugin WordPress ke dalam bahasa Anda? Dengan menerjemahkan plugin…
Mencari solusi untuk hack redirect WordPress? ???????? Peretasan pengalihan WordPress sayangnya merupakan kejadian umum dan…