1. การออกแบบระบบเนวิเกชัน
Designing Web NavigationDe g g Web Nav gat o

2. ความสําคัญของระบบเนวิเกชันความสาคญของระบบเนวเกชน
ออ โ งส  งขอ ที่ ี  ใ  ใ  ข ึงขอ ไ ง ขึ้การออกแบบโครงสรางขอมูลทดชวยใหผูใชเขาถงขอมูลไดงายขน
ชวยใหผูใชทองเว็บไดวอยางคลองตัวโดยไมหลงทาง
ผูใชรูสึกสบายขณะที่กําลังทองไปในเว็บ โดยสามารถรูไดวาตัวเอง
กําลังอยที่ไหน ไดผานที่ใดมาบาง และควรไปทางไหนตอกาลงอยูทไหน ไดผานทใดมาบาง แล ควรไปทางไหนตอ
การเขาถึงขอมูลอยางสะดวกเปนหัวใจสําคัญของระบบเนวิเกชัน

3. คณสมบัติการนําทางของบราวเซอรคุณสมบตการนาทางของบราว ซอร
ระบบเนวิเกชันพื้นฐานที่มีมากับเบราเซอรโดยทั่วไป ไดแกฐ
Open URL เปนชองวางไวสําหรับใหผูใชพิมพที่อยูของเว็บไซตที่ตองการ
Back ไปหนาที่เคยดมากอนแลวBa k หน ท คยดูม กอน ลว
Forward ไปหนาที่เคยดูมาแลวถัดจากนี้ไป
History แสดงรายชื่อเว็บไซตที่เคยเขาไปดมายอนหลัง ตามระยะเวลาHistory แสดงรายชอเวบไซตทเคยเขาไปดูมายอนหลง ตามระยะเวลา
ที่กําหนด
Bookmark ทําใหบราวเซอรจดจําที่อยของเว็บไซตชวยใหกลับมายังหนาBookmark ทาใหบราวเซอรจดจาทอยูของเวบไซตชวยใหกลบมายงหนา
เดิมไดสะดวก
Status Bar แถบสถานะ แสดงรายละเอียดของ URL ที่ดานลางของtatu Bar ถบ ถ น ด ร ยล อยดขอ RL ทด นล ขอ
หนาตางบราวเซอร เมื่อผูใชวางเมาสเหนือลิงคตาง ๆ

4. รปแบบของระบบเนวิเกชันรูปแบบของระบบเนวเกชน
1 ระบบเนวิเกชันแบบลําดับชั้น (Hierarchical) เปนพื้นฐานที่1. ระบบเนวเกชนแบบลาดบชน (Hierarchical) เปนพนฐานท
ผูคนมักใชกันในเว็บไซต คือจากหนาหลักไปยังหนายอยถัดลงไป
ื  ั ึ้หรือยอนกลับขึนมา
2. ระบบเนวิเกชันแบบโกลบอล (Global) เปนระบบที่ชวยเสริม
ขอจํากัดของระบบเนวิเกชันแบบลําดับชั้น ทําใหเคลื่อนที่ไดทั้ง
แนวตั้งและแนวนอน ซึ่งแบบโกลบอล จะมีอยูดานบนของทุกๆู ุ ๆ
หนา สวนดานลางนั้นจะมีหรือไมมีก็ไดขึ้นอยูกับความยาว และ
ความเหมาะสมความเหมาะสม

5. รปแบบของระบบเนวิเกชัน
3 ระบบเนวิเกชันแบบโลคอล (Local) มีความซับซอนมาก
รูปแบบของระบบเนวเกชน
3. ระบบเนวเกชนแบบโลคอล (Local) มความซบซอนมาก
นอกจากใชระบบแบบโกบอล ตองใชระบบแบบโลคอล หรือแบบ
   ั   ื้ ี่  ใ เฉพาะสวนมาชวย เชน หัวขอยอยของเนือหาทีอยูภายในสวน
