หนังสือเล่มเล็ก หลักการออกแบบเว็บไซต์

1. บทนำ
จากกระแสของสังคมที่ได้รับผลกระทบของความก้าวหน้าทางเทคโนโลยีเครื่องมือ
สื่อสาร ตลอดจนสารสนเทศออนไลน์ต่างๆ นั้นทาให้เกิดการเปลี่ยนแปลงในการดาเนิน
ชีวิตการทางาน และการเรียนรู้ของเราจะเห็นได้ว่าการเรียนรู้ของเรานั้นได้พึ่งสารสนเทศ
ออนไลน์ต่างๆ มากยิ่งขึ้น ดังเช่นการใช้เทคโนโลยีในการเรียนการสอนปัจจุบันที่หลาคน
เชื่อว่าจะเข้ามาตอบโจทย์ ในเรื่องของการจัดการเรียนให้มีประสิทธิภาพอย่างสูงสุดสื่อ
การเรียนการสอนมีอยู่หลายประเภทด้วยกัน ไม่วาจะเป็นสื่อพื้นฐาน สื่อคอมพิวเตอร์
ช่วยสอนหรือสื่อเว็บไซต์ทางการศึกษาที่หลายๆคนเชื่อว่าจะเข้ามาช่วยเสริมในเรื่องของ
ข้อจากัดของเวลาและสถานที่ที่จะเอื้อให้ผู้เรียนสามารถเข้ามาศึกษาหาความรู้ ที่ไหและ
เวลาใดก็ได้
โดยสื่อเว็บไซต์ทางการศึกษาถือ ว่าเป็นสื่อการเรียนการสอนที่สนับสนุนให้ผู้เรียน
ได้ศึกษาเรียนรู้ด้วยตนเอง ส่งเสริมปฏิสัมพันธ์ผ่านเครือข่ายออนไลน์ทั้งกับผู้เรียนด้วยกัน
เอง และระหว่างผู้เรียนกับผู้สอน ด้วยแนวคิดที่ว่าการเรียนการสอนในลักษณะนี้จนาไปสู่
การสร้างองค์ความรู้ ใหม่ๆ ด้วยตนเองผ่านสังคมแห่งการเรียนรู้ออนไลน์
นอกจากนี้ในปัจจุบัน จะเห็นได้ ว่าคุณประโยชน์ของเว็บไซต์ ที่เป็นแหล่งเก็บ
รวบรวมข้อมูลทุกชนิดได้มากมายมหาศาล ร่วมกับอิทธิพลของอินเทอร์เน็ตที่มีต่อ
การศึกษาโดยเฉพาะในเรื่องของการขยายโอกาสทาง
ฉะนั้นรูปแบบของการเรียนการสอนควรเน้นสอนวิธีการเรียนให้ผู้เรียน ไม่ใช่สอน
แต่เนื้อหาวิชาเพียงอย่างเดียว (Teaching how to learn - not what to learn) และ
การเรียนการสอนในรูปแบบนี้ยังเป็นการส่งเสริมทักษะการเรียนรู้ตลอดชีวิต (Lifelong
learning) อีกด้วย
ดังนั้น อาจเรียกได้ว่า เว็บไซต์ทางการศึกษาที่มีคุณภาพย่อมส่งผลให้ผู้เรียน
ประสบความสาเร็จและมีคุณภาพในการเรียนรู้เช่นกัน โดยเว็บไซต์ทางการศึกษาได้
อธิบายรายละเอียดเกี่ยวกับความเป็นมา ความหมาย ทฤษฎีการศึกษาและหลักการ
พื้นฐานสาหรับการออกแบบและพัฒนาเว็บไซต์ทางการศึกษา องค์ประกอบ ขั้นตอนการ
ออกแบบและ พัฒนาเว็บไซต์ทางการศึกษา โครงสร้างเว็บไซต์ทางการศึกษา และศึกษา
การออกแบบเว็บไซต์ทางการศึกษา ดังต่อไปนี้

2. บทที่ 1
ควำมหมำยเว็บไซต์ทำงกำรศึกษำ
การนาเว็บไซต์ทางการศึกษาไปใช้ในการเรียนการสอนนั้นจะมีการใช้ในรูปแบบที่
ต่างๆกัน ไม่ว่าจะเป็นการใช้เป็นสื่อเสริมในการเรียนการสอนแบบใช้เว็บช่วยการใช้เป็น
สื่อหลักในการเรียนการสอนแบบออนไลน์และการเรียนการสอนแบบผสมผสาน
การศึกษาออนไลน์ในสหรัฐอเมริกา พ.ศ. 2548” (Growing by Degrees: Online
Education in the United States, 2005) ของสมาคมสโลน คอนซอร์เทียม (Sloan
Consortium Foundation)
สรุปได้ว่า ความเป็นมาของการเรียนการสอนอีเลิร์นนิ่ง เริ่มจากวิวัฒนาการ 5 ยุค
ของการศึกษาทางไกล ซึ่งเริ่มตั้งแต่ยุคของการใช้ชุดเอกสารส่งผ่านทางไปรษณีย์ จากนั้น
เป็นช่วงของการเผยแพร่สื่อต่างๆทางรายการโทรทัศน์การใช้จานดาวเทียมเพื่อส่ง
สัญญาณต่อมาเป็นยุคของการเรียนแบบใช้บทเรียนการเรียนการสอนโดยใช้คอมพิวเตอร์
ช่วยสอน (Computer-Assisted Instruction: CAI) บทเรียนการเรียนการสอนบนเว็บ
(Web-Based Instruction: WBI) จนถึงในยุคปัจจุบัน ซึ่งเน้นที่การเรียนการสอนผ่าน
เว็บหรือ อีเลิร์นนิง ที่เน้นในเรื่องของการเรียนการสอนแบบ Anyone from Anywhere
and at Anytime ที่ไม่มีข้อจากัดของเวลาและสถานที่ เน้นในเรื่องของเทคโนโลยี WEB
2.0 Technology ที่เน้นการปฏิสัมพันธ์ระหว่างกันมากขึ้น และเรื่องของ Online
Learning Community หรือสังคมแห่งการเรียนรู้อีกด้วย

3. ทฤษฎีทำงกำรศึกษำและหลักกำรพื้นฐำนสำหรับกำรออกแบบและพัฒนำเว็บไซต์ทำง
กำรศึกษำ
ประกอบด้วย 5 ส่วนหลักคือ
(1) ทฤษฎีการเรียนรู้
(2) ทฤษฎีระบบ
(3) ทฤษฎีการติดต่อสื่อสาร
(4) รูปแบบการเรียนการสอน
(5) การศึกษาทางไกล
1) ทฤษฎีกำรเรียนรู้
ทฤษฎีพฤติกรรมนิยม (Behaviorist Theory)
นักจิตวิทยาการศึกษา ได้แก่ Thorndike (1913) Pavlov (1927) และ
Skinner(1974) เชื่อว่าการเรียนรู้คือการเปลี่ยนแปลงพฤติกรรมที่สามารถสังเกตเห็นได้
เกิดจากการให้สิ่งเร้าจากภายนอกในสภาพแวดล้อมการเรียนรู้ นักจิตวิทยากลุ่มนี้เชื่อว่า
พฤติกรรมที่สังเกตเห็นได้เป็นการบ่งชี้อย่างชัดเจนของการเรียนรู้ที่เกิดขึ้น ไม่ใช่สิ่งที่อยู่
ในความคิดของผู้เรียน
ดังนั้น แนวทางปฏิบัติของการนาแนวคิดของนักจิตวิทยากลุ่มพฤติกรรมนิยมไปใช้
คือควรมีการแจ้งให้ทราบว่าวัตถุประสงค์ของการเรียนการสอนคืออะไร เพื่อให้ผู้เรียน
เกิดความเข้าใจและตั้งความคาดหวัง จนสามารถประเมินตนเองว่าจะสามารถได้รับผล
การเรียนรู้ประจาบทเรียนนั้นๆหรือไม่ ผู้เรียนจะต้องได้รับการประเมินผลการเรียนการ
สอนเพื่อให้ทราบว่า ตนเองมีผลการเรียนรู้
เป็นไปตามที่กาหนดไว้หรือไม่ ทั้งนี้อาจมาจากการให้ข้อมูลป้อนกลับที่เหมาะสมทั้งใน
ภาพรวมและในทุกๆ ขั้นตอนของการเรียนการสอน เพื่อให้ผู้เรียนสามารถ
ตรวจสอบได้ว่าตนเองกาลังเกิดการเรียนรู้ที่ถูกต้องหรือไม่
2

