โมดูล Drupal 8 (และ 9) ยอดนิยมสำหรับการนำทางเว็บไซต์ที่ใช้งานง่าย

เผยแพร่แล้ว: 2020-08-04

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

โมดูล drupal


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

องค์ประกอบสำหรับการนำทางเว็บไซต์ที่ใช้งานง่าย

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

1. แถบนำทางหลัก

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

แถบนำทางหลัก


2. เกล็ดขนมปัง

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

3. เมนูหลายคอลัมน์ (และเมนูย่อย)

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

4. แผนผังเว็บไซต์

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

แผนผังเว็บไซต์


5. ปุ่ม CTA (Call To Action)

นี่คือที่ที่ทุกการกระทำเกิดขึ้นจริง! ตำแหน่งที่เหมาะสมของปุ่ม CTA เหล่านี้มีบทบาทสำคัญในด้านอื่นๆ เช่น สี ลักษณะแบบอักษร ขนาด ข้อความ ฯลฯ

ปุ่ม CTA


6. แถบด้านข้าง

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

เมนูแถบข้าง


7. ไฮเปอร์ลิงก์

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

8. ส่วนท้าย

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

ส่วนท้าย

โมดูล Drupal 8 (และ 9) ยอดนิยมสำหรับการนำทางที่ใช้งานง่าย

1. เมนูบล็อก

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

เมนูบล็อก


2. เกล็ดขนมปังง่าย ๆ

โมดูล Drupal 8 Easy Breadcrumb ทำงานโดยแยกส่วนของตำแหน่งออกจาก URL ปัจจุบันของหน้าเว็บ มีตัวเลือกมากมายที่สามารถกำหนดค่าได้และสามารถแทนที่โมดูล Drupal breadcrumbs ที่มีอยู่ได้ คุณสามารถเลือกที่จะซ่อนลิงก์โฮมเพจหรือลิงก์อื่นๆ ที่ระบุโดยสมบูรณ์ได้ โมดูลเบรดครัมบ์ Easy รองรับ Drupal 9 ด้วย!

เกล็ดขนมปังง่าย ๆ


3. ซุปเปอร์ฟิช

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

โมดูล Superfish


4. แผนผังเว็บไซต์

โมดูล Drupal 8 Sitemap นั้นเรียบง่าย สะอาดตา และใช้งานง่าย มันสามารถแสดงโครงสร้างไซต์ทั้งหมดในโครงสร้างลำดับชั้นที่สะอาด คุณยังสามารถเลือกสร้างและแสดงฟีด RSS สำหรับบล็อกและหมวดหมู่ได้ โมดูลแผนผังเว็บไซต์รองรับ Drupal 9

แผนผังเว็บไซต์-โมดูล


5. การเข้าถึงบทบาทรายการเมนู

โมดูลนี้ให้คุณเพิ่มการควบคุมการเข้าถึงเมนูของคุณ คุณสามารถเปิดใช้งานและปิดใช้งานรายการเมนูขึ้นอยู่กับบทบาทของผู้ใช้ โมดูลการเข้าถึงบทบาทของรายการเมนู Drupal 8 ช่วยให้คุณสามารถป้อนฟิลด์บทบาท (ทางเลือก) ไปยังรายการเมนู นอกจากนี้ยังรองรับ Drupal 9

โมดูลควบคุมการเข้าออก
แหล่งที่มาของรูปภาพ: การเข้าถึงบทบาทรายการเมนู


6. เมนูชีสเบอร์เกอร์

หากคุณคิดว่าเมนูแฮมเบอร์เกอร์นั้นยอดเยี่ยม ให้รอจนกว่าคุณจะได้ลิ้มลองเมนูชีสเบอร์เกอร์ โมดูลเมนู Drupal 8 Cheeseburger มาพร้อมกับคุณสมบัติที่ยอดเยี่ยมและไม่ได้จำกัดเพียงแค่มุมมองมือถือเท่านั้น แต่ยังใช้งานได้กับมุมมองเดสก์ท็อปและขนาดหน้าจอที่หลากหลายอีกด้วย ให้ความยืดหยุ่นในการเลือกรายการเมนูที่คุณต้องการให้ปรากฏในเมนูชีสเบอร์เกอร์ และแก้ไขชื่อเมนู หากคุณใช้ Drupal Commerce คุณสามารถเลือกให้แสดงตะกร้าสินค้าหรือหมายเลขโทรศัพท์ของร้านค้าในเมนูได้ คุณสามารถเลือกอนุกรมวิธานเป็นโครงสร้างสำหรับเมนูชีสเบอร์เกอร์ของคุณได้ โมดูลเมนูชีสเบอร์เกอร์รองรับ Drupal 9 ด้วย!

เมนูชีสเบอร์เกอร์

ที่มาของภาพ : เมนูชีสเบอร์เกอร์

7. ลดความซับซ้อนของเมนู

โมดูล Drupal 8 Simplify Menu ช่วยให้คุณแสดงเมนูในเทมเพลต Twig ของคุณได้ อนุญาตให้ปรับแต่งมาร์กอัปเมนูที่ช่วยให้เข้าถึงได้และเข้ากันได้กับมาตรฐาน คุณสามารถแสดงแผนผังเมนูของคุณเป็นอาร์เรย์ในเทมเพลตทวิกและควบคุมอาร์เรย์ของเมนูได้อย่างเต็มที่ โมดูลนี้ยังไม่รองรับ Drupal 9

ลดความซับซ้อน-โมดูลเมนู



8. Total Control Admin Dashboard

Drupal 8 Total Control Admin Dashboard เป็นเครื่องมือนำทางสำหรับผู้ดูแลระบบที่มีประโยชน์ ทำหน้าที่เป็นศูนย์กลางสำหรับเครื่องมือการดูแลระบบทั้งหมด แดชบอร์ดจะแสดงบานหน้าต่างผู้ดูแลระบบและลิงก์ด่วนไปยังผู้ใช้ การจัดหมวดหมู่ เมนู ประเภทเนื้อหา สถิติไซต์ แผงมุมมอง และอื่นๆ บานหน้าต่างแผงมุมมองสามารถปรับแต่งเพิ่มเติมได้ โมดูลนี้ยังใช้งานได้กับ Drupal 9

Total Control Admin Dashboard

9. Footermap: แผนผังเว็บไซต์ส่วนท้าย

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

แผนผังเว็บไซต์ส่วนท้าย