หลักๆ ของเว็บไซต
4. ระบบเนวิเกชันเฉพาะที่ (Ad Hoc) เปนระบบเนวิเกชันแบบ
เฉพาะที่ตามความจําเปนของเนื้อหา ก็คือลิงคของคําหรือ
ขอความที่นาสนใจซึ่งฝงอยูในประโยค ที่เชื่อมโยงเกี่ยวกับคํา
นั้นๆนนๆ

6. ป ิ ั ัองคประกอบของระบบเนวิเกชันหลัก
เนวิเกชันบาร
เนวิเกชันระบบเฟรม
Pull - Down Menu
Pop - Up Menu
Image Map
Search Box

7. ิ ั  ( i i )เนวิเกชันบาร (Navigation Bar)
 ิ ั ื้ ี่ ํ  ํ ั ็ ไ เปนระบบเนวิเกชันพืนฐานทีจําเปนสําหรับการออกแบบเว็บไซต
ประกอบดวยกลุมของลิงคตางๆ ที่อยูรวมกันในบริเวณใดบริเวณ
หนึ่งของหนาเว็บ เปนตัวหนังสือหรือกราฟก

8. ิ ั ฟ ( d)เนวเกชนระบบเฟรม (Frame-Based)
ทําใหสามารถแสดงเว็บหลายๆ หนาไวในหนาตางเดียวกันไดทาใหสามารถแสดงเวบหลายๆ หนาไวในหนาตางเดยวกนได
การลิงคของเฟรมสามารถควบคุมการแสดงผลของขอมูลอีกเฟรม
ึ่ ไ  ั ั้ ิ ั  ป  ี่ ึ  ใ หนึงได ดังนัน เนวิเกชันบารจะปรากกฎอยูคงทีเสมอ ถึงแมผูใช
จะเลื่อนดูขอมูลใดๆ

9. Pull- Down MenuPull Down Menu
มีรายการใหผใชเลือกใชมากมาย ลักษณะการใชงาน คือ เมื่อมรายการใหผูใชเลอกใชมากมาย ลกษณะการใชงาน คอ เมอ
นําเมาสไปคลิกที่ปุม จะมีรายการใหเลือกใชตามที่ผูใชตองการ
ป ั ื้ ี่ ็ ไ ประหยัดเนือทีเว็บไซต

10. Pop –Up MenuPop Up Menu
  ึ้คลาย pull-down menu แตรายการของเมนูจะปรากฎขึนเอง
เมื่อผูใชนําเมาสไปวางเหนือตําแหนงของรายการในเมนูหลัก
โดยใชภาษาจาวาสคริปต

11. Image MapImage Map
 ิ ใ  ื ฟ  ั ิ  ฟ ใ เปนเทคนิคการใชรูปภาพหรือกราฟกเปนตัวลิงค รูปกราฟกควรใส
คําอธิบายในสวนของ ALT (Alterative Text) แตไมควรใช Image
ป ั ิ  ี  ี ใ  ไ   ป ฟMap เปนตัวลิงคเพียงอยางเดียวเพราะผูใชบางคนไมทราบวารูปกราฟก
นั้นสามารถลิงคไปยังสวนอื่นๆได

12. Search BoxSearch Box
ป สื  ใ ็ ไ  ที่ ีป โ อ  ง สํ ัเปนระบบสบคนภายในเวบไซต ทมประโยชนอยางมากสาหรบ
สําหรับสืบคนขอมูลที่มีปริมาณมาก

13. องคประกอบของระบบเนวิเกชันเสริมองคประกอบของระบบเนวเกชนเสรม
ระบบสารบัญญ
ระบบดัชนี
แผนที่เว็บไซต
ไกดทัวร
การออกแบบระบบเนวิเกชันของเว็บไซต
สรางระบบเนวิเกชันหลัก
สรางระบบเนวิเกชันเสริม
เนวิเกชันแบบกราฟฟกกับตัวอักษร
เนวิเกชันกราฟฟกพรอมคําอธิบาย
ํ ิ ิ ัคําอธิบายของเนวิเกชัน
พื้นฐานของระบบเนวิเกชัน

