การออกแบบโครงสร้างของเว็บไซต์

การออกแบบโครงสร้างเว็บไซต์ (Fiow Chart)

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

หลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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


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

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

          2. การใช้งานที่ง่าย ลักษณะของเว็บที่มีการใช้งานง่ายจะช่วยให้ผู้ใช้รู้สึกสบายใจต่อการอ่านและ สามารถทำความเข้าใจกับเนื้อหาได้อย่างเต็มที่ โดยไม่ต้องมาเสียเวลาอยู่กับการทำความเข้าใจ การใช้งานที่สับสนด้วยเหตุนี้ผู้ออกแบบจึงควรกำหนดปุ่มการใช้งานที่ชัดเจน เหมาะสม โดยเฉพาะปุ่มควบคุมเส้นทางการเข้าสู่เนื้อหา (Navigation) ไม่ว่าจะเป็นเดินหน้า ถอยหลัง หากเป็นเว็บไซต์ที่มีเว็บเพจจำนวนมาก ควรจะจัดทำแผนผังของเว็บไซต์ (Site Map) ที่ช่วยให้ผู้ใช้ทราบว่า ตอนนี้อยู่ ณ จุดใด หรือเครื่องมือสืบค้น (Search Engine) ที่ช่วยในการค้นหาหน้าที่ที่ต้องการ
          3. การเชื่อมโยงที่ดี ลักษณะไฮเปอร์เท็กซ์ที่ใช้ในการเชื่อมโยง ควรอยู่ในรูปแบบที่เป็นมาตรฐาน ทั่วไปและต้องระวังเรื่องของตำแหน่งในการเชื่อมโยง การที่จำนวนการเชื่อมโยงมากและกระจัดกระจายอยู่ทั่วไปในหน้าอาจก่อให้เกิด ความสับสน นอกจากนี้คำที่ใช้สำหรับการเชื่อมโยงจะต้องเข้าใจง่ายมีความชัดเจนและไม่ สั้นจนเกินไป นอกจากนี้ในแต่ละเว็บเพจที่สร้างขึ้นมาควรมี จุดเชื่อมโยงกลับมายังหน้าแรกของเว็บไซต์ที่กำลังใช้งานอยู่ด้วย ทั้งนี้เผื่อว่าผู้ใช้เกิดหลงทาง และไม่ทราบว่าจะทำอย่างต่อไปดีจะได้มีหนทางกลับมาสู่จุดเริ่มต้นใหม่ ระวังอย่าให้มีหน้าที่ไม่มีการเชื่อมโยง (Orphan Page) เพราะจะทำให้ผู้ใช้ไม่รู้จะทำอย่างไรต่อไป
          4. ความเหมาะสมในหน้าจอ เนื้อหาที่นำเสนอในแต่ละหน้าจอควรสั้น กระชับ และทันสมัย หลีกเลี่ยงการใช้หน้าจอที่มีลักษณะการเลื่อนขึ้นลง (Scrolling) แต่ถ้าจำเป็นต้องมี ควรจะให้ข้อมูลที่มี ความสำคัญอยู่บริเวณด้านบนสุดของหน้าจอ หลีกเลี่ยงการใช้กราฟิกด้านบนของหน้าจอ เพราะถึงแม้จะดูสวยงาม แต่จะทำให้ผู้ใช้เสียเวลาในการได้รับข้อมูลที่ต้องการ แต่หากต้องมีการใช้ภาพประกอบก็ควรใช้เฉพาะที่มีความสัมพันธ์กับเนื้อหาเท่า นั้น นอกจากนี้การใช้รูปภาพเพื่อเป็นพื้นหลัง (Background) ไม่ควรเน้นสีสันที่ฉูดฉาดมากนัก เพราะอาจจะไปลดความเด่นชัดของเนื้อหาลง ควรใช้ภาพที่มีสีอ่อน ๆ ไม่สว่างจนเกินไปรวมไปถึงการใช้เทคนิคต่าง ๆ เช่น ภาพเคลื่อนไหว หรือตัวอักษรวิ่ง (Marquees) ซึ่งอาจจะเกิดการรบกวนการอ่านได้ ควรใช้เฉพาะที่จำเป็นจริง ๆ เท่านั้นตัวอักษรที่นำมาแสดงบนจอภาพควรเลือกขนาดที่อ่านง่าย ไม่มีสีสันและลวดลายมากเกินไป
          5. ความรวดเร็ว ความรวดเร็วเป็นสิ่งสำคัญประการหนึ่งที่ส่งผลต่อการเรียนรู้ ผู้ใช้จะเกิดอาการเบื่อหน่ายและหมดความสนใจกับเว็บที่ใช้เวลาในการแสดงผลนาน สาเหตุสำคัญที่จะทำให้การแสดงผลนานคือการใช้ภาพกราฟิกหรือภาพเคลื่อนไหว ซึ่งแม้ว่าจะช่วยดึงดูดความสนใจได้ดี ฉะนั้นในการออกแบบจึงควรหลีกเลี่ยงการใช้ภาพขนาดใหญ่ หรือภาพเคลื่อนไหวที่ไม่จำเป็น และพยายามใช้กราฟิกแทนตัวอักษรธรรมดาให้น้อยที่สุด โดยไม่ควรใช้มากเกินกว่า 2 - 3 บรรทัดในแต่ละหน้าจอ 

