วิธีการใช้เบรดครัมบ์การนำทางอย่างเหมาะสม

Breadcrumbs นำเรากลับไปสู่เทพนิยายเก่าที่คุณอาจเคยอ่านในวัยอนุบาลของคุณ เด็กสองคนแฮนเซลและเกรเทลถูกบังคับให้ออกจากบ้านในป่าเมื่อแฮนเซลตัดสินใจปูเศษขนมปังเพื่อติดตามทางกลับบ้าน แม้ว่าเกล็ดขนมปังจะถูกกินโดยนกที่น่ารำคาญในป่า แต่พวกเขาก็สามารถทิ้งความประทับใจไว้ได้หลายปีหลังจากเขียนเรื่องนี้

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

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

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

การนำทางเบรดครัมบ์

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

1. ฉันอยู่ที่ไหน?

   เบรดครัมบ์จะแจ้งให้ผู้ใช้ทราบเกี่ยวกับตำแหน่งของพวกเขาบนไซต์ที่เริ่มต้นการเดินทาง

2. ฉันจะไปที่ไหนได้บ้าง

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

3. ฉันควรไปที่นั่นไหม

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

ประโยชน์

ลดการกระทำ

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

ต้องการพื้นที่น้อยที่สุด

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

ผู้ใช้ทุกคนรู้วิธีใช้งาน Breadcrumbs

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

เมื่อใดควรใช้เบรดครัมบ์

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

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

เมื่อใดควรหลีกเลี่ยงการใช้

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

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

ประเภทของเกล็ดขนมปัง

มีเบรดครัมบ์สามประเภทที่คุณควรรู้ ตำแหน่ง เส้นทาง และแอตทริบิวต์

1. ตามสถานที่

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

2. ตามเส้นทาง

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

3. อิงตามแอตทริบิวต์

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

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

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

หลีกเลี่ยงองค์ประกอบที่ซ้ำกัน

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

ความเข้ากันได้ของ SEO

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

ใช้เบรดครัมบ์เป็นการนำทางทางเลือก

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

มันไม่มีประโยชน์ที่จะเชื่อมโยงหน้าปัจจุบันในการนำทางเบรดครัมบ์

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

เพิ่มตัวคั่น

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

คุณสามารถใช้เครื่องหมาย › เพื่อแสดงถึงลำดับชั้นได้ เนื่องจากโดยทั่วไปจะใช้ในรูปแบบหมวดหมู่ เช่น เสื้อผ้า › เสื้อเชิ้ต › เสื้อเชิ้ตคอปก เป็นต้น สัญลักษณ์อื่นๆ ได้แก่ ลูกศร (→) เครื่องหมายคำพูดมุมฉาก (») และเครื่องหมายทับ (⁄)

แนะนำขนาดและช่องว่างภายในของเกล็ดขนมปัง

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

อย่ามุ่งเน้นที่การออกแบบ Breadcrumbs มากเกินความจำเป็น

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

ควรหลีกเลี่ยงประเภทใด?

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

ความคิดสุดท้าย

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