14. ระบบสารบัญ (Table of Contents)ระบบสารบญ (Table of Contents)
ง ื้อ ออ ป ั ขอ  ั ส ั ของ ังสือจะแบงเนอหาออกเปนหวขอคลายกบสารบญของหนงสอ
เหมาะกับเว็บไซตที่มีขนาดใหญ และจัดขอมูลอยางเปนระบบ

15. ระบบดัชนี (Index System)ระบบดชน (Index System)
ือ ั ั ีใ ังสือ ือ ํ อ ํ ือขอเหมอนกบดชนในหนงสอ คอ จะนาเอาคาหรอขอความ
เรียงลําดับตามตัวอักษร เหมาะกับเว็บไซตที่มีขอมูลปริมาณมาก
   ่ ่ ่   และผูใชรูถึงชื่อของสิ่งที่ตองการคนหาอยูแลว

16. แผนที่เว็บไซต (Site Map)แผนทเวบไซต (Site Map)
ส งโ งส  งขอ ใ ็ ไ  ฟ ื่อ ิ่การแสดงโครงสรางขอมูลในเวบไซตแบบกราฟก เพอเพมความ
สวยงาม และสื่อความหมายของเนื้อหาที่มากกวาตัวอักษร

17. ไกดทัวร (Guided Tour)ไกดทวร (Guided Tour)
ป ํ ส อสํ ั ใ ที่ไ  ข ็ ไ  ั้ ื่อ ํเปนการนาเสนอสาหรบผูใชทไมเคยเขาเวบไซตนน เพอแนะนา
เว็บไซต หรือจูงใจใหผูใชเปนสมาชิก ประกอบดวยตัวอยาง
  ้ ่ ่  หนาจอหลายๆ แบบพรอมทั้งอธิบายสิ่งที่เปนประโยชน

18. การออกแบบระบบเนวิเกชันของเว็บไซตการออกแบบระบบเนวเกชนของเวบไซต
ส  ง ี้ ที่สื่อ ิ่ อง ั ใการสรางระบบชแนะทสอความหมาย เพมความคลองตวในการ
ทองเว็บและสรางสิ่งที่ชวยในการสืบหาขอมูลที่ตองการอยาง
็รวดเร็ว

19. สรางระบบเนวิเกชันหลักสรางระบบเนวเกชนหลก
ิ่ ีโ งส  ง ํ ั ของขอ ที่ ส ใ ัเรมจากมโครงสรางลาดบของขอมูลทเหมาะสม ในการจดระบบ
ขอมูลภายในเว็บไซต ผูใชเขาถึงขอมูลไดดวยคลิกเพียงไมเกิน
่ 2-3 คลิก เพื่อไมใหเกิดความสับสน

20. สรางระบบเนวิเกชันเสริมสรางระบบเนวเกชนเสรม
ใ  ิ ั ของโ งส  งขอ  ือ ใ ใหพจารณาตามลกษณะของโครงสรางขอมูล แลวเลอกให
เหมาะสม เชน ถาแบงเปนลําดับชั้นที่ชัดเจน ก็เลือกใชสารบัญ
   ถาขอมูลกระจัดกระจายไมเปนระบบ ควรพิจารณาใชระบบดัชนี
เปนตน

21. เนวิเกชันแบบกราฟกกับตัวอักษรเนวเกชนแบบกราฟกกบตวอกษร
ขึ้ อ  ั ออ ิ ฟ ี ส งขนอยูกบผูออกแบบพจารณา แบบกราฟกจะมความสวยงาม
มากกวาแบบตัวอักษร แตการแสดงผลชาลง
ถามีการเพิ่มขอมูลจํานวนมากก็ควรใชเมนูแบบตัวอักษรดีกวาเพื่อ
ความสะดวกในการเพิ่มเติมภายหลัง

