บทที่ 2 หลักการออกแบบเว็บไซต์ (Web Design) Webpage Design and Programming Workshop (7152306) อาจารย์สุธารัตน์ ชาวนาฟาง สาขาวิศวกรรมซอฟต์แวร์ มหาวิทยาลัยราชภัฏนครปฐม

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

ตัวอย่าง

คำศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ Home Page คำที่ใช้เรียกหน้าแรกของเว็บไซต์ เปรียบเสมือนกับเป็นสารบัญและคำนำ Web Page หน้าหนึ่งๆ ของเว็บไซต์ Website หน้าเว็บเพจหลายหน้าซึ่งเชื่อมโยงกันผ่านทาง Hyperlink เปรียบเสมือนหนังสือหนึ่งเล่ม WWW เปรียบเสมือนเป็นห้องสมุดขนาดใหญ่ที่รวบรวมข้อมูลที่มากที่สุดในโลกก็ว่าได้ HTML เป็นภาษาที่ใช้ในการพัฒนาเว็บเพจ โปรโตคอล HTTP (Hypertext Transfer Protocol) เป็นโปรโตคอลที่ทำงานร่วมกันของข้อมูลที่ในอยู่ในรูปสื่อที่สามารถเชื่อมโยงถึงกันได้ เนื่องจากโปรโตคอล HTTP สามารถที่จะใช้ในการรับส่งข้อมูลที่เป็นข้อความ รูปภาพหรือภาพเคลื่อนไหว จึงทำให้แหล่งข้อมูลส่วนใหญ่ใน WWW อนุญาตให้เข้าถึงได้โดยผ่านโปรโตคอล HTTP URL  ตัวบ่งบอกข้อมูลหรือที่อยู่ (Address) ของไฟล์หรือเว็บไซต์ เช่น http://www.google.co.th

คำศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ DNS-Domain Name System หมายเลขประจำเครื่อง ซึ่งหมายเลขนี้เรียกว่า IP โดยการที่จะจดจำหมายเลขประจำเครื่องนั้นทำได้ยาก จึงมีวิธีการตั้งชื่อให้จดจำและใช้งานง่าย เช่น http://www.npru.ac.ac. Web Browser โปรแกรมคอมพิวเตอร์ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศ เช่น IE, Google Chrome, Safari เป็นต้น Web server  เครื่องคอมพิวเตอร์ที่ทำหน้าที่ให้บริการข้อมูลใน www ซึ่งเก็บ Web page และโปรแกรมจัดการบริการ Upload เมื่อสร้าง Web page แล้วต้องส่งข้อมูลไปเก็บไว้ที่ Web Server โดยอาศัยโปรแกรม FTP เป็นต้น Search engine  เครื่องมือหรือโปรแกรมในการค้นหาเว็บต่างๆ เช่น google.com, yahoo.com, bing.com เป็นต้น

ลักษณะเด่นของการนำเสนอข้อมูลเว็บเพจ The Web is a Graphical HyperText Information System The Web is Cross-Platform. The Web is distributed The Web is interactive

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

แนะนำการออกแบบเว็บไซต์ 2. เป้าหมายของเว็บไซต์ เว็บไซต์แต่ละประเภทต่างมีเป้าหมายและลักษณะที่แตกต่างกัน เช่น เว็บไซต์ที่เป็น Search Engine เว็บเพื่อความบันเทิงหรือเกี่ยวข้องกับศิลปะ เว็บไซต์ขององค์กรธุรกิจที่มีเป้าหมายเพื่อขายสินค้าหรือบริการ

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

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

องค์ประกอบของการออกแบบเว็บไซต์ 1. ความเรียบง่าย (Simplicity) 2. ความสม่ำเสมอ (Consistency) 3. ความเป็นเอกลักษณ์ (Identity) 4. เนื้อหา (Useful Content) 5. ระบบเนวิเกชั่น (User-Friendly Navigation) 6. คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal) 7. การใช้งานอย่างไม่จำกัด (Compatibility) 8. ความคงที่ในการออกแบบ (Design Stability) 9. ความคงที่ของการทำงาน (Function Stability)

