Tips Breadcrumb – 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 Breadcrumb Hansel, ini membantu pengguna menelusuri kembali jalur mereka dan melihat di mana mereka berada dalam skema situs Anda yang lebih besar.
Apa itu navigasi Breadcrumb?
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 Breadcrumb sesuka Anda, Breadcrumb cenderung terlihat sama di seluruh situs web yang menggunakannya. Berikut ini sederhana contoh Breadcrumb dari Basis Pengetahuan HubSpot:
Jakob Nielsen, salah satu pendiri yang terkenal Grup Nielsen Norman, telah merekomendasikan navigasi Breadcrumb sejak 1995, dan menegaskan kegunaan dan efisiensinya: “Semua yang dilakukan Breadcrumb 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.
Tips dan Contoh Navigasi Breadcrumb
1. Hanya gunakan navigasi breadcrumb jika masuk akal untuk struktur situs 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.
2. Jangan membuat navigasi breadcrumb Anda terlalu besar.
Navigasi breadcrumb Anda adalah alat sekunder untuk bilah navigasi utama Anda, sehingga tidak boleh terlalu besar atau menonjol di halaman. Misalnya, pada DHL’s, bilah navigasi utama mereka besar dan dapat dikenali, dengan kolom seperti “Ekspres” “Paket & eCommerce” “Logistik”, dll. Navigasi Breadcrumb 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.
3. Sertakan jalur navigasi lengkap di navigasi breadcrumb Anda.
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.
4. Kemajuan dari level tertinggi ke terendah.
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.
5. Jaga agar judul Breadcrumb Anda konsisten dengan judul halaman 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 Breadcrumb Anda ke halaman. Jika judul breadcrumb tidak memiliki tautan, perjelas. Bersarang secara efektif memberi label pada 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.
6. Berkreasilah dengan desain.
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.
7. Jaga agar tetap bersih dan rapi.
Navigasi Breadcrumb 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.
8. Pertimbangkan jenis navigasi breadcrumb mana yang paling masuk akal untuk situs Anda.
Ada beberapa jenis Breadcrumb 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, Breadcrumb 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.
9. Kenali audiens 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.
Navigasi Breadcrumb dalam HTML dan CSS
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 (
-
- ), dengan setiap item daftar (
- ) yang terdiri dari tautan dalam seri breadcrumb hingga item terakhir, yang menunjukkan halaman saat ini.
Berikut adalah template HTML untuk Breadcrumb yang dapat Anda gunakan:
<nav class=”breadcrumb” aria-label=”Breadcrumb” >
<ul>
<li><a href=”https://blog.hubspot.com/marketing/#URL”>Top-level page</a></li>
<li><a href=”https://blog.hubspot.com/marketing/#URL”>Second-level page</a></li>
<li><a href=”https://blog.hubspot.com/marketing/#URL”>Third-level page</a></li>
<li>Current Page</li>
</ul>
</nav>Perhatikan bagaimana saya juga menyertakan daftar tidak berurutan dalam HTML