22. เนวิเกชันกราฟกพรอมคําอธิบายเนวเกชนกราฟกพรอมคาอธบาย
 ใ  ฟ ใส ํ อ ิ  ั ฟ ั้  ื่อถาใชแบบกราฟกควรใสคาอธบายควบคูกบกราฟกนนดวย เพอ
เพิ่มความสะดวกใหแกผูใช และสื่อความหมายที่สมบูรณขึ้น

23. คําอธิบายของเนวิเกชัน (Navigation Label)คาอธบายของเนวเกชน (Navigation Label)
ป สิ่งที่สํ ั ที่  อ ใ  ใ    ื้อ  ส ของ ็เปนสงทสาคญทชวยบอกใหผูใชรูวา เนอหาแตละสวนของเวบ
นั่นคืออะไรบาง การเลือกใชคําที่สื่อความหมายใหผูใชเขาใจได
งาย

24. พื้นฐานของระบบเนวิเกชันพนฐานของระบบเนวเกชน
ตอนนี้กําลังอยที่ใด เพื่อจะไดไมทําใหเราหลงทางตอนนกาลงอยูทใด เพอจะไดไมทาใหเราหลงทาง
จากนี้สามารถไปที่ใดไดบาง สามารถเห็นเสนทางทั้งหมดใน
็ ี  ื่ ใ ไ  ื  ี่  ไปเว็บเสียกอน เพือใหไดเลือกเสนทางทีตองการจะไป
จะไปสูสิ่งตางๆ ไดอยางไร เสนทางที่เลือก สามารถคลิกได
ตามหัวขอตางๆ
จะกลับมาที่เดิมไดอยางไร อยาหวังพึ่งปุม back จึงควรสรางุ
ระบบเนวิเกชันที่เคลื่อนยายไปมาระหวางขอมูลหลักและขอมูล
ยอยไดอยางสะดวก

25. สรางสิ่งแวดลอมที่สื่อความหมาย
แสดงชื่อองคกรและที่อยูของเว็บไซตไวในทุกหนาเว็บเพจ เพื่อใหผูใชรูวา
่ ็ ้ ็ตนเองกําลังอยูที่เว็บใด ถึงแมในบางครั้งผูใชเขามาสูเว็บเพจยอยโดยตรงโดย
ไมผานหนาโฮมเพจ สามารถทําใหรูไดวากําลังอยูในเว็บใด
แสดงถึงโครงสรางของลําดับชั้นขอมูลอยางชัดเจนและสม่ําเสมอ ทางเลือก
ในระบบเนวิเกชันนั้น ควรจะสื่อถึงโครงสรางขอมูลหลักภายในเว็บไซต โดยมี
รูปแบบและลักษณะอยางสม่ําเสมอตลอดทั่วทั้งไซต
แสดงตําแหนงปจจุบันใหผูใชรู ดวยการทําใหไฮไลทตําแหนงปจจุบันใหุ ู ู ุ
แตกตางจากสวนอื่น
ใชสีของลิงคใหเหมาะสม โดยใชสีของลิงคที่แตกตางกันระหวางลิงคที่คลิกด ว
แลวและยังไมไดคลิก

26. คุณสมบัติสําคัญของระบบเนวิเกชันุ ญ
เขาใจงาย
มีความสม่ําเสมอ
มีการตอบสนองตอผใชมก อบ นอ อผู
มีความพรอมและเหมาะสมตอการใชงาน
นําเสนอหลายทางเลือกนาเสนอหลายทางเลอก
มีขั้นตอนสั้นและประหยัดเวลา
รปแบบที่สื่อความหมายรูปแบบทสอความหมาย
มีคําอธิบายที่ชัดเจนและเขาใจงาย
มีความเหมาะสมกับวัตถประสงคของเว็บไซตมความเหมาะสมกบวตถุประสงคของเวบไซต
สนับสนุนเปาหมายและพฤติกรรมของผูใช