Cara Menggunakan Navigasi Breadcrumb dengan Cara yang Benar

Diterbitkan: 2017-01-07

Remah roti membawa kita kembali ke dongeng lama yang mungkin pernah Anda baca di masa TK. Dua anak Hansel dan Gretel dipaksa keluar dari rumah mereka di hutan ketika Hansel memutuskan untuk meletakkan jejak remah roti untuk melacak jalan pulang mereka. Meskipun remah roti dimakan oleh burung-burung sial di hutan, mereka berhasil meninggalkan kesan bertahun-tahun setelah cerita itu ditulis.

Dalam desain web, remah roti memiliki tujuan yang sama dengan apa yang ada dalam pikiran Hansel. Breadcrumb berfungsi sebagai navigasi sekunder dalam navigasi situs web Anda untuk membantu pengunjung agar tidak tersesat setelah berpindah dari satu halaman ke halaman lainnya. Seperti dongeng lama, ini membantu menunjukkan kepada pengguna di mana mereka telah mendarat dan di mana lokasi terakhir mereka.

Setelah remah roti terintegrasi dalam struktur hierarki situs web, pengguna dapat masuk jauh ke dalam kategori produk dan menavigasi kembali ke tempat mereka memulai tanpa harus menekan tombol "Kembali".

Breadcrumb juga berfungsi sebagai elemen kontrol grafis untuk membantu pengunjung yang kurang berpengalaman menavigasi di situs web e-niaga. Untuk situs web semacam itu, struktur internal harus dirancang dengan cerdas. Dengan remah roti, menjadi keharusan bagi platform belanja online untuk tidak hanya memberikan kemudahan penggunaan kepada pengunjung mereka, tetapi juga mencegah pelanggan potensial meninggalkan halaman mereka karena tersesat.

Navigasi Breadcrumb

Breadcrumbs adalah cara yang efektif untuk memandu pengunjung dengan menentukan lokasi mereka saat ini dan tempat-tempat yang telah mereka kunjungi dalam perjalanan mereka. Mereka berfungsi sebagai bantuan visual dalam hierarki situs. Tetapi dalam hal pengalaman pengguna pelanggan, remah roti membantu mereka menjawab 3 pertanyaan ini.

  1. dimana saya?

    Breadcrumbs memberi informasi kepada pengguna tentang keberadaan mereka di situs untuk memulai perjalanan mereka.

  2. Kemana aku bisa pergi?

    Ini berfungsi sebagai bantuan kepada pengguna dengan menyarankan mereka ke mana harus pergi selanjutnya. Karena struktur sudah diletakkan di depan mereka, pengguna tidak perlu lagi mencari dan menemukan kategori atau bagian situs.

  3. Haruskah saya pergi ke sana?

    Breadcrumbs membantu mempromosikan penjelajahan yang lebih baik dan menunjukkan nilai konten kepada pengguna. Misalnya, jika pelanggan membuka halaman web untuk mencari produk, dia mungkin menemukan produk lain yang terbukti cocok dengan kebutuhannya. Ini membantu mengurangi rasio pentalan situs web.

Manfaat

Mengurangi Tindakan

Untuk mencapai halaman tingkat yang lebih tinggi, remah roti membantu mengurangi no. tindakan yang diperlukan oleh pengunjung situs untuk sampai ke sana. Pengunjung cukup menggunakan remah roti untuk menavigasi kembali daripada terus-menerus menggunakan tombol "Kembali" atau navigasi utama situs web.

Membutuhkan Ruang Minimal

Hanya dibutuhkan garis horizontal yang diisi dengan teks link. Ini memfasilitasi struktur desain web yang sehat dengan mengambil sedikit ruang dan memungkinkan elemen lain di situs web untuk bernafas. Ini juga membantu dalam mendapatkan kecepatan pemuatan yang lebih baik untuk situs web.

Setiap Pengguna Tahu Cara Mengoperasikan Breadcrumbs

Mudah dipahami dan tidak memerlukan pengetahuan teknis apa pun untuk berinteraksi dengan mereka. Teks menjelaskan di mana pengguna berada, berada, dan dapat pergi. Ini adalah sistem navigasi yang jelas dan universal untuk pemahaman setiap pengguna.

Kapan Menggunakan Breadcrumb?

Membuat peta situs untuk menampilkan struktur navigasi situs web Anda adalah salah satu cara terbaik untuk menentukan apakah situs web Anda dapat memperoleh manfaat dari remah roti. Anda kemudian dapat menganalisis dengan uji coba dan menguji apakah navigasi remah roti membantu pengguna melalui konten situs web Anda atau tidak.

  • Breadcrumb paling baik digunakan ketika ada konten yang jauh lebih besar yang perlu diatur dalam kategori dan dalam struktur linier yang bersih. Di sebagian besar situs web e-niaga, kriteria yang sama digunakan untuk mengelompokkan berbagai macam produk ke dalam kategori logis.
  • Breadcrumb tidak boleh digunakan untuk situs web yang tidak memiliki hierarki logis untuk pengelompokan konten atau produk.

