Breadcrumb Navigation Best Practices & Examples

Navigasi breadcrumb sering diabaikan dalam proses reka bentuk dan pembangunan. Sesetengah orang mungkin melihatnya sebagai tidak perlu manakala yang lain mungkin merasakan ia terlalu besar kerumitan untuk apa yang bernilai. Fakta perkara itu, navigasi lamanya akan meningkatkan kebolehgunaan laman web.

Breadcrumbs memberikan pengguna cara alternatif navigasi, membolehkan mereka melihat di mana mereka berdiri di hierarki sebuah laman web dan akan mengurangkan bilangan langkah yang diperlukan untuk menavigasi ke tahap yang lebih tinggi dalam laman web.

Di sini, terdapat pelbagai jenis navigasi breadcrumb yang digunakan hari ini, mengapa mereka penting, dan bagaimana mereka sebaiknya dilaksanakan secara dalam talian. Juga termasuk di sini untuk rujukan anda lebih daripada 30 contoh bagaimana serbuk roti sedang digunakan dalam talian hari ini.

Ingat, walaupun kemungkinan bahawa navigasi roti tidak akan membuat atau memecah tapak web, ia akan memberikan manfaat tambahan kepada pengguna anda dengan meningkatkan kegunaan dan kegunaan keseluruhan laman web anda.

Jenis Breadcrumb

Jalan

Breadcrumb berasaskan laluan menunjukkan langkah atau jalan, pengguna telah mengambil untuk tiba di halaman semasa laman web. Selain itu, pengguna akan melihat pautan ke halaman yang telah mereka lawati sebelum mencapai halaman semasa. Daripada tiga jenis navigasi breadcrumb, navigasi berasaskan laluan berasaskan Path adalah yang paling kurang popular dalam talian. Alasannya, pelayaran roti berasaskan laluan menyediakan fungsi yang sama kepada “Teruskan” dan “Kembali” butang pada penyemak imbas. Untuk kebanyakan laman web, navigasi berdasarkan berasaskan Lokasi dan Penyesuaian berasaskan sifat menawarkan lebih baik fungsi.

Lokasi

Breadcrumb berasaskan lokasi menunjukkan kepada pengguna di mana halaman semasa berada dalam hierarki laman web. Jenis navigasi breadcrumb ini biasanya dilihat di laman web dengan lebih daripada dua tahap kedalaman atau kandungan. Apabila bergerak lebih jauh ke dalam pengguna laman web disediakan dengan pautan ke halaman, atau kategori, yang bertindak sebagai “ibu bapa” atau tahap dari laman yang sedang mereka lihat. Sebagai contoh, pengguna mungkin berada di “Bercakap” halaman, bagaimanapun, yang “Apa yang kita lakukan” halaman adalah ibu bapa “Bercakap” halaman semasa “Rumah” halaman adalah ibu bapa “Apa yang kita lakukan” halaman.

Clearleft Ltd

Atribut

Breadcrumbs berasaskan sifat menunjukkan kepada pengguna sifat atau kategori yang dianggap sebagai halaman semasa dalam laman web. Selalunya dilihat di laman web e-dagang, produk mungkin bukan hanya dalam kategorinya tetapi juga di bawah atribut tertentu. Sebagai contoh, kenderaan boleh dikategorikan sebagai SUV kemudian mempunyai sifat-sifat warna hitam dan dikeluarkan pada tahun 2010.

Cars.com

Kenapa Gunakan Breadcrumbs?

• Kegunaan Besar

  Breadcrumbs menyediakan cara tambahan untuk pengguna dengan mudah menavigasi laman web. Sekiranya pengguna melayari halaman dalaman di tapak web anda dari sumber serbuk roti lain, pengguna akan dapat melihat dengan tepat di mana mereka berada dalam hierarki tapak. Pengguna juga diberi peluang untuk bergerak ke tahap yang lebih tinggi dari laman web pada bila-bila masa tanpa sebarang masalah.

• Mudah mundur

  Navigasi utama tidak direka untuk diikuti ke belakang adalah serbuk roti. Kerana backtracking sangat popular dalam talian menyediakan sedikit bantuan tambahan boleh pergi jauh.

• Padamkan Klik Tambahan

  Breadcrumbs membolehkan pengguna untuk melompat dari satu tahap laman web ke yang berikutnya tanpa perlu menggunakan “ke hadapan” atau “ke belakang” butang pada penyemak imbas. Selain itu, serbuk roti menghilangkan keperluan untuk pengguna terus menerus menggunakan navigasi utama.

• Menunjukkan Hierarki Pengguna

  Navigasi utama laman web tidak akan mencerminkan hierarki setiap halaman dalam laman web ini. Memberi pengguna roti lapis akan membolehkan mereka melihat hierarki halaman dalam laman web.

• Keseronokan secara visual

  Bukan sahaja serbuk roti menyediakan pengguna dengan kebolehgunaan tambahan, mereka berbuat demikian tanpa mengambil banyak ruang atau ruang pada halaman. Breadcrumbs mudah diterapkan ke dalam reka bentuk visual laman web anda dan memberikan manfaat yang besar kepada pengguna.

• Memberi Bantuan Tambahan

  Ada kemungkinan bahawa sesetengah pengguna tidak dapat memahami cara navigasi utama laman web berfungsi dan dalam beberapa kes pengguna mungkin tidak tahu apa yang mereka cari. Memberi pengguna serbuk roti akan membolehkan mereka melihat perkembangan keseluruhan dan struktur laman web yang membolehkan mereka menavigasi laman web dengan lebih baik.

