โดย ศุภกฤษฏิ์ นิวัฒนากูล การออกแบบเว็บไซต์ โดย ศุภกฤษฏิ์ นิวัฒนากูล

วัตถุประสงค์ เมื่อจบบทเรียนนี้แล้วนักศึกษาสามารถ บอกองค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ได้อย่างถูกต้อง ออกแบบเว็บไซต์ได้อย่างถูกต้อง และเหมาะสม

เนื้อหา คำศัพท์เกี่ยวกับเว็บไซต์ องค์ประกอบพื้นฐานของการออกแบบ วิธีการสร้างเว็บเพจ กระบวนการ 13 ขั้นตอนในการออกแบบ หลักการออกแบบเว็บไซต์ รูปแบบของเว็บไซต์

คำศัพท์เกี่ยวกับเว็บไซต์ เว็บไซต์ (Web site) แหล่งข้อมูลที่บรรจุอยู่บนเครือข่ายอินเตอร์เน็ต  หนังสือหนึ่งเล่ม เว็บเพจ (Web page) หน้าที่แสดงเอกสาร เนื้อหาของเว็บไซต์  เอกสารแต่ละหน้า โฮมเพจ (Home page) หน้าแรกของเว็บไชต์  ปกของหนังสือ

องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ความเรียบง่าย (Simplicity) มีรูปแบบที่เรียบง่าย ไม่ซับซ้อนและใช้งานได้อย่างสะดวก สื่อสารเนื้อหาถึงผู้ใช้โดยมีเฉพาะองค์ประกอบเสริมที่จำเป็นเท่านั้น ความสม่ำเสมอ (Consistency) สร้างความสม่ำเสมอให้กับเว็บไซต์โดยใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ ทั้งในส่วนของรูปแบบหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสี ถ้าลักษณะของแต่ละหน้าในเว็บไซต์เดียวกัน แตกต่างกัน อาจทำให้ผู้ใช้เกิดความสับสนได้

ความเป็นเอกลักษณ์ (Identity) การออกแบบต้องคำนึงถึงลักษณะขององค์กร รูปแบบของเว็บไซต์สามารถสะท้อนถึงเอกลักษณ์ขององค์กร เนื้อหาที่มีประโยชน์ (Useful Content) ควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ ควรมีการปรับปรุงและเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ

ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Naviagtion) ระบบเนวิเกชันจะต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก โดยใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายอย่างชัดเจน มีรูปแบบและลำดับของรายการอย่างสม่ำเสมอ มีลักษณะที่น่าสนใจ (Visual Appeal) ความน่าในใจของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิก การใช้ชนิดตัวอักษร การใช้โทนสี เป็นต้น

การใช้งานอย่างไม่จำกัด (Compatibility) ควรออกแบบเว็บไซต์ให้ครอบคลุมกับผู้ใช้ส่วนใหญ่มากที่สุด ไม่ควรมีการติดตั้งโปรแกรมเพิ่มเติม หรือเลือกใช้บราวเซอร์ชนิดใดชนิดหนึ่ง สามารถแสดงผลได้ทุกระบบปฏิบัติการและที่ความละเอียดหน้าจอต่าง ๆ กันได้อย่างไม่มีปัญหา คุณภาพในการออกแบบ (Design Stability) ควรให้ความสำคัญกับการออกแบบเว็บไซต์ ควรมีมาตรฐานการออกแบบและการจัดระบบข้อมูล

ระบบการใช้งานที่ถูกต้อง (Functional Stability) ระบบการทำงานต่าง ๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น การกรอกข้อมูล การเชื่อมโยง เป็นต้น ควรมีการตรวจสอบการทำงานอยู่เสมอ

ปัจจัยสำคัญที่ผู้ใช้ต้องการจากเว็บไซต์ มีเนื้อหาที่เป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ มีการปรับปรุงเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว การใช้งานที่สะดวก เข้าใจง่าย

ทีมงานพัฒนาเว็บไซต์ Webmaster Information Architect Designer เป็นผู้ควบคุมในเรื่องการออกแบบ เนื้อหา และรายละเอียดทางเทคนิค Information Architect ทำหน้าที่จัดระเบียบข้อมูลและทดสอบประสิทธิภาพในการใช้งาน Designer เป็นผู้ออกแบบลักษณะหน้าตาของเว็บไซต์ และองค์ประกอบต่าง ๆ HTML and JavaScript Coder รับผิดชอบการสร้างเว็บเพจโดยอาศัยเครื่องมือต่าง ๆ ปรับปรุง เปลี่ยนแปลงข้อมูล รวมถึงการอัพโหลดไฟล์

