tcu_website

บทท่ี 1 ข้อมลู พืน้ ฐานเก่ียวกบั เวบ็ ไซต์ทางการศกึ ษา 37 5. โครงสร้างเวบ็ ไซต์ทางการศกึ ษา ในการจดั วางข้อมลู สารสนเทศบนเวบ็ นนั้ การจดั วางองค์ประกอบอย่างเป็ นระบบ การจัดลาดับเนือ้ หาตามความสาคัญอย่างมีระเบียบ และการออกแบบเว็บไซต์อย่างมี สนุ ทรียภาพนนั้ มีความสาคญั เป็ นอย่างยิ่ง โดยการจดั ทาโครงสร้ างเวบ็ ไซต์ (Site Structure) แบง่ ออกเป็ น 4 ประเภทตามแนวทางของ Lynch and Horton (1999) ดงั นี ้(1) แบบขนาน (Linear) หรือแบบ Sequence (เรียงลาดบั ) (2) แบบไม่ขนาน (Non-linear) (3) แบบลาดบั ขนั้ (Hierarchies) และ (4) แบบเวบ็ (Web) 1) แบบขนาน (Linear) หรือแบบ Sequence (เรียงลาดบั ) เหมาะสาหรับ เวบ็ ไซต์ทีเนือ้ หาน้อย และมีโครงสร้ างเนือ้ หาท่ีไม่ซบั ซ้อน โดยผ้พู ฒั นาต้องการให้ ผ้เู รียนศกึ ษาเนือ้ หาไปตามลาดบั ทไี่ ด้กาหนดไว้ แผนภาพท่ี 1.5 แสดงโครงสร้างเวบ็ ไซตแ์ บบขนาน (Linear) ท่ีมา www.webstyleguide.com 2) แบบไม่ขนาน (Non-linear) เหมาะสาหรับเว็บไซต์ที่มีเนือ้ หาเสริมในบาง หวั ข้อ ผู้พัฒนาจึงพยายามท่ีจะออกแบบเว็บไซต์ที่ผู้เรียนสามารถเข้าไปศึกษา เนือ้ หาเพมิ่ เตมิ ในหวั ข้อนนั้ ๆ ได้ แผนภาพท่ี 1.6 แสดงโครงสร้างเวบ็ ไซตแ์ บบไมข่ นาน (Non-linear) ท่มี า www.webstyleguide.com www.ThaiCyberU.go.th

38 บทที่ 1 ข้อมลู พืน้ ฐานเก่ียวกบั เวบ็ ไซต์ทางการศกึ ษา 3) แบบลาดบั ขนั้ (Hierarchies) เหมาะสาหรับเวบ็ ไซตท์ ม่ี ีเนือ้ หามาก และมี โครงสร้ างเนือ้ หาที่ซบั ซ้อน ผู้พัฒนาจึงพยายามท่ีจะออกแบบเว็บไซต์ที่ผู้เรียน สามารถเข้าไปศกึ ษาเนือ้ หาได้งา่ ยยง่ิ ขนึ ้ แผนภาพที่ 1.7 แสดงโครงสร้างเวบ็ ไซตแ์ บบลาดบั ขนั้ (Hierarchies) ท่มี า www.webstyleguide.com 4) แบบเวบ็ (Web) เหมาะสาหรับเว็บไซต์ที่มีเนือ้ หาซบั ซ้อนและมีความ เชื่อมโยงระหว่างหวั ข้อค่อนข้างมาก ผู้พฒั นาจึงออกแบบให้ผ้เู รียนสามารถศกึ ษา เนือ้ หาโดยการคลิกเชื่อมโยงเนือ้ หาในส่วนต่าง ๆ ได้ตามต้องการ เป้ าหมายของ การออกแบบในรูปแบบนีก้ ็เพื่อที่จะใช้ประโยชน์จากศกั ยภาพของเวบ็ ในเรื่องของ การเชื่อมโยง แต่เม่ือพิจารณาถึงการเรียนรู้ของผู้เรียนแล้ว เว็บไซต์ในลักษณะนี ้ อาจทาให้ผ้เู รียนเกิดความสบั สนในขณะเรียนได้ แผนภาพท่ี 1.8 แสดงโครงสร้างเวบ็ ไซตแ์ บบเวบ็ (Web) ทม่ี า www.webstyleguide.com

บทท่ี 1 ข้อมลู พืน้ ฐานเกี่ยวกบั เว็บไซตท์ างการศกึ ษา 39 Lynch and Horton (1999) ได้กล่าวถึงการประยุกต์การออกแบบโครงสร้ าง เวบ็ ไซต์ใช้เพื่อตอบสนองวตั ถปุ ระสงค์การเรียนการสอน โดยได้ให้ความเห็นวา่ การนาเสนอ เนือ้ หาในรูปแบบเว็บไซต์นี ้สามารถผสมผสานกนั ได้ โดยให้พิจารณาจากประสบการณ์ของ ผ้เู รียนซงึ่ จะแปรผนั ตามความซบั ซ้อนของโครงสร้างเวบ็ ไซต์ แผนภาพที่ 1.9 การประยกุ ต์การออกแบบโครงสร้างเว็บไซต์ ทีม่ า www.webstyleguide.com เวบ็ ไซต์โดยทวั่ ไปมีหลายประเภท ทงั้ นีใ้ นการจดั ทาเว็บไซต์สาหรับการศกึ ษา ควร พิจารณาความเป็ นวชิ าการ การเป็ นแหล่งเผยแพร่และแหล่งอ้างอิงของบุคคลต่าง ๆ ฉะนนั้ การจดั วางข้อมลู จงึ ควรเน้นความเรียบหรู เป็นระบบและมีระเบียบ ซง่ึ จะแตกตา่ งจากเวบ็ ไซต์ ทว่ั ไปทจี่ ะต้องออกแบบให้ดงึ ดดู ความสนใจจากผ้เู ข้าชม แผนภาพที่ 1.10 แสดงลกั ษณะข้อมลู สาหรับเวบ็ ไซต์การศกึ ษา ที่มา www.webstyleguide.com www.ThaiCyberU.go.th

40 บทท่ี 1 ข้อมลู พืน้ ฐานเกี่ยวกบั เว็บไซตท์ างการศกึ ษา การนาเสนอสารสนเทศของเว็บไซต์ต่าง ๆ นนั้ ย่อมมีวตั ถุประสงค์ท่ีแตกตา่ งกนั ไป ขึน้ อยู่กับตวั แปรที่สาคัญ 2 ตวั คือ โครงสร้ างของเว็บไซต์ และระยะเวลาการเข้าชมของ กลมุ่ เป้ าหมาย ดงั ท่ีได้กล่าวมาแล้ววา่ เวบ็ ไซต์สาหรับการศกึ ษา การอบรม การเผยแพร่และ แหล่งอ้างอิงข้อมลู จะมีการจดั วางองค์ประกอบที่เป็ นระบบ และมีการจดั ลาดบั เนือ้ หาอย่างมี ระเบียบ แผนภาพที่ 1.11 แสดงการนาเสนอสารสนเทศของเวบ็ ไซตต์ า่ ง ๆ ทีม่ า www.webstyleguide.com ดงั นนั้ ในขนั้ ตอนของการออกแบบ การจดั ทาแผนผงั เวบ็ ไซต์จงึ มีความสาคญั อย่าง มากเพ่ือที่จะได้เป็ นข้ อมูลแก่ผู้พัฒนาเว็บไซต์ต่อไป ผู้ออกแบบจัดทาแผนภาพแสดง โครงสร้ างเวบ็ ไซต์ (Concept diagram of site) จากนนั้ ผ้พู ฒั นานาข้อมลู ดงั กล่าวไปสร้ าง หน้าเวบ็ เพจโดยการจดั เรียงไฟล์ตา่ ง ๆ บนเซริ ์ฟเวอร์ (Arrangement of files on the server)

บทที่ 1 ข้อมลู พืน้ ฐานเก่ียวกบั เว็บไซตท์ างการศกึ ษา 41 แผนภาพท่ี 1.12 แสดง Concept Diagram of Site ทมี่ า www.webstyleguide.com แผนภาพที่ 1.13 ตวั อยา่ ง Site Structure (1) แผนภาพท่ี 1.14 ตวั อยา่ ง Site Structure (2) www.ThaiCyberU.go.th

42 บทที่ 1 ข้อมลู พืน้ ฐานเกี่ยวกบั เวบ็ ไซตท์ างการศกึ ษา 6. กรณีศกึ ษาการออกแบบเวบ็ ไซต์ทางการศกึ ษา การสารวจเว็บไซต์ทางการศึกษาในประเทศต่าง ๆ ในปี พ.ศ. 2548 พบว่ากว่า ร้ อยละ 50 ของหลักสูตรในระดบั อุดมศึกษาในประเทศต่าง ๆ ได้ใช้การสอนแบบอีเลิร์นนิง นอกจากนีจ้ านวนวิทยาลัยและมหาวทิ ยาลยั ท่ีเปิ ดสอนทางไกลผ่านอินเทอร์เน็ต ก็มีทีท่าว่า จะเพิ่มจานวนมากขนึ ้ เป็ นสองเทา่ จากจานวนวิทยาลยั และมหาวทิ ยาลยั ที่เปิ ดสอนทางไกล ผา่ นอนิ เทอร์เนต็ ในปี พ.ศ. 2542 จานวน 1,500 สถาบนั เพ่ิมขนึ ้ เป็ น 3,300 สถาบนั ในปี พ.ศ. 2547 ถึงปี พ.ศ. 2549 ประเทศที่พัฒนาแล้ วท่ัวโลกได้เปิ ดบริการอีเลิร์นนิง โดยใน สหรัฐอเมริกานนั้ แตล่ ะภาคการศกึ ษามีผ้สู มคั รเรียนทางอีเลิร์นนิงประมาณ 2 ล้านคน บาง มหาวิทยาลยั เช่น ฟิ นิกส์ออนไลน์ (Phoenix Online) มีนกั ศกึ ษากวา่ 140,000 คน ในแคน นาดามีมหาวทิ ยาลยั เสมือนจริงแห่งแคนาดา (Canadian Virtual University) และในองั กฤษ มียเู คอียู (UKeU) และจากรายงานของสมาคมสโลนในปี พ.ศ 2548 กล่าววา่ กว่า 65% ของ มหาวิทยาลยั ในสหรัฐ อเมริกาเปิ ดการสอนอีเลิร์นนิงในระดบั ปริญญาโทและปริญญาเอก และ 65% ในระดบั ปริญญาตรี (ศรีศกั ด์ิ จามรมาน, 2549) University of Phoenix เป็ นสถาบนั อุดมศกึ ษาที่มีจานวนนกั ศกึ ษาที่เรียนแบบอี เลิร์นนิงมากทส่ี ดุ ถงึ กวา่ 140,000 คน แนวทางในการจดั การเรียนการสอนแบบ อีเลิร์นนิงของ University of Phoenix นนั้ ยดึ หลกั เร่ืองความยืดหย่นุ ของการศกึ ษาท่ีผู้เรียนสามารถเรียน เม่ือไหร่และเวลาใดก็ได้มาเป็ นแนวทางในการบริหารสถาบัน ส่งผลให้ประสบผลสาเร็จ ทางด้านการตอบรับจากผ้ทู ่ีต้องการจะศกึ ษาตอ่ แต่มีข้อจากัดในเร่ืองของเวลาและภาระที่ ต้องรับผิดชอบ ทงั้ ในด้านหน้าท่ีการงาน และทางด้านครอบครัว University of Phoenix Online เป็นมหาวิทยาลยั เอกชนแห่งหนึ่งที่ประสบผลสาเร็จและได้รับการตอบรับเป็ นอย่างดี โดยดูจากจานวนผู้เรียนที่เพิ่มขึน้ อย่างรวดเร็ว โดยมหาวิทยาลัยแห่งนีไ้ ด้ก่อตัง้ ในปี พ.ศ. 2532 และมีจานวนนกั ศกึ ษากวา่ 140,000 คนจากรัฐต่าง ๆ ทว่ั สหรัฐอเมริกา จากกว่า 40 ประเทศทว่ั โลก (http://www.phoenix.edu, 2008)

บทที่ 1 ข้อมลู พืน้ ฐานเกี่ยวกบั เว็บไซต์ทางการศกึ ษา 43 แผนภาพที่ 1.15 University of Phoenix Online (http://www.phoenix.edu/) ในปี พ.ศ. 2542 Jones International University เป็ นมหาวิทยาลัยเสมือน (Virtual Univeristy) แห่งแรกท่ีได้รับการรับรองวิทยฐานะสถาบนั การศึกษาจากหน่วยงาน ภาครัฐ(accreditation) ในสหรัฐอเมริกา ในขณะท่ี Capella university (http://capella.edu) เป็นมหาวทิ ยาลยั เสมือนแหง่ แรกท่ีเข้าสตู่ ลาดห้นุ Nasdaq แผนภาพท่ี 1.16 Jones International University (http://jonesinternational.edu) www.ThaiCyberU.go.th

44 บทท่ี 1 ข้อมลู พืน้ ฐานเก่ียวกบั เว็บไซตท์ างการศกึ ษา แผนภาพที่ 1.17 Capella university (http://www.capella.edu) นอกจากนี ้ ในบางสถาบันอุดมศึกษาก็มีแนวทางในการส่งเสริมการเรียนการสอน แบบอีเลิร์นนิง โดยยึดหลกั ที่ว่าไม่ว่าคณุ เป็ นใคร คุณก็สามารถแสวงหาความรู้ได้ ดงั ตวั อย่าง ของมหาวทิ ยาลยั Messachusette Instutition of Technology (MIT) ที่ได้มีการจดั ทารายวชิ าใน ลกั ษณะ บทเรียนอีเลิร์นนิง (MIT Open Courseware) ท่ีผ้สู นใจสามารถสมคั รเข้าเรียนได้ แต่จะ ไม่ได้รับหน่วยกิต เช่นเดียวกบั แนวคดิ ของ Open University ประเทศองั กฤษ (Open Learning) แผนภาพที่ 1.18 ตวั อย่าง MIT Open Courseware (http://ocw.mit.edu/index.html)

บทท่ี 1 ข้อมลู พืน้ ฐานเกี่ยวกบั เว็บไซต์ทางการศกึ ษา 45 แผนภาพท่ี 1.19 ตวั อย่าง Open Learning (http://openlearn.open.ac.uk) นอกจากนี ้ในหลาย ๆ มหาวทิ ยาลยั ในเอเชียก็เร่ิมมีแนวคิดในการเผยแพร่ความรู้ ในลักษณะนีเ้ ช่นกัน ดังตัวอย่างเช่นที่ University of Tokyo ท่ีได้ เผยแพร่ เว็บไซต์ UTOpenCourseWare รวบรวมรายวิชาต่าง ๆ เพื่อเผยแพร่ ความรู้สู่สาธารณะ และ Hanyang Cyber Univerisity ของประเทศเกาหลี ท่ีได้เปิ ดหลักสูตรในระดบั อุดมศึกษา ออนไลน์ เพ่ือม่งุ หวงั จะเป็นมหาวทิ ยาลยั ทางไกลระดบั แนวหน้าตอ่ ไป แผนภาพที่ 1.20 ตวั อย่าง UTOpenCourseWare (http://ocw.u-tokyo.ac.jp/english) www.ThaiCyberU.go.th

46 บทที่ 1 ข้อมลู พืน้ ฐานเกี่ยวกบั เว็บไซตท์ างการศกึ ษา แผนภาพที่ 1.21 ตวั อย่าง Hanyang Cyber University (http://www.hanyangcyber.ac.kr) ในปี พ.ศ. 2548 โครงการมหาวิทยาลัยไซเบอร์ไทยเปิ ดหลักสูตรอีเลิร์นนิงขึน้ ในขณะที่มหาวทิ ยาลยั อสั สมั ชญั ถือเป็ นมหาวิทยาลยั เอกชนท่ีเปิ ดหลกั สตู รอีเลิร์นนิงขนึ ้ เป็ น แหง่ แรกในประเทศไทย แผนภาพท่ี 1.22 เวบ็ ไซต์ของโครงการมหาวิทยาลยั ไซเบอร์ไทย (http://www.thaicyberu.go.th/)

บทท่ี 1 ข้อมลู พืน้ ฐานเกี่ยวกบั เวบ็ ไซต์ทางการศกึ ษา 47 แผนภาพที่ 1.23 เวบ็ ไซตข์ องวทิ ยาลยั ทางไกลอนิ เทอร์เนต็ มหาวทิ ยาลยั อสั สมั ชญั (http://www.elearning.au.edu) ทงั้ นี ้ การเรียนการสอนแบบอีเลิร์นนิงไม่จากัดเฉพาะระดบั อุดมศึกษาเท่านัน้ ใน ระดบั K-12 ก็เร่ิมได้รับความนิยม ดงั ตวั อย่างเช่น โรงเรียน Florida Virtual School (FLVS) ตงั้ ขนึ ้ เมื่อปี พ.ศ. 2539 ถือว่าเป็ นโรงเรียนเสมือน (Virtual school) ท่ีใหญ่ที่สดุ โดยโรงเรียน จะเอือ้ ประโยชน์ให้กบั ผ้เู รียนท่ีอย่ใู นสถานท่ีชนบทให้มีโอกาสได้เรียนรายวิชาเดียวกนั กบั ผ้ทู ่ี อย่ใู นเมืองหลวง (Waterhouse, 2005) ไม่เพียงแต่ในสหรัฐอเมริกา สหราชอาณาจักร ญ่ีป่ นุ และสาธารณรัฐเกาหลี ท่ี ตื่นตวั และให้ความสาคญั กบั การเรียนการสอนในลกั ษณะอีเลิร์นนิง มหาวิทยาลยั ในอาเซียน หลายแห่งก็ได้มีการเรียนการสอนแบบอีเลิร์ นนิงเช่นกัน โดยมหาวิทยาลัยแห่งแรกท่ี เปิ ดหลักสูตรอีเลิร์ นนิงในประเทศต่าง ๆ ในอาเซียน ได้ แก่ Universiti Brunei Darussalam,University of Cambodia, Indonesian Open Learning University, National University of Laos, Universiti Tun Abdul Razak แห่งมาเลเซีย, e-Learning Center in Myanmar, University of the Philippines Open University, National University of Singapore, และ Can Tho University แหง่ เวียดนาม (Charmonman, 2005) www.ThaiCyberU.go.th

48 บทท่ี 1 ข้อมลู พืน้ ฐานเก่ียวกบั เว็บไซตท์ างการศกึ ษา บทสรุป องคป์ ระกอบและโครงสร้างของเวบ็ ไซตท์ างการศกึ ษาประกอบด้วย 3 องค์ประกอบ พืน้ ฐานทสี่ าคญั ดงั นี ้ (1) บทเรียนอิเล็กทรอนกิ ส์ (Courseware) เป็นเนือ้ หาสาระท่ีนาเสนอใน รูปแบบอเิ ลก็ ทรอนกิ ส์ ซง่ึ ส่วนใหญ่มีลกั ษณะเป็นสื่อประสม โดยเน้นการออกแบบที่ใช้วิธีการ กลยุทธ์ และการให้ข้อมูลป้ อนกลบั แก่ผ้เู รียนโดยทนั ทีในการนาเสนอท่ีกระต้นุ ให้ผู้เรียนเกิด การเรียนรู้ตามวตั ถุประสงค์ท่ีกาหนดไว้ (2) การติดต่อสื่อสาร (Communication) เน้นท่ี เครื่องมือในการตดิ ตอ่ สื่อสารท่ีช่วยให้ผ้เู รียนได้ตดิ ตอ่ สอบถาม ปรึกษาหารือ และแลกเปล่ียน ความคดิ เหน็ ระหวา่ งผ้เู รียนและผ้สู อนและระหว่างผ้เู รียนกบั เพื่อนร่วมชนั้ เรียนคนอื่น ๆ โดย เครื่องมือที่ใช้อาจแบ่งได้เป็ นแบบประสานเวลา (Synchronous) และ แบบไม่ประสานเวลา (Asynchronous) (3) การประเมินผลการเรียน (Assessment and Evaluation) โดยใน การเรียนแบบผสมผสานบางรายวิชาจาเป็ นต้องวดั ระดบั ความรู้ก่อนเรียน (Pre-test) เพื่อให้ ผ้เู รียนได้เลือกเรียนในบทเรียนหรือหลกั สูตรท่ีเหมาะสมมากที่สุด ซ่งึ จะทาให้การเรียนเกิด ประสิทธิภาพสูงสุด เมื่อเข้าสู่รายวิชาในแต่ละหลักสูตรก็จะมีการสอบย่อยท้ายบทเรียน (Quiz) และการสอบประมวลความรู้ก่อนท่ีจะรายวิชา (Final Examination) นอกจากการวดั และประเมินผลลัพธ์การเรี ยนรู้ของผู้เรี ยนผ่านแบบทดสอบต่าง ๆ ดังกล่าวแล้ วนัน้ กระบวนการการเรียนรู้ของผู้เรียนออนไลน์ถือได้ว่าเป็ นปัจจยั สาคญั ท่ีผ้สู อนควรพิจารณาไม่ วา่ จะเป็น จานวนครัง้ การเข้าเรียนในห้องเรียน หรือในบทเรียนออนไลน์ การเข้าร่วมกิจกรรม บนออนไลน์ เวลาที่เข้าใช้ในแต่ละบทเรียน ตลอดจนความถี่ในการแสดงความคดิ เห็นหรือ การอภปิ ราย เพื่อเป็นการวดั กระบวนการเรียนรู้ของผ้เู รียนที่อย่ใู นบริบทออนไลน์ และเพ่ือให้ เป็ นการวดั และประเมินผลมีความเท่ียงธรรมและครอบคลุมมิติการเรียนรู้ต่าง ๆ ให้ ได้มาก ท่ีสุด จากองค์ประกอบที่สาคญั ทงั้ 3 นี ้ สามารถนามาจดั ลาดบั ขนั้ ตอนการออกแบบและ พฒั นาเว็บไซต์ทางการศึกษา (ADDIE MODEL) ซงึ่ มีส่วนประกอบที่สาคญั อยู่ 2 ส่วน คือ จากฝ่ ายผ้ผู ลิต/ผู้ดแู ลเวบ็ ไซต์ (Webmaster) และจากฝ่ ายผ้สู อน หรือนกั ออกแบบการเรียน การสอน ADDIE MODEL ประกอบด้วย (1) การวเิ คราะห์ (2) การออกแบบ (3) การพฒั นา (4) การนาไปใช้ และ (5) การวดั ผลและการประเมิน โดยการจดั ทาโครงสร้ างเว็บไซต์ แบ่ง ออกเป็น 4 ประเภทตามแนวทางของ Lynch and Horton (2002) คือ 1) แบบขนาน (Linear) หรือแบบ Sequence (เรียงลาดบั ) 2) แบบไม่ขนาน (Non-linear) 3) แบบลาดับขัน้ (Hierarchies) และ 4) แบบเว็บ (Web) โดยมีตวั อย่างกรณีศกึ ษาและงานวิจัย หนงั สือ/ บทความ นามาเป็นตวั อย่างประกอบด้วย

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

50 บทท่ี 2 หลกั การออกแบบเว็บไซต์ทางการศกึ ษา (3) สารรองลงมาคืออะไร (4) สารรองลงมานี ้คือส่วนประกอบสาคญั ท่ีสามารถส่ือได้ดีที่สุด หรือไม่ (5) สารรองลงมาขนั้ ท่ี 3 คืออะไร (6) สารรองลงมาขนั้ ที่ 3 คือส่วนประกอบสาคญั ที่ สามารถสื่อได้ดที ่สี ดุ หรือไม่ (7) ส่วนประกอบสาคญั ในการมองคือส่ิงกระต้นุ หรือดงึ ดดู ความ สนใจของผ้อู ่านมากท่ีสดุ หรือไม่ แผนภาพท่ี 2.1 แผนภาพที่ 2.2 การเน้นข้อความสาคญั ท่เี หมาะสม การเน้นข้อความสาคญั ทไ่ี มเ่ หมาะสม แผนภาพที่ 2.3 เวบ็ ไซตข์ องโครงการมหาวทิ ยาลยั ไซเบอร์ไทย (http://www.thaicyberu.go.th/)

บทท่ี 2 หลกั การออกแบบเวบ็ ไซต์ทางการศกึ ษา 51 ดงั ตวั อย่างเว็บไซต์ของมหาวิทยาลัยไซเบอร์ไทยที่มีการกาหนดกลุ่มเป้ าหมายที่ ชดั เจนคือกลุ่มผู้ท่ีสนใจศกึ ษาเก่ียวกบั การเรียนการสอนอีเลิร์นนิงด้านบนในส่วนของแบนเนอร์ (สว่ นทส่ี าคญั ท่ีสดุ ) มีช่ือของมหาวทิ ยาลยั ชดั เจน ในเวบ็ ไซต์มีการเช่ือมโยงไปยงั แหล่งข้อมลู update ตา่ ง ๆ และบทเรียนให้ผ้เู ย่ียมชมสามารถเข้ามาศกึ ษาได้ นอกจากนีย้ งั มีระบบ log-in สาหรับสมาชิกเพื่อเข้าไปศกึ ษา และแลกเปลี่ยนความรู้ (ส่วนไอคอนตา่ ง ๆ เป็ นส่วนท่ีสาคญั ท่ี 2 ส่วนใหญ่คือคอลมั น์ซ้ายของหน้าจอ) ส่วนกลางของหน้าจอมีการโพสต์ประกาศสาคญั และประชาสมั พนั ธ์ตา่ ง ๆ อาจกล่าวได้ว่าวิธีการเน้นสามารถทาได้หลายวิธี เช่น ทาให้มีขนาดใหญ่ ทาให้ หนา ทาให้สว่าง การเพ่ิมลักษณะพิเศษให้กบั ส่วนประกอบสาคญั เช่น การใส่รูปแบบท่ี แตกตา่ งจากข้อความในหน้านนั้ ๆ เชน่ การเพ่ิมเงาและความหนานนู (Shadow & Bevel) ใน กรณีทเี่ ป็นภาพ การเน้นภาพให้เด่นด้วยการวางภาพบนพืน้ ขาว การใช้สีตรงกนั ข้าม การเพ่ิม เงา ทาให้เอียงเม่ือส่วนประกอบสาคญั อื่นเป็ นแนวนอน ทาให้เข้มเมื่อทกุ สิ่งรอบ ๆ เป็ นสีจาง ทาให้สวา่ งถ้าทกุ สง่ิ ทกุ อยา่ งมืด ทาให้ชดั ถ้าทกุ สิ่งทกุ อยา่ งไมช่ ดั เป็นต้น ดงั นัน้ อาจสรุปได้ว่า หลักการของการเน้น คือ การตดั สินใจเลือกข้อมูลที่สาคัญ ที่สดุ ของสารนนั้ ๆ ซ่งึ ในท่ีนีค้ ือเว็บไซต์ และนามาทาให้เดน่ ชดั ท่ีสุด ในกรณีที่มีส่วนสาคญั ของข้อมูลมากกว่าหนึ่ง จะต้องมีการวางแผนการกาหนดลาดบั ขนั้ การมอง กาหนดส่วนท่ี สาคญั ที่สุด กาหนดส่วนท่ีสาคัญรองลงมา หลังจากนนั้ ทาการเน้นความสาคญั ตามลาดบั ข้อดีของการใช้การเน้นความสาคญั ในงานคือ การช่วยให้ข้อมลู เด่นชดั ขึน้ และเอือ้ กบั ความ สะดวกในการใช้งานของผ้ใู ช้ 1.2 ความตรงกันข้าม แนวทางในการพิจารณาความตรงกนั ข้ามคือ (1) การเน้นความแตกตา่ งระหวา่ ง องค์ประกอบทางสายตา และ (2) ความตรงกนั ข้ามของ ขนาด สี พืน้ ผิว นา้ หนัก (ตวั หนา ตวั บาง) โดยหลกั ความตรงกนั ข้ามเป็ นอีกหนึ่งหนทางท่ีง่ายที่สุด และเร็วท่ีสุดในการดึง ความสนใจของผ้อู ่านมายงั สารนนั้ ๆ (ในท่ีนีค้ ือหน้าเวบ็ เพจ) หลกั ความตรงกนั ข้ามนามาใช้ ร่วมกบั หลกั การเน้นยา้ )The principle of Emphasis) เพ่ือจดั องค์ประกอบของหน้าเว็บเพจ ไม่ให้ดเู หมือนกนั มากจนเกินไป และใช้หลกั การเน้นยา้ ตามองค์ประกอบทางสายตา เม่ือทุก อยา่ งบนหน้าเวบ็ เพจดเู หมือนกนั เพราะถ้าขาดการเน้นยา้ และความตรงกนั ข้าม หน้าเว็บเพจ ก็ดเู หมือนขาดรสชาติ น่าเบ่ือ และขาดแบบแผนอนั เป็ นระบบที่ชดั เจน และเม่ือทกุ อย่างดูมี www.ThaiCyberU.go.th

52 บทที่ 2 หลกั การออกแบบเวบ็ ไซต์ทางการศกึ ษา ความสาคญั เท่ากนั ผู้ดผู ู้ชมจะทราบถึงองค์ประกอบท่ีสาคญั และส่ิงแรกที่ต้องมองก่อนได้ อยา่ งไร ความตรงกันข้ามเกิดขึน้ เมื่อมีสององค์ประกอบหรือมากกว่าแตกต่างจากอีก อันหนึ่ง หนทางท่ีจะเกิดความตรงกันข้ามประกอบ คือ การเน้นความแตกต่างระหว่าง องค์ประกอบทางสายตา เช่น การวางองค์ประกอบเล็ก ๆ พร้ อมกบั องค์ประกอบใหญ่ เช่น ตวั อกั ษรตวั เล็กกบั ตวั อักษรตวั ใหญ่ หรือรูปภาพเล็กกบั รูปภาพใหญ่ การใช้สีโทนร้ อนกับสี โทนเย็น รูปทรงเรขาคณิต หรือพืน้ ผิวมองทะลผุ ่านพืน้ สีเดียวกนั การใช้ตวั อกั ษรท่ีมีลูกเล่น อย่ตู ดิ กบั ตวั อกั ษรเรียบ ๆ พืน้ ๆ การใช้ตวั อกั ษรตวั หนาหรือมีเส้นกบั ตวั อกั ษรปกตหิ รือมีเส้น โดยการใช้หลักการเน้นยา้ ช่วยคุณจัดข้อมูลให้เป็ นระบบระเบียบ และเร่ิมทาให้เกิดความ แตกต่างตามท่ีปรากฏแก่สายตา ในขณะที่การใช้หลกั การตรงกนั ข้ามจะเน้นความแตกต่าง ทางสายตาระหวา่ งองค์ประกอบทางสายตา สรุปได้วา่ หลักการเน้นยา้ และหลักการตรงกนั ข้ามมกั จะใช้ควบคกู่ นั เสมอ ดงั ตวั อย่างเวบ็ ไซต์ของมหาวทิ ยาลยั Notre Dame มีการใช้หลกั ความตรงกนั ข้าม เพ่ือดงึ ดดู ความสนใจและจดั ระเบียบทางสายตาในตวั สาร การออกแบบด้วยความแตกตา่ ง เพียงเล็กน้อยมกั ขาดความหลากหลาย และน่าเบื่อ ดงั นนั้ เว็บไซต์นีจ้ ึงใช้ความตรงกันข้าม ของขนาดตวั อกั ษร (ใหญ่เล็ก) และนา้ หนกั )ตวั หนา กบั ตวั บาง) ความตรงกนั ข้ามของสี (Background, frame, และ text) พืน้ ผวิ ขอบ (นนู และเงา) และแม้แตค่ วามตรงกนั ข้ามพืน้ ผิว (การไล่โทนสี Background ฟ้ าเข้มไปออ่ น) แผนภาพท่ี 2.4 แผนภาพที่ 2.5 การใช้หลกั ความตรงข้ามที่เหมาะสม การใช้หลกั ความตรงข้ามทไ่ี มเ่ หมาะสม

บทที่ 2 หลกั การออกแบบเว็บไซตท์ างการศกึ ษา 53 แผนภาพที่ 2.6 College of Arts and Letters - University of Notre Dame (http://al.nd.edu) 1.3 ความสมดลุ แนวทางในการพิจารณาความสมดุลคือ (1) หลีกเล่ียงการปล่อยพืน้ ที่ใน หน้ากระดาษบางส่วนให้วา่ งเปล่า หรือใสอ่ ะไรตา่ ง ๆ ท่มี ากเกินความจาเป็ น (2) การจดั สมดลุ แบบสมมาตร (Symmetrical Balance) และแบบไม่สมมาตร (Asymmetrical Balance) (3) พยายามจดั องค์ประกอบให้ balance (ซ้าย กลาง ขวา) (4) การเลือกรูปภาพมาใส่ ให้ส่งเสริมข้อความ (5) การใส่เงาหลงั องค์ประกอบตา่ ง ๆ จะช่วยให้งานมีมิตขิ ึน้ ได้ และ (6) การบดิ หรือหมนุ ภาพหรือข้อความตา่ ง ๆช่วยเพ่ิมชีวติ ชีวาให้กบั งานได้ ทงั้ นี ้ การออกแบบท่ีสมดลุ คือ การที่นา้ หนกั ทางสายตาขององค์ประกอบภายใน หนึง่ หน้ามีการจดั วางอย่างเท่ากนั นา้ หนกั ทางสายตาคือ ส่ิงที่แสดงถงึ นา้ หนกั ทางกายภาพ ภายในหน้าหนึ่ง ๆ ยกตวั อย่างเช่น หวั ข้อที่เป็ นตวั หนา ก็จะมีนา้ หนกั ทางสายตามากกว่า ข้อความท่มี ีขนาดเล็กในบรรทดั อื่น ๆ หรือรูปสีแดงสดก็จะมีนา้ หนกั ทางสายตาที่มากกว่ารูป เดียวกันแต่เป็ นสีเทา ในขณะเดียวกนั รูปภาพท่ีน่าสนใจต่าง ๆก็จะมีนา้ หนกั ทางสายตาที่ มากกวา่ ตวั อกั ษรล้วน ๆ เน่ืองจากคนเรามีแนวโน้มท่จี ะดรู ูปภาพก่อนท่ีจะไปดทู ่ีตวั อกั ษร โดย ไม่ว่าจะเป็ นขนาด สี หรือลวดลายขององค์ประกอบต่าง ๆ ก็ล้วนมีผลต่อการรับรู้ค่านา้ หนกั ทางสายตาทงั้ สนิ ้ www.ThaiCyberU.go.th

54 บทท่ี 2 หลกั การออกแบบเวบ็ ไซต์ทางการศกึ ษา ก่อนทเี่ ราจะสามารถจดั สมดลุ ได้ดีนนั้ เราจะต้องเลือกว่าคา ข้อความ หรือรูปภาพ ใดท่ีเราควรจะเน้น และส่วนใดควรจะจดั เอาไว้ด้วยกนั จดั สิ่งที่เก่ียวข้องกนั เอาไว้ด้วยกนั เมื่อ เราได้จดั ข้อมลู เอาไว้ด้วยกนั ชุดหนงึ่ แล้ว ส่ิงที่จะต้องทาก็คือการสร้ างสมดลุ ในส่วนอื่น ๆของ หน้าด้วยข้อมลู หรือองค์ประกอบอ่ืน ๆ โดยรูปแบบการจดั วางที่เป็ นแบบสมดลุ ที่สมมาตรกนั (Symmetrical Balance) จะเป็ นรูปแบบท่ีมีองค์ประกอบทางสายตาจะสมมาตรกนั ไม่ว่าจะ เป็ นด้านข้างทงั้ สอง หรือด้านบนและด้านล่าง เราสามารถสร้ างรูปแบบของการสมดุลท่ี สมมาตรกนั ได้โดยการสร้างเส้นสมมติ (เส้น Guide & Grid) ขนึ ้ ทก่ี ึง่ กลางของหน้า จากนนั้ จงึ จดั วางองค์ประกอบที่มีความคล้ายกนั ลงไป จดั ให้อย่กู ลางหน้าโดยอาศยั ไกด์จากเส้นสมมติ ท่สี ร้างขนึ ้ ซงึ่ วธิ ีนีเ้ ป็ นวธิ ีการออกแบบง่าย ๆท่ีนกั ออกแบบมือใหม่นิยมใช้ ซง่ึ ก็ไม่ถือวา่ ผิดแต่ อยา่ งใด อย่างไรก็ตามการจดั วางหน้าเช่นนี ้จะทาให้ชิน้ งานของเราดเู ป็ นทางการ เรียบ และ แข็งจนเกินไป ขาดอารมณ์ของการเคลื่อนไหวและพลงั ทางสายตา การออกแบบโดยการจัด สมดลุ แบบสมมาตรนนั้ เหมาะกบั งานที่ค่อนข้างทางการ และเรียบ ๆ ในทางตรงกนั ข้าม หาก เราต้องการงานท่ีดมู ีชีวิตชีวามากขึน้ เราอาจจะต้องหนั ไปใช้การออกแบบโดยการจดั สมดุล แบบไม่สมมาตร (Asymmetrical Balance) โดยในการจัดสมดุลแบบไม่สมมาตรนัน้ คา ประโยคและรูปภาพต่าง ๆ จะไม่ถูกจัดวางให้เท่ากันในแต่ละด้านของเส้นสมมติตรงจุด แกนกลาง ในการจดั Balanceแบบสมมาตรนนั้ หากตรงมมุ ล่างซ้ายของหน้ามีรูปภาพอยู่ ทาง ด้านขวาก็จะถูกจัดให้เกิดการสมดลุ ขึน้ โดยการวางรูปภาพขนาดเดียวกนั เอาไว้ แต่สาหรับ การจัดสมดลุ แบบไม่สมมาตรแล้วรูปภาพนนั้ จะถกู ทาให้เกิดสมดลุ ขนึ ้ โดยการวางตวั อกั ษร รูปภาพทม่ี ีขนาดตา่ ง ๆ กนั การไล่สี ใส่ลวดลาย หรือการรวมรูปภาพเล็ก ๆเอาไว้ด้วยกนั ซง่ึ การออกแบบโดยการจัดให้เกิดสมดุลแบบไม่สมมาตรนีม้ ีความท้าทายเป็ นอย่างมาก เน่ืองจากขนาด สีสนั และสดั ส่วนขององค์ประกอบต่าง ๆจะต้องถูกจดั วางและมีนา้ หนกั ทาง สายตาทีเ่ หมาะสม การจดั องค์ประกอบต่าง ๆภายในหน้าให้สมดลุ กนั นนั้ ขนึ ้ อย่กู บั การท่ีเราสามารถ หาขนาดทเี่ หมาะสมหรือสดั ส่วนขององค์ประกอบภายในหน้าจะต้องพอดี เราจะต้องตดั สินใจ ให้ได้วา่ ส่วนใดควรจะถูกเน้นเพื่อให้รู้ว่าเป็ นส่วนที่สาคญั ที่สุด แต่การท่ีเราจะตดั สินใจได้ว่า แต่ละส่วนมีขนาดพอดีแล้วหรือไม่นนั้ ก็ถือเป็ นเร่ืองยาก ซึง่ ในเรื่องนีก้ ารฝึ กฝนเท่านนั้ จึงจะ ช่วยเราได้ ส่ิงที่เราควรฝึ กบ่อย ๆ ให้ชานาญก็คือในเร่ืองของการพิจารณาการจดั วางของ องคป์ ระกอบทางสายตาในแตล่ ะหน้า

บทที่ 2 หลกั การออกแบบเว็บไซตท์ างการศกึ ษา 55 สาหรับในเร่ืองการออกแบบนนั้ ไม่มีคาวา่ ผิดหรือถกู มีเพียงแค่หนทางที่ดีกวา่ หรือ แย่กว่าเท่านนั้ ลองทดลองทาดู และสนุกกับมัน พยายามสงั เกตดูว่าคนอื่น ๆออกแบบกัน อย่างไรและลองนาแนวคดิ บางอย่างมาใช้กบั งานในชิน้ ต่อ ๆไป อย่าลอกเลียนความคิดของ คนอ่ืนมาทงั้ หมด แต่ให้นาแนวความคดิ ท่ีดีที่สดุ ของเขามาดดั แปลงใช้ในวิธีของเราเอง อย่า ผิดหวงั หากวา่ งานของเราดไู ม่สวยงามอย่างท่ีคิดไว้ เราสามารถปรับปรุงให้ดีขนึ ้ ได้ในงานชิน้ ต่อไป (การเย่ียมชมเว็บไซต์ของบริษัทใหญ่ ๆ ท่ีมีชื่อเสียงในการออกแบบ เช่น APPLE, ADOBE เป็นต้น) ข้อแนะนาในการนาหลกั การนีไ้ ปใช้คือหากเรายงั ไม่ชานาญพอ พยามยาม จดั วางองค์ประกอบต่าง ๆให้อย่ใู นแนวเดียวกนั การจดั วางตวั อกั ษรตา่ ง ๆไว้ในแนวเดียวกนั เช่น การวางชิดด้านซ้าย จัดกึ่งกลาง หรือจัดวางชิดด้านขวา จาทาให้เกิดความสมดุล มากกวา่ การทจ่ี ดั อกั ษรแบบกระจดั กระจายไม่เป็ นแนวเดียวกนั การเลือกรูปภาพตา่ ง ๆมาใส่ ในแต่ละหน้าควรจะช่วยส่งเสริมข้อความ อย่าให้รูปภาพมาบิดเบือนข้อความของเรา และ การใสเ่ งาหลงั องค์ประกอบตา่ ง ๆ จะช่วยทาให้งานของเราดมู ีมิติขนึ ้ ได้ และการบดิ หรือหมนุ รูปภาพหรือข้อความต่าง ๆ ไม่ให้อย่ใู นแนวตงั้ หรือนอนเพียงอย่างเดียวก็สามารถช่วยสร้ าง ความมีชีวิตชีวาให้กับงานของเราได้ด้วย ดงั ตวั อย่างเว็บไซต์ของมหาวิทยาลยั Miami มี ลกั ษณะกง่ึ ทางการและไม่เป็นทางการ แผนภาพที่ 2.7 ความสมดลุ ท่เี หมาะสม แผนภาพที่ 2.8 ความสมดลุ ที่ไม่เหมาะสม www.ThaiCyberU.go.th

56 บทที่ 2 หลกั การออกแบบเว็บไซตท์ างการศกึ ษา แผนภาพท่ี 2.9 College of Arts and Sciences - University of Miami (http://www.as.miami.edu) 1.4 การวางแนว/การจดั เป็ นเส้นตรง แนวทางในการพิจารณาการวางแนว/การจัดเป็ นเส้นตรงคือ (1) การจัด ส่วนประกอบต่าง ๆ ของหน้าเวบ็ เพจ ให้เรียงอย่ใู นระนาบเดียวกนั เพื่อให้งานดเู ป็ นระเบียบ (2) การวางตาแหนง่ แบบตาราง (Grid) เช่นข้อความในหน้าหนงั สือพิมพ์ (3) การจดั ตาแหน่ง ข้อความ (Text Alignment) มี 4 แบบ ได้แก่ Flush Left, Flush Right, Centered และ Justified และ (4) แบบพิเศษอ่ืน ๆ เช่น Runaround (ข้อความล้อมรูปภาพ) และ Concrete ข้อความมีรูปแบบโดยรวมเป็นลกั ษณะตา่ ง ๆ เพ่ือเพ่ิมความนา่ สนใจ ซง่ึ การจดั แนวบรรทดั คอื การจดั สว่ นประกอบตา่ ง ๆ ของหน้ากระดาษให้เรียงอย่ใู น ระนาบเดียวกนั เพ่ือให้งานดูเป็ นระเบียบ สะอาดตา และก่อนที่คณุ จะเร่ิมออกแบบส่ิงแรกท่ี คณุ ควรกาหนดในหน้ากระดาษของคณุ ก็คือ เส้นตาราง หรือ กริด (Grid) โดยประโยชน์ของ เส้นกริดจะช่วยให้การทางานของคณุ ง่ายขนึ ้ โดยคณุ ยงั สามารถกาหนดความกว้างของขอบ และขนาดคอลัมน์ไว้ล่วงหน้าสาหรับเพจสอดคล้องกัน โดยในการออกแบบเส้นกริด เรา สามารถออกแบบโครงสร้ างของเส้นกริดไว้หลาย ๆ แบบ (Template) และจัดเก็บเอาไว้ เพราะในการทางานครัง้ ตอ่ ไปเราสามารถนาโครงสร้างที่เราเก็บไว้นนั้ กลบั มาใช้ได้

บทท่ี 2 หลกั การออกแบบเว็บไซตท์ างการศกึ ษา 57 การจัดตาแหน่งข้อความ (Text Alignment) บางครัง้ เราจะเรียกว่า Type Composition หรือ Text Composition การจดั ตาแหน่งข้อความจะช่วยให้หน้ากระดาษของ คณุ ท่มี ีตวั อกั ษรมากมายนนั้ อ่านได้ง่ายขนึ ้ และ/หรือมีความน่าสนใจมากย่ิงขนึ ้ โดยรูปแบบ ของการจดั ตาแหนง่ ข้อความมีอย่ดู ้วยกนั 2 ประเภท คอื 1. Basic Text Alignments แบง่ ออกเป็น 4 แบบ คอื (1) Flush left บางครัง้ เรียกวา่ Flush left / align left )แบบชิดซ้าย) (2) Flush right/align right )แบบชิดขวา) (3) Centered )แบบศนู ย์กลาง) และ (4) Justified บางครัง้ เรียกวา่ flush-right/flush-left )แบบปรับซ้ายขวา ตรง) 2. Advanced Text Alignments แบ่งออกเป็ น 3 แบบ คือ (1) Runaround )แบบ ล้อมรอบ) (2) Asymmetric )แบบอดลุ ภาค) และ (3) Concrete )แบบรูปธรรม) แผนภาพที่ 2.10 การวางแนวทเ่ี หมาะสม แผนภาพท่ี 2.11 การวางแนวที่ไมเ่ หมาะสม www.ThaiCyberU.go.th

58 บทที่ 2 หลกั การออกแบบเวบ็ ไซต์ทางการศกึ ษา แผนภาพที่ 2.12 แสดงตวั อยา่ ง Basic and Advanced text alignments (ที่มา: Graham, 2002) 1.5 การทาซา้ แนวทางในการพิจารณาการทาซา้ คือ (1) การจดั องค์ประกอบหลาย ๆ ชิน้ โดย กาหนดตาแหน่งทาให้เกิดช่องว่างเป็ นช่วง ๆ อย่างมีการวางแผนล่วงหน้า (2) การทาให้เกิด เอกภาพ (Unity) (3) การทาให้น่าอ่าน ต่ืนตา ต่ืนใจ และ (4) องค์ประกอบของการทาซา้ เช่น เส้น รูปทรง รูปภาพ สี พืน้ ผวิ การทาซา้ เป็ นการจดั วางองค์ประกอบหลาย ๆ ชิน้ โดยกาหนดตาแหน่งให้เกิดมี ช่องวา่ งเป็ นช่วง ๆ ตอน ๆ อย่างมีการวางแผนล่วงหน้า จะทาให้เกิดจงั หวะและลีลาขนึ ้ และ หากว่าองค์ประกอบหลาย ๆ ชิน้ นนั้ มีลกั ษณะซา้ กนั หรือใกล้เคียงกนั ก็จะยิ่งเป็ นการเน้นให้ เกดิ จงั หวะและลีลา ได้ชดั เจนย่งิ ขนึ ้ จงั หวะและลีลาลกั ษณะนีจ้ ะกอ่ ให้เกดิ ความรู้สึกท่ีตื่นเต้น ดเู คล่ือนไหวและมีพลงั ทงั้ ยงั ทาให้ดเู ป็ นหน่งึ เดียวกนั อีกด้วย อาจทาได้โดยการใช้ตวั อกั ษรท่ี เป็ นฟอนต์เดียวกัน / มีตัวอักษรท่ีมีความสัมพันธ์กันกับเนือ้ หา การใช้ รู ปภาพท่ีมี ความสมั พนั ธ์กนั กบั เนือ้ หา การใช้รูปภาพให้มีความเป็ นไปในทิศทางเดียวกนั การทาให้ภาพ พืน้ หลงั ไม่วา่ งจนเกนิ ไป การใช้เส้น เป็นต้น

บทท่ี 2 หลกั การออกแบบเวบ็ ไซต์ทางการศกึ ษา 59 หลกั การใช้การทาซา้ อาจหมายรวมถงึ ความเป็ นเอกภาพ (Unity) โดยมีความเป็ น อนั หนง่ึ อนั เดยี วกนั ซงึ่ ในการจดั ทาเลย์เอาต์หมายถงึ การนาเอาองค์ประกอบที่แตกตา่ งกนั มา วางไว้ใน พืน้ ท่ีหน้า กระดาษเดียวกนั ได้อย่างกลมกลืน ทาหน้าท่ีสอดคล้องและส่งเสริมกัน และกันในการส่ือสารความคิดรวบยอดและบุคลิกภาพของส่ือนัน้ ๆ การสร้ างเอกภาพนี ้ สามารถทาได้หลายวธิ ี เช่น 1. การเลือกใช้องค์ประกอบอย่างสม่าเสมอ เช่น การเลือกใช้แบบตัวอักษร เดียวกนั การเลือกใช้ภาพขาว ดาทงั้ หมด เป็นต้น 2. การสร้ างความต่อเนื่องกนั ให้องค์ประกอบ เช่น การจดั ให้พาดหวั วางทบั ลง บนภาพ การใช้ตวั อกั ษรท่เี ป็นข้อความ ล้อตามทรวดทรง ของภาพ เป็นต้น 3. การเว้นพืน้ ท่ีว่างรอบองค์ประกอบทงั้ หมด ซึง่ จะทาให้พืน้ ท่ีว่างนนั้ ทาหน้าที่ เหมือนกรอบสีขาวล้ อมรอบองค์ประกอบทัง้ หมดไว้ภายในช่วยให้องค์ ประกอบทงั้ หมดดเู หมือนวา่ อยกู่ นั อย่างเป็นกล่มุ เป็นก้อน สรุปวา่ การทาซา้ เป็ นหลกั การออกแบบสารท่ีต้องการส่งสารไปถึงผู้รับได้อย่างมี ประสทิ ธิภาพท่ีสดุ โดยการใช้การทาซา้ ซงึ่ การทาซา้ ท่ีดีจะทาให้หน้าเว็บเพจน่าอ่าน น่าต่ืนตา ตื่นใจ ดเู รียบร้อย การทาซา้ มีความสามารถท่ีจะช่วยทาให้ส่วนประกอบตา่ ง ๆของหน้ามาอยู่ ร่วมกนั ทาให้ดูแล้วมีความสมั พนั ธ์รวมเป็ นหน่ึง มีความเก่ียวข้อง เกี่ยวเน่ืองกนั หลักการ การทาซา้ จะมีประสิทธิภาพมากขนึ ้ หากใช้ร่วมกนั กบั หลกั การอื่น ๆ เช่น หลกั การความสมดลุ การเน้น เป็ นต้น ซึง่ ข้อควรระวงั การทาซา้ ท่ีมากเกินไป จะทาให้ดูรกตาได้ จึงควรทาให้ พอเหมาะพอดี แผนภาพที่ 2.13 การทาซา้ ท่ีเหมาะสม แผนภาพที่ 2.14 การทาซา้ ทีไ่ มเ่ หมาะสม www.ThaiCyberU.go.th

60 บทที่ 2 หลกั การออกแบบเว็บไซตท์ างการศกึ ษา 1.6 การเลือกใช้สี แนวทางในการเลือกใช้สีคือ (1) เลือกใช้สีท่ีเหมาะสมเพ่ือให้เกิดความน่าสนใจ ดงึ ดดู ส่ือความหมายได้ชดั เจน เน่ืองจากวา่ สีมีพลงั เกี่ยวกบั การรับรู้ การเลือกสีเพื่อใช้กบั สื่อ ต่าง ๆจะช่วยทาให้เกิดความน่าสนใจ ดึงดูดและสามารถสื่อความหมายได้อย่างชัดเจน สาหรับคนท่ีทางานเก่ียวกบั การใช้สีนนั้ จะต้องมีหลกั ในการเลือกสีท่ีดี เพ่ือให้งานออกมาลง ตวั ซงึ่ ถ้าหากขาดหลกั ในการเลือกใช้สีแล้ว ก็จะทาให้ดไู ม่สอดคล้องกบั การออกแบบผลงาน หรือดูซับซ้อน ส่ือความหมายได้ไม่ชัดเจน ระหว่างที่อยู่ในขัน้ ตอนของการเลือกสีที่จะใช้ จะต้องพยายามเลือกสีเพ่ือให้งานออกมาดูดี จากผู้ที่ศึกษาเร่ืองนี ้ กล่าวว่า การใช้สีพืน้ ๆ ธรรมดา ๆ ก็สามารถช่วยดงึ ดูดความสนใจจากผู้อ่านให้สนใจข้อความนัน้ ๆ ได้ โดยจาก การทดสอบเร่ืองสีพบวา่ หน้ากระดาษท่มี ีสีจะชว่ ยสร้างความสนใจได้มากกว่าท่ีไม่มีสี อีกหน่งึ วธิ ีท่ีจะสร้ างความสนใจให้กับงานได้นนั้ คือ การเพิ่มสีสนั ให้หน้ากระดาษ เพราะสีมีผลต่อ การรับรู้และช่วยในการส่ือความหมายต่าง ๆบนหน้ากระดาษ โดยการเลือกใช้สีที่ผิด อาจ ส่งผลกระทบต่อการส่ือความหมายที่ผิดตามไปด้วย โดยสีต่าง ๆ นัน้ สามารถถ่ายทอด อารมณ์ ความรู้สกึ ได้ต่างกัน ดงั เช่น สีแดง เป็ นสีท่ีให้ความรู้สึกร้ อนรุนแรง กระต้นุ ท้าทาย ต่ืนเต้น เร้ าใจ มีพลงั ความอดุ มสมบูรณ์ ความมงั่ คงั่ แดงเข้มเลือดนก ให้ความรู้สกึ น่ากลวั อันตราย น่าขยะแขยง ในขณะท่ีสีแดงสว่าง ๆก็จะทาให้นึกถึงความรัก สีเหลืองจะให้ ความรู้สกึ แจ่มใส ความสดใสร่าเริง สีทอง แสดงถงึ ความหรูหรา และสีเงนิ แสดงถงึ เทคโนโลยี สมยั ใหม่ ดงั นนั้ การออกแบบเวบ็ ไซต์และการเลือกใช้สีนนั้ จงึ ควรคานงึ ถงึ กลมุ่ เป้ าหมายและ วตั ถปุ ระสงค์ของเวบ็ ไซต์ด้วย เม่ือพจิ ารณาจากโทนสีร้อน (แดง มว่ งแกมแดง ส้ม เหลือง และ เขียวอมเหลือง) สีเหล่านีจ้ ะสร้างความรู้สึกอบอ่นุ (ต้อนรับผ้เู ข้าชม) สะดวกสบาย และดงึ ดดู ความสนใจ ในทางตรงกันข้าม โทนสีเย็น (ม่วง นา้ เงิน ฟ้ า นา้ เงินแกมเขียว และเขียว) สี เหลา่ นีจ้ ะสร้างความรู้สกึ สบาย สภุ าพเรียบร้ อย มีความชานาญ (Professional look) แตอ่ าจ ขาดความดงึ ดดู ความสนใจ และรู้สกึ หดหู่ ซมึ เศร้า

บทที่ 2 หลกั การออกแบบเวบ็ ไซตท์ างการศกึ ษา 61 สีฟ้ า สีฟ้ า สีขาว สีเหลืองสด แผนภาพที่ 2.15 การใช้สีทีเ่ หมาะสม แผนภาพที่ 2.16 การใช้สีที่ไม่เหมาะสม แผนภาพท่ี 2.17 เวบ็ ไซต์โทนสีร้อน )http://www.seattleu.edu) www.ThaiCyberU.go.th

62 บทที่ 2 หลกั การออกแบบเว็บไซตท์ างการศกึ ษา แผนภาพที่ 2.18 เวบ็ ไซต์โทนสีเย็น (http://www.umich.edu) นอกเหนือจากการใช้สีช่วยในการออกแบบแล้ว สียังช่วยส่งเสริมเอกลกั ษณ์ของ องคก์ รหรือหนว่ ยงานนนั้ ได้ โดยการใช้สีขององค์กรมาเป็นโทนสีหลกั ของเว็บไซต์ เว็บไซต์ของ จุฬาลงกรณ์มหาวิทยาลัย ใช้สีชมพูเป็ นหลักเพื่อคงเอกลักษณ์ของสีประจามหาวิทยาลัย เช่นเดียวกบั มหาวทิ ยาลยั ธรรมศาสตร์ทใี่ ช้สีแดง-เหลืองซงึ่ เป็นสีประจามหาวทิ ยาลยั เป็นหลกั แผนภาพท่ี 2.19 เวบ็ ไซต์ของจฬุ าลงกรณ์มหาวิทยาลยั

บทที่ 2 หลกั การออกแบบเวบ็ ไซต์ทางการศกึ ษา 63 แผนภาพที่ 2.20 เวบ็ ไซตข์ องมหาวิทยาลยั ธรรมศาสตร์ สีและคอมพวิ เตอร์ -- สีมีความสมั พนั ธ์กบั คอมพิวเตอร์ เนื่องจากการออกแบบ บนหน้าคอมพิวเตอร์ สีที่ปรากฏให้เห็นบนหน้าจอเป็ นการผสมสีโดยใช้ระบบ RGB ซง่ึ เป็ น ระบบทใี่ ช้กนั ทวั่ ไปในจอคอมพิวเตอร์ จะทางานได้ดีและมองดเู ป็ นธรรมชาติ ประกอบด้วย 3 สี คอื แดง เขียว และนา้ เงนิ ซง่ึ แตกตา่ งจากการออกแบบสาหรับงานพมิ พ์ตา่ ง ๆ ซง่ึ ใช้สีระบบ CMYK ประกอบด้วย cyan )สีฟ้ า) magenta )สีแดง) yellow )สีเหลือง) black )สีดา) เทคนิคของการใช้ สีควรใช้ สีท่ีดึงดูดความสนใจเพ่ือสร้ างความสาคัญ ให้ กับข้ อความหรื อภาพนัน้ การเลือกสีที่เข้ ากับหัวข้ อในการออกแบบงานชิน้ นัน้ การดงึ ความสนใจจากผู้อ่าน ให้เห็นความสาคญั ของข้อมลู บนหน้ากระดาษ สามารถทาได้ โดยใช้สีที่สว่าง ในกรณีท่ีงานท่ีใช้กระดาษหลาย ๆหน้า เช่น เว็บไซต์ ควรใช้สีที่ใช้แต่ละ คอลมั น์เป็ นสีเดมิ เช่น ใช้ Banner เป็ นสีเดียวกนั การเลือกใช้ภาพสีสวา่ งเป็ นภาพพืน้ หลัง เพื่อเพิ่มความน่าสนใจให้กับชิน้ งาน สาหรับผู้ท่ีเริ่มต้น ควรศกึ ษาการเลือกใช้สีท่ีอยู่ในธีม (theme) เดียวกนั เช่น การศกึ ษา website ของ Adobe Kuler (http://kuler.adobe.com) สาหรับการเลือกใช้สีสาหรับเว็บไซต์ VisiBone Web Design Color References (http://www.visibone.com/color) เป็ นเว็บรูปแบบสีที่ช่วยออกแบบเว็บไซต์ Colourlovers Website (http://www.colourlovers.com/about) สาหรับช่วยในการไล่เฉดสีใน การออกแบบ และสดุ ท้ายคือการเรียนรู้จากผ้อู ่ืนวา่ มีวธิ ีการใช้สีในงานของเขาอยา่ งไร www.ThaiCyberU.go.th

64 บทที่ 2 หลกั การออกแบบเว็บไซต์ทางการศกึ ษา แผนภาพที่ 2.21 Adobe Kuler (http://kuler.adobe.com) 1.7 การเลือกใช้ภาพ มีสภุ าษิตจีนบทหนึง่ ได้กล่าวไว้วา่ “A picture is worth a thousand words” (รูปภาพ 1 รูป สามารถใช้แทนคาได้หลายพนั คา) เพราะในขณะเดียวกนั ท่ีผ้ชู มเว็บไซต์ได้รับ ข้อมลู ข่าวสารจากสื่อต่าง ๆ ซึง่ วิธีที่ดีท่ีสุดที่ทาให้ผ้ชู มเว็บไซต์รับสารได้รวดเร็วท่ีสุดนนั้ ก็คือ การใช้รูปภาพ รูปภาพเป็ นองค์ประกอบท่ีสาคัญมากในการออกแบบและจัดหน้าเว็บเพจ เพราะรูปภาพจะสร้ างความอยากรู้อยากเห็น ปลุกเร้ าอารมณ์ให้เกิดแก่ผู้รับสาร และใน ขณะเดียวกนั การเลือกรูปภาพที่ไม่เหมาะสมก็สามารถท่ีจะสร้ างความสบั สน ความราคาญ ให้แก่ผ้รู ับสารได้เช่นกนั รูปภาพท่ีนามาใช้มีอิทธิพลตอ่ ความรู้สึกและรูปแบบท่ีมีต่อหน้าเว็บ เพจนนั้ ๆ รูปภาพช่วยให้การสื่อสารมีประสิทธิภาพได้ในกรณีที่ข้อความไม่สามารถอธิบายได้ เพียงพอ รูปภาพท่นี ามาใช้จะขนึ ้ อย่กู บั เนือ้ หาหลกั และความสามารถในการหารูปภาพนนั้ ๆ มาได้ การเลือกรูปภาพจะต้องเลือกรูปภาพให้เหมาะสมกบั ข้อมลู ทส่ี ่ือไป กฎพืน้ ฐานในการใช้ รูปภาพ ดงั นี ้ (1) อย่าวางเรียงหรืออัดภาพหลายภาพเข้าด้วยกนั เพราะอาจจะขัดขวาง กระบวนการรับรู้ของผู้รับสารได้ ควรเว้นที่ว่างรอบภาพประกอบ (2) ควรเพ่ิมความหลาก หลายและความแตกตา่ งของหน้าสิ่งพิมพ์ด้วยการใช้ภาพประกอบหลายขนาด และ (3) ถ้า เป็ นข้อความท่ีกากวมหรือเป็ นประโยคที่มีใจความคลุมเครือ ควรใช้รูปภาพที่สื่อถึงสิ่งท่ี ข้อความนนั้ ๆต้องการบอก ซงึ่ จะชว่ ยให้ผ้รู ับสารสามารถเดาได้อย่างสมเหตสุ มผล

บทที่ 2 หลกั การออกแบบเว็บไซตท์ างการศกึ ษา 65 ประเดน็ ทส่ี าคญั นอกจากการเลือกรูปภาพให้เหมาะสมกบั Concept ของเว็บไซต์ท่ี ได้กล่าวมาแล้วคือ การเลือกใช้รูปแบบกราฟิ กที่มีคณุ สมบตั ิที่เหมาะสม ไม่วา่ จะเป็ นในเรื่อง ของการบีบอดั ข้อมลู ขนาดของไฟล์ เป็นต้น รูปแบบของกราฟิกท่ีนิยมมกั จะอย่ใู นรูปแบบของ GIF และ JPEG เพราะเป็ นรูปแบบท่ีบราวเซอร์แทบทกุ ชนิดสนบั สนนุ ในขณะที่รูปแบบไฟล์ PNG (Portable Network Graphic) ทม่ี ีคณุ สมบตั เิ ดน่ อยหู่ ลายประการ เช่นระบบบีบอดั ไฟล์ ท่ีมีคณุ ภาพสูงและขนาดไฟล์ท่ีเล็ก แต่ยงั มีข้อจากดั ในเรื่องของบราวเซอร์สนบั สนนุ อย่จู ึงไม่ เป็นท่นี ิยม รูปแบบภาพกราฟิ กประเภท GIF (Graphic Interchange Format) เป็ นรูปแบบที่ ได้รับความนิยมเนื่องจากเป็ นไฟล์กราฟิ กชนิดแรกท่ีได้รับการสนับสนุนจากเว็บบราวเซอร์ ไฟล์ประเภท GIF นีม้ ีข้อมลู สีขนาด 8 บติ จึงทาให้มีจานวนสีได้มากที่สุด 256 สีและมีการบีบ อัดข้อมูลตามแนวของพิกเซล คือถ้ามีจุดสีหลายจุดก็จะจัดเก็บเพียงแค่จุดเดียว ดงั นนั้ จึง เหมาะสาหรับภาพกราฟิกที่ประกอบด้วยสีพืน้ ๆ และไม่ซบั ซ้อน รูปแบบภาพกราฟิ กประเภท JPEG (Joint Photographic Experts) เป็ นรูปแบบท่ีได้รับความนิยมเป็ นอันดบั สอง ไฟล์ ประเภทนีม้ ีข้อมลู สีขนาด 24 บิต จึงทาให้มีจานวนสีได้มากที่สุด 16.7 ล้านสี ส่วนระบบ การบีบอดั มีลกั ษณะที่สญู เสีย (lossy) บางส่วนไปในกระบวนการบีบอดั (compressed) แต่ มกั จะเหน็ ความแตกตา่ งได้น้อยมากนอกจากจะนารูปไปขยายใหญ่ ดงั นนั้ ไฟล์ประเภท JPEG จึงเหมาะสาหรับภาพถ่าย และภาพกราฟิ กท่ีมีการไล่ระดับสีอย่างละเอียด เพราะจะได้ คณุ ภาพรูปท่ีดีกว่าและยังมีขนาดไฟล์ท่ีเล็กกว่าไฟล์ GIF มาก อย่างไรก็ตาม JPEG ไม่ เหมาะกบั กราฟิ กที่ประกอบด้วยสีพืน้ หรือลายเส้นเพราะจะทาให้เกิดจดุ ด่างของสีและทาให้ ไฟล์มีขนาดใหญ่กวา่ GIF มาก ระบบการวดั ขนาดของรูปภาพในเว็บเพจคือพิกเซล (Pixel) โดยพิกเซลในรูปภาพ จะจับคู่แบบหนึ่งต่อหน่ึงกับพิกเซลตามความละเอียดของหน้าจอ ดังนัน้ ในกระบวนการ ออกแบบกราฟิ กและรูปภาพต่าง ๆ จึงควรใช้ขนาดเป็ นพิกเซลไว้เสมอ ซึ่งจะมีประโยชน์ใน การเปรียบเทียบขนาดของกราฟิ กกับขนาดของวินโดว์ของบราวเซอร์ และขนาดของ องคป์ ระกอบอ่ืน ๆ ในหน้าจออีกด้วย ระบบการวดั ความละเอียดของรูปภาพคือ pixel per inch (ppi) แตบ่ างครัง้ อาจใช้ ระบบการวดั ท่ีใช้กบั ภาพพิมพ์ (dot per inch -- dpi) ทดแทนได้ โดยความละเอียดของ รูปภาพในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอเนื่องจากจอมอนิเตอร์ของ ผู้ใช้ส่วนใหญ่มีความละเอียดต่ากว่า 72 ppi ดงั นัน้ แม้ว่าภาพมีความละเอียดสูงกว่านี ้ www.ThaiCyberU.go.th

66 บทที่ 2 หลกั การออกแบบเวบ็ ไซต์ทางการศกึ ษา ผ้ชู มเวบ็ ไซตก์ ็จะไม่เหน็ ความแตกตา่ งได้ อีกทงั้ ผ้อู อกแบบและผ้พู ฒั นาเว็บไซต์ควรหลีกเลี่ยง ภาพกราฟิ กท่ีมีขนาดใหญ่ซึ่งจะใช้ เวลาในการดาวน์โหลดมาก (ถ้ าผู้ใช้ เช่ือมต่อกับ อินเทอร์เน็ตที่ค่อนข้างช้า) อาจทาให้ผ้ใู ช้หงดุ หงิดได้ ดงั นนั้ นกั ผลิตเว็บไซต์จึงควรให้ความ สมดลุ ระหวา่ งความสวยงามกบั ความเร็วในการแสดงผล กลา่ วได้วา่ การนาภาพประกอบ/กราฟิ กตา่ ง ๆ มาใช้ในการจดั หน้าเวบ็ เพจจะช่วย เพิม่ รูปแบบให้มีความนา่ สนใจมากขนึ ้ และช่วยให้การสื่อสารชดั เจนย่ิงขนึ ้ แตใ่ นทางกลบั กนั การเลือกภาพประกอบที่ไม่เหมาะสมก็จะทาให้การสื่อสารล้มเหลวได้เช่นกนั ทงั้ นีน้ อกจาก ความเหมาะสมของกราฟิ กแล้ว ยังควรพิจารณาถึงขนาด ความละเอียด และคณุ ภาพของ รูปแบบไฟล์การฟิกนนั้ ๆ ด้วย แผนภาพท่ี 2.22 แผนภาพท่ี 2.23 การเลือกใช้ภาพประกอบท่เี หมาะสม การเลือกใช้ภาพประกอบทีไ่ มเ่ หมาะสม 2. หลักการเพ่มิ เตมิ สาหรับการออกแบบเวบ็ ไซต์ทางการศกึ ษา จากหลกั การออกแบบข้างต้น จะเห็นได้ว่าเป็ นหลกั การพืน้ ฐานในการออกแบบส่ือ ต่าง ๆ ท่ีเกี่ยวข้องกับการเรียนการสอนทัง้ นีอ้ าจกล่าวได้ว่าหลักในการออกแบบต่าง ๆ เหล่านนั้ จึงเป็ นพืน้ ฐานสาคญั ในการออกแบบเว็บเพจ )Web page design principles) สาหรับอีเลิร์นนิง โดยหลักในการออกแบบเว็บเพจควรพิจารณาหลักการต่าง ๆ เหล่านีเ้ ป็ น พิเศษ กลา่ วคอื 2.1 ความเรียบง่าย การนาเสนอข้อมลู เฉพาะที่จาเป็ น ยึดหลักความเรียบง่าย ไม่มีสิ่งรบกวนสายตา หรืออาจสร้ างความราคาญให้แก่ผ้ใู ช้ (distraction) เช่น animation ตา่ ง ๆ ซงึ่ อาจดสู วยงาม และน่าสนใจในตอนแรก แต่เม่ือดูบ่อย ๆ อาจสร้ างความราคาญได้ ตัวอย่างเว็บไซต์ที่มี รูปแบบเรียบง่าย เชน่ เวบ็ ไซต์ของ University of Hawaii