Kapan Sebaiknya Hindari Menggunakannya?

Di mana remah roti sangat penting untuk struktur situs web, ada juga contoh di mana remah roti harus dihindari. Ketika ada situs web yang terdiri dari struktur tingkat tunggal tanpa indikasi pengelompokan yang jelas, maka itu demi kepentingan terbaik situs web untuk menghindari penambahan remah roti. Seperti yang kami sebutkan di atas, diagram atau peta situs bisa sangat membantu dalam menentukan arsitektur navigasi situs web.

Breadcrumb hanya berguna jika didukung oleh navigasi utama. Remah roti bertindak sebagai otot, sedangkan navigasi utama adalah kerangka yang menyatukannya. Tanpa penggerak lengkap mereka, hierarki situs web tidak dapat berfungsi secara produktif.

Jenis remah roti

Ada tiga jenis remah roti yang harus Anda ketahui, Lokasi, Jalur, dan Atribut.

1. Berbasis Lokasi

Remah roti berbasis lokasi digunakan untuk memamerkan struktur dasar situs web. Mereka memungkinkan pengguna untuk menavigasi situs web yang memiliki beberapa level dan jejak konten yang komprehensif. Jenis remah roti seperti itu sangat berguna bagi pengunjung yang mendarat di situs web dari dan sumber eksternal dan memasuki tingkat konten yang lebih dalam. Misalnya, jika Anda mencari jenis produk tertentu dan mengklik hasil pencarian yang ditampilkan oleh Google, Anda akan menemukan diri Anda berada di antara banyak kategori setelah Anda memasuki halaman web. Remah roti akan membantu Anda menentukan lokasi Anda dan menavigasi ke kemungkinan dalam struktur hierarki. Situs web yang berisi tingkat konten yang dalam sangat cocok untuk remah roti berbasis lokasi. Contoh ideal adalah eBay.

2. Berbasis Jalur

Remah roti ini penting untuk navigasi jejak riwayat situs web. Remah roti berbasis jalur pada dasarnya menunjukkan setiap jalur yang dikunjungi oleh pengguna untuk mencapai lokasi mereka saat ini. Biasanya, tautan remah roti semacam itu dihasilkan secara dinamis. Sementara plugin berbasis jalur dapat membantu pengguna yang menghabiskan banyak waktu menjelajahi situs web, mereka sebagian besar membingungkan bagi sebagian besar pengguna. Karena sebagian besar pengunjung menjelajah atas kebijaksanaan mereka sendiri, berpindah dari satu halaman ke halaman lainnya. Tombol "Kembali" di browser menyelesaikan sebagian besar kebutuhan mereka untuk mengubah jalur mereka. Ini membuatnya tidak berguna terutama bagi jenis pengunjung yang tiba di halaman situs yang sudah jauh di dalam situs web.

3. Berbasis Atribut

Situs web e-niaga paling diuntungkan dari remah roti berbasis atribut. Mereka membantu dalam membuat daftar kategori sesuai dengan halaman atau produk tertentu. Jenis remah roti seperti itu sangat membantu dalam mendorong pengguna untuk memahami hubungan produk satu sama lain. Misalnya, jika situs web menjual Jeans, mereka akan menggunakan breadcrumb berbasis atribut untuk membantu pelanggan menavigasi dari Regular fit, Slim fit, atau Skinny jeans.

Praktik Terbaik Navigasi Breadcrumb

Saat mendesain navigasi breadcrumb, pastikan untuk mengingat hal-hal berikut. Navigasi breadcrumb adalah bantuan tambahan untuk meningkatkan pengalaman pengguna di situs Anda.

Hindari Elemen Duplikat

Jika Anda benar-benar ingin menambahkan remah roti ke situs web Anda, Anda sebaiknya melakukannya dengan cara yang benar. Pertama, Anda perlu menghilangkan elemen duplikat yang mungkin muncul di antara jejak remah roti. Sayangnya, saya telah melihat ini di banyak situs web peringkat teratas di mana halaman yang sama termasuk dalam beberapa kategori atau tingkat konten yang ditampilkan. Ini tidak hanya membingungkan pengunjung, tetapi juga berdampak buruk pada situs web Anda.

Kompatibilitas SEO

Breadcrumb bukan hanya kontrol navigasi untuk pengunjung Anda, tetapi juga aset yang bagus untuk praktik SEO Anda. Anda dapat menggunakan kata kunci di dalam remah roti untuk meningkatkan peringkat Anda di mesin pencari. Disarankan agar Anda memilih nama yang ramah SEO untuk kategori situs web Anda sehingga mesin pencari dapat dengan mudah mendaftar di remah roti dalam hasil mereka.

