Breadcrumbs adalah fitur navigasi situs web yang menampilkan lokasi pengguna saat ini dalam struktur hierarki situs. Biasanya disajikan dalam bentuk jejak link yang dapat diklik, Breadcrumbs membantu pengguna memahami posisi mereka dan dengan mudah menavigasi kembali ke halaman tingkat yang lebih tinggi. Elemen antarmuka pengguna yang berharga ini meningkatkan pengalaman pengguna dan mengurangi rasio pentalan, menjadikannya komponen penting untuk situs web modern.
Sejarah asal usul Breadcrumbs dan penyebutan pertama kali
Konsep Breadcrumbs pertama kali diperkenalkan oleh ilmuwan komputer Ben Shneiderman pada tahun 1987 sebagai bagian dari sistem HOMER (History of Office Memo Exploration and Retrieval). Istilah “Remah Roti” berasal dari dongeng klasik Hansel dan Gretel, di mana para protagonis menjatuhkan remah roti untuk menandai jalan mereka melewati hutan. Demikian pula, Breadcrumbs dalam navigasi web memungkinkan pengguna menelusuri kembali langkah-langkah mereka melalui situs web, mencegah mereka tersesat.
Informasi rinci tentang remah roti. Memperluas topik Breadcrumbs.
Breadcrumbs bertindak sebagai bantuan navigasi sekunder, melengkapi menu utama dan fungsi pencarian. Mereka memberikan konteks, orientasi, dan cara yang efisien untuk menelusuri kembali hierarki situs. Dengan menampilkan jejak halaman yang jelas, Breadcrumbs menawarkan beberapa manfaat:
-
Keramahan pengguna: Breadcrumb menyederhanakan navigasi, khususnya di situs web yang besar dan kompleks, sehingga meningkatkan kepuasan dan keterlibatan pengguna.
-
Mengurangi rasio pentalan: Pengguna lebih cenderung menjelajahi situs web lebih dalam ketika mereka tahu bahwa mereka dapat dengan mudah kembali ke level sebelumnya.
-
Manfaat SEO: Breadcrumbs berkontribusi pada optimasi mesin pencari yang lebih baik dengan menciptakan tautan yang jelas dan hierarkis antar halaman.
-
Aksesibilitas: Breadcrumb berguna bagi pengguna yang mengandalkan pembaca layar, membantu mereka memahami struktur situs web.
-
Konsistensi: Breadcrumbs yang konsisten di seluruh situs web meningkatkan prediktabilitas dan kegunaan.
Struktur internal Breadcrumbs. Cara kerja Breadcrumbs.
Breadcrumbs biasanya diimplementasikan menggunakan HTML dan CSS. Mereka dapat dikodekan secara hardcode ke dalam situs web atau dihasilkan secara dinamis melalui sistem manajemen konten (CMS). Struktur Breadcrumbs diatur secara hierarki, mencerminkan arsitektur informasi situs. Jejaknya biasanya dimulai dari beranda dan berlanjut melalui setiap level berikutnya, diakhiri dengan halaman saat ini.
Struktur internal biasanya berupa daftar link, dengan setiap link mewakili halaman atau kategori tertentu. Berikut adalah contoh struktur HTML untuk jejak Breadcrumb sederhana:
html<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/category/">Category</a></li>
<li class="breadcrumb-item"><a href="/category/subcategory/">Subcategory</a></li>
<li class="breadcrumb-item active" aria-current="page">Current Page</li>
</ol>
</nav>
Gaya CSS dapat diterapkan untuk menyempurnakan presentasi visual Breadcrumbs, menjadikannya lebih menarik dan sesuai dengan desain situs web.
Analisis fitur utama Breadcrumbs
Breadcrumbs hadir dengan beberapa fitur penting yang meningkatkan fungsionalitas dan kegunaannya:
-
Tautan yang dapat diklik: Setiap elemen dalam jejak Breadcrumb adalah tautan yang dapat diklik, memungkinkan pengguna menavigasi ke halaman tertentu.
-
Indikator halaman aktif: Elemen terakhir dalam jejak, mewakili halaman saat ini, sering kali diberi gaya berbeda untuk menunjukkan status aktifnya.
-
Representasi hierarki: Breadcrumb mewakili struktur hierarki situs web, membantu pengguna memahami lokasi mereka di dalam situs.
-
Tautan rumah: Jejaknya biasanya dimulai dengan tautan ke beranda, memungkinkan pengguna memulai navigasi dari tingkat atas.
-
Navigasi mundur: Pengguna dapat menelusuri situs kembali dengan mengeklik tautan di jejak Breadcrumb.
Jenis Remah Roti
Breadcrumb hadir dalam beberapa jenis, masing-masing menawarkan fungsi berbeda. Jenis Breadcrumb yang umum meliputi:
Jenis | Keterangan |
---|---|
Berbasis lokasi | Menunjukkan lokasi pengguna dalam hierarki situs web, sering digunakan di situs web e-niaga. |
Berbasis atribut | Menampilkan atribut atau filter yang diterapkan pada kategori produk atau hasil pencarian. |
Berbasis jalur | Menyajikan jalur atau URL laman sebenarnya, berguna untuk konteks teknis. |
Berbasis sejarah | Merekam riwayat navigasi pengguna dan memungkinkan mereka menelusuri kembali langkah mereka. |
Remah Roti Dinamis | Dihasilkan berdasarkan interaksi pengguna, beradaptasi dengan perilaku penelusuran pengguna. |
Cara menggunakan Breadcrumb:
-
Situs web e-niaga: Breadcrumbs memberi pengguna jalur yang jelas dari beranda ke produk yang mereka minati, sehingga menyederhanakan proses pembelian.
-
Navigasi blog: Di blog dan situs berita, Breadcrumbs membantu pengguna berpindah dari artikel tertentu kembali ke kategori atau beranda.
-
Menu bertingkat: Breadcrumbs dapat berfungsi sebagai bantuan navigasi tambahan untuk menu drop-down multi-level, sehingga memudahkan pengguna untuk bernavigasi kembali.
-
Kelebihan remah roti: Jika sebuah situs web memiliki terlalu banyak level bertingkat, jejak Breadcrumb bisa menjadi terlalu panjang dan berantakan. Menerapkan Breadcrumbs dinamis yang hanya menampilkan level paling relevan dapat mengatasi masalah ini.
-
Responsivitas seluler: Pada layar yang lebih kecil, menampilkan seluruh jejak Breadcrumb mungkin memakan terlalu banyak ruang. Menggunakan teknik desain responsif, seperti menciutkan Breadcrumbs ke dalam menu, dapat mengatasi masalah ini.
-
Penamaan yang tidak konsisten: Penamaan kategori yang tidak akurat atau tidak konsisten dapat membingungkan pengguna. Memastikan label yang konsisten dan deskriptif untuk setiap tautan membantu pengguna memahami lokasi mereka dengan lebih baik.
Ciri-ciri utama dan perbandingan lainnya dengan istilah sejenis dalam bentuk tabel dan daftar
Ciri | Tepung roti | menu navigasi | Peta Situs |
---|---|---|---|
Tujuan | Tampilkan lokasi pengguna dalam hierarki situs web. | Sajikan daftar tautan untuk menavigasi situs web. | Memberikan gambaran umum tentang struktur situs. |
Kedalaman | Biasanya mewakili jalur linier dengan jumlah level terbatas. | Dapat menampilkan beberapa tingkat hierarki situs. | Menampilkan keseluruhan struktur situs web. |
Presentasi | Biasanya ditampilkan secara horizontal. | Bisa vertikal, horizontal, atau kombinasi. | Biasanya ditampilkan sebagai satu halaman. |
Lokasi di situs web | Umumnya ditempatkan di dekat bagian atas halaman. | Sering ditemukan di header atau sidebar. | Biasanya ditautkan dari footer atau sidebar. |
Interaksi | Setiap elemen dapat diklik dan memfasilitasi navigasi mundur. | Mengklik item menu akan membawa ke halaman masing-masing. | Mengklik bagian biasanya membawa pengguna ke halaman tertentu. |
Seiring kemajuan teknologi, peran Breadcrumbs dapat berkembang untuk mengakomodasi paradigma antarmuka pengguna dan perilaku penelusuran baru. Berikut beberapa potensi perkembangan di masa depan:
-
Breadcrumb yang sadar konteks: Breadcrumb yang beradaptasi berdasarkan perilaku pengguna, konteks, dan preferensi dapat lebih meningkatkan navigasi pengguna.
-
Integrasi dengan AI: Mengintegrasikan kecerdasan buatan dapat memungkinkan Breadcrumbs memprediksi niat pengguna dan menyarankan jalur yang relevan.
-
Navigasi berbasis suara dan isyarat: Ketika interaksi berbasis suara dan isyarat menjadi lebih umum, Breadcrumbs mungkin perlu beradaptasi untuk mengakomodasi metode masukan ini secara efektif.
Bagaimana server proxy dapat digunakan atau dikaitkan dengan Breadcrumbs
Server proxy dapat dikaitkan dengan Breadcrumbs dalam konteks pengikisan web dan ekstraksi data. Penyedia server proxy seperti OneProxy dapat menawarkan solusi untuk melewati mekanisme anti-scraping dan mengakses situs web sambil menjaga anonimitas. Breadcrumbs dapat digunakan bersama dengan server proxy untuk memastikan navigasi yang lancar selama proses web scraping, memungkinkan pengguna menelusuri kembali langkah-langkah mereka secara akurat.
Tautan yang berhubungan
Untuk informasi selengkapnya tentang Breadcrumbs, Anda dapat menjelajahi sumber daya berikut: