Navigation

1,110 views
1,010 views

Published on

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,110
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Navigation

  1. 1. การออกแบบระบบเนวิเกชันDesigning Web NavigationDe g g Web Nav gat o
  2. 2. ความสําคัญของระบบเนวิเกชันความสาคญของระบบเนวเกชนออ โ งส  งขอ ที่ ี  ใ  ใ  ข ึงขอ ไ ง ขึ้การออกแบบโครงสรางขอมูลทดชวยใหผูใชเขาถงขอมูลไดงายขนชวยใหผูใชทองเว็บไดวอยางคลองตัวโดยไมหลงทางผูใชรูสึกสบายขณะที่กําลังทองไปในเว็บ โดยสามารถรูไดวาตัวเองกําลังอยที่ไหน ไดผานที่ใดมาบาง และควรไปทางไหนตอกาลงอยูทไหน ไดผานทใดมาบาง แล ควรไปทางไหนตอการเขาถึงขอมูลอยางสะดวกเปนหัวใจสําคัญของระบบเนวิเกชัน
  3. 3. คณสมบัติการนําทางของบราวเซอรคุณสมบตการนาทางของบราว ซอรระบบเนวิเกชันพื้นฐานที่มีมากับเบราเซอรโดยทั่วไป ไดแกฐOpen URL เปนชองวางไวสําหรับใหผูใชพิมพที่อยูของเว็บไซตที่ตองการBack ไปหนาที่เคยดมากอนแลวBa k หน ท คยดูม กอน ลวForward ไปหนาที่เคยดูมาแลวถัดจากนี้ไปHistory แสดงรายชื่อเว็บไซตที่เคยเขาไปดมายอนหลัง ตามระยะเวลาHistory แสดงรายชอเวบไซตทเคยเขาไปดูมายอนหลง ตามระยะเวลาที่กําหนดBookmark ทําใหบราวเซอรจดจําที่อยของเว็บไซตชวยใหกลับมายังหนาBookmark ทาใหบราวเซอรจดจาทอยูของเวบไซตชวยใหกลบมายงหนาเดิมไดสะดวกStatus Bar แถบสถานะ แสดงรายละเอียดของ URL ที่ดานลางของtatu Bar ถบ ถ น ด ร ยล อยดขอ RL ทด นล ขอหนาตางบราวเซอร เมื่อผูใชวางเมาสเหนือลิงคตาง ๆ
  4. 4. รปแบบของระบบเนวิเกชันรูปแบบของระบบเนวเกชน1 ระบบเนวิเกชันแบบลําดับชั้น (Hierarchical) เปนพื้นฐานที่1. ระบบเนวเกชนแบบลาดบชน (Hierarchical) เปนพนฐานทผูคนมักใชกันในเว็บไซต คือจากหนาหลักไปยังหนายอยถัดลงไปื  ั ึ้หรือยอนกลับขึนมา2. ระบบเนวิเกชันแบบโกลบอล (Global) เปนระบบที่ชวยเสริมขอจํากัดของระบบเนวิเกชันแบบลําดับชั้น ทําใหเคลื่อนที่ไดทั้งแนวตั้งและแนวนอน ซึ่งแบบโกลบอล จะมีอยูดานบนของทุกๆู ุ ๆหนา สวนดานลางนั้นจะมีหรือไมมีก็ไดขึ้นอยูกับความยาว และความเหมาะสมความเหมาะสม
  5. 5. รปแบบของระบบเนวิเกชัน3 ระบบเนวิเกชันแบบโลคอล (Local) มีความซับซอนมากรูปแบบของระบบเนวเกชน3. ระบบเนวเกชนแบบโลคอล (Local) มความซบซอนมากนอกจากใชระบบแบบโกบอล ตองใชระบบแบบโลคอล หรือแบบ   ั   ื้ ี่  ใ เฉพาะสวนมาชวย เชน หัวขอยอยของเนือหาทีอยูภายในสวนหลักๆ ของเว็บไซต4. ระบบเนวิเกชันเฉพาะที่ (Ad Hoc) เปนระบบเนวิเกชันแบบเฉพาะที่ตามความจําเปนของเนื้อหา ก็คือลิงคของคําหรือขอความที่นาสนใจซึ่งฝงอยูในประโยค ที่เชื่อมโยงเกี่ยวกับคํานั้นๆนนๆ
  6. 6. ป ิ ั ัองคประกอบของระบบเนวิเกชันหลักเนวิเกชันบารเนวิเกชันระบบเฟรมPull - Down MenuPop - Up MenuImage MapSearch Box
  7. 7. ิ ั  ( i i )เนวิเกชันบาร (Navigation Bar) ิ ั ื้ ี่ ํ  ํ ั ็ ไ เปนระบบเนวิเกชันพืนฐานทีจําเปนสําหรับการออกแบบเว็บไซตประกอบดวยกลุมของลิงคตางๆ ที่อยูรวมกันในบริเวณใดบริเวณหนึ่งของหนาเว็บ เปนตัวหนังสือหรือกราฟก
  8. 8. ิ ั ฟ ( d)เนวเกชนระบบเฟรม (Frame-Based)ทําใหสามารถแสดงเว็บหลายๆ หนาไวในหนาตางเดียวกันไดทาใหสามารถแสดงเวบหลายๆ หนาไวในหนาตางเดยวกนไดการลิงคของเฟรมสามารถควบคุมการแสดงผลของขอมูลอีกเฟรมึ่ ไ  ั ั้ ิ ั  ป  ี่ ึ  ใ หนึงได ดังนัน เนวิเกชันบารจะปรากกฎอยูคงทีเสมอ ถึงแมผูใชจะเลื่อนดูขอมูลใดๆ
  9. 9. Pull- Down MenuPull Down Menuมีรายการใหผใชเลือกใชมากมาย ลักษณะการใชงาน คือ เมื่อมรายการใหผูใชเลอกใชมากมาย ลกษณะการใชงาน คอ เมอนําเมาสไปคลิกที่ปุม จะมีรายการใหเลือกใชตามที่ผูใชตองการป ั ื้ ี่ ็ ไ ประหยัดเนือทีเว็บไซต
  10. 10. Pop –Up MenuPop Up Menu  ึ้คลาย pull-down menu แตรายการของเมนูจะปรากฎขึนเองเมื่อผูใชนําเมาสไปวางเหนือตําแหนงของรายการในเมนูหลักโดยใชภาษาจาวาสคริปต
  11. 11. Image MapImage Map ิ ใ  ื ฟ  ั ิ  ฟ ใ เปนเทคนิคการใชรูปภาพหรือกราฟกเปนตัวลิงค รูปกราฟกควรใสคําอธิบายในสวนของ ALT (Alterative Text) แตไมควรใช Imageป ั ิ  ี  ี ใ  ไ   ป ฟMap เปนตัวลิงคเพียงอยางเดียวเพราะผูใชบางคนไมทราบวารูปกราฟกนั้นสามารถลิงคไปยังสวนอื่นๆได
  12. 12. Search BoxSearch Boxป สื  ใ ็ ไ  ที่ ีป โ อ  ง สํ ัเปนระบบสบคนภายในเวบไซต ทมประโยชนอยางมากสาหรบสําหรับสืบคนขอมูลที่มีปริมาณมาก
  13. 13. องคประกอบของระบบเนวิเกชันเสริมองคประกอบของระบบเนวเกชนเสรมระบบสารบัญญระบบดัชนีแผนที่เว็บไซตไกดทัวรการออกแบบระบบเนวิเกชันของเว็บไซตสรางระบบเนวิเกชันหลักสรางระบบเนวิเกชันเสริมเนวิเกชันแบบกราฟฟกกับตัวอักษรเนวิเกชันกราฟฟกพรอมคําอธิบายํ ิ ิ ัคําอธิบายของเนวิเกชันพื้นฐานของระบบเนวิเกชัน
  14. 14. ระบบสารบัญ (Table of Contents)ระบบสารบญ (Table of Contents)ง ื้อ ออ ป ั ขอ  ั ส ั ของ ังสือจะแบงเนอหาออกเปนหวขอคลายกบสารบญของหนงสอเหมาะกับเว็บไซตที่มีขนาดใหญ และจัดขอมูลอยางเปนระบบ
  15. 15. ระบบดัชนี (Index System)ระบบดชน (Index System)ือ ั ั ีใ ังสือ ือ ํ อ ํ ือขอเหมอนกบดชนในหนงสอ คอ จะนาเอาคาหรอขอความเรียงลําดับตามตัวอักษร เหมาะกับเว็บไซตที่มีขอมูลปริมาณมาก   ่ ่ ่   และผูใชรูถึงชื่อของสิ่งที่ตองการคนหาอยูแลว
  16. 16. แผนที่เว็บไซต (Site Map)แผนทเวบไซต (Site Map)ส งโ งส  งขอ ใ ็ ไ  ฟ ื่อ ิ่การแสดงโครงสรางขอมูลในเวบไซตแบบกราฟก เพอเพมความสวยงาม และสื่อความหมายของเนื้อหาที่มากกวาตัวอักษร
  17. 17. ไกดทัวร (Guided Tour)ไกดทวร (Guided Tour)ป ํ ส อสํ ั ใ ที่ไ  ข ็ ไ  ั้ ื่อ ํเปนการนาเสนอสาหรบผูใชทไมเคยเขาเวบไซตนน เพอแนะนาเว็บไซต หรือจูงใจใหผูใชเปนสมาชิก ประกอบดวยตัวอยาง  ้ ่ ่  หนาจอหลายๆ แบบพรอมทั้งอธิบายสิ่งที่เปนประโยชน
  18. 18. การออกแบบระบบเนวิเกชันของเว็บไซตการออกแบบระบบเนวเกชนของเวบไซตส  ง ี้ ที่สื่อ ิ่ อง ั ใการสรางระบบชแนะทสอความหมาย เพมความคลองตวในการทองเว็บและสรางสิ่งที่ชวยในการสืบหาขอมูลที่ตองการอยาง็รวดเร็ว
  19. 19. สรางระบบเนวิเกชันหลักสรางระบบเนวเกชนหลกิ่ ีโ งส  ง ํ ั ของขอ ที่ ส ใ ัเรมจากมโครงสรางลาดบของขอมูลทเหมาะสม ในการจดระบบขอมูลภายในเว็บไซต ผูใชเขาถึงขอมูลไดดวยคลิกเพียงไมเกิน่ 2-3 คลิก เพื่อไมใหเกิดความสับสน
  20. 20. สรางระบบเนวิเกชันเสริมสรางระบบเนวเกชนเสรมใ  ิ ั ของโ งส  งขอ  ือ ใ ใหพจารณาตามลกษณะของโครงสรางขอมูล แลวเลอกใหเหมาะสม เชน ถาแบงเปนลําดับชั้นที่ชัดเจน ก็เลือกใชสารบัญ   ถาขอมูลกระจัดกระจายไมเปนระบบ ควรพิจารณาใชระบบดัชนีเปนตน
  21. 21. เนวิเกชันแบบกราฟกกับตัวอักษรเนวเกชนแบบกราฟกกบตวอกษรขึ้ อ  ั ออ ิ ฟ ี ส งขนอยูกบผูออกแบบพจารณา แบบกราฟกจะมความสวยงามมากกวาแบบตัวอักษร แตการแสดงผลชาลงถามีการเพิ่มขอมูลจํานวนมากก็ควรใชเมนูแบบตัวอักษรดีกวาเพื่อความสะดวกในการเพิ่มเติมภายหลัง
  22. 22. เนวิเกชันกราฟกพรอมคําอธิบายเนวเกชนกราฟกพรอมคาอธบาย ใ  ฟ ใส ํ อ ิ  ั ฟ ั้  ื่อถาใชแบบกราฟกควรใสคาอธบายควบคูกบกราฟกนนดวย เพอเพิ่มความสะดวกใหแกผูใช และสื่อความหมายที่สมบูรณขึ้น
  23. 23. คําอธิบายของเนวิเกชัน (Navigation Label)คาอธบายของเนวเกชน (Navigation Label)ป สิ่งที่สํ ั ที่  อ ใ  ใ    ื้อ  ส ของ ็เปนสงทสาคญทชวยบอกใหผูใชรูวา เนอหาแตละสวนของเวบนั่นคืออะไรบาง การเลือกใชคําที่สื่อความหมายใหผูใชเขาใจไดงาย
  24. 24. พื้นฐานของระบบเนวิเกชันพนฐานของระบบเนวเกชนตอนนี้กําลังอยที่ใด เพื่อจะไดไมทําใหเราหลงทางตอนนกาลงอยูทใด เพอจะไดไมทาใหเราหลงทางจากนี้สามารถไปที่ใดไดบาง สามารถเห็นเสนทางทั้งหมดใน็ ี  ื่ ใ ไ  ื  ี่  ไปเว็บเสียกอน เพือใหไดเลือกเสนทางทีตองการจะไปจะไปสูสิ่งตางๆ ไดอยางไร เสนทางที่เลือก สามารถคลิกไดตามหัวขอตางๆจะกลับมาที่เดิมไดอยางไร อยาหวังพึ่งปุม back จึงควรสรางุระบบเนวิเกชันที่เคลื่อนยายไปมาระหวางขอมูลหลักและขอมูลยอยไดอยางสะดวก
  25. 25. สรางสิ่งแวดลอมที่สื่อความหมายแสดงชื่อองคกรและที่อยูของเว็บไซตไวในทุกหนาเว็บเพจ เพื่อใหผูใชรูวา่ ็ ้ ็ตนเองกําลังอยูที่เว็บใด ถึงแมในบางครั้งผูใชเขามาสูเว็บเพจยอยโดยตรงโดยไมผานหนาโฮมเพจ สามารถทําใหรูไดวากําลังอยูในเว็บใดแสดงถึงโครงสรางของลําดับชั้นขอมูลอยางชัดเจนและสม่ําเสมอ ทางเลือกในระบบเนวิเกชันนั้น ควรจะสื่อถึงโครงสรางขอมูลหลักภายในเว็บไซต โดยมีรูปแบบและลักษณะอยางสม่ําเสมอตลอดทั่วทั้งไซตแสดงตําแหนงปจจุบันใหผูใชรู ดวยการทําใหไฮไลทตําแหนงปจจุบันใหุ ู ู ุแตกตางจากสวนอื่นใชสีของลิงคใหเหมาะสม โดยใชสีของลิงคที่แตกตางกันระหวางลิงคที่คลิกด วแลวและยังไมไดคลิก
  26. 26. คุณสมบัติสําคัญของระบบเนวิเกชันุ ญเขาใจงายมีความสม่ําเสมอมีการตอบสนองตอผใชมก อบ นอ อผูมีความพรอมและเหมาะสมตอการใชงานนําเสนอหลายทางเลือกนาเสนอหลายทางเลอกมีขั้นตอนสั้นและประหยัดเวลารปแบบที่สื่อความหมายรูปแบบทสอความหมายมีคําอธิบายที่ชัดเจนและเขาใจงายมีความเหมาะสมกับวัตถประสงคของเว็บไซตมความเหมาะสมกบวตถุประสงคของเวบไซตสนับสนุนเปาหมายและพฤติกรรมของผูใช

×