4. ทฤษฎีพุทธิปัญญำ (Cognitive Theory)
นักจิตวิทยาและนักการศึกษากลุ่มพุทธิปัญญา เชื่อว่าการเรียนรู้บางเรื่องไม่
สามารถสังเกตเห็นได้จากพฤติกรรมที่แสดงออกและการเรียนรู้ที่เกิดขึ้นมีมากกว่าการวัด
ด้วยพฤติกรรมที่เปลี่ยนแปลง นักจิตวิทยาและนักการศึกษากลุ่มนี้จึงศึกษาเกี่ยวกับการ
เรียนรู้ที่เกี่ยวข้องกับการใช้ความจา แรงจูงใจ และการคิดตลอดจนการสะท้อนที่แสดงให้
เห็นถึงกระบวนการเรียนรู้ของผู้เรียน ซึ่งนักจิตวิทยากลุ่มนี้พิจารณาว่าการเรียนรู้เป็น
กระบวนการที่เกิดขึ้นภายในของผู้เรียน ตามความสามารถในการเรียนรู้ของแต่ละบุคคล
ปริมาณความสามารถ ความพยายามที่ทุ่มเทระหว่างกระบวนการเรียนรู้ และความ
ซับซ้อนของการประมวลผล ตลอดจนโครงสร้างความรู้เดิมของผู้เรียน
ดังนั้น แนวทางปฏิบัติของการนาแนวคิดของนักจิตวิทยาและนักการศึกษากลุ่ม
พุทธิปัญญาไปใช้ได้คือ การใช้กลวิธีที่ให้ผู้เข้ารับการเรียนการสอนได้เข้าถึงสื่อการเรียน
ได้มากที่สุด เพื่อให้ผู้เข้ารับการเรียนการสอนสามารถถ่ายโอนสิ่งที่ได้รับผ่านประสาท
สัมผัสไปยังหน่วยความจาระยะสั้น เช่น การอ่าน การมอง และการสัมผัส นอกจากนี้การ
จัดลาดับเนื้อหาอย่างเป็นระบบเรียงลาดับจากง่ายไปยากและแสดงถึงความเชื่อมโยง
เช่น การใช้ผังความคิดล่วงหน้า (Advanced Organizer) จะช่วยให้ผู้เข้ารับการเรียน
การสอนเกิดการจดจาและระลึกถึงข้อมูลนั้นๆ ได้ดียิ่งขึ้น
ทฤษฎีคอนสตรัคติวิสต์ (Constructivist Theory)
นักทฤษฎีกลุ่มคอนสตรัคติวิสต์มีความคิดเห็นในเรื่องการเรียนรู้ของผู้เรียน โดย
นักทฤษฎีกลุ่มนี้เห็นว่าผู้เรียนแต่ละคนมีการแปลความหมายของข้อมูลที่ได้รับและการ
แปลความสิ่งที่อยู่รอบตัวตามการรับรู้ของแต่ละบุคคล ซึ่งมีผู้สอนทาหน้าที่เป็นผู้ช่วย
สนับสนุนการเรียนรู้ และให้คาแนะนาสนับสนุนการเรียนรู้ (facilitator, coach) โดย
ผู้สอนจะเป็นผู้ให้คาแนะนามากกว่าเป็นผู้ถ่ายทอดความรู้ กิจกรรมการเรียนจึงเน้น
สถานการณ์การเรียนรู้ ซึ่งผู้เรียนจะต้องประยุกต์ใช้ ความรู้ในการแก้ปัญหา
ดังนั้น การประยุกต์ใช้ทฤษฎีคอนสตรัคติวิสต์สาหรับการเรียนการสอน คือการ
จัดการเรียนรู้ที่ให้ผู้เข้ารับการเรียนการสอนมีส่วนร่วมและวิทยากร
ตั้งคาถามหรือเสนอสถานการณ์ปัญหากระตุ้นให้ผู้เข้ารับการเรียนการสอนคิดวิเคราะห์
และคิดแก้ปัญหา วิทยากรในฐานะที่เป็นผู้สนับสนุนการเรียนรู้จะต้องจัดเตรียม
3

5. แหล่งข้อมูลให้เพียงพอต่อการเรียนรู้ของผู้เข้ารับการเรียนการสอน อันจะนาไปสู่
การสร้างองค์ความรู้ใหม่ตามความเข้าใจของผู้เรียน นอกจากนี้การเรียนแบบร่วมมือ
(Collaborative learning) ยังช่วยกระตุ้นให้ผู้เข้ารับการเรียนการสอนแลกเปลี่ยนความ
คิดเห็นและร่วมกันทางานให้เสร็จตามที่ได้รับมอบหมาย และมีปฏิสัมพันธ์กับผู้อื่น ซึ่งจะ
นาไปสู่การเรียนรู้เพื่อส่งเสริมการเรียนรู้ขั้นสูง (higher order learning) และเกิดชุมชน
แห่งการเรียนรู้ (learning community) อีกด้วย
สรุปได้ว่ำ การใช้ความรู้ของทฤษฎีการเรียนรู้ทั้ง 3 กลุ่ม ได้แก่
พฤติกรรมนิยม พุทธิปัญญา และคอนสตรัคติวิสต์ ล้วนมีวัตถุประสงค์เดียวกัน
คือเพื่อให้ผู้เรียนบรรลุเป้าหมายการเรียนรู้ที่ได้กาหนดไว้ ตามด้วยลักษณะของความรู้
และวัตถุประสงค์ที่ต่างกัน ทฤษฎีทั้ง 3 นี้จึงเหมาะสมในสถานการณ์ที่แตกต่างกันไป
เช่น
ทฤษฎีกลุ่มพฤติกรรมนิยมจะเหมาะกับการเรียนการสอนที่เน้นข้อเท็จจริง
ในขณะที่หลักการจาก
ทฤษฎีพุทธิปัญญาจะเหมาะกับการเรียนการสอนที่เน้นหลักการและกระบวนการ
และหลักการ
ทฤษฎีคอนสตรัคติวิสต์จะเหมาะกับการเรียนการสอนที่เน้นทักษะการคิดระดับสูง
(Ally, 2006; Waterhouse, 2005)
2) ทฤษฎีระบบ (Systems Theory)
ประกอบด้วยองค์ประกอบ 2 ส่วนคือSystemic เชื่อว่าผู้เรียนสามารถเรียนรู้ได้ดี
ที่สุดผ่านการออกแบบการสอนอย่างเป็นระบบ(organized approach) นาไปสู่
นวัตกรรมการสอน (instruction innovation) ซึ่งอาจอยู่ในรูปแบบของผลงานใน
ภาพรวมหรือกระบวนการ ในขณะที่ Systematic พิจารณาแนวคิดจากนวัตกรรมซึ่งอาจ
อยู่ในรูปของผลงาน กฎเกณฑ์ หรือกระบวนการที่ได้นาไปเผยแพร่หรือปรับใช้ในองค์กร
โดยเน้นที่ผลลัพธ์ที่ได้จากนวัตกรรมนั้นๆ
4

6. 3) ทฤษฎีกำรติดต่อสื่อสำร (Communication Theory)
ถือเป็นองค์ประกอบสาคัญองค์ประกอบหนึ่งซึ่งจะเน้นในเรื่องของกระบวนการ
ส่งผ่านและถ่ายโอนข้อมูล (Message) ให้มีประสิทธิภาพสูงสุดจากผู้ส่งสาร (Sender)
ไปยังผู้รับสาร (Receiver) และผลย้อนกลับ (Feedback) จากผู้รับสารมายังผู้ส่งสาร
และการลดสิ่งแทรกแซง (noise) ให้ได้มากที่สุด เพื่อให้ผู้รับสารได้รับข้อมูลที่กระจ่าง
และถูกต้องที่สุด ดังนั้น การออกแบบสาร (Message Design) จึงถือเป็นองค์ประกอบ
สาคัญในการออกแบบการสอนแบบออนไลน์ไม่ว่าจะเป็นในเรื่องของการออกแบบหน้า
เว็บที่เหมาะสม (webpage layout) การประยุกต์ใช้หลักการติดต่อสื่อสาร
(Communication principle) เพื่อสร้างระบบนาทางที่เหมาะสม (Navigation) ด้วย
การใช้ปุ่ม (buttons) สัญลักษณ์รูป (icon) และการเชื่อมโยง (hypermedia) ด้วย
ข้อความ (text) และสื่อรูปแบบต่างๆ เช่น เสียง (audio) วีดีทัศน์ (video) และสื่อ
ประสม(multimedia) โดยแนวคิดการออกแบบสารต่างๆ เหล่านี้จะช่วยเพิ่มการส่งสาร
และการแลกเปลี่ยนข้อมูลให้มีประสิทธิภาพยิ่งขึ้น
4) รูปแบบกำรเรียนกำรสอน (ID Models)
แบบจาลองการออกแบบการสอน ADDIE ซึ่งถือว่าเป็นแบบจาลองแรกเริ่มและ
เป็นรากฐานที่สาคัญ (Generic Model) ซึ่งนาไปสู่แบบจาลองอื่นๆ ที่นิยมในปัจจุบัน
เช่น Dick and Carey Model, Kemp Model, Gagne Model เป็นต้น
แบบจาลอง ADDIE ย่อมาจาก Analysis Design Development
Implementation Evaluation โดยหลักการนาไปใช้คือผลลัพธ์ที่ได้ในแต่ละขั้น จะ
นาไปสู่การดาเนินงานในขั้นต่อๆไป โดยขั้นตอนของการวิเคราะห์ (Analysis) จะเน้นที่
วัตถุประสงค์ของกลุ่มผู้ชม/เป้าหมาย และเนื้อหา การออกแบบ(Design) จะเน้นที่ความ
สอดคล้องกับวัตถุประสงค์ของกลุ่มผู้ชม/เป้าหมาย พื้นฐานของผู้เรียน วัตถุประสงค์ของ
บทเรียนและเนื้อหา การพัฒนา (Development) เป็นการกาหนดแผนการดาเนินงาน
ผลิตอย่างเป็นขั้นตอนเพื่อตอบสนองวัตถุประสงค์ของเนื้อหา บทเรียนและการ
ประเมินผล และรูปแบบที่ได้ออกแบบไว้ การนาไปใช้(Implementation) คือการนา
ผลงานไปใช้งานจริงหลังจากที่ได้มีการทดลองนาไปใช้กับกลุ่มเป้าหมายและได้ปรับแก้
ตามข้อเสนอแนะแล้ว นอกจากนี้อาจรวมถึงการตรวจสอบและขอคาแนะนาจาก
ผู้เชี่ยวชาญด้านการออกแบบบทเรียน สุดท้ายคือ การวัดผลและการประเมิน
(Evaluation) ที่จะต้องทาอย่างมีระบบ โดยการประเมินประกอบด้วย 2 ส่วนที่สาคัญคือ
5

7. การประเมินผลระหว่างขั้นตอนพัฒนา (Formative Evaluation) เพื่อนาไปปรับปรุง
แก้ไขในการดาเนินงานขั้นต่อๆไป และการประเมินผลเมื่อพัฒนาบทเรียนเรียบร้อยแล้ว
(Summative Evaluation) เพื่อเป็นการเปิดโอกาสสาหรับความคิดเห็นจากผู้ใช้งาน
และการประเมินจากผลสัมฤทธิ์ของผู้เรียน
5) กำรศึกษำทำงไกล (Distance Education)
เป็นการศึกษาซึ่งส่งเสริมให้ผู้เรียนที่มีข้อจากัดในเรื่องของเวลาและสถานที่ได้มี
โอกาสศึกษาเล่าเรียน โดยการศึกษาทางไกลสามารถจาแนกออกได้เป็น 3 ประเภทคือ
(1) การเรียนที่ผู้เรียนอยู่ต่างสถานที่และเข้าเรียนต่างเวลา e-mail และกระดาน
สนทนาจึงถูกใช้เป็นเครื่องมือหลักในการติดต่อสื่อสาร
(2) การเรียนที่การติดต่อสื่อสารระหว่างผู้เรียนและผู้สอนเกิดขึ้นในเวลาเดียวกัน
(Synchronous Communication) แต่ต่างสถานที่
เช่น การเรียนผ่านทางระบบ teleconference การใช้ chat
เพื่อการสนทนาโต้ตอบ
(3) การเรียนแบบไม่ประสานเวลา (Asynchronous) ที่ผู้เรียนและผู้สอนเข้าร่วม
การเรียนการสอนต่างเวลากันปัจจัยพื้นฐานที่สาคัญสาหรับการจัดการเรียนรู้แบบอีเลิร์
นนิงทั้ง 5 ส่วนนี้ล้วนมีความสาคัญอย่างยิ่ง ซึ่งถ้าผู้สอนหรือผู้ออกแบบบทเรียนสามารถ
ออกแบบได้ครอบคลุมทั้ง 5 ส่วน จะทาให้การจัดการเรียนรู้ในรูปแบบนี้ประสบผลสาเร็จ
ยิ่งขึ้น
ข้อดีของกำรจัดกำรเรียนรู้ในรูปแบบอีเลิร์นนิง
คือการใช้ประโยชน์ของสารสนเทศบนฐานข้อมูลอินเทอร์เน็ตและการสร้างโอกาส
ในการศึกษา อย่างไรก็ตามการจัดการเรียนรู้ในปัจจุบันนี้ยังเป็นการเน้นที่ปฏิสัมพันธ์
ระหว่างผู้เรียนกับบทเรียน และผู้เรียนกับผู้สอนเป็นส่วนใหญ่ โดยปฏิสัมพันธ์ระหว่าง
ผู้เรียนด้วยกันเองยังมีข้อจากัด อีกทั้งเครื่องมือที่ใช้ในการปฏิสัมพันธ์ระหว่างการเรียน
ทั้ง แบบประสานเวลาและไม่ประสานเวลาก็ยังเป็นปัญหาอยู่
ดังนั้น จะเห็นได้ว่าแนวโน้มในอนาคตจะมีการนาเทคโนโลยีเว็บ 2.0 มาช่วยเสริม
และตอบโจทย์ในเรื่องของข้อจากัดของเครื่องมือที่ใช้ในกาปฏิสัมพันธ์ระหว่างการเรียน
6

8. เช่น บล็อก(Blog) สารานุกรมเสรี (Wikipedia) และการสัมมนาออนไลน์ (Webinar) จะ
เห็นได้ว่าเครื่องมือดังกล่าวจะเริ่มเข้ามามีบทบาทและเป็นเครื่องมือสาคัญที่ทาให้การ
จัดการเรียนรู้มีประสิทธิภาพและประสบความสาเร็จยิ่งขึ้น โดยเฉพาะในเรื่องของการ
เรียนรู้ การใฝ่รู้ และการแลกเปลี่ยนเรียนรู้ในสังคมออนไลน์ (Online Learning
Community)โดยสรุปการจัดการเรียนรู้แบบอีเลิร์นนิง ผู้สอนควรให้ความสาคัญกับ
ศาสตร์ด้านการศึกษา โดยเน้นการจัดการเรียนรู้ที่อาศัยทฤษฎีการเรียนรู้ ทฤษฎีการ
ติดต่อสื่อสาร และรูปแบบการจัดการเรียนรู้ที่ส่งเสริมให้ผู้เรียนสร้างความรู้โดยการ
ค้นคว้าและลงมือปฏิบัติด้วยตนเองตามความสนใจ ความถนัด และความสามารถของ
ผู้เรียน โดยใช้เครื่องมือการติดต่อสื่อสารบนออนไลน์ช่วยในการจัดกิจกรรม ซึ่งนอกจาก
จะช่วยให้ผู้เรียนได้พัฒนาตนเองตามวัตถุประสงค์การเรียนรู้ที่กาหนดไว้แล้ว ยังช่วย
พัฒนาการคิด และทักษะการสื่อสารและการมีปฏิสัมพันธ์กับเพื่อนและผู้สอนออนไลน์
ด้วย
องค์ประกอบของเว็บไซต์ทำงกำรศึกษำ
ประกอบด้วย 3 องค์ประกอบพื้นฐาน โดยมีรายละเอียดดังนี้
1) บทเรียนอิเล็กทรอนิกส์ (courseware)เป็นเนื้อหาสาระที่นาเสนอในรูปแบบ
อิเล็กทรอนิกส์ ซึ่งส่วนใหญ่มีลักษณะเป็นสื่อประสม โดยเน้นการออกแบบที่ใช้วิธีการ กล
ยุทธ์ และการให้ข้อมูลป้อนกลับแก่ผู้เรียนโดยทันทีในการนาเสนอ ที่กระตุ้นให้ผู้เรียน
เกิดการเรียนรู้ตามวัตถุประสงค์ที่กาหนดไว้ ซึ่งผู้เรียนสามารถเข้าถึงเนื้อหาได้ตามความ
ต้องการ ตลอดจนอาจมีแบบฝึกหัดหรือแบบทดสอบเพื่อให้ผู้เรียนสามารถตรวจสอบ
ความเข้าใจ ทั้งนี้อาจยึดแนวทางของ learning object
บทเรียนอิเล็กทรอนิกส์ (Courseware) ในรูปแบบของ Learning Objects เป็น
สื่อการสอนในลักษณะบทเรียนอิเล็กทรอนิกส์ที่มีขนาดเล็ก สามารถนากลับมาใช้ใหม่
โดยการจัดเรียงลาดับเนื้อหาใหม่ เกิดเป็นบทเรียนใหม่ โดยมีองค์ประกอบสาคัญในแต่
ละ Learning Object คือ
(1) วัตถุประสงค์การเรียนรู้
(2) หน่วยการเรียน
(3) แบบทดสอบ
7

9. โดยคุณลักษณะเด่นของ Learning Objects คือเนื้อหาเป็นอิสระภายในตัวเอง
สะดวกต่อการนาไปใช้และการปรับแก้ (content updated) สามารถใช้ซ้า (reusable)
แบ่งปันแลกเปลี่ยนเนื้อหาระหว่างกัน (repository) ได้ผ่านระบบบริหารการเรียนการ
สอน (Learning Management System) อีกทั้งยังเป็นการลดปัญหาไฟล์ขนาดใหญ่
และการปรับปรุงแก้ไขเนื้อหาบทเรียนได้ยาก (Davidson-Shivers, 2006;
Waterhouse, 2005; ใจทิพย์ ณ สงขลา, 2550; Khan, 2005)
งำนวิจัยในประเทศที่เกี่ยวกับรูปแบบเว็บไซต์ทำงกำรศึกษำ
ชื่อผู้วิจัย : เจนจิรา อนันตกาล
ปีที่ทำกำรวิจัย : 2548
วิจัยเรื่อง : รูปแบบโฮมเพจเว็บไซต์ทางด้านการศึกษา ระดับอุดมศึกษา
รูปแบบกำรออกแบบ
: มัลติมีเดีย
: มีความน่าเชื่อถือ
ผลกำรวิจัย
รูปแบบโฮมเพจเว็บไซต์ทางด้านการศึกษาระดับ อุดมศึกษา พบว่า
1. ควำมน่ำเชื่อถือของโฮมเพจทางด้านการศึกษาควรมีความยาวของโฮมเพจ
เมื่อเทียบกับจอภาพมีความยาวเหมาะสมกับเนื้อหา มีโครงสร้างเป็นแนวตั้ง สัญลักษณ์
สถาบันอยู่ด้านบนกึ่งกลางหน้ามีแนวการวางเมนูหลักแบบทั้งแนวตั้งและแนวนอนโดย
แนวตั้ง อยู่ด้านซ้ายและแนวนอนอยู่ด้านบน มีเมนูหลักเป็นแบบ Pop-up Menu และ
ใช้สีแสดงสถานะ การเชื่อมโยงจากเมนูหลักไปสู่เนื้อหา
2. ด้ำนเนื้อหำ จัดวางเนื้อหาแบบจัดกลาง และแสดงเนื้อหาแบบคอลัมน์เดียว
จัดวางองค์ประกอบในลักษณะมีพื้นที่ส่วนบนและใช้พื้นที่ด้านซ้ายแคบกว่าพื้นที่ด้านขวา
3. ด้ำนสี ผู้ใช้เว็บไซต์ทางด้านการศึกษาให้ความสาคัญในเรื่องการใช้สีสวยงาม
สบายตา และสื่อความหมายได้ตรงตามจุดประสงค์ และเห็นว่าลักษณะพื้นหลังสีอ่อน
ตัวอักษรสีเข้ม ใช้โทนสีเย็นเหมาะสมสาหรับเว็บไซต์ทางด้านการศึกษา
4. ด้ำนตัวอักษร ผู้ใช้ให้ความสาคัญกับตัวอักษรที่เป็นแบบที่อ่านง่าย ชัดเจน
กลมกลืนกับทุกๆหน้า
8