หลักการออกแบบเว็บไซต์ 1 กำหนดโครงสร้างของเว็บไซต์ 2 กำหนดการเชื่อมโยงระหว่างเว็บเพจ 3 การออกแบบเว็บเพจแต่ละหน้า 4 การสร้างเว็บเพจแต่ละหน้า 5 การลงทะเบียนขอพื้นที่เว็บไซต์ 6 การอัพโหลดเว็บไซต์

หลักการออกแบบเว็บไซต์ 1. กำหนดโครงสร้างของเว็บไซต์

หลักการออกแบบเว็บไซต์ 1. กำหนดโครงสร้างของเว็บไซต์

หลักการออกแบบเว็บไซต์ 2. กำหนดการเชื่อมโยงระหว่างเว็บเพจ การกำหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้าเชื่อมโยงถึงกันเพื่อให้กลับไปกลับมาระหว่างหน้าต่าง ๆ ได้ แต่ละไฟล์ที่มีการเชื่อมโยงสัมพันธ์กัน

หลักการออกแบบเว็บไซต์ 2. กำหนดการเชื่อมโยงระหว่างเว็บเพจ

หลักการออกแบบเว็บไซต์ 3. การออกแบบเว็บเพจแต่ละหน้า ในขั้นตอนการออกแบบนี้อาจเรียกว่าการออกแบบเลย์เอาท์ (Lay Out) สามารถทำได้โดยการเขียนลงในกระดาษ หรือใช้โปรแกรมคอมพิวเตอร์ช่วยในการออกแบบก็ได้ดังภาพ

หลักการออกแบบเว็บไซต์ 4. การสร้างเว็บเพจแต่ละหน้า สร้างโดยใช้ภาษา html หรืออาจใช้โปรแกรมสำเร็จรูป เช่น Macromedia Dreamweaver หรือโปรแกรมสำเร็จรูปอื่น ๆ

หลักการออกแบบเว็บไซต์ 5. การลงทะเบียนขอพื้นที่เว็บไซต์ เป็นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่ระบบเครือข่ายอินเทอร์เน็ต เพื่อให้บุคคลอื่นๆ สามารถเข้าชมเว็บไซต์ของเราได้ วิธีการก็คือนำเว็บไซต์ที่เราสร้างขึ้นไปไว้บนพื้นที่ที่ให้บริการ (Web Hosting) ซึ่งมีพื้นที่ที่ให้บริการฟรีและแบบที่ต้องเสียค่าบริการ

หลักการออกแบบเว็บไซต์ 5. การลงทะเบียนขอพื้นที่เว็บไซต์

หลักการออกแบบเว็บไซต์ 6. การอัพโหลดเว็บไซต์ การคัดลอกข้อมูลจากเครื่องเราไปเก็บไว้ในเครื่อง Server เรียกว่า Upload หลังจากสร้างเว็บไซต์และลงทะเบียนขอพื้นที่สำหรับฝากเว็บไซต์แล้วให้ใช้โปรแกรมสำหรับอัปโหลด (Upload) เช่น โปรแกรม CuteFTP, WinSCP, WS_FTP เพื่อให้คนทั่วโลกสามารถเข้าชมเว็บไซต์ของเราผ่านทางระบบเครือข่ายอินเทอร์เน็ตได้

องค์ประกอบภายในเว็บเพจ ข้อความ (Text) ตัวอักษร อักขระ สัญลักษณ์ กราฟิก (Graphic) รูปภาพ ลายเส้น ลายพื้นต่าง ๆ ภายในเว็บเพจ สื่อประสม (Multimedia) ภาพเคลื่อนไหวและเสียงต่าง ๆ การเชื่อมโยง (Link) เป็นส่วนที่ใช้ในการเชื่อมโยงไปยังเว็บเพจอื่นๆ ทั้งที่เป็นเว็บเพจของตนเอง หรือเว็บเพจของผู้อื่น ฟอร์ม (Form) เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชมเว็บเพจได้กรอกข้อมูล เฟรม (Frame) คือการแบ่งจอภาพออกเป็นส่วน ๆ โดยในแต่ละส่วนนั้นจะแสดงข้อมูลที่แตกต่างกันกันออกไป สคริปต์ (Script) เป็นสิ่งที่แสดงให้เห็นถึงปฏิกิริยาโต้ตอบกันของผู้ใช้งานกับผู้สร้างเว็บเพจอันได้แก่สมุดเยี่ยม และเว็บบอร์ด เป็นต้น

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

