Breadcrumb Navigation Praktik Terbaik & Contoh

Navigasi Breadcrumb sering diabaikan dalam proses desain dan pengembangan. Beberapa orang mungkin melihatnya sebagai hal yang tidak perlu sementara yang lain merasa itu terlalu besar untuk apa nilainya. Faktanya adalah, navigasi breadcrumb akan sangat meningkatkan kegunaan situs web.

Breadcrumbs memberi pengguna metode navigasi alternatif, memungkinkan mereka untuk melihat posisi mereka dalam hierarki situs web dan akan mengurangi jumlah langkah yang diperlukan untuk menavigasi ke tingkat yang lebih tinggi di dalam situs web.

Diuraikan di sini adalah berbagai jenis navigasi remah roti yang digunakan saat ini, mengapa mereka penting, dan bagaimana mereka sebaiknya diimplementasikan secara online. Juga disertakan di sini untuk referensi Anda lebih dari 30 contoh bagaimana remah roti sedang digunakan online hari ini.

Ingat, meskipun kemungkinan navigasi breadcrumb tidak akan membuat atau menghancurkan situs web, itu akan memberikan manfaat tambahan bagi pengguna Anda dengan meningkatkan kegunaan dan fungsionalitas keseluruhan situs web Anda..

Jenis remah roti

Path

Remah roti berbasis jalur menunjukkan langkah atau jalur, yang telah diambil pengguna untuk sampai di halaman situs web saat ini. Selanjutnya, pengguna akan melihat tautan ke halaman yang sebelumnya mereka kunjungi untuk mencapai halaman saat ini. Dari tiga jenis navigasi breadcrumb, navigasi breadcrumb berbasis Path paling tidak populer secara online. Alasannya, navigasi breadcrumb berbasis Path menyediakan fungsionalitas yang mirip dengan “Meneruskan” dan “Kembali” tombol pada browser. Untuk sebagian besar situs web, navigasi berbasis breadcrumb berbasis lokasi dan Atribut menawarkan fungsionalitas yang lebih baik.

Lokasi

Remah roti berbasis lokasi menunjukkan kepada pengguna di mana halaman saat ini berada dalam hierarki situs web. Jenis navigasi remah roti ini paling sering terlihat di situs web dengan lebih dari dua tingkat kedalaman atau konten. Setelah pindah lebih jauh ke situs web pengguna diberikan tautan ke halaman, atau kategori, yang bertindak sebagai a “induk” atau naik level dari halaman yang sedang mereka lihat. Misalnya, pengguna mungkin berada di “Berbicara” halaman, bagaimanapun, halaman “Apa yang kita lakukan” Halaman adalah induk dari “Berbicara” halaman sementara “Rumah” Halaman adalah induk dari “Apa yang kita lakukan” halaman.

Clearleft Ltd

Atribut

Breadcrumbs berbasis atribut menunjukkan kepada pengguna atribut atau kategori yang dianggap berasal dari halaman saat ini dalam sebuah situs web. Sering terlihat di situs web e-commerce, produk tidak hanya masuk dalam kategori tetapi juga atribut tertentu. Misalnya, kendaraan dapat dikategorikan sebagai SUV kemudian memiliki atribut warna hitam dan dirilis pada tahun 2010.

Cars.com

Mengapa Menggunakan Remah Roti?

• Kegunaan Yang Luar Biasa

  Breadcrumbs menyediakan cara tambahan agar pengguna dapat dengan mudah menavigasi situs web. Jika pengguna mendarat di halaman internal situs web Anda dari remah roti sumber lain akan memungkinkan pengguna untuk melihat secara tepat di mana mereka berada dalam hierarki situs. Pengguna juga diberi kesempatan untuk naik ke tingkat yang lebih tinggi dari situs web pada waktu tertentu tanpa kerumitan.

• Mudah untuk Mundur

  Navigasi utama tidak dirancang untuk diikuti mundur karena remah roti. Karena melakukan backtracking sangat populer secara online, memberikan sedikit bantuan tambahan bisa bermanfaat.

• Hilangkan Klik Tambahan

  Breadcrumbs memungkinkan pengguna untuk melompat dari satu tingkat situs web ke tingkat berikutnya tanpa harus menggunakan “meneruskan” atau “ke belakang” tombol pada browser. Selain itu remah roti menghilangkan kebutuhan bagi pengguna untuk terus menggunakan navigasi utama.

• Menunjukkan Hirarki Pengguna

  Navigasi utama situs web tidak akan mencerminkan hierarki setiap halaman di dalam situs. Memberi pengguna remah roti akan memungkinkan mereka untuk melihat hierarki halaman dalam situs web.

• Menyenangkan secara visual

  Breadcrumbs tidak hanya memberikan pengguna dengan kegunaan tambahan, mereka juga melakukannya tanpa mengambil banyak ruang atau ruang pada halaman. Breadcrumbs mudah diimplementasikan ke dalam desain visual situs web Anda dan memberikan manfaat besar bagi pengguna.

• Memberikan Bantuan Tambahan

  Sangat mungkin bahwa beberapa pengguna mungkin tidak memahami cara kerja navigasi utama situs web dan dalam beberapa kasus pengguna bahkan mungkin tidak tahu apa yang mereka cari. Memberi pengguna remah roti akan memungkinkan mereka untuk melihat kemajuan dan struktur keseluruhan situs web sehingga memungkinkan mereka untuk menavigasi situs web dengan lebih baik.