10. ขนาดตัวอักษรภาษาไทยของหัวเรื่องเป็น 24 point ตัวหนา ขนาดของเนื้อหา
16point ตัวปกติ ส่วนหัวเรื่องที่เป็นภาษาอังกฤษใช้รูปแบบตัวอักษรแบบลายมือ
5. ด้ำนภำพประกอบ ใช้เพื่ออธิบายเพิ่มเติมจากตัวอักษรตามความเหมาะสมของ
เนื้อหา
6. ด้ำนเสียงประกอบ ใช้เสียงประกอบสอดคล้องสมจริงเข้ากับเนื้อหาและ
ต้องการให้โฮมเพจมีเสียงดนตรีประกอบ
ชื่อผู้วิจัย : ณัฐพล ราไพ
ปีที่ทำกำรวิจัย : 2548
วิจัยเรื่อง : รูปแบบของเว็บเพจที่มีต่อผลสัมฤทธิ์ทางการเรียน
รูปแบบกำรออกแบบ
: ส่วนต่อประสาน
: ระบบนาทาง
ผลกำรวิจัย
1. กำรเชื่อมโยง
1.1 การเชื่อมโยงที่ดี ไฮเพอร์เท็กซ์ที่ใช้ควรจะมีลักษณะที่อยู่ในรูปแบบที่เป็น
มาตรฐานทั่วไป
1.2 คาที่ใช้สาหรับการเชื่อมโยงจะต้องเข้าใจง่าย มีความชัดเจน และไม่สับสน
จนเกินไป
1.3 แต่ละเว็บเพจควรมีจุดเชื่อมโยงกลับมายังหน้าแรกของเว็บไซต์ที่กาลังใช้งาน
อยู่ด้วย
1.4 ควรกาหนดให้ผู้เรียนได้เข้าสู่หน้าจอแรกที่มีคาอธิบายเบื้องต้นมีการแสดง
โครงสร้าง ภายในเว็บ
ซึ่งอาจอยู่ในลักษณะของสารบัญหรือรายการเพื่อผู้เรียนจะได้ทราบถึงขอบเขตที่จะ
สืบค้น
9

11. 2. ระบบนำทำง
เน้นการใช้งานที่เข้าถึงง่าย จะช่วยให้ผู้เรียนรู้สึกสบายใจต่อการเรียนและสามารถ
ทาความเข้าใจกับเนื้อหาได้อย่างเต็มที่ ควรกาหนดปุ่มการใช้งานที่ชัดเจน เหมาะสม
โดยเฉพาะปุ่มควบคุม เส้นทางการเข้าสู่เนื้อหา (Navigation) ไม่ว่าจะเป็นเดินหน้า ถอย
หลังรวมทั้งอาจมีการแนะนาว่าผู้เรียนควรจะเรียนอย่างไร ขั้นตอนใดก่อนหรือหลังควร
เพิ่มความยืดหยุ่นให้ผู้เรียนสามารถกาหนดเส้นทางการเรียนรู้ได้เอง
เช่น การใช้แผนผังของเว็บไซต์ (site map) ที่ช่วยให้ผู้เรียนทราบว่าตอนนี้อยู่ ณ
จุดใด หรือเครื่องมือสืบค้นที่ช่วยในการค้นหาหน้าที่ต้องการ
ชื่อผู้วิจัย : สรวงสุดา ปานสกุล
ปีที่ทำกำรวิจัย : 2545
วิจัยเรื่อง : รูปแบบการเรียนรู้กระบวนการแก้ปัญหาเชิงสร้างสรรค์แบบร่วมมือในองค์กร
บนอินเทอร์เน็ต
รูปแบบกำรออกแบบ
: มัลติมีเดีย
: เนื้อหา
: ระบบนาทาง
ผลกำรวิจัย
1. ด้ำนมัลติมีเดีย
1.1 หลีกเลี่ยงการใช้กราฟิกที่ไม่ก่อให้เกิดประโยชน์เพราะถึงแม้จะดูสวยงาม แต่
จะทาให้ผู้เรียนเสียเวลาในการรับข้อมูลที่ต้องการ แต่หากต้องมีการใช้ภาพประกอบ ก็
ควรใช้เฉพาะที่มีความสัมพันธ์กับเนื้อหาเท่านั้น
1.2 การใช้รูปภาพเพื่อเป็นพื้นหลัง ไม่ควรเน้นสีสันที่ฉูดฉาด เพราะอาจจะไปลด
ความเด่นชัดของเนื้อหาลง ควรใช้ภาพที่มีสีอ่อนๆ ไม่สว่างเกินไป รวมไปถึงการใช้เทคนิค
ต่างๆ
เช่น ภาพเคลื่อนไหว หรือตัวอักษรวิ่ง (Marquees) ซึ่งอาจจะเกิดการรบกวนการ
อ่านได้ ควรใช้เฉพาะที่จาเป็นจริงๆเท่านั้น
10

12. 1.3 ตัวอักษรที่นามาแสดงบนจอภาพ ควรเลือกขนาดที่อ่านง่าย ไม่มีสีสันหรือ
ลวดลายมากเกินไป
1.4 ควรออกแบบหน้าเว็บเพจให้เป็นมาตรฐานเดียวกันตลอดทั้ง เว็บไซต์ เพราะ
ความสม่าเสมอจะช่วยให้ผู้เรียนรู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะล่วงหน้าของ
เว็บได้ จะช่วยให้การใช้งานบทเรียนเป็นไปอย่างสะดวก แต่มีข้อควรระวังคือความ
สม่าเสมอนี้ อาจนามาซึ่งความน่าเบื่อได้
แนวทำงแก้ไข คือ สร้างความแตกต่างที่น่าสนใจในแต่ละหน้าโดยใช้
องค์ประกอบที่คล้ายคลึงกัน แต่มีสีหรือลักษณะแตกต่างกันไปเล็กน้อยเพื่อทาให้เกิด
ลักษณะพิเศษเฉพาะหน้านั้นๆ แต่ยังคงความสม่าเสมอของเว็บไซต์ได้
2. กำรออกแบบเนื้อหำ
ควรกระชับและทันสมัย หลีก เลี่ยงการใช้เว็บเพจที่มีลักษณะการเลื่อนขึ้นลง แต่
ถ้าจาเป็นควรจะให้ข้อมูลที่มีความสาคัญอยู่บริเวณด้านบนสุดของหน้าจอ
3. กำรออกแบบระบบนำทำง
3.1 ควรจัดโครงสร้างหรือจัดระเบียบของข้อมูลที่ชัดเจนมาตรฐานเดียวกัน จะ
ช่วยให้น่าใช้งานและง่ายต่อการใช้งาน
3.2 ควรเพิ่มความยืดหยุ่นให้ผู้เรียนโดยการให้อิสระในการเข้าถึงเนื้อหาผ่าน
ระบบนาทางที่มีประสิทธิภาพจะทาให้เข้าใจเนื้อหาได้อย่างเต็มที่โดยไม่ต้องเสียเวลาอยู่
กับการทาความเข้าใจการใช้งานที่สับสน
ชื่อผู้วิจัย : จิตเกษม พัฒนาศิริ
ปีที่ทำกำรวิจัย : 2539
รูปแบบกำรออกแบบ
: มัลติมีเดีย
: ส่วนต่อประสาน
: เนื้อหา
: ระบบนาทาง
: การเข้าถึงข้อมูล
ผลกำรวิจัย
11