การออกแบบโครงสร้างเว็บไซต์ (Flow Chart) 1. หลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้ 1.1 กำหนดวัตถุประสงค์ 1.2 ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้าหมายใด 1.3 วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้าง ต้องมีการจัดโครงสร้างหรือจัดระเบียบข้อมูลที่ชัดเจน ควรออกแบบให้มีลักษณะที่ชัดเจนแยกย่อยออกเป็นส่วนต่างๆ จัดหมวดหมู่ในเรื่องที่สัมพันธ์กัน 1.4 กำหนดรายละเอียดให้กับโครงสร้าง เช่น ผู้ใช้ควรทำอะไรบ้าง จำนวนหน้าควรมีเท่าใด มีการเชื่อมโยงมากน้อยเพียงใด 1.5 สร้างเว็บไซต์แล้วนำไปทดลองเพื่อหาข้อผิดพลาดและทำการแก้ไขปรับปรุง แล้วจึงนำเข้าสู่เครือข่ายอินเทอร์เน็ต

การออกแบบโครงสร้างเว็บไซต์ (Flow Chart) 2.1 เว็บที่มีโครงสร้างแบบเรียงลำดับ (Sequential Structure) มีลักษณะเป็นเรื่องราวตามลำดับของเวลา เช่น การเรียงลำดับตามสารานุกรม เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อน ใช้การลิงก์ไปทีละหน้า ทิศทางของการเข้าสู่เนื้อหาภายในเว็บจะเป็นการดำเนินเรื่องในลักษณะเส้นตรง โดยมีปุ่มเดินหน้า-ถอย ข้อเสียคือ ผู้ใช้ไม่สามารถกำหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ ทำให้เสียเวลาเข้าสู่เนื้อหา

การออกแบบโครงสร้างเว็บไซต์ (Flow Chart) 2.2 เว็บที่มีโครงสร้างแบบลำดับขั้น (Hierarchical Structure) เป็นวิธีที่ดีที่สุดวิธี เหมาะสำหรับโครงสร้างที่มีความซับซ้อนของข้อมูล มีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจและเชื่อมโยงไปสู่เนื้อหาในลักษณะเป็นลำดับจากบนลงล่างเป็นกิ่งก้านแตกแขนงต่อเนื่อง เปรียบได้กับต้นไม้กลับหัว

การออกแบบโครงสร้างเว็บไซต์ (Flow Chart) 2.3 เว็บที่มีโครงสร้างแบบตาราง (Grid Structure) การออกแบบเพิ่มความยืดหยุ่นให้แก่การเข้าสู่เนื้อหาของผู้ใช้ เหมาะแก่การแสดงให้เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้

การออกแบบโครงสร้างเว็บไซต์ (Flow Chart) 2.4 เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure) เป็นโครงสร้างที่มีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ การเชื่อมโยงเนื้อหาแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย โครงสร้างลักษณะนี้จัดเป็นรูปแบบที่ไม่มีโครงสร้างที่แน่นนอนตายตัว (Unstructured)

ข้อแนะนำในการทำเว็บไซต์ 1. รูปแบบหน้าของเว็บไซต์ ส่วนใหญ่จะมีโครงสร้างที่ยอมรับว่าเป็นมาตรฐานอยู่ 3 แบบ คือ

ข้อแนะนำในการทำเว็บไซต์ 2. การจัดรูปแบบเอกสารเว็บเพจ (Page Design) ส่วนหัว (Page Header) อยู่ตอนบนสุดของหน้า เป็นบริเวณที่สำคัญที่สุดเนื่องจากผู้ใช้จะมองเห็นก่อนบริเวณอื่น ส่วนใหญ่นิยมใช้วางเครื่องหมายสัญลักษณ์ โลโก้ของเว็บไซต์ ลิงค์สำหรับการติดต่อ ระบบนำทาง (Navigation) เป็นต้น

