แนวทางปฏิบัติและตัวอย่างที่ดีที่สุดในการนำทาง

การนำทาง Breadcrumb มักถูกมองข้ามในกระบวนการออกแบบและพัฒนา. บางคนอาจเห็นว่าไม่จำเป็นในขณะที่คนอื่นอาจรู้สึกว่ามันยุ่งยากเกินไปสำหรับสิ่งที่คุ้มค่า ข้อเท็จจริงของเรื่องคือการนำทางในเส้นทางการนำทางจะเพิ่มการใช้งานของเว็บไซต์เป็นอย่างมาก.

Breadcrumbs ให้ผู้ใช้มีทางเลือกในการนำทางช่วยให้พวกเขาเห็นว่าพวกเขายืนอยู่ในลำดับชั้นของเว็บไซต์และจะลดจำนวนขั้นตอนที่จำเป็นในการนำทางไปยังระดับที่สูงขึ้นภายในเว็บไซต์.

โครงร่างที่นี่คือการนำทางประเภทเกล็ดขนมปังที่ใช้ในปัจจุบันทำไมพวกเขาถึงมีความสำคัญและวิธีการใช้งานออนไลน์ที่ดีที่สุด รวมทั้งที่นี่สำหรับการอ้างอิงของคุณคือ กว่า 30 ตัวอย่างของวิธีการใช้ breadcrumbs ออนไลน์วันนี้.

โปรดจำไว้ว่าในขณะที่การนำทาง breadcrumb จะไม่สร้างหรือทำลายเว็บไซต์มันจะให้ประโยชน์เพิ่มเติมแก่ผู้ใช้ของคุณโดยการเพิ่มการใช้งานโดยรวมและการทำงานของเว็บไซต์ของคุณ.

ประเภท Breadcrumb

เส้นทาง

breadcrumb แบบอิงเส้นทางระบุขั้นตอนหรือเส้นทางที่ผู้ใช้ไปถึงหน้าปัจจุบันของเว็บไซต์ นอกจากนี้ผู้ใช้จะเห็นลิงค์ไปยังหน้าต่างๆที่เคยเข้าชมเพื่อไปที่หน้าปัจจุบัน จากการนำทาง breadcrumb ทั้งสามประเภทการนำทางเส้นทางแบบ breadcrumb นั้นเป็นที่นิยมทางออนไลน์น้อยที่สุด เหตุผลที่เป็นการนำทาง breadcrumb ตามเส้นทางให้ฟังก์ชั่นที่คล้ายกับ “ข้างหน้า” และ “กลับ” ปุ่มบนเบราว์เซอร์ สำหรับเว็บไซต์ส่วนใหญ่ระบบนำทางแบบ breadcrumb แบบอิงตามตำแหน่งและคุณลักษณะนำเสนอฟังก์ชันการทำงานที่ดีกว่า.

ที่ตั้ง

breadcrumb แบบอิงตำแหน่งระบุถึงผู้ใช้ที่หน้าปัจจุบันย่อมาจากลำดับชั้นของเว็บไซต์ การนำทาง BreadCrumb ประเภทนี้ส่วนใหญ่จะเห็นในเว็บไซต์ที่มีความลึกหรือเนื้อหามากกว่าสองระดับ เมื่อย้ายไปยังเว็บไซต์เพิ่มเติมผู้ใช้จะได้รับลิงก์ไปยังหน้าหรือหมวดหมู่ซึ่งทำหน้าที่เป็น “ผู้ปกครอง” หรือเพิ่มระดับจากหน้าเว็บที่พวกเขากำลังดูอยู่ ตัวอย่างเช่นผู้ใช้อาจอยู่ใน “พูด” อย่างไรก็ตามหน้า “เราทำอะไร” เพจเป็นพาเรนต์ของ “พูด” หน้าในขณะที่ “บ้าน” เพจเป็นพาเรนต์ของ “เราทำอะไร” หน้า.