13. 1. ด้ำนมัลติมีเดีย
1.1 การใส่ภาพประกอบ จะต้องเลือกรูปภาพที่ทาหน้าที่แทนคาบรรยายที่
ต้องการ ควรใช้รูปภาพที่สามารถสื่อความหมายกับผู้ใช้ได้ตรงตามวัตถุประสงค์
1.2 รูปภาพที่นามาประกอบ ไม่ควรมีขนาดใหญ่หรือจานวนมากเกินไป เพราะ
อาจทาให้สาระของเว็บเพจถูกลดความสาคัญลง
1.3 การใช้ รูปภาพเพื่อเป็นพื้นหลัง ไม่ควรเน้นสีสันที่ฉูดฉาด เพราะอาจไปลด
ความเด่นชัดของเนื้อหา ควรใช้ภาพที่มีสีอ่อนๆ ไม่สว่างจนเกินไป
1.4 ตัวอักษร ควรเลือกขนาดที่อ่านง่าย ไม่มีสีสันและลวดลายมากเกินความ
จาเป็น
2. กำรออกแบบส่วนต่อประสำน
2.1 เชื่อมโยงข้อมูลไปยังเป้าหมายได้ตรงกับความต้องการมากที่สุดถ้าข้อมูลที่นา
มาแสดงมีเนื้อหาสาระมากเกินไป เว็บเพจไม่สามารถนาข้อมูลทั้งหมดมาแสดงได้ ควรนา
แหล่งข้อมูลนั้น มาเขียนเป็นตัวเชื่อมโยง ผู้ใช้จะได้สามารถค้นหาข้อมูลได้อย่างถูกต้อง
และกว้างขวางยิ่งขึ้น
2.2 การสร้างตัวเชื่อมโยงจะสร้างในรูปของตัวอักษรหรือรูปภาพก็ได้
แต่ควรที่จะแสดงจุดเชื่อมโยงให้ผู้ใช้สามารถเข้าใจได้ง่าย ที่นิยมสร้างกันส่วนใหญ่เมื่อมี
เนื้อหาตอนใดเอ่ยถึงชื่อที่เป็นรายละเอียดเกี่ยวเนื่องกันก็จะสร้างจุดเชื่อมโยงทันที
2.3 ในแต่ละเว็บเพจควรมีจุดเชื่อมโยงกลับไปยังหน้าแรกของเว็บไซต์ที่กาลังใช้
งานอยู่ ทั้งนี้เผื่อว่าผู้ใช้หลงทางและไม่ทราบว่าจะทาอย่างไรต่อไปก็จะสามารถกลับมาสู่
จุดเริ่มต้นใหม่
3. กำรออกแบบเนื้อหำ
3.1 เนื้อหากระชับ สั้นและทันสมัย
3.2 เนื้อหาควรเป็นเรื่องที่สาคัญ หรืออยู่ในความสนใจของผู้คนหรือเป็นเรื่องที่
ต้องการให้ผู้ใช้ทราบ และควรปรับปรุงให้ทันสมัยอยู่เสมอ
3.3 ควรเป็นมาตรฐานเดียวกัน โดยอาจแบ่งเนื้อหาออกเป็นส่วนๆ หรือจัดกลุ่ม
เป็นหมวดหมู่
4. กำรออกแบบระบบนำทำง
4.1 ควรมีรายการสารบัญ (Index) แสดงรายละเอียดของเว็บเพจ
12

14. การที่ผู้ใช้จะเข้าไปค้นหาข้อมูลได้ ผู้สร้างควรแสดงรายการทั้งหมดที่เว็บเพจนั้น มีอยู่ให้
ผู้ใช้ทราบ โดยอาจทาอยู่ในรูปแบบของสารบัญหรือตัวเชื่อมโยง (links) จะทาให้สามารถ
หาข้อมูลได้อย่างรวดเร็ว
4.2 เมื่อใดเนื้อหาตอนใดเอ่ยถึงชื่อที่เป็นรายละเอียดที่เกี่ยวเนื่องกันให้สร้าง
ตัวเชื่อมทันที
5. กำรเข้ำถึงข้อมูล
5.1 ใช้งานง่าย เนื่องจากอะไรก็ตามถ้ามีความง่ายในการใช้งานแล้วโอกาสที่ผู้ชม
สนใจเว็บไซต์ย่อมสูงตามลาดับ
5.2 สามารถโต้ตอบกับผู้ใช้ได้อย่างทันท่วงที
5.3 ควรกาหนดจุดที่ผู้ใช้สามารถแสดงความคิดเห็นหรือให้คาแนะนากับผู้สร้างได้
เช่น ใส่ e-mail ลงในเว็บเพจ ในตาแหน่งที่เขียนควรอยู่บนสุดหรือล่างสุดของเว็บเพจ
ไม่ควรเขียนแทรกไว้ที่ตาแหน่งใดๆ ของจอภาพ เพราะผู้ใช้อาจหา e-mail ไม่พบก็ได้
ชื่อผู้วิจัย : ปทีป เมธาคุณวุฒิ
ปีที่ทำกำรวิจัย : 2544
รูปแบบกำรออกแบบ
: มัลติมีเดีย
: ส่วนต่อประสาน
: เนื้อหา
: การทดสอบความน่าเชื่อถือ
ผลกำรวิจัย
1.ด้ำนมัลติมีเดีย
การจัดทาข้อความและภาพจะต้องมีวัตถุประสงค์ มีการจัดเตรียมวางแบบและ
ขนาดของตัวอักษร สี การกาหนดปุ่มต่างๆ และการใช้เนื้อที่และภาพที่ใช้ต้องไม่ใหญ่
เกินไปและต้องไม่ใช้ เวลานานในการเชื่อมโยงมาสู่บทเรียน
2. ควรมีกำรจัดหน้ำจอภำพให้เหมำะสม
13

15. น่าอ่านและใช้การเชื่อมต่อไปยังหน้าถัดไปมากกว่าที่จะใช้การเลื่อนหน้าจอภาพ
และถ้ามีการเชื่อมโยงกับภายนอกจะต้องมีข้อความบอกไว้ว่ามีการเชื่อมโยงกับสิ่งใด
3. หลีกเลี่ยงกำรทำเนื้อหำที่ยำว
ต้องแบ่งสาระอย่างเหมาะสมหรือมีการจัดทาเป็นกลุ่ม
4. กำรทดสอบกำรใช้งำน ควรมีการประเมิน
4.1 กำรประเมินลักษณะเว็บไซต์ ควรจะทราบได้ทันทีว่าเมื่อเปิดเข้าไปแล้ว
เกี่ยวข้องกับเรื่องใด ควรบอกลักษณะและรายละเอียดของเว็บนั้น
4.2 กำรประเมินภำรกิจ (Authority) จะต้องบอกขนาดของเว็บและ
รายละเอียดโครงสร้างของเว็บ เช่น แสดงที่อยู่และเส้นทางภายในเว็บและชื่อผู้ออกแบบ
เว็บ
4.3 ประเมินกำรจัดรูปแบบและกำรออกแบบ ความซับซ้อน เวลารูปแบบที่เป็น
ที่ต้องการของผู้ใช้
4.4 ประเมินกำรเชื่อมโยง (Links) เป็นสิ่งที่จาเป็นและมีผลต่อการใช้ การเพิ่ม
จานวนเชื่อมโยงโดยไม่จาเป็นไม่เป็นประโยชน์ต่อผู้ใช้ ควรใช้เครื่องมือสืบค้นแทนการ
เชื่อมโยงที่ไม่จาเป็น
4.5 กำรประเมินเนื้อหำ (Content) เนื้อหาที่เป็นข้อความ ภาพ หรือเสียง
จะต้องเหมาะสมกับเว็บ และให้ความสาคัญกับองค์ประกอบทุกส่วนเท่าเทียมกัน
4.6 กำรประเมินผลกำรเรียน สามารถประเมินผลระหว่างเรียน การประเมินรวม
หลังเรียน เพื่อดูผลที่มีต่อผู้เรียนและดูผลที่คาดหวังไว้ ซึ่งจะนาไปปรับปรุงการสอนอย่าง
ต่อเนื่อง
5. ควำมน่ำเชื่อถือ
ควรมีการจัดทาส่วนท้ายของบทเรียนมีชื่อผู้จัดทา และอีเมล์ ที่จะติดต่อได้ วันที่
จัดทา /แก้ไขเปลี่ยนแปลง แนวการเลือกต่างๆ เพื่อให้สามารถเห็นภาพรวมทั้งหมด และ
จานวนหน้าที่มีการจัดทาและต้องไม่ยาวเกินไปหรือสั้นเกินไป และมีการปรับปรุงเว็บเพจ
อยู่เสมอ
14