Developer/Programmer เป็นผู้เขียนสคริปต์และโปรแกรมต่าง ๆ อาจต้องเกี่ยวข้องกับระบบฐานข้อมูล System Administrator ทำหน้าที่ควบคุม ดูแลเว็บเซิร์ฟเวอร์ รวมถึงฮาร์ดแวร์และซอฟต์แวร์อื่นที่เกี่ยวข้อง สามารถวิเคราะห์และปรับตั้งระบบเพื่อการทำงานที่มีประสิทธิภาพ Content Editor/Writer เป็นบรรณาธิการ โดยรับผิดชอบในการจัดเตรียมเนื้อหา ตรวจสอบความถูกต้อง

วิธีการสร้างเว็บเพจ สร้างด้วยภาษา HTML โดยการใช้โปรแกรมสร้างเอกสาร (Text Editor) โดยทั่วไป เช่น โปรแกรม NotePad โดยการใส่คำสั่ง (Tag) ของภาษา HTML เข้าไปโดยตรง วิธีนี้ผู้สร้างต้องมีประสบการณ์และการเรียนรู้ภาษา HTML มาก่อน สร้างด้วยโปรแกรมประยุกต์ เป็นการสร้างแบบที่เรียกว่า WYSIWYG (What-You-See-Is- What-You-Get) เช่น Dreamweaver, FrontPage เป็นต้น

โปรแกรมช่วยในการสร้างเว็บ Macromedia Dreamweaver Microsoft FrontPage Allaire HomeSite CoffeeCup GoLive HotDog Pro HotMetaPro NetObjects Fusion

Macromedia Dreamweaver สามารถออกแบบหน้าเว็บได้อย่างสะดวกโดยอาศัยเครื่องมือต่าง ๆ โดยไม่จำเป็นต้องรู้เกี่ยวกับภาษา HTML มีหน้าจอในการแสดงหน้าจอการออกแบบและหน้าจอคำสั่ง มีระบบเทมเพลตที่จะทำให้ผู้ออกแบบสามารถใช้โครงสร้างเดียวกันทั้งเว็บไซต์ มีเครื่องมือเพื่อช่วยในการดาวน์โหลดและอัพโหลดไฟล์ระหว่างเครื่องเซิร์ฟเวอร์กับเครื่องที่ใช้พัฒนาเว็บเพจ

Microsoft FrontPage ลักษณะการทำงานใกล้เคียงกับโปรแกรมอื่น ๆ ที่อยูในชุด Office มีระบบอำนวยความสะดวกแบบ Wizard มีระบบในการบริหารจัดการเว็บไซต์ เช่น ระบบรายงานเกี่ยวกับหน้าเว็บเพจที่แสดงผลช้า เว็บเพจที่ถูกเพิ่มเข้าไป ลิงค์ที่ใช้งานไม่ได้ สามารถเชื่อมโยงกับระบบฐานข้อมูลได้โดยสะดวก บางครั้งอาจมีคำสั่งเพิ่มเติมเข้ามาเกินความจำเป็น หรืออาจเปลี่ยนแปลงโค้ดโดยไม่รู้ตัว

Allaire HomeSite ช่วยในการเขียนโค้ดภาษา HTML ด้วยคุณสมบัติที่เรียกว่า Tag Insight และ Function Insight ซึ่งจะแสดงแอตตริบิวต์ที่เหมาะสมขึ้นมาให้เลือกใช้กับแท็กที่กำลังเขียน เหมาะสำหรับนักออกแบบเว็บที่ถนัดในการใช้ภาษา HTML

กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต์ Phase 1 สำรวจปัจจัยสำคัญ (Research) 1. รู้จักตัวเอง – กำหนดเป้าหมายและสำรวจความพร้อม 2. เรียนรู้ผู้ใช้ – ระบุกลุ่มผู้ใช้และศึกษาความต้องการ 3. ศึกษาคู่แข่ง – สำรวจการแข่งขันและเรียนรู้คู่แข่งสิ่งที่ได้รับ สิ่งที่ได้รับ 1. เป้าหมายหลักของเว็บไซต์ 2. ความต้องการของผู้ใช้ 3. กลยุทธ์ในการแข่งขัน

Phase 2 : พัฒนาเนื้อหา (Site Content) 4. สร้างกลยุทธ์การออกแบบ 5. หาข้อสรุปขอบเขตเนื้อหา สิ่งที่ได้รับ แนวทางการออกแบบเว็บไซต์ ขอบเขตเนื้อหาและการใช้งาน ข้อมูลที่ถูกจัดอย่างเป็นระบบ