Clearleft Ltd

คุณลักษณะ

แอ็ตทริบิวต์หรือหมวดหมู่ที่กำหนดไปยังหน้าปัจจุบันภายในเว็บไซต์ บ่อยครั้งที่เห็นในเว็บไซต์อีคอมเมิร์ซผลิตภัณฑ์อาจไม่เพียง แต่อยู่ในหมวดหมู่ แต่อยู่ภายใต้คุณลักษณะบางอย่างเช่นกัน ตัวอย่างเช่นยานพาหนะอาจถูกจัดประเภทเป็น SUV จากนั้นมีคุณสมบัติของการเป็นสีดำและวางจำหน่ายในปี 2010.

Cars.com

ทำไมต้องใช้ Breadcrumbs?

• การใช้งานที่ยอดเยี่ยม

  Breadcrumbs จัดให้มีวิธีการเพิ่มเติมโดยที่ผู้ใช้สามารถนำทางเว็บไซต์ได้อย่างง่ายดาย หากผู้ใช้เชื่อมโยงไปถึงหน้าภายในบนเว็บไซต์ของคุณจาก breadcrumb แหล่งอื่นจะอนุญาตให้ผู้ใช้เห็นตำแหน่งที่พวกเขายืนอยู่ภายในลำดับชั้นของเว็บไซต์ ผู้ใช้ยังได้รับโอกาสในการเลื่อนขึ้นไปสู่ระดับที่สูงขึ้นของเว็บไซต์ในเวลาใดก็ตามโดยไม่ต้องยุ่งยากใด ๆ.

• ง่ายต่อการย้อนรอย

  การนำทางหลักไม่ได้ถูกออกแบบมาให้ติดตามย้อนหลังเพราะเกล็ดขนมปังอยู่ เนื่องจากการย้อนรอยเป็นที่นิยมอย่างมากทางออนไลน์ซึ่งให้ความช่วยเหลือเพิ่มเติมเล็กน้อยสามารถไปได้ไกล.

• กำจัดการคลิกเพิ่มเติม

  Breadcrumbs อนุญาตให้ผู้ใช้ข้ามจากระดับหนึ่งของเว็บไซต์ไปอีกระดับโดยไม่ต้องใช้ “ข้างหน้า” หรือ “ย้อนกลับ” ปุ่มบนเบราว์เซอร์ นอกจากนี้ breadcrumbs ไม่จำเป็นต้องให้ผู้ใช้หันหน้าไปทางการนำทางหลักอย่างต่อเนื่อง.

• แสดงลำดับชั้นผู้ใช้

  การนำทางหลักของเว็บไซต์จะไม่แสดงลำดับชั้นของทุกหน้าภายในเว็บไซต์ การให้ผู้ใช้ breadcrumbs จะอนุญาตให้พวกเขาเห็นลำดับชั้นของหน้าภายในเว็บไซต์.

• สายตาที่ชื่นชอบ

  breadcrumbs ไม่เพียงให้ผู้ใช้มีความสามารถเพิ่มเติมเท่านั้น แต่ยังทำได้โดยไม่ต้องเพิ่มพื้นที่หรือพื้นที่บนหน้าเว็บ Breadcrumbs นั้นง่ายต่อการนำไปใช้ในการออกแบบภาพเว็บไซต์ของคุณและมอบประโยชน์ที่ยอดเยี่ยมให้กับผู้ใช้.

• ให้ความช่วยเหลือเพิ่มเติม

  เป็นไปได้ทั้งหมดที่ผู้ใช้บางคนอาจไม่เข้าใจว่าการนำทางหลักของเว็บไซต์ทำงานอย่างไรและในบางกรณีผู้ใช้อาจไม่รู้ด้วยซ้ำว่ากำลังมองหาอะไร การให้ผู้ใช้ breadcrumbs จะช่วยให้พวกเขาเห็นความคืบหน้าโดยรวมและโครงสร้างของเว็บไซต์จึงช่วยให้พวกเขานำทางเว็บไซต์ได้ดีขึ้น.