16. งำนวิจัยต่ำงประเทศที่เกี่ยวกับรูปแบบเว็บไซต์ทำงกำรศึกษำ
ชื่อผู้วิจัย : Bi
ปี (ค.ศ.) : 2000
กำรออกแบบ
รูปแบบของเว็บไซต์เพื่อการศึกษามีความสัมพันธ์กับการออกแบบการสอน การ
พัฒนาเนื้อหาวิชา การส่งข้อมูลและการส่งเสริมด้านการจัดการ ส่วนประกอบของการ
ออกแบบเว็บไซต์เพื่อการศึกษา คือต้องมีการทางานเป็นทีม ผลสัมฤทธิ์ของการใช้
เทคโนโลยีเว็บขึ้น อยู่กับความสามารถตอบสนองวัตถุประสงค์การสอนและประโยชน์ที่
ต้องการจากการเรียน ส่วนทางด้านนักเรียนที่เรียนทางไกลต้องการผลย้อนกลับจาก
ผู้สอนระหว่างเรียนและผลสัมฤทธิ์ทางการสอนด้วยเทคโนโลยีขึ้น อยู่กับปฏิสัมพันธ์ที่
หลากหลาย
ชื่อผู้วิจัย : Paolo et al
ปี (ค.ศ.) : 2003
กำรออกแบบ
เสนอแนวทางในการเปลี่ยนแปลงเว็บเพจที่มีเนื้อหาที่คงที่และรวมอยู่ในที่
เดียวกัน ซึ่งเดิมหากต้องการที่จัดทาหน้าเว็บเพจที่มีความคล้ายคลึงกัน ทาการคัดลอก
หน้าเพจซ้าๆกัน เมื่อต้องการปรับปรุงเนื้อหาและโครงสร้างของเว็บเพจ ก็จะต้องตามไป
แก้ไขในทุกๆ หน้าที่มีผลกระทบ ซึ่งทาให้เกิดความยุ่งยาก ดังนั้น การเปลี่ยนให้เป็นเว็บ
เพจที่มีความยืดหยุ่นในการแก้ไข โดยจะมีนาเอาเทคนิคของการทาคลัสเตอร์ (Cluster)
จะสามารถดึงดูดความสนใจของผู้ชมได้ กล่าวคือเป็นการแยกโครงสร้างเว็บเพจที่มี
ลักษณะคล้ายคลึงกันออกมาเป็นกลุ่มๆ เพื่อใช้เป็นโครงสร้างหลักหรือเทมเพลทที่จะใช้
ร่วมกันและใช้เป็นตัวกาหนดรูปแบบของส่วนที่แสดงเป็นเว็บเพจ ส่วนค่าตัวแปรต่างๆ
และค่าของข้อมูลที่ต้องการแสดงบนหน้าเว็บที่นั้น จะจัดเก็บไว้ในฐานข้อมูล พร้อมทั้งมี
ส่วนของแอพลิเคชั่น ซึ่งอยู่ที่เซิร์ฟเวอร์ (Server) เพื่อทาการดึงข้อมูลขึ้นมาจาก
ฐานข้อมูลและทาการรวมกับโครงสร้างแล้วแปลงให้เป็นหน้าเว็บเพจที่สามารถแสดงบน
บราวเซอร์ (Browser) ได้ ทาให้การทางานมีความเป็นอัตโนมัติเพิ่มมากขึ้น และหากจะ
มีการเปลี่ยนแปลงจะเป็นเพียงการเพิ่ม แก้ไข และลบข้อมูลในฐานข้อมูลเท่านั้น
15

17. บทควำมในประเทศที่เกี่ยวกับรูปแบบเว็บไซต์ทำงกำรศึกษำ
ชื่อผู้เขียน/ ผู้แต่ง : สมคิด อเนกทวีผล
ปี : 2550
กำรออกแบบ : เว็บ 2.0
รำยละเอียด
1. Google Adsense ระบบโฆษณาเป็นลิงค์ตามแต่คาที่ผู้ใช้ค้นหา
2. flickr.com เว็บอัลบั้ม เก็บและแชร์รูปออนไลน์ที่มีการโยงเป็นชุมชน ส่งต่อ
รูปกันง่าย Bit Torrent ระบบที่ผู้ใช้ต่างก็ดาวน์โหลดไฟล์จากกันและกันเอง
3. wikipedia.com เว็บสารานุกรมที่ผู้ใช้บัญญัติคากันเอง ให้ความหมายกันเอง
และแก้ไขคาของคนอื่นได้ตลอดเวลา
4. Blog เขียนง่าย ใส่รูป เสียง คลิปได้ง่ายๆ เหมือนส่งเมล์ เผยแพร่ส่งต่อได้
กว้างขวาง
5. SEO (Search Engine Optimization) ลงทุนกับเทคนิคทาให้ลิงค์เว็บบริษัท
ตัวเองได้อยู่หน้าแรกบนๆ ใน Google, เสิร์ชอื่นๆ
ชื่อผู้เขียน/ ผู้แต่ง : สุนิตย์ เชรษฐาและ ชิตพงษ์ กิตตินราดร
ปี : (ม.ป.ป.)
กำรออกแบบ : เว็บ 2.0
รำยละเอียด
1. Wikipedia เป็นสารานุกรม Online ขนาดใหญ่ที่สุด ไม่ว่าใครก็ได้สามารถ
สร้าง แก้ไข และปรับปรุงเนื้อหาอย่างแทบไม่มีขีดจากัด
2. flickr.com ซึ่งเป็นเว็บไซต์ที่เปิดให้ผู้ใช้สามารถส่งรูปภาพอะไรก็ได้ขึ้นระบบ
3. Blog คือเว็บไซต์ส่วนตัวสาเร็จรูป ที่ผู้ใช้เพียงสมัครสมาชิกกับผู้ให้บริการและ
เขียนข้อความที่ต้องการลงไป พร้อมให้ใครก็ได้เข้ามาอ่านทันที
4. Feed คือระบบที่ส่งข้อมูลขึ้น หน้าจอคอมพิวเตอร์อย่างอัตโนมัติทุกครั้งที่มี
การเพิ่มเติมหรือเปลี่ยนแปลงข้อมูล
5. digg สามารถให้คะแนนเนื้อหาที่ผู้ใช้คนอื่นส่งขึ้นระบบได้อย่างอิสระ
16

18. บทควำมต่ำงประเทศที่เกี่ยวกับรูปแบบเว็บไซต์ทำงกำรศึกษำ
ชื่อผู้เขียน/ผู้แต่ง : Khan
ปี : 2005
กำรออกแบบ
: ส่วนต่อประสาน
: เนื้อหา
: ระบบนาทาง
: การเข้าถึงข้อมูล
: การทดสอบ
ผลกำรศึกษำ
1. กำรออกแบบส่วนต่อประสำน
1.1 หน้าจอเว็บไซต์แสดงผลปกติหรือไม่เมื่อเปิดใช้กับโปรแกรมค้นหาเว็บ
(Internet Explorer, Netscape หรือโปรแกรมค้นหาอื่นๆ)
1.2 องค์ประกอบต่อไปนี้ที่ช่วยให้เนื้อหาบทเรียนมีความสมบูรณ์ (ระบุทุก
องค์ประกอบที่ช่วยให้เนื้อหาบทเรียนสมบูรณ์ ได้แก่ ภาพและวัตถุ เสียง วีดิโอ
ภาพเคลื่อนไหว)
1.3 ควรเว้นช่องว่างอย่างเหมาะสมหรือประมาณ 20% เพื่อช่วยให้ผู้อ่านผ่อน
คลายสายตาในขณะอ่าน
1.4 หน้าหลัก/โปรแกรมน่าสนใจและดึงดูดด้วยภาพหรือเสียง (แต่ละคนอาจชอบ
สีและรูปแบบอักษรต่างกัน)
1.5 ข้อความในเว็บไซต์อ่านได้ง่ายและชัดเจน
1.6 สีพื้นหลังและสีส่วนหน้าที่ใช้ในการนาเสนอเว็บไซต์กลมกลืนกัน
1.7 เว็บไซต์มีรูปแบบการนาเสนอเหมือนเอกสารประกอบบทเรียนจะทาให้
ผู้เรียนสามารถเชื่อมโยงระหว่างบทเรียนออนไลน์และเอกสารประกอบบทเรียน
1.8 องค์ประกอบในการนาเสนอ เช่น ชื่อเรื่อง เนื้อหา การเชื่อมโยงและอื่นๆ ใช้
รูปแบบเดียวกัน
17

19. 1.9 ใช้รูปแบบอักษรมาตรฐานทั่วไป โดยแบบอักษรจะไม่เปลี่ยนแปลงเมื่อ
แสดงผลบนจอคอมพิวเตอร์หรือโปรแกรมค้นหาเว็บอื่นๆ (เช่น Arial สาหรับ
ภาษาอังกฤษ)
1.10 มีโครงสร้างการใช้สี ตาแหน่งการวางชื่อเรื่องและเนื้อหารูปแบบเดียวกัน
1.11 ภาพและวัตถุช่วยให้ผู้เรียนบรรลุวัตถุประสงค์ของบทเรียน
1.12 ความเร็วในการแสดงข้อมูลและแสดงผลบนหน้าจอ (ภาพหรือวัตถุขนาด
ใหญ่ใช้เวลานานในการดาวน์โหลดและแสดงผลบนหน้าจอ นอกจากนี้ในการถ่ายข้อมูล
และแสดงผลแตกต่างกันไปตามความเร็วของอินเทอร์เน็ตของผู้ใช้งาน)
1.13 มีการอ้างอิงผู้ออกแบบและพัฒนาบทเรียน
1.14 มีการเชื่อมโยงเว็บไซต์ไปยังเว็บไซต์ของหน่วยงานอื่นๆ
1.15 เว็บไซต์มีการเชื่อมโยงไปยังหน้าประวัติของผู้สอน
1.16 ภาพและวัตถุที่มีสีสันต่างๆ มีความชัดเจนเมื่อพิมพ์แบบขาว-ดา1.17 แต่ละ
หน้าสามารถพิมพ์ออกมาได้ขนาดพอดีในหนึ่งหน้าเอกสาร
2. กำรออกแบบเนื้อหำ
2.1 บทเรียนใช้กลวิธีเพื่อกระตุ้นความสนใจของผู้เรียน ได้แก่ ภาพเคลื่อนไหว
(ภาพเหตุการณ์สั้นๆ) วัตถุเคลื่อนไหว (เช่น วัตถุสกุล .gif) ภาพประกอบ ความแตกต่าง
ระหว่างวัตถุและส่วนประกอบอื่นๆ ใช้สี เสียงและสัญลักษณ์ที่เกี่ยวข้องกับเนื้อหา
2.2 ในบทเรียนมีการใช้กลวิธีเพื่อพัฒนาความคงทนในการเรียน
ได้แก่ หน้าจอการนาเสนอจัดเป็นลาดับ เนื้อหา จัดเป็นระบบ เกี่ยวข้องกันอย่างมี
ความหมาย มีบทเกริ่นนาเข้าสู่เนื้อหา ใช้รูปแบบโครงสร้างการนาเสนอเดียวกันของแต่
ละหน้าการนาเสนอ เช่น การวางชื่อเรื่อง ภาพ บทความและส่วนประกอบอื่นๆ มี
เครื่องมือที่แบ่งเนื้อหาออกเป็นส่วนๆอย่างเหมาะสม มีคานาและบทสรุป
2.3 บทเรียนนาเสนอใจความสาคัญเพียงประเด็นเดียวในหนึ่งย่อหน้า
2.4 บทความแบ่งออกเป็นช่วงๆ และสามารถอ่านแบบกวาดสายตาเพื่อความ
เข้าใจ (หัวข้อหลักและหัวข้อย่อยในบทเรียนควรสั้น กะทัดรัดและสอดคล้องกันอย่างมี
ความหมายเพื่อให้ผู้อ่านอ่านกวาดสายตาหาใจความสาคัญได้)
18