• Tingkat Pentalan yang Lebih Rendah

  Biasanya remah roti akan memberikan navigasi yang lebih rinci daripada navigasi utama. Dengan melakukan hal itu, pengguna akan diberikan lebih banyak opsi tentang cara menavigasi situs web. Memberi mereka kesempatan untuk dengan mudah melacak kembali beberapa level dalam situs web akan menurunkan tingkat pentalan Anda.

• Membangun minat

  Ketika seorang pengguna mendarat di halaman internal dari suatu peluang situs web mereka sudah di halaman yang menarik. Breadcrumbs dapat memberikan tautan ke halaman tambahan dan informasi yang juga diminati pengguna tanpa membuatnya dimulai dari awal.

Praktik Terbaik Breadcrumb

• Gunakan remah roti di bagian atas halaman

  Penempatan remah roti paling umum dan naluriah ada di bagian atas halaman. Ini memungkinkan pengguna untuk menemukan remah roti dengan cara yang tidak rumit dan memanfaatkannya.

• Gunakan remah roti secara konsisten

  Jika Anda memutuskan untuk menggunakan remah roti pastikan Anda menggunakannya di seluruh situs web Anda. Memberi pengguna remah roti pada beberapa halaman dan tidak pada yang lain hanya akan membingungkan dan membuat mereka frustrasi. (Salah satu contoh utama dari ini adalah Amazon karena mereka menghapus remah roti dari halaman produk individual.)

• Remah roti harus menurun dengan anggun

  Breadcrumbs harus selalu dimulai dengan halaman beranda dan menurunkan ke halaman saat ini. Dengan melakukan hal itu remah roti Anda harus bergerak dari level tertinggi ke level terendah selangkah demi selangkah.

• Sesuaikan remah roti dengan tepat

  Anda ingin remah roti Anda terlihat tetapi Anda tidak ingin mereka menjadi titik fokus. Anda juga ingin membuatnya jelas bahwa remah roti Anda bukan bagian dari konten utama ke halaman, hanya dukungan tambahan untuk itu. Temukan media bahagia di mana remah roti Anda terlihat tetapi tidak sombong.

• Kategorikan Halaman dengan Jelas

  Jika Anda memiliki halaman yang masuk dalam dua kategori atau lebih, Anda mungkin tidak ingin menggunakan remah roti di situs web Anda. Mencoba menempatkan halaman di bawah dua kategori atau lebih kemungkinan hanya akan menghasilkan remah roti yang tidak jelas dan membingungkan pengguna. Pastikan situs web Anda memiliki hierarki terorganisir dan ditampilkan sesuai dengan remah roti Anda.

• Pisahkan Setiap Tingkat dengan Jelas

  Pastikan pengguna dapat membedakan perbedaan antara setiap tingkat remah roti. Pemisah yang paling umum antara level adalah karakter 'lebih besar dari' (>). Pemisah baik lainnya termasuk kutipan sudut ganda kanan (»), garis miring (/), dan panah (→). Jika menggunakan karakter teks biasa, hanya gunakan satu. (»Lebih menarik dan efektif daripada >>)

• Keluarkan Halaman Saat Ini

  Gunakan gaya yang berbeda pada item terakhir dari daftar remah roti untuk memastikan bahwa itu adalah halaman yang sedang dilihat. Anda dapat melakukannya dengan membuat item berani, mengubah warnanya, atau menekankan saya t.

• Jangan Jadikan Halaman Saat Ini sebagai Tautan

  Tidak perlu untuk membuat item terakhir dari daftar remah roti tautan karena itu adalah halaman saat ini sedang dilihat. Membuat tautan di sini hanya akan membingungkan pengguna, terutama ketika mereka mengkliknya dan tidak dibawa ke halaman baru.

• Jangan Gunakan Breadcrumbs sebagai Tajuk Halaman

  Menggunakan item terakhir dari daftar remah roti sebagai judul halaman saat ini tidak efektif. Jika Anda memilih untuk menggunakan remah roti melakukannya dengan penambahan judul halaman juga.

• Remah Roti Tidak Mengganti Navigasi Utama

  Breadcrumbs hanya dapat digunakan sebagai dukungan untuk navigasi utama, tidak pernah menggantikan navigasi utama sama sekali. Anda harus selalu memberi pengguna navigasi utama dari mana mereka dapat menavigasi situs web sebelum menggunakan navigasi breadcrumb.

Contoh-contoh Remah Roti yang Hebat

Vitra Direct

Trek Bikes

Illy

SiteInspire

Mia dan Maggie

Intridea

Desain oleh Manusia

Roxy

Blik

SitePoint

Target

Walmart

1-800-Bunga

Terlaris

Amazon.com

Lumbung & Mulia

Akhir Tanah

apel

Google

Mengejar

AbsolutePunk.net

Pencahayaan Littman Bros.

Guardian.co.uk

AREA 17

Wufoo

Girl Scouts of Middle Tennessee

Kolektif Glasgow

Sulung

Bell Canada

Grooveshark

Devlounge

Tentang Penulis - Shay Howe adalah web profesional dan perancang antarmuka pengguna yang saat ini tinggal di Chicago, IL. Dia menulis tentang desain web di blognya sendiri di letscounthedays dan akan senang mendengar dari Anda di Twitter. Silakan beri tahu dia halo!