บทที่ 2 หลกั การออกแบบเวบ็ ไซตท์ างการศกึ ษา 67 แผนภาพที่ 2.24 แผนภาพท่ี 2.25 ความเรียบง่ายท่ีเหมาะสม ความเรียบง่ายทไ่ี ม่เหมาะสม แผนภาพที่ 2.26 University of Hawaii at Hilo (http://www.uhh.hawaii.edu) www.ThaiCyberU.go.th

68 บทที่ 2 หลกั การออกแบบเว็บไซตท์ างการศกึ ษา 2.2 ความสม่าเสมอ โดยการใช้รูปแบบ ระบบการนาทาง (Navigation) และโทนสี เดียวกนั ตลอดทงั้ เว็บไซต์ เพื่อให้ผู้เข้าเยี่ยมชมรู้สึกว่าอย่ใู นสถานท่ีเดิมตลอดการเยี่ยมชมเว็บไซต์นนั้ ๆ เช่น เวบ็ ไซต์ของ University of Michigan ท่ีใช้สีโทน (theme) เดียวกนั ในทกุ ๆ หน้าเว็บเพจ ทกุ หน้าใช้โทนสีเดียวกนั แตล่ ะหน้าใช้โทนสีตา่ งกนั แผนภาพท่ี 2.27 แผนภาพที่ 2.28 ความสม่าเสมอท่ีเหมาะสม ความสม่าเสมอทไ่ี มเ่ หมาะสม

บทท่ี 2 หลกั การออกแบบเวบ็ ไซตท์ างการศกึ ษา 69 แผนภาพที่ 2.29 หน้า Homepage ของ University of Michigan (http://www.umich.edu) แผนภาพที่ 2.30 หน้า webpage ของหน้า Prospective Students, University of Michigan www.ThaiCyberU.go.th

70 บทท่ี 2 หลกั การออกแบบเวบ็ ไซต์ทางการศกึ ษา 2.3 ระบบนาทาง ระบบนาทางท่ีใช้งานง่าย (User-Friendly Navigation) มีความสาคญั มากของ เว็บไซต์ท่ีจะออกแบบให้ผู้ใช้งานง่ายและสะดวก ควรมีรูปแบบและลาดับของรายการท่ี สม่าเสมอ เช่น การวางในตาแหน่งเดียวกนั ในทกุ ๆ หน้า อีกทงั้ ถ้าเลือกใช้กราฟิ ก ความเป็ น กราฟิ กที่สื่อความหมาย และส่ือความหมายร่วมกับคาอธิบายที่ชดั เจน เว็บไซต์บางท่ีได้เพิ่ม ระบบ Navigation ท่ีเป็ นตวั อกั ษรไว้ตอนท้ายของหน้าเพ่ือช่วยอานวยความสะดวกกบั ผ้ทู ่ีสงั่ บราวเซอร์ไมใ่ ห้แสดงผลกราฟิกเพื่อความสะดวกรวดเร็วในการดดู ้วย เช่นเว็บไซต์ของ South Nazarene University มี Navigation ท่ีสาคญั อย่ทู ่ีส่วนซ้ายบน และมี Quick Links อย่ใู น แถบด้านซ้าย ระบบนาทางอยใู่ นตาแหน่งเดยี วกนั ทกุ หน้า ระบบนาทางอยใู่ นตาแหนง่ ตา่ งกนั แผนภาพที่ 2.31 ระบบนาทางทีเ่ หมาะสม แผนภาพท่ี 2.32 ระบบนาทางที่ไมเ่ หมาะสม

บทที่ 2 หลกั การออกแบบเวบ็ ไซตท์ างการศกึ ษา 71 แผนภาพท่ี 2.33 South Nazarene University (http://www.snu.edu) 2.4 คุณภาพในการออกแบบ เว็บจะมีคณุ ภาพ และน่าเช่ือถือได้นนั้ ควรให้ความสาคญั กบั การออกแบบอย่าง มาก เช่นเดียวกบั สื่อประเภทอ่ืน ๆ ท่ีต้องออกแบบและเรียบเรียงเนือ้ หาอย่างรอบคอบ เวบ็ ที่ ทาขนึ ้ อย่างลวก ไม่มีมาตรฐานการออกแบบและการจดั ระบบข้อมลู นนั้ เม่ือมีข้อมลู เพ่ิมขนึ ้ เรื่อย ๆ กจ็ ะเกดิ ปัญหาและไม่สามารถสร้างความเช่ือถือจากผ้ใู ช้ได้ 2.5 การออกแบบหน้าจอ การออกแบบหน้าจอท่สี มดลุ กนั ระหว่างเมนู, รายการเลือก, เนือ้ หา, ภาพประกอบ จะช่วยให้ผ้ใู ช้สนใจเนือ้ หาได้มาก โดยมากมกั จะแบ่งจอภาพเป็ นส่วน ๆ ได้แก่ ส่วนแสดงหวั เร่ือง, ส่วนแสดงข้อความประชาสัมพันธ์, ส่วนแสดงเนือ้ หา, ส่วนแสดงภาพประกอบ, ส่วนประกอบเสริมอื่น ๆ (โดยเฉพาะเวบ็ ไซต์สาหรับ E-Learning) เช่น ส่วนควบคมุ บทเรียน, สว่ น log-in, หมายเลขเฟรมลาดบั เนือ้ หา เป็นต้น www.ThaiCyberU.go.th

72 บทท่ี 2 หลกั การออกแบบเวบ็ ไซต์ทางการศกึ ษา แผนภาพท่ี 2.34 แผนภาพที่ 2.35 การออกแบบหน้าจอทเี่ หมาะสม การออกแบบหน้าจอทไ่ี มเ่ หมาะสม 2.6 ความละเอียดของจอภาพ ปัจจุบนั ความละเอียดของจอภาพที่นิยมใช้ จะมีสองคา่ คือ 800x600 pixel และ 1024 x 768 pixel ดงั นนั้ ควรพิจารณาถงึ ความละเอียดที่จะดีท่ีสุด เพราะหากออกแบบ หน้าจอ สาหรับจอภาพ 1024 x 768 pixel แตน่ ามาใช้กบั จอภาพ 800x600 pixel จะ ทาให้เนือ้ หาตกขอบจอได้ แต่ถ้าหากจดั ทาด้วยค่า 800x600 pixel หากนาเสนอผ่านจอ 1024 x 768 pixel จะปรากฏพืน้ ทีว่ า่ งรอบเฟรมเนือ้ หาท่ีนาเสนอ แผนภาพท่ี 2.36 แผนภาพท่ี 2.37 ความละเอียดของจอภาพท่ีเหมาะสม ความละเอียดของจอภาพท่ไี มเ่ หมาะสม

บทท่ี 2 หลกั การออกแบบเวบ็ ไซตท์ างการศกึ ษา 73 2.7 การนาเสนอเนือ้ หา การนาเสนอเนือ้ หาที่เป็ นข้อความ ส่ิงท่ีควรคานงึ ถึงคือ ฟอนต์ท่ีนามาใช้งาน ควร เป็ นฟอนต์มาตรฐาน (ถ้าเป็ นภาษาองั กฤษ นิยมใช้ Sans Serifs เช่น Arial Cordia News และหลีกเล่ียงตวั อักษรแบบ Serifs เช่น Times New Roman) และตวั อกั ษรควรมีรูปแบบ ที่ชัดเจน มีการกาหนดขนาดที่เหมาะสมกับกลุ่มเป้ าหมาย นาเสนอด้ วยข้ อความนา แบบสัน้ ๆ เพ่ือดงึ เข้าเนือ้ หาจริง หลีกเล่ียงการนาเสนอแบบจัดก่ึงกลาง ควรนาเสนอภาพ พอประมาณ ไม่มากหรือน้อยเกินไป จุดเน้นให้ใช้การตีกรอบสี หรือเน้นด้วยสีตวั อักษร ด้วยสีโทนร้ อน แผนภาพท่ี 2.38 แผนภาพท่ี 2.39 การนาเสนอเนือ้ หาที่เหมาะสม การนาเสนอเนือ้ หาทไ่ี มเ่ หมาะสม บทสรุป การออกแบบเว็บไซต์สาหรับการเรี ยนการสอนนัน้ นอกจากการคานึงถึง กลุ่มเป้ าหมาย ความสะดวกในการใช้งานของผู้ใช้แล้วนนั้ ความสวยงามและสุนทรียภาพ ของเว็บไซต์ก็มีความสาคัญเช่นกัน ดังนัน้ หลักการออกแบบ (Design Principles) จึงเข้ ามามีบทบาทสาคัญที่ผู้ออกแบบเว็บไซต์ควรพิจารณา กล่าวคือ (1) การเน้ น ข้อความสาคญั (Emphasis) (2) ความตรงกนั ข้าม (Contrast) (3) ความสมดลุ (Balance) www.ThaiCyberU.go.th

74 บทที่ 2 หลกั การออกแบบเว็บไซต์ทางการศกึ ษา (4) การวางแนว (Alignment) (5) การทาซา้ (Repetition) (6) การเลือกใช้สี (Colors) และ (7) การเลือกใช้ภาพ (Images) นอกจากหลกั การออกแบบดงั กล่าวแล้ว ยงั มีข้อควรพิจารณา เพิ่มเติมสาหรับการออกแบบเว็บไซต์ทางการศึกษาคือความเรี ยบง่าย (Simplicity) ความสม่าเสมอ (Consistency) ระบบนาทางที่ใช้งานง่าย )User-Friendly Navigation) คณุ ภาพในการออกแบบ )Design Stability) การออกแบบหน้าจอ )Screen Design) รวมถึง ความละเอียดของจอภาพและการนาเสนอเนือ้ หาด้วย



บทท่ี 3 รูปแบบเว็บไซตท์ างการศกึ ษา 75 เพ่ือให้การออกแบบเว็บไซต์มีประสิทธิภาพย่ิงขึน้ การออกแบบหน้าจอ (Screen design) ประกอบด้วย รูปแบบหน้าจอ เมนู การเลือกตวั อกั ษร การพาดหวั ตวั อักษร ป่ ุม ภาพประกอบ ขนาดและความละเอียดของจอภาพ เส้นทางการสืบค้น (หรือท่ีเรียกวา่ ระบบ navigation) และระบบการเช่ือมโยง (line) ก็มีความสาคญั มากเช่นกนั ตวั อย่าง The Master Page Layout Grid ดงั ตวั อย่างในแผนภาพที่ 3.1 ซงึ่ หมายถงึ การจดั วางกริดสาหรับหน้า Homepage และหน้า webpage อ่ืน ๆ ในเว็บไซต์เพื่อให้การออกแบบหน้าจอ (Screen design) ในแต่ละหน้ ามีความสอดคล้ องกัน และเพื่อเป็ นการวิเคราะห์โครงสร้ าง ของข้อมลู ด้วย (Analyzing Content Structure) เช่นข้อความในระบบนาทาง (navigation menu bar) กับเนือ้ หาในแต่ละหน้า มีประสิทธิภาพยิ่งขึน้ โดยการวิเคราะห์โครงสร้ าง ของข้อมูลด้วย (Analyzing Content Structure) ดงั นนั้ ผ้พู ฒั นาเวบ็ ไซต์จะต้องอ้างอิงถึง การออกแบบโครงสร้ างเว็บไซต์ (Site Structure) เพื่อเป็ นแนวทาง และพฒั นาหน้าโฮมเพจ และเวบ็ เพจตา่ ง ๆ ให้สอดคล้องกบั Site Structure ทไี่ ด้ออกแบบไว้ และในบางเวบ็ ไซต์ก็จะมี หน้า Site Map (แผนท่ีเว็บไซต์) หรือบางครัง้ เรียก Site Index สาหรับผู้เข้าชมเพ่ือให้เห็น โครงสร้างข้อมลู ในเวบ็ ไซตน์ นั้ ๆ อีกด้วย ดงั ตวั อย่างในแผนภาพท่ี 3.2 www.ThaiCyberU.go.th

