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

More Related Content

Similar to Navigation

การเขียนแผนภาพ DFD
การเขียนแผนภาพ DFDการเขียนแผนภาพ DFD
การเขียนแผนภาพ DFDskiats
 
Computer for graduate-2003
Computer for graduate-2003Computer for graduate-2003
Computer for graduate-2003Somkiet Phetmark
 
ห้องสมุดเปลี่ยนได้ด้วยเทคโนโลยี
ห้องสมุดเปลี่ยนได้ด้วยเทคโนโลยีห้องสมุดเปลี่ยนได้ด้วยเทคโนโลยี
ห้องสมุดเปลี่ยนได้ด้วยเทคโนโลยีBoonlert Aroonpiboon
 
บทที่ 2 การเขียนโปรแกรม
บทที่ 2 การเขียนโปรแกรมบทที่ 2 การเขียนโปรแกรม
บทที่ 2 การเขียนโปรแกรมPatcharee Pawleung
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2pom_2555
 
Digital Textbooks & Technology for Education
Digital Textbooks & Technology for EducationDigital Textbooks & Technology for Education
Digital Textbooks & Technology for EducationBoonlert Aroonpiboon
 
Technique to Delivery Information via the Internet
Technique to Delivery Information via the InternetTechnique to Delivery Information via the Internet
Technique to Delivery Information via the InternetRachabodin Suwannakanthi
 
(ใบงานที่ 5)
(ใบงานที่ 5)(ใบงานที่ 5)
(ใบงานที่ 5)Aungkana Na Na
 

Similar to Navigation (20)

Unit2
Unit2Unit2
Unit2
 
การเขียนแผนภาพ DFD
การเขียนแผนภาพ DFDการเขียนแผนภาพ DFD
การเขียนแผนภาพ DFD
 
Designing web navigation
Designing web navigationDesigning web navigation
Designing web navigation
 
อินเทอร์เน็ต
อินเทอร์เน็ตอินเทอร์เน็ต
อินเทอร์เน็ต
 
Introduction to SOA
Introduction to SOAIntroduction to SOA
Introduction to SOA
 
Computer for graduate-2003
Computer for graduate-2003Computer for graduate-2003
Computer for graduate-2003
 
ห้องสมุดเปลี่ยนได้ด้วยเทคโนโลยี
ห้องสมุดเปลี่ยนได้ด้วยเทคโนโลยีห้องสมุดเปลี่ยนได้ด้วยเทคโนโลยี
ห้องสมุดเปลี่ยนได้ด้วยเทคโนโลยี
 
บทที่ 2 การเขียนโปรแกรม
บทที่ 2 การเขียนโปรแกรมบทที่ 2 การเขียนโปรแกรม
บทที่ 2 การเขียนโปรแกรม
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2
 
Ogctaxmap
OgctaxmapOgctaxmap
Ogctaxmap
 
Component Com
Component ComComponent Com
Component Com
 
Ch10
Ch10Ch10
Ch10
 
Web
WebWeb
Web
 
Digital Textbooks & Technology for Education
Digital Textbooks & Technology for EducationDigital Textbooks & Technology for Education
Digital Textbooks & Technology for Education
 
Technique to Delivery Information via the Internet
Technique to Delivery Information via the InternetTechnique to Delivery Information via the Internet
Technique to Delivery Information via the Internet
 
(ใบงานที่ 5)
(ใบงานที่ 5)(ใบงานที่ 5)
(ใบงานที่ 5)
 
Ch04
Ch04Ch04
Ch04
 
Blog ด้วย Wordpress.com
Blog ด้วย Wordpress.comBlog ด้วย Wordpress.com
Blog ด้วย Wordpress.com
 
How to design library website
How to design library websiteHow to design library website
How to design library website
 
Social Network
Social NetworkSocial Network
Social Network
 

More from Meaw Sukee (20)

Pix2
Pix2Pix2
Pix2
 
Pix
PixPix
Pix
 
Report
ReportReport
Report
 
Google classroom
Google classroomGoogle classroom
Google classroom
 
Plan10
Plan10Plan10
Plan10
 
Plan9
Plan9Plan9
Plan9
 
Plan
PlanPlan
Plan
 
Edit
EditEdit
Edit
 
Problem
ProblemProblem
Problem
 
Peeraya
PeerayaPeeraya
Peeraya
 
ตัวอย่างเล่ม
ตัวอย่างเล่มตัวอย่างเล่ม
ตัวอย่างเล่ม
 
Cal 190856
Cal 190856Cal 190856
Cal 190856
 
Total pub
Total pubTotal pub
Total pub
 
Public
PublicPublic
Public
 
Total pub
Total pubTotal pub
Total pub
 
Bro
BroBro
Bro
 
Training_edmodo
Training_edmodoTraining_edmodo
Training_edmodo
 
Frame
FrameFrame
Frame
 
Frame
FrameFrame
Frame
 
Table
TableTable
Table
 

Navigation

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