• ลดอัตราการตีกลับ

  โดยทั่วไป breadcrumbs จะให้การนำทางโดยละเอียดมากกว่าการนำทางหลัก ในการทำเช่นนั้นผู้ใช้จะได้รับตัวเลือกเพิ่มเติมเกี่ยวกับวิธีสำรวจเว็บไซต์ ให้โอกาสพวกเขาในการติดตามย้อนกลับได้อย่างง่ายดายเพียงไม่กี่ระดับภายในเว็บไซต์จะทำให้อัตราตีกลับของคุณลดลง.

• สร้างความสนใจ

  เมื่อผู้ใช้เชื่อมโยงไปถึงหน้าภายในของอัตราต่อรองของเว็บไซต์พวกเขาจะอยู่ในหน้าสนใจ Breadcrumbs อาจมีลิงก์ไปยังหน้าเพิ่มเติมและข้อมูลที่ผู้ใช้สนใจโดยไม่ต้องเริ่มจากตารางที่หนึ่ง.

แนวทางปฏิบัติที่ดีที่สุดสำหรับเกล็ดขนมปัง

• ใช้เกล็ดขนมปังที่ด้านบนของหน้า

  ตำแหน่งที่พบบ่อยที่สุดและสัญชาตญาณสำหรับ breadcrumbs อยู่ด้านบนของหน้า สิ่งนี้ช่วยให้ผู้ใช้สามารถค้นหา breadcrumbs ในลักษณะที่ไม่ซับซ้อนและใช้ประโยชน์ได้อย่างเหมาะสม.

• ใช้เกล็ดขนมปังอย่างสม่ำเสมอ

  หากคุณตัดสินใจที่จะใช้เกล็ดขนมปังตรวจสอบให้แน่ใจว่าคุณใช้พวกเขาในเว็บไซต์ทั้งหมดของคุณ การให้ผู้ใช้ breadcrumbs ในบางหน้าไม่ใช่ผู้อื่นที่จะสับสนและทำให้หงุดหงิดเท่านั้น. (หนึ่งในตัวอย่างที่สำคัญของเรื่องนี้คืออเมซอนที่พวกเขาเอา breadcrumbs ออกจากหน้าผลิตภัณฑ์แต่ละรายการ)

• เกล็ดขนมปังควรลดระดับลงอย่างงดงาม

  Breadcrumbs ควรเริ่มต้นด้วยหน้าแรกและลดระดับลงเป็นหน้าปัจจุบัน ในการทำเช่นนี้เกล็ดขนมปังของคุณจำเป็นต้องไปจากระดับสูงสุดไปยังระดับต่ำสุดทีละขั้นตอน.

• จัดทำ Breadcrumbs อย่างเหมาะสม

  คุณต้องการให้ breadcrumb ของคุณถูกมองเห็น แต่คุณไม่ต้องการให้มันเป็นจุดโฟกัส คุณต้องการทำให้ชัดเจนว่า breadcrumb ของคุณไม่ได้เป็นส่วนหนึ่งของเนื้อหาหลักไปยังหน้าเพียงสนับสนุนเพิ่มเติมเท่านั้น ค้นหาสื่อกลางที่มีความสุขที่ breadcrumbs ของคุณจะสังเกตเห็นได้ แต่ไม่เหลือทน.

• จัดหมวดหมู่หน้าอย่างชัดเจน

  หากคุณมีหน้าเว็บที่มีหมวดหมู่สองหมวดขึ้นไปคุณอาจไม่ต้องการใช้เกล็ดขนมปังบนเว็บไซต์ของคุณ การพยายามวางหน้าเว็บภายใต้หมวดหมู่สองหมวดขึ้นไปมีแนวโน้มว่าจะผลิตขนมปังเกล็ดขนมปังที่ไม่ชัดเจนและไขปริศนาผู้ใช้ ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณมีลำดับชั้นที่มีการจัดระเบียบและแสดงตามลำดับเส้นทางของคุณ.

