Navigation Patterns
เลือกเมนูบน/ข้าง/breadcrumb ให้ผู้ใช้รู้ว่าอยู่ที่ไหนและไปต่อทางไหน
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
Navigation Patterns คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนที่เริ่มลงมือทำแล้ว
ใช้เมื่อไหร่
ระบบมีหลายส่วน ผู้ใช้หลงไม่รู้ว่าอยู่ตรงไหน
อ่านแล้วทำอะไรต่อ
ใช้ sidebar จัดเป็นหมวด (คำขอ / รายงาน / ตั้งค่า) เมนูของหน้าที่เปิดอยู่ถูกไฮไลต์ และมี breadcrumb บนสุดบอกเส้นทาง ทำให้ผู้ใช้รู้ตำแหน่งตัวเองตลอด
เห็นภาพ: ทริคนี้เป็นยังไง
- 1นับจำนวนเมนูหลักเมนูน้อย (ไม่เกิน ~5-7) ใช้ top nav ได้พอดี
- 2เมนูเยอะหรือมีหมวดย่อยย้ายไปใช้ sidebar แบบพับได้ จัดเป็นหมวด เช่น คำขอ / รายงาน / ตั้งค่า
- 3หน้าซ้อนหลายชั้นเสริม breadcrumb บอกเส้นทาง เช่น หน้าแรก > รายงาน > ยอดขาย
- 4ไฮไลต์หน้าปัจจุบันเน้นเมนูของหน้าที่กำลังเปิดให้เห็นชัด ผู้ใช้รู้ตำแหน่งตัวเองตลอด
▶ เล่นอัตโนมัติ · ชี้เมาส์เพื่อหยุด · กดแถบด้านบนเพื่อข้ามขั้น
ใช้ตอนไหน?
- ระบบมีหลายส่วน ผู้ใช้หลงไม่รู้ว่าอยู่ตรงไหน
- เมนูเยอะจนแถบบนใส่ไม่พอ
- หน้ามีหลายชั้น ต้องบอกทางกลับให้ชัด
ความหมาย
รูปแบบการนำทาง (navigation patterns) คือวิธีจัดเมนูและลิงก์ให้ผู้ใช้เดินทางในระบบได้ เช่น เมนูบน (top nav) เมนูข้าง (sidebar) และ breadcrumb (เส้นทางที่บอกว่าอยู่หน้าไหน เช่น หน้าแรก > รายงาน > ยอดขาย) การเลือกให้เหมาะกับจำนวนเมนูและความลึกของหน้าจะช่วยให้คนไม่หลง
เลือกรูปแบบให้เหมาะ
เมนูน้อย (ไม่เกิน ~5-7) ใช้ top nav ได้ เมนูเยอะหรือมีหมวดย่อยใช้ sidebar หน้าที่ซ้อนหลายชั้นเสริม breadcrumb และเน้นเมนูของหน้าที่กำลังอยู่ให้เห็นชัด
เมนูน้อย (≤7) → top nav
เมนูเยอะ/มีหมวด → sidebar (พับได้)
หน้าซ้อนหลายชั้น → breadcrumb: หน้าแรก > รายงาน > ยอดขาย
หน้าปัจจุบัน → ไฮไลต์ให้เห็นว่าอยู่ตรงไหนตัวอย่างการใช้
พอร์ทัลภายในของทีม
ใช้ sidebar จัดเป็นหมวด (คำขอ / รายงาน / ตั้งค่า) เมนูของหน้าที่เปิดอยู่ถูกไฮไลต์ และมี breadcrumb บนสุดบอกเส้นทาง ทำให้ผู้ใช้รู้ตำแหน่งตัวเองตลอด