รายวิชา 204420 คอมพิวเตอร์เพื่อการเรียนรู้ หน่วยที่ 5 “ แนวคิดและหลักการออกแบบ บทเรียนช่วยสอนบนเว็บ”

5.1 สื่อในระบบการศึกษาทางไกล 5.2 Web - based Instruction (WBI)

5.1 สื่อในระบบการศึกษาทางไกล 5.1 สื่อในระบบการศึกษาทางไกล Same Time / Same Place Same Time / Different Place Different Time / Same Place Different Time / Different Place (The 4-Square Map of Groupware Option-Johansen et al.)

5.2 Web-based Instruction (WBI)

5.2.1 ความรู้เบื้องต้นเกี่ยวกับ WBI 2) WBI Features 3) ลักษณะการใช้ Web เพื่อการเรียนการสอน ในปัจจุบัน 4) ลักษณะสำคัญของ WBI

1) ความหมายของ WBI The instruction delivered via the Web to a remote audience is called web-based instruction (Relan & Gillani, 1997).

การสอนบนเว็บเป็นโปรแกรมการเรียนการสอน ในรูปของสื่อหลายมิติ (hypermedia) ที่นำคุณลักษณะและทรัพยากรต่าง ๆ ที่มีอยู่ใน Web มาใช้ประโยชน์ในการจัดสภาพแวดล้อมที่สนับสนุนให้เกิดการเรียนรู้ (Khan,1997)

2) WBI Features Key Features Additional Features

Key Features - Interactive - cross - cultural - multimedial interaction - open system - multiple expertise - online search - industry supported - device, distance, - learner controlled time independent - online resource - globally accessible - distributed - electronic publishing - uniformity world-wide

Additional Features - Convenient - Self-contained - Ease of Use - Online Support - Authentic - Course Security - Environmentally friendly - Cost - effective

Additional Features ต่อ - Ease of Coursework Development and Maintenance - Collaborative Learning - Formal and Informal Environments - Online Evaluation - Virtual Cultures

3) ลักษณะการใช้ Web เพื่อการเรียนการสอนในปัจจุบัน 1. The Web as Source of Information 2. The Web as Electronic Book 3. The Web as Teacher 4. The Web as a Communication Medium between Teacher and Students

4) ลักษณะสำคัญของ WBI - Simply developing a Website with links to other webpages does not constitute instruction (Ritchie & Hoffman, 1997).

4) ลักษณะสำคัญของ WBI ต่อ - What is unique about WBI is not its rich mix of media features such as text, graphics, sound, animation, and video, nor its linkages to information resources around the world, but the pedagogical dimensions that WBI can be designed to deliver (Reeves, 1997).

คุณลักษณะเฉพาะของบทเรียนช่วยสอนบนเว็ป (Web-based Instruction-WBI) มิได้อยู่ที่การนำเสนอคุณลักษณะต่างๆ ของสื่อเป็นจำนวนมาก เช่น ข้อความ ภาพกราฟิก เสียง ภาพเคลื่อนไหวและภาพทัศน์ หรือแม้แต่การเชื่อมโยงไปยังแหล่งสารสนเทศต่างๆ ทั่วโลก หากแต่เป็นมิติทางการสอนที่บทเรียนช่วยสอนบนเว็ปได้รับการออกแบบให้สามารถส่งไปยังผู้เรียนได้

5.2.2 ปฏิสัมพันธ์ใน WBI 1) Instructional Interaction - ปฏิสัมพันธ์ระหว่างผู้เรียนกับบทเรียน 2) Social Interaction - ผู้สอนกับผู้เรียน ผู้เรียนกับผู้เรียน

WBI with Instruction-only Interaction Mode --A WBI that provides features for instructional interaction including hyperlinks, FAQs, exercises, and email with instructor.

WBI with Social and Instructional Interaction Mode --A WBI that provides features for social interaction and instructional interaction including email, email distribution lists, chatgroups, bulletin boards, hyperlinks, FAQs, and exercises.

5.2.3 หลักและเทคนิคการออกแบบ WBI 1) Links 2) HCI

Links ความหมายของ Links Links คือช่องทางที่เชื่อมต่อข้อมูลระหว่าง page, field ลักษณะของ Links 1. บอกทิศทาง (Directionality: one - way links, two-way links) 2. มีข้อความอธิบาย (Labeling: names, standard icons) 3. ขนาดเหมาะสม 4. ได้รับการจัดกลุ่ม (grouped together) 5. มองเห็นชัดเจน (Visibility)

ข้อแนะนำในการใช้ Links 1. ใช้ลูกศรซ้าย-ขวา หรือบน-ล่าง แสดงการเรียงลำดับของเนื้อหา 2. เมื่อใช้ลูกศรซ้าย-ขวา แสดงความต่อเนื่องของเนื้อหาเรื่อง เดียวกันแต่มีหลายหน้า ให้ลบลูกศรซ้ายของหน้าแรก และ ลูกศรขวาหน้าสุดท้าย 3. หลีกเลี่ยงการ scrolling ในกรณีที่เนื้อหาไม่จบในหนึ่งหน้า ให้ใช้ หลัก x of y strategy 4. ใช้แผนภาพแสดงให้ทราบว่าผู้เรียนกำลังอยู่ตรงเนื้อหาส่วนไหน

Human-Computer Interface (HCI) Design - The layer of the software that communicates directly to and interacts with users (Marra, 1996). องค์ประกอบสำคัญของ HCI - all messages to users; - interactions, flow, or navigation between screens or other various parts of the program; - interrelationship between messages within the program; and screen designs.

หลักพื้นฐานของ HCI 1. วิเคราะห์กลุ่มผู้เรียนเพื่อเป็นแนวทางในการพัฒนา HCI 2. พยายามทำให้ Interface มีลักษณะเรียบง่ายโดยจำกัด ทางเลือกให้ผู้เรียน 3. ออกแบบ Interface ให้ส่งเสริมผู้เรียนมีความกระตือรือล้น ที่จะทำแต่ละงานให้สำเร็จ 4. ออกแบบ Interface ให้มีระดับความยากง่ายสอดคล้องกับ ระดับการเรียนรู้ของผู้เรียน

กฎพื้นฐานการออกแบบหน้าจอสำหรับ WBI - choose a style and stick to it - avoid too much text - only use graphics for a purpose - don’t have lots of hyperlinks scattered through the text - use meaningful headings and subheadings - complex graphics will take time to load so put a simple text explanation - avoiding using too many fonts (no more than two) - edit text thoroughly