76 บทท่ี 3 รูปแบบเวบ็ ไซตท์ างการศกึ ษา แผนภาพที่ 3.1 การจดั วางกริดสาหรับ Master Page (ท่มี า: http://www.webstyleguide.com/index.html)

บทที่ 3 รูปแบบเว็บไซตท์ างการศกึ ษา 77 แผนภาพท่ี 3.2 แสดง Site Map (แผนที่เว็บไซต์) ของเวบ็ ไซต์ www.bitstream.com (ท่ีมา: http://www.webstyleguide.com/index.html) การดาเนินงานการพฒั นาเวบ็ ไซต์สาหรับการเรียนการสอนสามารถสรุปเป็ นขนั้ ตอน หลกั ๆ 4 ขนั้ ตอน ได้แก่ การวางแผนงานและการออกแบบตามขนั้ ตอนของ ADDIE Model ได้แก่ การวิเคราะห์ การออกแบบ การพัฒนา การนาไปใช้ และการประเมิน จากนนั้ จึงนา เนือ้ หาทงั้ หมดมาจดั แบ่งหมวดหม่ดู ้วยการจดั ทาโครงสร้ างเว็บไซต์ (Site Structure) ขนั้ ตอน ท่ีสาคญั ต่อไปคือการออกแบบหน้าเวบ็ ไซต์ หรือ Interface Design ซง่ึ ควรมีการนาหลกั การ ออกแบบตา่ ง ๆ ไม่วา่ จะเป็นหลกั การออกแบบพืน้ ฐาน หลกั การออกแบบส่ือเวบ็ หรือหลกั การ อื่น ๆ เช่น หลกั การของ Gestalt ที่วา่ ด้วยการรับรู้ มาประยกุ ต์ใช้ เมื่อได้หน้าเว็บไซต์คร่าว ๆ แล้ว จึงมาจัดทาเป็ น เทมเพลต เพ่ือนาไปใช้ในเว็บเพจหน้าอ่ืน ๆ ต่อไป ขัน้ ตอนหลัก 4 ขนั้ ตอน ดงั แสดงในแผนภาพท่ี 3.3 www.ThaiCyberU.go.th

78 บทที่ 3 รูปแบบเวบ็ ไซต์ทางการศกึ ษา แผนภาพที่ 3.3 สรุปขนั้ ตอนการดาเนินงานการพฒั นาเวบ็ ไซต์สาหรับอีเลิร์นนงิ นอกจากนี ้จากงานวจิ ยั ของจินตวีร์ คล้ายสงั ข์ (2553) ได้กล่าวถึง (1) การนาเสนอ 16 ประเดน็ ที่สาคญั สาหรับรูปแบบเวบ็ ไซต์ทางการศึกษา (2) การนาเสนอรูปแบบเว็บไซต์ ทางการศกึ ษาท่ีแบง่ เป็นด้านเพ่ือการนาไปใช้ และ (3) การนาเสนอความพงึ พอใจตอ่ รูปแบบ เวบ็ ไซตท์ างการศกึ ษา โดยมีรายละเอียดดงั นี ้ 1. การนาเสนอ 16 ประเดน็ ท่ีสาคัญสาหรับรูปแบบเวบ็ ไซต์ทางการศกึ ษา ผลการศกึ ษาวจิ ยั คือ ข้อท่ี 1 ข้อสรุปเก่ียวกับข้อมูลมัลตมิ ีเดียด้านพนื้ หลัง ดงั นี ้ ลกั ษณะของพืน้ หลงั ที่เหมาะสม คือ พืน้ หลงั สีอ่อนและตวั อกั ษรสีเข้ม โดยพืน้ หลงั ทดี่ งึ ดดู ใจ/สง่ เสริมการเรียนรู้ของผ้เู รียน คือ พืน้ หลงั สีอ่อน(โทนขาว ครีม)และตวั อกั ษรสีเข้ม (โทนฟ้ า นา้ เงนิ )ในสว่ นเนือ้ หา พืน้ สีขาว ตวั อกั ษรสีดาปกติ หรือ พืน้ หลงั สีอ่อน(โทนขาว ครีม) และตวั อกั ษรสีเข้ม (โทนนา้ ตาล) ในส่วนเนือ้ หา พืน้ สีขาว ตวั อกั ษรสีดาปกติ อย่างไรก็ตาม จากการสมั ภาษณ์ผ้เู ช่ียวชาญและจากการสนทนากลุ่มผ้ทู รงคณุ วุฒิ (Focus Group) ได้ ข้อสรุปวา่ สีโทนเยน็ มีความเหมาะสมกบั บริบทการศกึ ษาท่ีสดุ

บทที่ 3 รูปแบบเว็บไซตท์ างการศกึ ษา 79 แผนภาพท่ี 3.4 รูปแบบของเวบ็ ไซต์: พืน้ หลงั สีขาว ครีมและตวั อกั ษรสีฟ้ า นา้ เงนิ ในสว่ นเนือ้ หา พืน้ สีขาวตวั อกั ษรสีดาปกติ แผนภาพที่ 3.5 เวบ็ ไซต์ต้นแบบ: พืน้ หลงั สีขาว ครีมและตวั อกั ษรสีฟ้ า นา้ เงิน ในส่วนเนือ้ หา พืน้ สีขาวตวั อกั ษรสีดาปกติ www.ThaiCyberU.go.th

80 บทที่ 3 รูปแบบเวบ็ ไซตท์ างการศกึ ษา แผนภาพที่ 3.6 เวบ็ ไซต์ต้นแบบ: พืน้ หลงั สีขาว ครีมและตวั อกั ษรสีฟ้ า นา้ เงิน ในสว่ นเนือ้ หา พืน้ สีขาวตวั อกั ษรสีดาปกติ ข้อท่ี 2 ข้อสรุปข้อมูลมัลตมิ ีเดยี ด้านตวั อักษร ดงั นี ้ ลกั ษณะของตวั อกั ษรที่เหมาะสม คือ ชนิดและขนาดมีความชัดเจนและอ่านง่าย และ สีของตวั อกั ษรเดน่ ชดั สบายตา โดยตวั อกั ษรทีด่ งึ ดดู ใจ/ส่งเสริมการเรียนรู้ของผ้เู รียน คือ ตวั อักษรหวั กลมแบบธรรมดา(Angsana UPC) ขนาด 10-20 พอยท์(ขึน้ อยู่กับตาแหน่ง เนือ้ หา) หรือ ตวั อกั ษรหวั กลมแบบธรรมดา(Cordia UPC) ขนาด 10-20 พอยท์(ขนึ ้ อยู่กับ ตาแหน่งเนือ้ หา) หรือก็คือ ตวั อักษรแบบ Serif และ San-Serif ตามลาดบั อย่างไรก็ตามจาก การสมั ภาษณ์ผ้เู ชี่ยวชาญและจากการสนทนากล่มุ ผ้ทู รงคณุ วฒุ ิ (Focus Group) ได้ข้อสรุป ว่า ตัวอักษรแบบ San-Serif มีความเหมาะสมที่สุด อีกทงั้ ตวั อักษรท่ีใช้ควรเลือกชนิดท่ีมี รูปแบบตัวอักษรภาษาไทย และรูปแบบตัวอักษรภาษาอังกฤษ ไม่แตกต่างกันมาก เช่น Tahoma และ Verdana จงึ จะเหมาะสมกบั บริบทการศกึ ษาไทยท่สี ดุ

บทที่ 3 รูปแบบเวบ็ ไซตท์ างการศกึ ษา 81 แผนภาพที่ 3.7 รูปแบบของเวบ็ ไซต์: แผนภาพที่ 3.8 รูปแบบของเวบ็ ไซต์: ตวั อกั ษร Angsana UPC ตวั อกั ษร Cordia UPC แผนภาพท่ี 3.9 เวบ็ ไซต์ต้นแบบ: แผนภาพท่ี 3.10 เวบ็ ไซตต์ ้นแบบ: ตวั อกั ษร Tahoma ตวั อกั ษร Tahoma www.ThaiCyberU.go.th

82 บทที่ 3 รูปแบบเว็บไซตท์ างการศกึ ษา ข้อท่ี 3 ข้อสรุปเก่ียวข้อมูลมัลตมิ ีเดียด้านการออกแบบจดุ เช่ือมโยง ดงั นี ้ องค์ประกอบของจุดเช่ือมโยง อย่างน้อยควรมี ช่ือเร่ือง(โดยมีการระบุชื่อเรื่องท่ี ชัดเจน) จุดเชื่อมโยงภายในเว็บไซต์ และลิงค์ไปยังหน้าหลัก โดยองค์ประกอบของจุด เชื่อมโยงทดี่ งึ ดดู ใจ/สง่ เสริมการเรียนรู้ของผ้เู รียน คือ ชื่อเรื่อง(โดยมีการระบชุ ่ือเร่ืองที่ชดั เจน) จดุ เช่ือมโยงภายในเวบ็ ไซต์ และลงิ ค์ไปยงั หน้าหลกั เช่นกนั แผนภาพท่ี 3.11 รูปแบบของเวบ็ ไซต์: แผนภาพท่ี 3.12 เวบ็ ไซต์ต้นแบบ: ช่ือเรื่อง(โดยมีการระบชุ ่ือเรื่องท่ีชดั เจน) ช่ือเรื่อง(โดยมีการระบชุ ่ือเรื่องทีช่ ดั เจน) จดุ เชื่อมโยงภายในเวบ็ ไซต์ จดุ เช่ือมโยงภายในเวบ็ ไซต์ และลิงค์ไปยงั หน้าหลกั และลงิ คไ์ ปยงั หน้าหลกั

บทที่ 3 รูปแบบเวบ็ ไซต์ทางการศกึ ษา 83 แผนภาพที่ 3.13 เวบ็ ไซต์ต้นแบบ:ชื่อเรื่อง(โดยมีการระบชุ ื่อเร่ืองที่ชดั เจน) จดุ เชื่อมโยงภายในเวบ็ ไซต์ และลิงค์ไปหน้าหลกั www.ThaiCyberU.go.th

84 บทท่ี 3 รูปแบบเวบ็ ไซตท์ างการศกึ ษา ข้อท่ี 4 ข้อสรุปเก่ียวกับข้อมูลมัลตมิ ีเดยี ด้านการออกแบบเนือ้ หา ดงั นี ้ องค์ประกอบของเนือ้ หา อย่างน้อยควรมี ภาพและวตั ถปุ ระกอบการบรรยาย หรือ ภาพเคลื่อนไหว(ภาพเหตกุ ารณ์สนั้ ๆ) และลกั ษณะการนาเสนอเนือ้ หา คือ เนือ้ หากระชบั สนั้ และทนั สมยั และ แบง่ เนือ้ หาออกเป็นสว่ น ๆ หรือจดั กล่มุ เป็นหมวดหมู่ แผนภาพที่ 3.14 รูปแบบของเวบ็ ไซต์: เนือ้ หาทม่ี ีภาพและวตั ถปุ ระกอบการบรรยาย หรือ ภาพเคล่ือนไหว(ภาพเหตกุ ารณ์สนั้ ๆ) มีการแบง่ เนือ้ หาออกเป็นส่วน ๆ หรือจดั กลมุ่ เป็น หมวดหมู่ กระชบั สนั้ และทนั สมยั

บทที่ 3 รูปแบบเวบ็ ไซต์ทางการศกึ ษา 85 แผนภาพที่ 3.15 เวบ็ ไซต์ต้นแบบ: ท่มี ีภาพและวตั ถปุ ระกอบการบรรยาย หรือ ภาพเคล่ือนไหว (ภาพเหตกุ ารณ์สนั้ ๆ) มีการแบง่ เนือ้ หาออกเป็นส่วน ๆ หรือจดั กล่มุ เป็นหมวดหมู่ กระชบั สนั้ และทนั สมยั www.ThaiCyberU.go.th