Phase 3 : พัฒนาโครงสร้างเว็บไซต์ (Site Structure) 6. จัดระบบข้อมูล 7. จัดทำโครงสร้างข้อมูล 8. พัฒนาระบบเนวิเกชัน สิ่งที่ได้รับ แผนผังโครงสร้างข้อมูล แนวทางการท่องเว็บ ระบบเนวิเกชัน

Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual design) 9. ออกแบบลักษณะหน้าตาเว็บเพจ 10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย สิ่งที่ได้รับ ลักษณะหน้าตาของเว็บไซต์ เว็บเพจต้นแบบที่จะใช้ในการพัฒนา รูปแบบโครงสร้างของเว็บไซต์ ข้อกำหนดในการพัฒนาเว็บไซต์

Phase 5 : พัฒนาและดำเนินการ (Production and Operation) 11. ลงมือพัฒนาเว็บเพจ 12. เปิดตัวเว็บไซต์ 13. ดูแลและพัฒนาต่อเนื่อง สิ่งที่ได้รับ เว็บไซต์ที่สมบูรณ์ เปิดตัวเว็บไซต์และทำให้เป็นที่รู้จัก แนวทางการดูแลและพัฒนาต่อไป

หลักในการออกแบบเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ (Website Structure Design) การออกแบบหน้าตาเว็บไซต์ (Website Interface Design)

การออกแบบโครงสร้างเว็บไซต์ Site Map เป็นการวางแผนเนื้อหาของเว็บไซต์ เพื่อเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด เปรียบเสมือนแผนที่ที่ทำให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ ช่วยในการออกแบบเว็บไซต์เพื่อไม่ให้หลงทาง หรือการเชื่อมโยงแต่ละหน้า เป็นการนำเสนอแนวความคิดแบบลำดับชั้นจากส่วนใหญ่ไปหาส่วนย่อย หรือที่เรียกว่าแบบบนลงล่าง (Top Down Thinking)

สามารถประเมินราคาจาก Site Map ได้ ทุก ๆ เว็บเพจจะต้องมีลิงก์ทางออกเสมอ ทุก ๆ เว็บเพจควรมีลิงก์กลับหน้าโฮมเพจ หรือจุดเริ่มต้น ควรมีหน้าแสดง Site Map ในกรณีที่เว็บไซต์มีจำนวนหน้ามาก ๆ สามารถประเมินราคาจาก Site Map ได้

การออกแบบหน้าเว็บไซต์ ใช้งานง่ายและสะดวก โดยมีระบบ Navigation หรือระบบนำทางที่ดี เข้าใจง่าย การใช้งานไม่ซับซ้อน มองเห็นได้ชัด ควรวางไว้ด้านซ้าย หรือด้านบน อย่าเคลื่อนย้ายไปมา ควรมีลิงก์กลับไปยังโฮมเพจ มีการออกแบบกราฟิกที่สวยงาม สื่อความหมาย

ไม่ควรเสียเวลาโหลดภาพมากเกินไป ขนาดกราฟิกรวมกันไม่ควรเกิน 75 KB เป็น Flash ไม่ควรเกิน 120 KB ภาพรวมทั้งหมดควรออกมาในอารมณ์เดียวกัน (Theme) หรือโครงเดียวกัน แนวความคิดเดียวกัน

รูปแบบของเว็บไซต์ แบบ Content แบบ Image แบบผสม

แบบ Content ลักษณะงานจะเป็นภาพกราฟิกเล็ก ๆ มาเรียงกันเป็นหน้าเว็บเพจ จะมีเนื้อหามากกว่ารูป พัฒนามาจากการเขียนด้วยภาษา HTML มีข้อดีคือ ความเร็วในการโหลด

แบบ Image เป็นภาพกราฟิกขนาดใหญ่เต็มหนึ่งหน้า แล้วตัดแบ่งเป็นชิ้นเล็ก ๆ (Slice Image) มาวางเรียงกัน เพื่อความเร็วในการดาวน์โหลด และแสดงผล มีรูปแบบที่สวยงามและหลายหลาย โดยจะทำการสร้างจากโปรแกรมสร้างรูป หรือตกแต่งรูปโดยทั่วไป เหมาะกับหน้าที่มีเนื้อหาน้อย ต้องการความสวยงามเป็นหลัก หากภาพใหญ่จะทำให้การดาวน์โหลดช้า

แบบผสม เป็นการผสมผสานระหว่างแบบ Content และแบบ Image

ความผิดพลาดในการออกแบบเว็บไซต์ ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม ใช้เทคโนโลยีชั้นสูงโดยไม่จำเป็น ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา มีที่อยู่เว็บไซต์ที่ซับซ้อน (URL) ยากต่อการจดจำและพิมพ์ ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ มีความยาวของหน้ามากเกินไป ขาดระบบเนวิเกชันที่มีประสิทธิภาพ

ใช้สีของลิงค์ไม่เหมาะสม ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย เว็บเพจแสดงผลช้า มีรายงานวิจัยว่า ถ้าเกิน 8 วินาที ผู้ใช้กว่า 90% จะเปลี่ยนไปดูเว็บอื่นแทน