• Kadar Bounce yang lebih rendah

  Lazimnya serbuk roti akan menyediakan navigasi lebih terperinci daripada navigasi utama. Dengan berbuat demikian, pengguna akan diberi lebih banyak pilihan tentang cara menavigasi laman web. Memberi peluang kepada mereka untuk mengulangi beberapa tahap dalam laman web dengan mudah akan menurunkan kadar lantunan anda.

• Membina Kepentingan

  Apabila pengguna mendarat di halaman dalaman kemungkinan laman web mereka sudah berada di halaman kepentingan. Breadcrumbs boleh menyediakan pautan ke halaman tambahan dan maklumat yang pengguna juga tertarik tanpa membuatnya bermula dari satu persegi.

Amalan Terbaik Breadcrumb

• Gunakan Breadcrumbs di bahagian atas halaman

  Penempatan yang paling biasa dan naluri untuk serbuk roti adalah di bahagian atas halaman. Ini membolehkan pengguna mencari serbuk roti secara tidak rumit dan menggunakannya dengan sewajarnya.

• Gunakan Breadcrumbs secara konsisten

  Jika anda memutuskan untuk menggunakan serbuk roti pastikan anda menggunakannya di seluruh laman web anda. Memberi pengguna serbuk roti pada beberapa muka surat dan tidak orang lain hanya akan mengelirukan dan menggagalkannya. (Satu contoh utama ialah Amazon kerana mereka mengeluarkan serbuk roti dari halaman produk individu.)

• Breadcrumbs Harus Degrade Anggun

  Breadcrumbs harus selalu bermula dengan laman utama dan merendahkan ke halaman semasa. Dengan berbuat demikian, serbuk roti anda perlu pergi dari tahap tertinggi ke tahap paling rendah satu langkah pada satu masa.

• Stilize Breadcrumbs Suitable

  Anda mahu bakul roti anda dilihat tetapi anda tidak mahu mereka menjadi tumpuan. Anda juga ingin menjadikannya jelas bahawa serbuk roti anda bukan sebahagian daripada kandungan utama pada halaman, hanya sokongan tambahan kepadanya. Cari medium gembira di mana serbuk roti anda ketara namun tidak sombong.

• Categorize Pages Clearly

  Jika anda mempunyai laman yang tergolong dalam dua atau lebih kategori anda mungkin tidak mahu menggunakan serbuk roti di tapak web anda. Cuba untuk meletakkan halaman di bawah dua atau lebih kategori kemungkinan besar akan menghasilkan serbuk roti yang tidak jelas dan teka-teki pengguna. Pastikan tapak web anda mempunyai hierarki tersusun dan dipaparkan dengan sewajarnya melalui serbuk roti anda.

• Jelas Mengasingkan Tahap Setiap

  Pastikan pengguna dapat membezakan perbezaan di antara setiap peringkat breadcrumb. Pemisah yang paling biasa antara tahap adalah watak 'lebih besar daripada' (>). Pemisah yang baik yang lain termasuk sebut harga sudut kanan (»), slashes (/), dan anak panah (→). Jika menggunakan aksara teks biasa, hanya gunakan satu. (»Lebih menarik dan berkesan daripada >>)

• Single Out the Current Page

  Gunakan gaya yang berbeza pada item terakhir senarai breadcrumb untuk menentukan bahawa halaman ini sedang dilihat. Anda boleh melakukannya dengan membuat item tersebut berani, menukar warna, atau penekanan ia.

• Jangan Buat Halaman Semasa Pautan

  Tidak perlu membuat item terakhir senarai breadcrumb sebagai pautan kerana ia adalah halaman semasa yang dilihat. Mencipta pautan di sini hanya akan mengelirukan pengguna, terutamanya apabila mereka mengklik padanya dan tidak dibawa ke halaman baru.

• Jangan Gunakan Breadcrumbs sebagai Tajuk Halaman

  Menggunakan item terakhir senarai breadcrumb sebagai tajuk halaman semasa tidak berkesan. Jika anda memilih untuk menggunakan serbuk roti berbuat demikian dengan penambahan tajuk halaman juga.

• Breadcrumbs Jangan Gantikan Navigasi Utama

  Breadcrumbs hanya akan digunakan sebagai sokongan kepada navigasi utama, tidak pernah menggantikan navigasi utama sama sekali. Anda harus sentiasa menyediakan pengguna dengan navigasi utama dari mana mereka boleh menavigasi laman web sebelum menggunakan navigasi breadcrumb.

Contoh Besar Breadcrumbs

Vitra Direct

Trek Basikal

Illy

SiteInspire

Mia dan Maggie

Intridea

Reka bentuk oleh Manusia

Roxy

Blik

SitePoint

Sasaran

Walmart

1-800-Bunga

Belian terbaik

Amazon.com

Barn & mulia

Akhir Tanah

epal

Google

Chase

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

KAWASAN 17

Wufoo

Pengakap Girl Middle Tennessee

The Glasgow Collective

Pelahiran

Bell Canada

Grooveshark

Devlounge

Mengenai Pengarang - Shay Howe adalah web profesional dan pereka antara muka pengguna yang kini tinggal di Chicago, IL. Beliau menulis mengenai reka bentuk web di blognya sendiri di laman web dan ingin mendengar daripada anda di Twitter. Tolong beritahu dia hello!