Gunakan Breadcrumbs sebagai Navigasi Alternatif

Sementara remah roti adalah sumber yang sangat baik untuk membantu pengguna menavigasi dari satu titik ke titik lain, penting bahwa mereka harus diperlakukan hanya sebagai sumber sekunder. Breadcrumbs adalah fitur tambahan untuk meningkatkan kegunaan pengunjung dan dalam kondisi apa pun tidak dapat menggantikan struktur navigasi utama situs web.

Tidak Ada gunanya Menautkan Halaman Saat Ini di Navigasi Breadcrumb

Meskipun menampilkan lokasi pengunjung saat ini di jejak breadcrumb adalah opsional, Anda harus memastikan bahwa tautan yang ditampilkan dalam struktur linier tidak dapat diketuk atau diklik. Itu hanya akan menyebabkan kebingungan bagi pengunjung untuk menunjukkan kepada mereka tautan dari halaman yang sedang mereka kunjungi.

Tambahkan Pemisah

Menggunakan pemisah adalah praktik yang bagus untuk memberikan tampilan yang bersih dan layak pada navigasi remah roti Anda. Ini mencegah teks agar tidak terlalu dekat jika pengguna masuk ke level yang lebih dalam dan menciptakan struktur dinamis yang mudah dipahami dan berinteraksi.

Anda dapat menggunakan tanda untuk menunjukkan hierarki karena biasanya digunakan dalam format kategori seperti Pakaian Kemeja Kemeja Kerah dll. Simbol lainnya termasuk panah (→), tanda kutip sudut kanan (») dan garis miring (⁄).

Perkenalkan Ukuran dan Padding Remah Roti

Saat mendesain remah roti, Anda harus mempertimbangkan bantalan dan ukuran target. Jarak antara satu remah roti ke yang lain harus terlihat jika tidak pengunjung mungkin tidak dapat menggunakannya secara efektif. Pada saat yang sama, pastikan ukuran remah roti tidak mengganggu elemen lain di sekitarnya sehingga navigasi utama tetap tidak terpengaruh.

Jangan Pernah Menarik Fokus pada Desain Breadcrumbs lebih dari yang Diperlukan

Jangan pernah menggunakan warna-warna cerah atau font mewah untuk mewakili remah roti Anda. Meskipun jejak remah roti penting bagi pengguna setelah mereka mendarat di halaman, itu seharusnya bukan hal pertama yang mereka perhatikan. Menambahkan glam ke navigasi breadcrumb dapat menyebabkan pengguna mengabaikan navigasi utama situs web. Ini dapat mengalihkan perhatian pengguna dari niat sebenarnya untuk memasuki halaman dan mengakibatkan hilangnya potensi konversi untuk toko. Google adalah contoh terbaik dalam hal itu. Memiliki begitu banyak level konten yang dicari, ini menunjukkan jejak navigasi remah roti sederhana yang bebas dari font atau warna mewah apa pun sehingga pengguna dapat dengan mudah menemukan dan berinteraksi dengan remah roti.

Tipe Mana yang Harus Dihindari?

Ini adalah argumen yang diperdebatkan tentang apakah akan menggunakan remah roti berbasis lokasi/atribut atau remah roti berbasis jalur untuk menampilkan hierarki situs. Ini adalah aturan praktis bahwa remah roti tidak boleh menunjukkan riwayat pengguna, tetapi hierarki situs. Menurut penilaian dan pendapat kami, Anda mungkin tidak perlu lagi repot dengan remah roti berbasis jalur. Pertama, itu tidak membantu dengan UX karena berpotensi menyebabkan kebingungan pada pengunjung karena kurangnya hierarki yang ditampilkan di antara level yang berbeda. Itulah sebabnya remah roti berbasis lokasi dan atribut lebih disukai daripada remah roti berbasis jalur.

Pikiran Akhir

Remah roti sama pentingnya dengan elemen lain di situs web. Sekarang teknologi telah memungkinkan penyimpanan data dalam jumlah yang lebih besar, kecepatan internet yang lebih cepat, dan waktu pemuatan yang bahkan lebih cepat, navigasi dapat ditampilkan secara lebih komprehensif pada tingkat hierarki yang lebih tinggi tanpa kesulitan. Dengan bantuan remah roti, situs web Anda tidak hanya akan menghasilkan pengalaman pengguna yang lebih baik, tetapi juga menghasilkan penjualan yang lebih besar dari pelanggannya. Navigasi yang lebih mulus dan tidak canggih berarti akses yang lebih mudah ke halaman produk dan mengurangi proses checkout.