20. 2.5 บทเรียนใช้องค์ประอบของสื่อประสม ได้แก่ ข้อความ ภาพและวัตถุ ภาพ
เคลื่อนไหว เสียง วีดีโอ และการผสมผสานของสื่อประสมเอื้อให้ เกิดการเรียนรู้บทเรียน
ได้ อย่างมีประสิทธิภาพ
2.6 สื่อประสมที่ใช้ในบทเรียนมีประสิทธิภาพในการสร้างการเรียนรู้อย่างมี
ความหมายมากน้อยเพียงใด
2.7 บทเรียนมีการนาเสนอองค์ประกอบทางภาษาอย่างถูกต้อง
(ไวยากรณ์ เครื่องหมายวรรคตอน การสะกดคา)
2.8 บทเรียนมีการนาเสนอองค์ประกอบสื่อประสมอย่างเหมาะสมและสอดคล้อง
กัน (ข้อความ ภาพและวัตถุ ภาพเคลื่อนไหว เสียง วีดีโอ)
2.9 บทเรียนสามารถพิมพ์สาหรับผู้เรียนและผู้สอนได้สะดวก
3. กำรออกแบบระบบนำทำง
3.1 บทเรียนมีโครงสร้างเนื้อหา เช่น หน่วยการเรียนรู้ สาระความรู้ กิจกรรมการ
เรียนรู้และอื่นๆ เพื่อนาทางให้ผู้เรียนศึกษาบทเรียน
3.2 บทเรียนมีแผนผังเว็บไซต์ เช่น ภาพรวมของบทเรียนเพื่อนาทางให้ผู้เรียน
ศึกษาบทเรียน
3.3 บทเรียนควรถามให้ผู้เรียนถ่ายโอนข้อมูลขนาดใหญ่ เช่น เสียง วีดีโอ และ
ภาพขนาดใหญ่ลงในหน่วยความจาหลักก่อน เพื่อหลีกเลี่ยงปัญหาติดขัดขณะเรียน
3.4 การเชื่อมโยงมีสัญลักษณ์และบอกจุดหมายในการเชื่อมโยงแก่ผู้เรียนเพื่อให้
ผู้เรียนตัดสินใจในการเลือกการเชื่อมโยง
3.5 บทเรียนที่มีการเชื่อมโยงภายในเว็บไซต์มากเกินไปอาจทาให้ผู้เรียนสับสน
3.6 บทเรียนที่มีการเชื่อมโยงภายนอกมากเกินไปอาจทาให้ผู้เรียนสับสน
3.7 เลือกใช้สัญลักษณ์ที่ผู้เรียนคุ้นเคย มีความชัดเจนสอดคล้องกับเนื้อหาที่
ต้องการเชื่อมโยง
3.8 มีการใช้สีรูปแบบเดียวกันเพื่อแสดงการเชื่อมโยงที่ผู้เรียนได้เข้าถึงและยัง
ไม่ได้เข้าถึง สีมาตรฐานในการแสดง การเชื่อมโยง สีฟ้าสาหรับการเชื่อมโยงที่ผู้เรียนยัง
ไม่ได้เข้าถึง และสีแดงหรือสีม่วงสาหรับการเชื่อมโยงที่ผู้เรียนได้เข้าถึงแล้ว
3.9 บทเรียนมีความยืดหยุ่นในการเรียนผ่านคาสั่งในบทเรียน โดยผู้เรียนมี
ทางเลือกต่างๆ ในการศึกษาบทเรียน
19

21. 3.10 บทเรียนมีการแนะนาแนวทางการเรียน (ผู้เรียนมักจะดาเนินการศึกษา
บทเรียนตามการเชื่อมโยงที่ปรากฏในบทเรียน
ดังนั้น ควรมีการวางแผนการเชื่อมโยงหลายมิติอย่างมีประสิทธิ ภาพเพื่อเป็น
แนวทางแนะนาการศึกษาบทเรียนแก่ผู้เรียน
3.11 ควรมีการนาทางเข้าสู่บทเรียนที่ง่าย ผู้เรียนสามารถเชื่อมโยงหน้าต่างๆ ได้
สะดวก ไม่สับสนหรือหลงทาง
3.12 ควรหลีกเลี่ยงการเชื่อมโยงบทเรียนไปยังเว็บไซต์ที่ไม่สมบูรณ์
3.13 ควรมีช่องทางการค้นหาข้อมูลทั้งภายในเว็บไซต์และภายนอกเว็บไซต์
3.14 ควรใช้รูปแบบสัญลักษณ์และคาเดียวกันเพื่อช่วยนาทางในบทเรียน
3.15 ทุกหน้าควรมีการเชื่อมโยงกลับมายังหน้าหลัก
3.16 การเชื่อมโยงภายในบทเรียนควรมีการเชื่อมโยงไปยังหน้าต่างๆ ที่ถูกต้อง
3.17 การเชื่อมโยงภายนอกบทเรียนควรมีการเชื่อมโยงที่ถูกต้อง
3.18 ไม่ควรมีการเชื่อมโยงหลายมิติในบทเรียนมากเกินไป
3.19 คุณภาพระบบเสียงและวีดีโอโดยตรงจากเว็บไซต์ควรมีประสิทธิภาพ
4. กำรทดสอบกำรใช้งำน
4.1 ทดลองใช้กับกลุ่มผู้เรียนกลุ่มตัวอย่าง
4.2 ผู้เรียนตอบคาถามต่างๆ ในบทเรียนได้ภายในเวลาที่กาหนด
4.3 ผู้เรียนรู้ว่ากาลังอยู่ตาแหน่งใดในบทเรียนและนาทางการเรียนได้โดยไม่ต้อง
คาดเดา
4.4 การใช้คาศัพท์เฉพาะในบทเรียนสามารถทาความเข้าใจได้ง่าย
4.5 ผู้เรียนเห็นตัวอย่างบทเรียนที่จะศึกษา
4.6 เว็บไซต์ออกแบบมาเพื่ออานวยความสะดวกให้ผู้เรียนเข้าถึงเนื้อหาเฉพาะที่
ต้องการได้อย่างสะดวก ภายในการเชื่อมโยงไม่เกิน 3 ครั้ง
5. กำรเข้ำถึงข้อมูล
5.1 เว็บไซต์ออกแบบมาให้ผู้เรียนจานวนมากเข้าถึงบทเรียนได้มากน้อยเพียงใด
20

22. 5.2 บทเรียนควรมีข้อความสารองอธิบายภาพและวัตถุ (ข้อความสารองอาจไม่ใช่
ข้อความตัวอักษร สามารถใช้โปรแกรมถ่ายทอดข้อมูลได้ด้วยเสียง ซึ่งเป็นสิ่งจาเป็น
สาหรับผู้บกพร่องทางการมองเห็น)
5.3 บทเรียนควรมีข้อความบรรยายประกอบการฟัง (ผู้บกพร่องทางการได้ยิน
สามารถอ่านข้อความบรรยายประกอบการฟังได้)
5.4 หน้าจอสามารถปรับขนาดให้เหมาะกับผู้บกพร่องทางสายตา
5.5 สามารถมองเห็นความแตกต่างของสีที่ใช้ในการนาเสนอบทเรียนอย่างชัดเจน
เพื่ออานวยความสะดวกแก่ ผู้บกพร่องทางสายตา
5.6 ผู้เรียนสามารถใช้แป้นพิมพ์อักษรแทนการใช้เมาส์ หรืออุปกรณ์เคลื่อน
ตาแหน่งในการนาทางศึกษาบทเรียน
2) กำรติดต่อสื่อสำร (Communication)
เครื่องมือในการติดต่อสื่อสารเป็นเครื่องมือที่ช่วยให้ผู้เรียนได้ติดต่อสอบถาม
ปรึกษาหารือ และแลกเปลี่ยนความคิดเห็นระหว่างผู้เรียนและผู้สอน และระหว่างผู้เรียน
กับเพื่อนร่วมชั้นเรียนคนอื่นๆ โดยเครื่องมือที่ใช้ในการติดต่อสื่อสารอาจแยกได้เป็น 2
ประเภท คือ
แบบประสำนเวลำ (Synchronous)
แบบไม่ประสำนเวลำ (Asynchronous)
เครื่องมือพื้นฐานที่ใช้ในการติดต่อสื่อสารออนไลน์ที่เป็นที่นิยมกันอย่างแพร่หลาย
ตั้งแต่อดีตและยังคงได้รับความนิยมอย่างแพร่หลายในปัจจุบัน ได้แก่ แชทไปรษณีย์
อิเล็กทรอนิกส์ กระดานอภิปรายและกระดานประกาศ ภายหลังได้รับอิทธิพลด้วย
เครื่องมือติดต่อสื่อสารต่างๆของ WWW 2.0 เทคโนโลยี เช่น
บล็อก วิกิ ทาให้การติดต่อสื่อสารมีความเป็นพลวัฒน์ (Dynamic) มากยิ่งขึ้น
รายละเอียดต่างๆ ดังนี้ (จินตวีร์ คล้ายสังข์ และประกอบ กรณีกิจ, 2552)
แช็ท (Chat) เป็นการสื่อสารแบบประสานเวลา ซึ่งเหมาะกับการแลกเปลี่ยน
สารสนเทศในกลุ่มเดียวกัน และสามารถทบทวนไฟล์การสนทนาของกลุ่มได้
ไปรษณีย์อิเล็กทรอนิกส์ (e-mail) เป็นการสื่อสารแบบไม่ประสานเวลา ซึ่งเป็น
เครื่องมือที่ช่วยให้ผู้เรียนสามารถติดต่อสื่อสารกับผู้สอนหรือเพื่อนร่วมชั้น เรียนได้โดยส่ง
21