ข้อแนะนำในการทำเว็บไซต์ 2. การจัดรูปแบบเอกสารเว็บเพจ (Page Design) ส่วนของเนื้อหา (Page Body) อยู่ตอนกลางหน้า เป็นส่วนที่จะแสดงรายละเอียดของเนื้อหาแต่ละเรื่องสัมพันธ์กับเมนูซึ่งอาจประกอบไปด้วยข้อความ, ภาพกราฟิก, ตารางข้อมูลและอื่นๆ ส่วนท้าย (Page Footer) อยู่ด้านล่างสุดของหน้า ส่วนใหญ่จะนิยมใช้วางระบบนำทางภาพในเว็บไซต์แบบที่เป็นข้อความง่าย ๆ นอกจากนี้อาจจะมีชื่อของเจ้าของข้อความลิขสิทธิ์ และอีเมลล์แอดเดรสของผู้ดูแลเว็บไซต์

ข้อแนะนำในการทำเว็บไซต์ 3. ขนาดเว็บเพจ ขนาดของเว็บเพจที่ใช้กันทั่วไปจะมี 3 ขนาดด้วยคือ ขนาด 640 x 489 Pixel ความละเอียดต่ำ ขนาด 800 x 600 Pixel ความละเอียดปานกลางมาตรฐานทั่วไป ขนาด 1024 x 768 Pixel ความละเอียดสูง

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

ข้อแนะนำในการทำเว็บไซต์ 6. ความเร็วในการโหลดเว็บไซต์ ปัจจัยที่จะกระทบต่อความเร็ว ได้แก่ ขนาดของรูปภาพ, จำนวนของรูปภาพ, ปริมาณของตัวอักษรที่อยู่บนหน้านั้นๆ และความเร็วในการโหลดเว็บไซต์อาจอยู่ที่ Server ที่เว็บไซต์นั้น ๆ เป็นต้น 7. ความง่ายในการค้นหาข้อมูล ปัจจัยหลักนั้นขึ้นอยู่กับโครงสร้างของเว็บไซต์ตั้งแต่ตอนแรก และปัจจัยอื่นๆ อีก เช่น Navigator bar ในทุกๆ หน้าของเว็บไซต์ หรือการให้บริการ Search และ Sitemap ได้ก็จะเป็นสิ่งที่จะช่วยให้ค้นหาข้อมูลได้ง่ายยิ่งขึ้น 8. สามารถดูเว็บไซต์ได้ในหลายบราวเซอร์ การทำเว็บไซต์ควรจะทำเพื่อให้สามารถดูได้จากทุก ๆ Version ของ Software ต่าง ๆ

ข้อแนะนำในการทำเว็บไซต์ 9. ตัวอักษร, ฉากหลังและสี   รูปแบบที่นิยมใช้คือ ตัวอักษรสีดำบนฉากหลังขาว 10. รูปภาพ   ไฟล์ที่ใช้ คือ GIF หรือ JPEG และควรจะมีการคะเนขนาดของรูปภาพ ที่จะใส่บนเว็บไซต์ก่อนเพื่อจะได้ใช้ขนาด และอัตราส่วนที่พึงพอใจมากที่สุด  11. ส่วนประกอบที่ขาดไม่ได้ของเว็บไซต์   เช่น หัวข้อที่เกี่ยวกับผู้จัดทำอาจเป็นประวัติความเป็นมา และ/หรือข้อมูลปัจจุบัน, แถบนำทาง, Search, Sitemap, ข้อเสนอแนะ และคำถามที่ถูกถามบ่อย เป็นต้น

ข้อผิดพลาดในการออกแบบเว็บไซต์ 1. ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม การใช้กรอบ (Frame) 2. ใช้เทคโนโลยีขั้นสูงโดยไม่จำเป็น 3. ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา 4. มีที่อยู่เว็บไซต์ที่ซับซ้อน (URL) ยากต่อการจดจำ/พิมพ์ 5. ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ 6. มีความยาวของหน้ามากเกินไป 7. ขาดระบบเนวิเกชันที่มีประสิทธิภาพ 8. ใช้สีของลิงก์ไม่เหมาะสม 9. ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย 10. เว็บเพจแสดงผลช้า

Question and Answer