การออกแบบโครงสร้างเว็บไซต์ (Fiow Chart)

          1. วางแผน/กำหนดข้อหัว และเนื้อหาที่นำเสนอ
          2. สร้างผังโครงสร้างของเว็บไซต์ (Flow Chart) ตัวอย่าง ดังภาพ

          3. การตั้งชื่อไฟล์และโฟลเดอร์
                   ชื่อและนามสกุลไฟล์ ตลอดจนโฟลเดอร์ต่างๆ  ไม่ว่าจะเป็นเอกสารเว็บเพจ รูปภาพ ไฟล์เสียง ไฟล์ VDO ควรใช้อักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 หรือเครื่องมือขีดลบ/ขีดล่าง
          4. สร้างโฟลเดอร์เฉพาะสำหรับเอกสารเว็บแต่ละชุด/เรื่อง ในโฟลเดอร์ที่สร้าง สามารถสร้างโฟลเดอร์ย่อย เพื่อเก็บไฟล์ให้เป็นระบบระเบียบได้
          5. จัดหาภาพหรือสร้างภาพที่เกี่ยวข้องกับเนื้อหา ได้แก่
                   สร้างภาพด้วยโปรแกรมกราฟิก เช่น Adobe PhotoShop
                  คัดเลือกจาก Clipart fot Web เช่น CD-ROM รวมภาพสำหรับเว็บ
          6. ภาพที่เลือกใช้ทั้งหมด ต้องเก็บไว้ในโฟลเดอร์ที่สร้างไว้ก่อนแล้ว
          7. สร้างเอกสารเว็บ โดยลงรหัส HTML หรือใช้โปรแกรมสร้างเว็บช่วย
                  7.1 การสร้างเว็บเพจ โดยลงรหัส HTML
                             ใช้ภาษา HTML โดยห้อนคำสั่งภาษา HTML ด้วยโปรแกรม Text Editor เช่น NotePad, EditPlus
                             ใส่คำสั่งได้ตามต้องการ
                             ไม่เหมาะสำหรับผู้พัฒนาในระดับต้น
                  7.2 .ใช้โปรแกรมสร้างเอกสร้างเว็บ เช่น Macromedia Dreamweaver
                             ไม่ต้องศึกษาภาษา HTML
                            จุดด้อยคือ โปรแกรมจะไม่รู้จักคำสั่ง HTML ใหม่ๆ
          8. ภาษาไทยกับการสร้างเว็บ เลือกรูปแบบการเข้ารหัสภาษาไทยที่ถูกต้อง Windows-874 หรือ TIS-620 
          9. กำหนดฟอนต์ให้กับข้อมูล เพื่อให้แสดงผลภาษาไทยได้ถกต้อง เช่น MS San Serif, Tahoma  เป็นฟอนต์ที่เหมาะสมที่สุดในการแสดงผลภาษาไทย เช่น การเว้นวรรค เป็นระยะในประโยคเพื่อให้บราวเซอร์แสดงผลภาษาไทย
          10. ไฟล์เอกสาร HTML ทุกไฟล์ต้องบันทึกไว้ในโฟลเดอร์ที่สร้างไว้ก่อน รวมกับรูปภาพที่จัดเตรียมไว้แล้ว
          11. ตรวจสอบผลเอกสาร HTML ด้วยบราวเซอร์ซึ่งมีหลายค่ายหลายรุ่น เว็บบราวเซอร์แต่ละค่าย แต่ละรุ่น จะรู้จักคำสั่ง HTML ไม่เท่ากัน
          12. ส่งข้อมูลขึ้นเครื่องคอมพิวเตอร์แม่ข่าย (server)
          13. ตรวจสอบผลของเครื่องคอมพิวเตอร์ลูกข่ายที่เรียกดูข้อมูลจากเครื่องแม่ข่าย 