23. ข้อความในรูปจดหมาย พร้อมทั้ง แนบไฟล์ไปยังพื้น ที่ส่วนตัวของผู้รับ จึง
สามารถนาไปประยุกต์ใช้ได้กับการปรึกษารายบุคคล การส่งงานและการให้ข้อมูล
ป้อนกลับแก่ผู้เรียน
กระดำนอภิปรำยและกระดำนประกำศ (Discussion Board and Bulletin
Board) เป็นการสื่อสารแบบไม่ประสานเวลา ซึ่งสนับสนุนให้ผู้สอนและผู้เรียนประกาศ
ข้อความ ไฟล์ และสารสนเทศ ในพื้นที่ที่ผู้สอนเตรียมไว้ให้และผู้สอนและผู้เรียนสามารถ
โต้ตอบหรือดาวน์โหลดไฟล์เหล่านั้นได้ ซึ่งผู้เรียนสามารถติดตามการสนทนาโต้ตอบใน
ประเด็นที่ต้องการได้
บล็อก (Blog) เป็นการสื่อสารแบบไม่ประสานเวลา ซึ่งสนับสนุนให้ผู้เรียนเขียน
บันทึกการเรียนรู้ประจาวัน และเปิดโอกาสให้ผู้สอนและเพื่อนร่วมชั้น เรียนสามารถให้
ข้อมูลป้อนกลับ เสนอข้อคิดเห็นหรือคาแนะนาแนบไปกับบันทึกนั้นได้
วิกิ (Wiki) เป็นการสื่อสารแบบไม่ประสานเวลา โดยสนับสนุนให้ผู้เรียนและกลุ่ม
สามารถสร้างและแก้ไขเอกสารร่วมกัน ซึ่งสนับสนุนการเรียนแบบร่วมมือ ทั้งนี้กลุ่ม
ผู้เรียนสามารถบันทึกและร่วมกันทางานในพื้นที่ส่วนกลางร่วมกัน โดยผู้สอนอาจใช้
เครื่องมือการติดต่อสื่อสารอื่นร่วมด้วย เพื่อให้สมาชิกในกลุ่มได้ร่วมอภิปรายและตกผลึก
ความคิดได้
บทควำมต่ำงประเทศที่เกี่ยวกับรูปแบบเว็บไซต์ทำงกำรศึกษำ
ชื่อผู้เขียน/ ผู้แต่ง : Tim and John
ปี (ค.ศ.) : 2009
กำรออกแบบ : เว็บ 2.0
รำยละเอียด
Google AdSense, Flickr, Bit Torrent, Napster, blogging, upcoming.org
and EVDB, search engine optimization, cost per click, web services,
participation, wikis, tagging ("folksonomy"), syndication
ชื่อผู้เขียน/ ผู้แต่ง : Paul
ปี (ค.ศ.) : 2006
22

24. กำรออกแบบ : เว็บ 2.0
รำยละเอียด
Flickr, YouTube, MySpace, Wikipedia, and the entire blogosphere,
share digital
การพัฒนาเว็บไซต์สาหรับการเรียนการสอน ตามแนวทางของ ADDIE Instructional
Design Model ซึ่งประกอบด้วยขั้น ตอนดังนี้
1) กำรวิเครำะห์ (Analysis)
ฝ่ายผู้ผลิต/ผู้ดูแลเว็บไซต์ (Webmaster) : การวิเคราะห์วัตถุประสงค์ของเว็บไซต์
กลุ่มผู้ชม/เป้าหมาย เนื้อหา และศึกษาแหล่งข้อมูลต่างๆ
ฝ่ายผู้สอนและ/หรือนักออกแบบการเรียนการสอน : การวิเคราะห์ (Analysis)
คือการวิเคราะห์วัตถุประสงค์ของบทเรียนผู้เรียนพื้นฐานของผู้เรียน เนื้อหา แหล่งความรู้
และสื่อที่เหมาะสม
2) กำรออกแบบ (Design)
ฝ่ายผู้ผลิต/ผู้ดูแลเว็บไซต์ (Webmaster) : การออกแบบ (Design) คือการ
กาหนดโครงสร้างเว็บไซต์ (Site Structure) รายละเอียดหน้าเว็บเพจ ทั้งนี้ เพื่อให้
สอดคล้องกับวัตถุประสงค์ของเว็บไซต์ กลุ่มผู้ชม/เป้าหมาย และเนื้อหา โดยพิจารณาถึง
การจัดระบบข้อมูลสารสนเทศ (Chunking information) เพื่อเอื้อ
แก่ผู้เข้าชมเว็บไซต์และ/หรือผู้เรียน เว็บไซต์ส่วนใหญ่จะมีการจัดลาดับเนื้อหาโดย
เรียงลาดับตามความสาคัญมากไปน้อย หรือหลักการโดยภาพรวมลงไปสู่รายละเอียด
ปลีกย่อย (hierarchy of importance) ในอีกลักษณะหนึ่งคือรูปแบบการจัดลาดับตาม
ความสัมพันธ์ (Relations) โดยนาเสนอข้อมูล สารสนเทศจากการคาดเดาใจผู้เข้าชมว่า
อะไรคือสิ่งที่ผู้ชมคาดหวังว่าจะเจอก่อนหลัง อาจเริ่มจากข้อมูลที่ผู้เข้าชม/ผู้เรียนมี
ความคุ้นเคยมากไปน้อย เพื่อให้ผู้ชมสามารถเข้าถึงข้อมูลที่ต้องการได้
23

25. บทที่ 2
หลักกำรออกแบบเว็บไซต์ทำงกำรศึกษำ
หลักการพื้นฐานในการออกแบบจึงเข้ามามีบทบาทสาคัญที่ผู้ออกแบบเว็บไซต์
ทางการศึกษาควรพิจารณา คือ การเน้นข้อความสาคัญความตรงกันข้าม ความสมดุล
การวางแนว การทาซ้า การเลือกใช้สี และการเลือกใช้ภาพนอกจากหลักการออกแบบใน
ข้างต้นแล้วยังมีข้อควรพิจารณา คือ หลักการเพิ่มเติมสาหรับการออกแบบเว็บไซต์ทาง
การศึกษา ได้แก่ ความเรียบง่าย ความสม่าเสมอ ระบบนาทางคุณภาพในการออกแบบ
การออกแบบหน้าจอ ความละเอียดของจอภาพ และการนาเสนอเนื้อหา
1. หลักกำรพื้นฐำนในกำรออกแบบเว็บไซต์ทำงกำรศึกษำ
1.1 กำรเน้นข้อควำมสำคัญ แนวทางในการพิจารณาการเน้นข้อความสาคัญคือ
ให้ผู้ออกแบบถามตนเองดังนี้
1). ส่วนใดที่เราดูเป็นส่วนแรก ส่วนที่สอง ส่วนที่สาม
2). การที่เราดูสิ่งนั้น ก่อนเป็นเพราะอะไร
3). ผู้ออกแบบมีเทคนิควิธีอะไรในการจัดลาดับองค์ประกอบต่างๆในหน้ากระดาษ
เช่น
- สี
- ขนำดพื้นผิว
- ตำแหน่ง
4). จะเน้นการจัดข้อมูลให้เป็นระเบียบอย่างไร
เนื่องจากการเน้นเข้ามามีบทบาทสาคัญในการออกแบบเพื่อให้ผู้อ่าน/ผู้เข้าชม
เว็บไซต์เข้าใจง่ายขึ้น เน้นความสาคัญของส่วนประกอบสาคัญ ทาให้เป็นจุดสนใจของผู้
เข้าชมเว็บไซต์ และทาให้ผู้อ่านเข้าใจในสิ่งที่เราต้องการสื่อได้ง่าย สามารถดึงดูดผู้อ่าน
ได้มากที่สุดหลังจากนั้น เน้นคาหรือประโยคที่คิดว่ามันสามารถดึงดูดความสนใจของ
ผู้อ่านได้ โดยการกาหนลาดับของการมอง ส่วนประกอบสาคัญในการมองคือสิ่งกระตุ้น