• แยกแต่ละระดับอย่างชัดเจน

  ตรวจสอบให้แน่ใจว่าผู้ใช้สามารถแยกความแตกต่างระหว่างแต่ละระดับของเกล็ดขนมปัง ตัวคั่นที่พบบ่อยที่สุดระหว่างระดับคืออักขระ 'มากกว่า' (>) ตัวคั่นที่ดีอื่น ๆ ได้แก่ ใบเสนอราคามุมขวาสองครั้ง (»), เครื่องหมายทับ (/) และลูกศร (→) หากใช้ตัวอักษรธรรมดาให้ใช้เพียงตัวเดียว. (»มีเสน่ห์และมีประสิทธิภาพมากกว่า >>)

• ออกเดี่ยวหน้าปัจจุบัน

  ใช้สไตล์ที่แตกต่างในรายการสุดท้ายของรายการ breadcrumb เพื่อสร้างว่าเป็นหน้าที่กำลังดูอยู่ คุณสามารถทำได้โดยการทำรายการ กล้า, เปลี่ยนสีหรือ เน้น มัน.

• อย่าทำให้หน้าปัจจุบันเป็นลิงค์

  ไม่จำเป็นต้องสร้างรายการสุดท้ายของรายการ breadcrumb เป็นลิงค์เพราะเป็นหน้าปัจจุบันที่กำลังดูอยู่ การสร้างลิงค์ที่นี่จะสร้างความสับสนให้ผู้ใช้โดยเฉพาะเมื่อพวกเขาคลิกที่มันและจะไม่ถูกนำไปที่หน้าใหม่.

• อย่าใช้ breadcrumbs เป็นส่วนหัวของหน้า

  การใช้รายการสุดท้ายของรายการ breadcrumb เป็นส่วนหัวของหน้าปัจจุบันจะไม่ได้ผล หากคุณเลือกที่จะใช้เกล็ดขนมปังทำเช่นนั้นด้วยการเพิ่มส่วนหัวของหน้าเช่นกัน.

• Breadcrumbs อย่าแทนที่การนำทางหลัก

  breadcrumbs นั้นจะใช้เพื่อรองรับการนำทางหลักเท่านั้นไม่ควรแทนที่การนำทางหลักทั้งหมด คุณควรให้การนำทางหลักแก่ผู้ใช้ซึ่งพวกเขาสามารถนำทางเว็บไซต์ได้เสมอก่อนที่จะใช้การนำทาง breadcrumb.

ตัวอย่างที่ดีของ Breadcrumbs

Vitra Direct

Trek Bikes

illy

SiteInspire

Mia และ Maggie

Intridea

ออกแบบโดยมนุษย์

Roxy

Blik

SitePoint

เป้า

วอลมาร์

1-800-ดอกไม้

BestBuy

Amazon.com

Barns & Noble

จุดจบของแผ่นดิน

แอปเปิ้ล

Google

การไล่ล่า

AbsolutePunk.net

Littman Bros. ระบบให้แสงสว่าง

Guardian.co.uk

เนื้อที่ 17

Wufoo

ลูกเสือหญิงแห่งเทนเนสซีกลาง

กลุ่มกลาสโกว์

ลูกคนหัวปี

เบลแคนาดา

Grooveshark

Devlounge

เกี่ยวกับผู้แต่ง - Shay Howe เป็นผู้ออกแบบเว็บและอินเทอร์เฟซผู้ใช้ระดับมืออาชีพซึ่งปัจจุบันอาศัยอยู่ในเมืองชิคาโกรัฐอิลลินอยส์ เขาเขียนเกี่ยวกับการออกแบบเว็บในบล็อกของเขาเองเมื่อเวลาผ่านไปและจะชอบฟังจากคุณใน Twitter โปรดบอกเขาด้วยสวัสดี!