โครงสร้างเว็บไซต์

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

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

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

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

          ในการจัดระบบโครงสร้างแบบนี้ เนื้อหาที่นำมาใช้แต่ละส่วนควรมีลักษณะที่เหมือนกัน และ สามารถใช้รูปแบบร่วมกัน หลักการออกแบบคือนำหัวข้อทั้งหมดมาบรรจุลงในที่เดียวกันซึ่งโดยทั่วไป จะเป็นหน้าแผนภาพ (Map Page) ที่แสดงในลักษณะเดียวกับโครงสร้างของเว็บ เมื่อผู้ใช้คลิกเลือก หัวข้อใด ก็จะเข้าไปสู่หน้าเนื้อหา (Topic Page) ที่แสดงรายละเอียดของหัวข้อนั้นๆ และภายในหน้านั้น ก็จะมีการเชื่อมโยงไปยังหน้ารายละเอียดของหัวข้ออื่นที่เป็นเรื่องเดียวกัน นอกจากนี้ยังสามารถนำ โครงสร้างแบบเรียงลำดับและแบบลำดับขั้นมาใช้ร่วมกันได้อีกด้วย ถึงแม้โครงสร้างแบบนี้ อาจจะสร้างความยุ่งยากในการเข้าใจได้ และอาจเกิดปัญหาการคงค้าง ของหัวข้อ (Cognitive Overhead) ได้ แต่จะเป็นประโยชน์ที่สุดเมื่อผู้ใช้ได้เข้าใจถึงความสัมพันธ์ ระหว่างเนื้อหา ในส่วนของการออกแบบจำเป็นจะต้องมีการวางแผนที่ดี เนื่องจากมีการเชื่อมโยงที่เกิดขึ้น ได้หลายทิศทาง นอกจากนี้การปรับปรุงแก้ไขอาจเกิดความยุ่งยากเมื่อต้องเพิ่มเนื้อหาในภาย หลัง
4. เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure)
          โครง สร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกัน ได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกำหนดวิธีการเข้าสู่เนื้อหาได้ด้วย ตนเอง การเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความที่มีมโนทัศน์ (Concept) เหมือนกัน ของแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย โครงสร้างลักษณะนี้จัดเป็นรูปแบบที่ ไม่มีโครงสร้างที่แน่นนอนตายตัว (Unstructured) นอกจากนี้การเชื่อมโยงไม่ได้จำกัดเฉพาะเนื้อหา ภายในเว็บนั้นๆ แต่สามารถเชื่อมโยงออกไปสู่เนื้อหาจากเว็บภายนอกได้

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

ข้อมูลจาก http://www.cybered.co.th/warnuts/wbi/index3.htm