1. จัดระบบโครงสร้างข้อมูล(Information Architecture) การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า
เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด
เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น
นำมาจัดกลุ่มให้เป็นระบบ
การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี
ได้แก่ รูปแบบการนำเสนอ ระบบการทำงาน
แบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น
การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่
เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด
เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น
นำมาจัดกลุ่มให้เป็นระบบ
การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี
ได้แก่ รูปแบบการนำเสนอ ระบบการทำงาน
แบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น
การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่
เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
Phase 1 : สำรวจปัจจัย (Research)
1. รู้จักตัวเอง
กำหนดเป้าหมายหลักของเว็บ เพื่อใช้เป็นตัวกำหนดขอบเขต
และการทำงานในเว็บให้เหมาะสมกับเป้าหมายที่ตั้งไว้โดยอาจ
แบ่งเป็นเป้าหมายระยะสั้นกับระยะยาวก็ได้เพื่อความสะดวก
ในการประเมินผล เป้าหมายทั่วไปของหน่วยงานธุรกิจ
ได้แก่ เพิ่มจำนวนลูกค้า และ ปริมาณยอดขาย, ยกระดับการให้บริการลูกค้า สร้างภาพลักษณ์
ที่ดีต่อองค์กร ลดต้นทุนในการผลิตหรือแจกจ่ายเอกสาร
ระบุวิธีวัดความสำเร็จ เพื่อประเมินผลความสำเร็จของเว็บไซต์
ยิ่งมีผู้เข้ามาใช้บริการมากเท่าไรก็หมายถึงความสำเร็จที่สูงขึ้น
2. เรียนรู้ผู้ใช้
3. สำรวจการแข่งขันและคู่แข่ง
3.1 สำรวจบรรยากาศการแข่งขัน
3.2 เรียนรู้จากคู่แข่ง
Phase 2 : พัฒนาเนื้อหา (Site Content)
4. สร้างกลยุทธ์การออกแบบ
4.1 ประยุกต์เนื้อหาจากสื่ออื่น
เช่นสิ่งพิมพ์ วิทยุ ซีดีรอม แต่ควรระวังว่าไม่ใช่เพียงเอา
เนื้อหาจากสิ่งพิมพ์ มาใส่รวมไว้ในเว็บเท่านั้นจะทำให้เว็บ
เป็นเพียงรูปแบบหนึ่งของสิ่งพิมพ์เท่านั้น
แต่เว็บเป็นสื่อที่ทำประโยชน์ได้มากกว่า จำเป็นต้อง
ปรับปรุงเนื้อหาที่ได้จากสื่ออื่นให้เหมาะสมกับเป้าหมาย
และกลยุทธ์ของเว็บ
4. สร้างกลยุทธ์การออกแบบ
4.2 เลือกใช้เทคโนโลยีที่เหมาะสม
เลือกใช้เฉพาะเทคโนโลยีที่สามารถจะสื่อข้อความ
ถึงผู้ใช้ส่วนใหญ่ได้
5. หาข้อสรุปขอบเขตเนื้อหา
5.1 กำหนดเนื้อหาและการใช้งานที่จำเป็น
นำข้อมูลที่ได้เตรียมไว้นำมาพิจารณาถึงเนื้อหาที่จำเป็น
ในการสื่อถึงผู้ใช้ พร้อมกับเพิ่มเติมสิ่งอื่นๆ ที่เหมาะสม
เพื่อให้บรรลุ ตามเป้าหมาย
จากนั้นจึงแยกข้อมูลออกเป็น 2 ประเภท
คือ เนื้อหา กับ การใช้งาน
5.2 เก็บรวบรวมและพัฒนาข้อมูล
เก็บรวบรวมและพัฒนาข้อมูลที่จำเป็นในขั้นตอนนี้
ข้อมูลเหล่านี้รวมถึงบทความ รูปภาพ เสียงประกอบ
หรือวิดีโอที่ต้องการนำเสนอในเว็บไซต์ เนื่องจาก
กระบวนการเก็บข้อมูลนี้อาจต้องใช้เวลานานหลาย
สัปดาห์ทั้งนี้ขึ้นอยู่กับความยากง่ายในการได้มาของ
ข้อมูล
จุดประสงค์ของขั้นตอนนี้ คือข้อสรุปขอบเขตเนื้อหาเพื่อ
ทำเป็นโครงสร้างข้อมูลของเว็บไซต์
ข้อมูล
กำหนดเป้าหมายหลักของเว็บ เพื่อใช้เป็นตัวกำหนดขอบเขต
และการทำงานในเว็บให้เหมาะสมกับเป้าหมายที่ตั้งไว้โดยอาจ
แบ่งเป็นเป้าหมายระยะสั้นกับระยะยาวก็ได้เพื่อความสะดวก
ในการประเมินผล เป้าหมายทั่วไปของหน่วยงานธุรกิจ
ได้แก่ เพิ่มจำนวนลูกค้า และ ปริมาณยอดขาย, ยกระดับการให้บริการลูกค้า สร้างภาพลักษณ์
ที่ดีต่อองค์กร ลดต้นทุนในการผลิตหรือแจกจ่ายเอกสาร
ระบุวิธีวัดความสำเร็จ เพื่อประเมินผลความสำเร็จของเว็บไซต์
ยิ่งมีผู้เข้ามาใช้บริการมากเท่าไรก็หมายถึงความสำเร็จที่สูงขึ้น
2. เรียนรู้ผู้ใช้
3. สำรวจการแข่งขันและคู่แข่ง
3.1 สำรวจบรรยากาศการแข่งขัน
3.2 เรียนรู้จากคู่แข่ง
Phase 2 : พัฒนาเนื้อหา (Site Content)
4. สร้างกลยุทธ์การออกแบบ
4.1 ประยุกต์เนื้อหาจากสื่ออื่น
เช่นสิ่งพิมพ์ วิทยุ ซีดีรอม แต่ควรระวังว่าไม่ใช่เพียงเอา
เนื้อหาจากสิ่งพิมพ์ มาใส่รวมไว้ในเว็บเท่านั้นจะทำให้เว็บ
เป็นเพียงรูปแบบหนึ่งของสิ่งพิมพ์เท่านั้น
แต่เว็บเป็นสื่อที่ทำประโยชน์ได้มากกว่า จำเป็นต้อง
ปรับปรุงเนื้อหาที่ได้จากสื่ออื่นให้เหมาะสมกับเป้าหมาย
และกลยุทธ์ของเว็บ
4. สร้างกลยุทธ์การออกแบบ
4.2 เลือกใช้เทคโนโลยีที่เหมาะสม
เลือกใช้เฉพาะเทคโนโลยีที่สามารถจะสื่อข้อความ
ถึงผู้ใช้ส่วนใหญ่ได้
5. หาข้อสรุปขอบเขตเนื้อหา
5.1 กำหนดเนื้อหาและการใช้งานที่จำเป็น
นำข้อมูลที่ได้เตรียมไว้นำมาพิจารณาถึงเนื้อหาที่จำเป็น
ในการสื่อถึงผู้ใช้ พร้อมกับเพิ่มเติมสิ่งอื่นๆ ที่เหมาะสม
เพื่อให้บรรลุ ตามเป้าหมาย
จากนั้นจึงแยกข้อมูลออกเป็น 2 ประเภท
คือ เนื้อหา กับ การใช้งาน
5.2 เก็บรวบรวมและพัฒนาข้อมูล
เก็บรวบรวมและพัฒนาข้อมูลที่จำเป็นในขั้นตอนนี้
ข้อมูลเหล่านี้รวมถึงบทความ รูปภาพ เสียงประกอบ
หรือวิดีโอที่ต้องการนำเสนอในเว็บไซต์ เนื่องจาก
กระบวนการเก็บข้อมูลนี้อาจต้องใช้เวลานานหลาย
สัปดาห์ทั้งนี้ขึ้นอยู่กับความยากง่ายในการได้มาของ
ข้อมูล
จุดประสงค์ของขั้นตอนนี้ คือข้อสรุปขอบเขตเนื้อหาเพื่อ
ทำเป็นโครงสร้างข้อมูลของเว็บไซต์
ข้อมูล
Phase3: พัฒนาโครงสร้างเว็บไซต์ (Site Structure)
6. จัดระบบข้อมูล
จัดกลุ่มและระบุชื่อเนื้อหา
เมื่อมีข้อมูลจำนวนมากที่จะนำมาใช้จะต้องนำข้อมูล
เหล่านั้นมาจัดให้เป็นระบบ เพื่อให้ได้เป็น ร่างแผนผัง
โครงสร้าง (Draft architecture plan) ระบบโครงสร้าง
ข้อมูลที่ดีมีส่วนช่วยให้ผู้ใช้เข้าใจภาพรวมของเนื้อหา
ได้ดีขึ้นจัดกลุ่มและระบุชื่อเนื้อหา
วิธีที่ช่วยในการจัดระบบข้อมูลได้ดีคือ การใช้
แบบจำลองระบบโครงสร้าง จากสิ่งต่าง ๆ ทีอยู่รอบตัว
ช่วยให้มีอิสระทางความคิดมากขึ้นและอาจทำให้
ค้นพบระบบข้อมูลที่เหมาะสมทั้งหมดให้สมบูรณ์ขึ้น
7. จัดทำโครงสร้างข้อมูล
โครงสร้างที่ดีจะช่วยสร้างระบบเนวิเกชันได้ง่ายขึ้น
7.1 จัดทำรายการโครงสร้างของเว็บ
การจัดโครงสร้างเนื้อหาแสดงถึงกลุ่มข้อมูลและ
ลำดับชั้นของหัวข้อย่อย โดยอยู่ในรูปแบบตัวหนังสือ
ทั้งหมดก่อน
7.2 จัดทำแผนผังโครงสร้างของเว็บ
นำรายการโครงสร้างของไซต์ข้างต้นมาจัดให้เป็นแบบ
แผนที่สื่อความหมายยิ่งขึ้นโดยสร้างเป็นแผนผังแสดงถึง
โครงสร้างข้อมูล ลำดับชั้น และการเชื่อมโยงของแต่ละ
ส่วนอย่างชัดเจน เรียกว่า แผนผังโครงสร้างเว็บไซต์
เป็นการแสดงภาพรวมของเว็บ ในเชิงกราฟิก
7.2 จัดทำแผนผังโครงสร้างของเว็บ
นอกจากนี้ยังมีแผนผังโครงสร้างเว็บอย่างง่ายที่เรียกว่า
Site map แสดงภาพรวมของเนื้อหาหลักภายในเว็บ
แต่มีรายละเอียดมากเท่ากับ แผนผังโครงสร้างเว็บ
โดยอาจจัดทำเป็นแบบตัวหนังสือหรือแบบกราฟิกก็ได้
8. พัฒนาระบบเนวิเกชัน
8.1 วางแนวทางการเคลื่อนที่ภายในไซท์
เป็นการกำหนดขอบเขตของข้อมูลส่วนต่าง ๆ ร่วมกับ
การสร้างทางเชื่อมโยงถึงกัน
ขั้นตอนนี้อาจต้องใช้แผนภาพประกอบการสร้าง
Flowchart หรือ Storyboard แสดงแนวทางและรูปแบบ
การเชื่อมโยงที่ชัดเจน
8.2 สร้างระบบเนวิเกชัน
ระบบเนวิเกชันหรือระบบนำทาง เป็นเครื่องมือสำคัญ
ที่จะนำผู้ใช้ไปยังส่วนต่างๆของเว็บได้ กระบวนการ
สร้างระบบเนวิเกชัน เริ่มต้นจากการพิจารณาแผนผัง
โครงสร้างเว็บ ร่วมกับแนวทางการเคลื่อนที่ภายในไซท์
ที่มีอยู่ เพื่อให้ได้ระบบนำทางที่จะพาผู้ใช้ไปสู่ส่วน
ต่างๆ ของเว็บ
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บเพจ
9.1 สร้างแบบจำลองรายละเอียดข้อมูลในหน้าเว็บ
ในขั้นนี้จะเป็นการสร้างแบบจำลองข้อมูลด้วย
ตัวหนังสือยังไม่มีลักษณะของกราฟิกและสิ่งที่จะสร้าง
ขึ้นก็เป็นแบบจำลองของหน้าเว็บหลักๆ เท่านั้น ซึ่งเมื่อ
นำไปรวมกับการออกแบบลักษณะหน้าตาของเว็บจะ
ได้เป็นเทมเพลตเพื่อไปใช้กับหน้าย่อยอื่นต่อไป
9.2 จัดแบ่งพื้นที่ในหน้าเว็บ
เริ่มต้นจากการพิจารณารายการโครงสร้างของไซต์
ร่วมกับข้อสรุปขอบเขตเนื้อหาแล้วจำแนกรูปแบบ
ของหน้าเว็บที่จำเป็นต้องมี จากนั้นสรุปให้เหลือ
เพียง 2- 3 แบบ
ขั้นตอนนี้ต้องจัดแบ่งพื้นที่ในหน้าเว็บ โลโก้หรือ
สัญลักษณ์ของหน่วยงานควรมีปรากฏอยู่ในทุกหน้า
แสดงให้รู้ว่ากำลังอยู่ในเว็บเดียวกัน ตำแหน่งที่ดีที่สุด
ในการวางโลโก้ไว้คือ มุมซ้ายบนสุด
ระบบเนวิเกชันหลักจำเป็นต้องมีอยู่ในทุกๆ หน้า ณ
ตำแหน่งเดียวกันตลอดทั้งเว็บ
9.3 ออกแบบโครงร่างของหน้าตาเว็บ
ขั้นตอนนี้ต้องอาศัยผู้เชี่ยวชาญการออกแบบกราฟิก
เข้ามาช่วย เริ่มจากการร่างภาพคร่าวๆในกระดาษ
อาจเริ่มจากโปรแกรม Photoshop สร้างเป็นรูปของ
โครงร่างของหน้าเว็บขึ้น
ทันทีหลังจากจบขั้นตอนนี้จะได้ตัวอย่างลักษณะของ
เว็บ ซึ่งอาจดีไซน์ออกมาได้หลายรูปแบบ
10. พัฒนาเว็บต้นแบบและโครงสร้างเว็บขั้นสุดท้าย
10.1 สร้างและทดสอบเว็บต้นฉบับ
หลังจากเลือกรูปแบบเว็บที่ต้องการได้แล้วนำไป
สร้างเป็นเว็บต้นแบบซึ่งจะประกอบด้วยตัวอักษร
ลิงค์ และองค์ประกอบหลักๆ เท่าที่จำเป็นเพื่อนำไป
ทดสอบการใช้งานกับตัวอย่างกลุ่มผู้ใช้หลายๆคน
10.2 สรุปแผนผังโครงสร้างเว็บขั้นสุดท้าย
หลังจากผ่านการทดสอบจากผู้ใช้แล้ว ถ้าพบปัญหา
ใดๆที่เกี่ยวกับการใช้งานก็ต้องแก้ไขให้เรียบร้อย
ผลลัพธ์ขั้นสุดท้ายจากขั้นตอนนี้ คือ
แผนผังโครงสร้างเว็บไซท์ขั้นสุดท้ายเรียกว่า
Final architecture blueprint
10.3 ระบุข้อกำหนดในการพัฒนาเว็บไซท์
ข้อกำหนด(Specs) คือเอกสารที่กำหนดลักษณะการ
ออกแบบ หรือสิ่งที่ต้องการทางเทคนิคที่ได้จาก
ขั้นตอนต่างๆ ที่ผ่านมาซึ่งจะประกอบด้วยรูปแบบ
โครงสร้างเว็บ การจัดระบบข้อมูล เทคโนโลยีที่จะ
นำมาใช้ ระบบการตั้งชื่อไฟล์ให้สื่อความหมาย
รวมถึงรายละเอียดต่างๆที่จะนำไปใช้เป็นแนวทางใน
การพัฒนาเว็บ
Phase 5 : พัฒนาและดำเนินการ (Production &Operation)
11. ลงมือพัฒนาเว็บ
11.1 เรียบเรียงและตรวจสอบข้อมูล
เริ่มจากการจัดเตรียมข้อมูลให้พร้อม โดยนำข้อมูล
ที่มีอยู่มาเรียบเรียงให้มีรูปแบบที่เหมาะสม จัดรูปแบบ
เนื้อหาให้อ่านง่ายและชัดเจน ตรวจสอบคำผิดและ
ข้อผิดพลาดอื่นๆ เพื่อไม่ให้ผู้อ่านรู้สึกสับสนและ
เสียความเชื่อถือได้
11.2 ตกแต่งหน้าเว็บให้สมบูรณ์
นำต้นแบบเว็บที่ได้ออกแบบไว้มาตกแต่งปรับปรุงให้
สมบูรณ์ในขั้นตอนนี้ โดยเว็บที่ได้จะประกอบด้วย
ข้อความ รูปภาพ กราฟิก เนวิเกชันและองค์ประกอบที่
จำเป็น
11.3 สร้างเทมเพลตสำหรับหน้าเว็บ
เมื่อทุกอย่างลงตัวแล้วเราควรจะสร้างโครงร่างมาตรฐาน
หรือเรียกว่าเทมเพลต ซึ่งคือไฟล์ HTMLที่ประกอบด้วย
โครงสร้างหลักขององค์ประกอบต่างๆ ที่จะมีอยู่ในทุก
หน้าของเว็บ เมื่อเอาเนื้อหาที่มีอยู่มาใส่ในเทมเพลตก็จะ
ได้เป็นหน้าเว็บที่สมบูรณ์
11.3 สร้างเทมเพลตสำหรับหน้าเว็บ
โปรแกรมช่วยสร้าง เช่น Dreamweaver สามารถช่วย
จัดการเทมเพลตได้เป็นอย่างดีที่สำคัญเมื่อเปลี่ยนแปลง
ส่วนใดส่วนหนึ่งในเทมเพลตโปรแกรมจะตามไปแก้ไข
ข้อมูลส่วนนั้นในทุกหน้าของเว็บที่ใช้เทมเพลตเดียวกัน
อัตโนมัติ จะเป็นประโยชน์มากถ้ามีเว็บเพจจำนวนมากที่
มักมีการเปลี่ยนแปลงบ่อยๆ
11.4 พัฒนาระบบการใช้งานของเว็บ
พัฒนาระบบการทำงานที่จำเป็นของเว็บซึ่งต้องอาศัย
การเขียนโปรแกรม CGI,ASP,JAVA,JAVAScrip หรือ
Flash ตามความเหมาะสมเมื่อได้ระบบการทำงานที่
สำเร็จแล้วนำไปประกอบเข้าในเว็บที่มีอยู่
ระบบการใช้งานที่นิยมใช้ในเว็บทั่วไป เช่น
guestbook,counter,web board, form mail หรือ countdown
12. เปิดตัวเว็บไซต์(Launch)
ก่อนเปิดตัวควรทดสอบการใช้งานเพื่อค้นหาข้อผิดพลาด
ที่อาจเกิดขึ้นเสียก่อน เมื่อเปิดตัวแล้วต้องดำเนินการ
ประชาสัมพันธ์ให้เป็นที่รู้จัก
12.1 ทดสอบคุณภาพการใช้งานและความถูกต้อง
- การใช้งาน
- ความสม่ำเสมอและความถูกต้อง
- ความเข้ากันได้กับสิ่งแวดล้อมของผู้ใช้
12.2 ทำให้เว็บเป็นที่รู้จัก
- การลงทะเบียนกับ search engine วิธีการโปรโมท offline โดยการอาศัยการ
ประชาสัมพันธ์แบบไม่ใช้อินเตอร์เน็ตโดยใช้สื่อ
ทั่วไปเช่น นิตยสาร วิทยุ ทีวี หนังสือพิมพ์ เป็นต้น
13. ดูแลและพัฒนาระบบต่อเนื่อง
13.1 เพิ่มข้อมูลใหม่โดยยึดรูปแบบมาตรฐาน
13.2 วิเคราะห์สถิติการใช้บริการในเว็บ
13.3 ตรวจสอบความถูกต้องของลิงค์
13.4 ตรวจสอบเนื้อหาและการใช้งานเว็บให้ถูกต้อง
ทันสมัย และตรงกับความต้องการของผู้ใช้อยู่เสมอ
6. จัดระบบข้อมูล
จัดกลุ่มและระบุชื่อเนื้อหา
เมื่อมีข้อมูลจำนวนมากที่จะนำมาใช้จะต้องนำข้อมูล
เหล่านั้นมาจัดให้เป็นระบบ เพื่อให้ได้เป็น ร่างแผนผัง
โครงสร้าง (Draft architecture plan) ระบบโครงสร้าง
ข้อมูลที่ดีมีส่วนช่วยให้ผู้ใช้เข้าใจภาพรวมของเนื้อหา
ได้ดีขึ้นจัดกลุ่มและระบุชื่อเนื้อหา
วิธีที่ช่วยในการจัดระบบข้อมูลได้ดีคือ การใช้
แบบจำลองระบบโครงสร้าง จากสิ่งต่าง ๆ ทีอยู่รอบตัว
ช่วยให้มีอิสระทางความคิดมากขึ้นและอาจทำให้
ค้นพบระบบข้อมูลที่เหมาะสมทั้งหมดให้สมบูรณ์ขึ้น
7. จัดทำโครงสร้างข้อมูล
โครงสร้างที่ดีจะช่วยสร้างระบบเนวิเกชันได้ง่ายขึ้น
7.1 จัดทำรายการโครงสร้างของเว็บ
การจัดโครงสร้างเนื้อหาแสดงถึงกลุ่มข้อมูลและ
ลำดับชั้นของหัวข้อย่อย โดยอยู่ในรูปแบบตัวหนังสือ
ทั้งหมดก่อน
7.2 จัดทำแผนผังโครงสร้างของเว็บ
นำรายการโครงสร้างของไซต์ข้างต้นมาจัดให้เป็นแบบ
แผนที่สื่อความหมายยิ่งขึ้นโดยสร้างเป็นแผนผังแสดงถึง
โครงสร้างข้อมูล ลำดับชั้น และการเชื่อมโยงของแต่ละ
ส่วนอย่างชัดเจน เรียกว่า แผนผังโครงสร้างเว็บไซต์
เป็นการแสดงภาพรวมของเว็บ ในเชิงกราฟิก
7.2 จัดทำแผนผังโครงสร้างของเว็บ
นอกจากนี้ยังมีแผนผังโครงสร้างเว็บอย่างง่ายที่เรียกว่า
Site map แสดงภาพรวมของเนื้อหาหลักภายในเว็บ
แต่มีรายละเอียดมากเท่ากับ แผนผังโครงสร้างเว็บ
โดยอาจจัดทำเป็นแบบตัวหนังสือหรือแบบกราฟิกก็ได้
8. พัฒนาระบบเนวิเกชัน
8.1 วางแนวทางการเคลื่อนที่ภายในไซท์
เป็นการกำหนดขอบเขตของข้อมูลส่วนต่าง ๆ ร่วมกับ
การสร้างทางเชื่อมโยงถึงกัน
ขั้นตอนนี้อาจต้องใช้แผนภาพประกอบการสร้าง
Flowchart หรือ Storyboard แสดงแนวทางและรูปแบบ
การเชื่อมโยงที่ชัดเจน
8.2 สร้างระบบเนวิเกชัน
ระบบเนวิเกชันหรือระบบนำทาง เป็นเครื่องมือสำคัญ
ที่จะนำผู้ใช้ไปยังส่วนต่างๆของเว็บได้ กระบวนการ
สร้างระบบเนวิเกชัน เริ่มต้นจากการพิจารณาแผนผัง
โครงสร้างเว็บ ร่วมกับแนวทางการเคลื่อนที่ภายในไซท์
ที่มีอยู่ เพื่อให้ได้ระบบนำทางที่จะพาผู้ใช้ไปสู่ส่วน
ต่างๆ ของเว็บ
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บเพจ
9.1 สร้างแบบจำลองรายละเอียดข้อมูลในหน้าเว็บ
ในขั้นนี้จะเป็นการสร้างแบบจำลองข้อมูลด้วย
ตัวหนังสือยังไม่มีลักษณะของกราฟิกและสิ่งที่จะสร้าง
ขึ้นก็เป็นแบบจำลองของหน้าเว็บหลักๆ เท่านั้น ซึ่งเมื่อ
นำไปรวมกับการออกแบบลักษณะหน้าตาของเว็บจะ
ได้เป็นเทมเพลตเพื่อไปใช้กับหน้าย่อยอื่นต่อไป
9.2 จัดแบ่งพื้นที่ในหน้าเว็บ
เริ่มต้นจากการพิจารณารายการโครงสร้างของไซต์
ร่วมกับข้อสรุปขอบเขตเนื้อหาแล้วจำแนกรูปแบบ
ของหน้าเว็บที่จำเป็นต้องมี จากนั้นสรุปให้เหลือ
เพียง 2- 3 แบบ
ขั้นตอนนี้ต้องจัดแบ่งพื้นที่ในหน้าเว็บ โลโก้หรือ
สัญลักษณ์ของหน่วยงานควรมีปรากฏอยู่ในทุกหน้า
แสดงให้รู้ว่ากำลังอยู่ในเว็บเดียวกัน ตำแหน่งที่ดีที่สุด
ในการวางโลโก้ไว้คือ มุมซ้ายบนสุด
ระบบเนวิเกชันหลักจำเป็นต้องมีอยู่ในทุกๆ หน้า ณ
ตำแหน่งเดียวกันตลอดทั้งเว็บ
9.3 ออกแบบโครงร่างของหน้าตาเว็บ
ขั้นตอนนี้ต้องอาศัยผู้เชี่ยวชาญการออกแบบกราฟิก
เข้ามาช่วย เริ่มจากการร่างภาพคร่าวๆในกระดาษ
อาจเริ่มจากโปรแกรม Photoshop สร้างเป็นรูปของ
โครงร่างของหน้าเว็บขึ้น
ทันทีหลังจากจบขั้นตอนนี้จะได้ตัวอย่างลักษณะของ
เว็บ ซึ่งอาจดีไซน์ออกมาได้หลายรูปแบบ
10. พัฒนาเว็บต้นแบบและโครงสร้างเว็บขั้นสุดท้าย
10.1 สร้างและทดสอบเว็บต้นฉบับ
หลังจากเลือกรูปแบบเว็บที่ต้องการได้แล้วนำไป
สร้างเป็นเว็บต้นแบบซึ่งจะประกอบด้วยตัวอักษร
ลิงค์ และองค์ประกอบหลักๆ เท่าที่จำเป็นเพื่อนำไป
ทดสอบการใช้งานกับตัวอย่างกลุ่มผู้ใช้หลายๆคน
10.2 สรุปแผนผังโครงสร้างเว็บขั้นสุดท้าย
หลังจากผ่านการทดสอบจากผู้ใช้แล้ว ถ้าพบปัญหา
ใดๆที่เกี่ยวกับการใช้งานก็ต้องแก้ไขให้เรียบร้อย
ผลลัพธ์ขั้นสุดท้ายจากขั้นตอนนี้ คือ
แผนผังโครงสร้างเว็บไซท์ขั้นสุดท้ายเรียกว่า
Final architecture blueprint
10.3 ระบุข้อกำหนดในการพัฒนาเว็บไซท์
ข้อกำหนด(Specs) คือเอกสารที่กำหนดลักษณะการ
ออกแบบ หรือสิ่งที่ต้องการทางเทคนิคที่ได้จาก
ขั้นตอนต่างๆ ที่ผ่านมาซึ่งจะประกอบด้วยรูปแบบ
โครงสร้างเว็บ การจัดระบบข้อมูล เทคโนโลยีที่จะ
นำมาใช้ ระบบการตั้งชื่อไฟล์ให้สื่อความหมาย
รวมถึงรายละเอียดต่างๆที่จะนำไปใช้เป็นแนวทางใน
การพัฒนาเว็บ
Phase 5 : พัฒนาและดำเนินการ (Production &Operation)
11. ลงมือพัฒนาเว็บ
11.1 เรียบเรียงและตรวจสอบข้อมูล
เริ่มจากการจัดเตรียมข้อมูลให้พร้อม โดยนำข้อมูล
ที่มีอยู่มาเรียบเรียงให้มีรูปแบบที่เหมาะสม จัดรูปแบบ
เนื้อหาให้อ่านง่ายและชัดเจน ตรวจสอบคำผิดและ
ข้อผิดพลาดอื่นๆ เพื่อไม่ให้ผู้อ่านรู้สึกสับสนและ
เสียความเชื่อถือได้
11.2 ตกแต่งหน้าเว็บให้สมบูรณ์
นำต้นแบบเว็บที่ได้ออกแบบไว้มาตกแต่งปรับปรุงให้
สมบูรณ์ในขั้นตอนนี้ โดยเว็บที่ได้จะประกอบด้วย
ข้อความ รูปภาพ กราฟิก เนวิเกชันและองค์ประกอบที่
จำเป็น
11.3 สร้างเทมเพลตสำหรับหน้าเว็บ
เมื่อทุกอย่างลงตัวแล้วเราควรจะสร้างโครงร่างมาตรฐาน
หรือเรียกว่าเทมเพลต ซึ่งคือไฟล์ HTMLที่ประกอบด้วย
โครงสร้างหลักขององค์ประกอบต่างๆ ที่จะมีอยู่ในทุก
หน้าของเว็บ เมื่อเอาเนื้อหาที่มีอยู่มาใส่ในเทมเพลตก็จะ
ได้เป็นหน้าเว็บที่สมบูรณ์
11.3 สร้างเทมเพลตสำหรับหน้าเว็บ
โปรแกรมช่วยสร้าง เช่น Dreamweaver สามารถช่วย
จัดการเทมเพลตได้เป็นอย่างดีที่สำคัญเมื่อเปลี่ยนแปลง
ส่วนใดส่วนหนึ่งในเทมเพลตโปรแกรมจะตามไปแก้ไข
ข้อมูลส่วนนั้นในทุกหน้าของเว็บที่ใช้เทมเพลตเดียวกัน
อัตโนมัติ จะเป็นประโยชน์มากถ้ามีเว็บเพจจำนวนมากที่
มักมีการเปลี่ยนแปลงบ่อยๆ
11.4 พัฒนาระบบการใช้งานของเว็บ
พัฒนาระบบการทำงานที่จำเป็นของเว็บซึ่งต้องอาศัย
การเขียนโปรแกรม CGI,ASP,JAVA,JAVAScrip หรือ
Flash ตามความเหมาะสมเมื่อได้ระบบการทำงานที่
สำเร็จแล้วนำไปประกอบเข้าในเว็บที่มีอยู่
ระบบการใช้งานที่นิยมใช้ในเว็บทั่วไป เช่น
guestbook,counter,web board, form mail หรือ countdown
12. เปิดตัวเว็บไซต์(Launch)
ก่อนเปิดตัวควรทดสอบการใช้งานเพื่อค้นหาข้อผิดพลาด
ที่อาจเกิดขึ้นเสียก่อน เมื่อเปิดตัวแล้วต้องดำเนินการ
ประชาสัมพันธ์ให้เป็นที่รู้จัก
12.1 ทดสอบคุณภาพการใช้งานและความถูกต้อง
- การใช้งาน
- ความสม่ำเสมอและความถูกต้อง
- ความเข้ากันได้กับสิ่งแวดล้อมของผู้ใช้
12.2 ทำให้เว็บเป็นที่รู้จัก
- การลงทะเบียนกับ search engine วิธีการโปรโมท offline โดยการอาศัยการ
ประชาสัมพันธ์แบบไม่ใช้อินเตอร์เน็ตโดยใช้สื่อ
ทั่วไปเช่น นิตยสาร วิทยุ ทีวี หนังสือพิมพ์ เป็นต้น
13. ดูแลและพัฒนาระบบต่อเนื่อง
13.1 เพิ่มข้อมูลใหม่โดยยึดรูปแบบมาตรฐาน
13.2 วิเคราะห์สถิติการใช้บริการในเว็บ
13.3 ตรวจสอบความถูกต้องของลิงค์
13.4 ตรวจสอบเนื้อหาและการใช้งานเว็บให้ถูกต้อง
ทันสมัย และตรงกับความต้องการของผู้ใช้อยู่เสมอ
บทที่ 3
ออกแบบเพื่อผู้ใช้
ตัวอย่างเป้าหมายของเว็บทั่วไป ได้แก่
-เพิ่มรายได้จากการขายสินค้าหรือให้บริการอย่างสมบูรณ์
-สร้างความแตกต่างเหนือคู่แข่ง
-โปรโมทสินค้าหรือบริการ ให้เป็นที่รู้จักในวงกว้าง
-ลดค่าใช้จ่ายด้านการพิมพ์หรือการโฆษณา
-เข้าถึงลูกค้ากลุ่มใหม่ เพื่อขยายฐานลูกค้า
-ลดปริมาณโทรศัพท์ ในการตอบคำถามลูกค้า
-สร้างภาพลักษณ์ที่ดีของหน่วยงาน
ออกแบบเพื่อผู้ใช้
ตัวอย่างเป้าหมายของเว็บทั่วไป ได้แก่
-เพิ่มรายได้จากการขายสินค้าหรือให้บริการอย่างสมบูรณ์
-สร้างความแตกต่างเหนือคู่แข่ง
-โปรโมทสินค้าหรือบริการ ให้เป็นที่รู้จักในวงกว้าง
-ลดค่าใช้จ่ายด้านการพิมพ์หรือการโฆษณา
-เข้าถึงลูกค้ากลุ่มใหม่ เพื่อขยายฐานลูกค้า
-ลดปริมาณโทรศัพท์ ในการตอบคำถามลูกค้า
-สร้างภาพลักษณ์ที่ดีของหน่วยงาน
ทำไมผู้ใช้จึงอยากเข้ามาในเว็บคุณ?
การรวมความต้องการของหน่วยงานเข้ากับความต้องการของผู้ใช้ จะเป็นพื้นฐานสำคัญในการกำหนดกลยุทธ์ของเว็บไซต์ และเป็นแนวทางสำคัญในการกำหนดเนื้อหาและฟีเจอร์ต่างๆ ของเว็บต่อไป
ความต้องการของหน่วยงาน V.S.ความต้องการของผู้ใช้
เว็บท่า : ต้องการรวมทุกสิ่งทุกอย่างไว้ในเว็บของตนเพื่อเป็นศูนย์กลางความบันเทิง ข่าวสาร และสาระต่างๆ ขณะที่ผู้ใช้อาจต้องการเพียงเข้าไปค้นหาลิงค์ ของเว็บที่สนใจ เพื่อเข้าไปยังเว็บไซต์เหล่านั้น
เว็บธุรกิจ : ต้องการปรับตำแหน่งของบริษัทให้มี ภาพลักษณ์ที่ดีขึ้น โดยอาศัยการออกแบบที่สวยงามและเน้นถึงกลยุทธ์ใหม่ของบริษัท ขณะที่ผู้ใช้อาจไม่
สนใจสิ่งเหล่านั้น ต้องการเพียงข้อมูลของสินค้าเท่านั้น
วิธีการในการเรียนรู้เกี่ยวกับผู้ใช้
1. สอบถามจากผู้ใช้
2. ทดสอบการใช้งานจากผู้ใช้ คัดเลือกผู้ใช้แต่ละกลุ่มทดลองใช้งานเว็บของคุณ
3. สังเกตพฤติกรรมของผู้ใช้ จากข้อมูลทางสถิติจากเว็บเซิร์ฟเวอร์(traffic log) ทำให้ทราบลักษณะการใช้งาน
4. สำรวจข้อมูลผู้ใช้ เช่น เว็บขายสินค้า ให้ความสนใจในอาชีพและรายได้ของผู้ใช้ แต่เว็บซื้อขายหุ้นไม่ค่อยสนใจเรื่องเหล่านี้
บทที่4
จัดระบบข้อมูลในเว็บ
ปัญหาความคลุมเครือของกลุ่มข้อมูล
-การแบ่งข้อมูลต้องอาศัยพื้นฐานทางด้านภาษามาช่วยเพราะคำหนึ่งคำมีความหมายได้หลายอย่างในเหตุการณ์ต่างกัน
-การแบ่งหมวกหมู่ในเว็บมักจะเกี่ยวข้องกับสิ่งที่เป็นนามธรรม เช่น หัวเรื่องหรือข้อความ
ดังนั้นจึงเป็นการยากที่จะทำให้ทุกคนเข้าใจระบบการจัดกลุ่มข้อมูลที่เราได้ออกแบบไว้
การจัดลำดับความสำคัญของข้อมูล
ได้แก่ การจัดกลุ่มข้อมูลการกำหนดตำแหน่งของข้อมูลและเทคนิคที่ใช้นำเสนอ
ผู้ออกแบบควรจัดกลุ่มข้อมูลที่มีความสัมพันธ์กันให้อยู่ในกลุ่มเดียวกัน โดยรูปแบบ
การจัดกลุ่มข้อมูลอาจกระทำได้หลายลักษณะ
หลักการออกแบบโครงสร้างระบบข้อมูลแบบลำดับชั้น
ควรมีจำนวน 7 บวกลบ 2 รายการในเมนูที่มีจำนวนรายการมากกว่า 10
จะสร้างความรู้สึกว่ามากเกินไปส่วนความลึกไม่ควรเกิน 4-5 ชั้น
เพราะจะทำให้ผู้ใช้อาจหมดหวังและเลิกล้มความตั้งใจได้
โครงสร้างระบบข้อมูลแบบไฮเปอร์เท็กซ์
มีลักษณะคล้ายเครือข่ายโยงใยโครงสร้างระบบนี้แบ่งเป็น 2 ส่วนคือ
รายการหรือกลุ่มข้อมูลที่ถูกลิงค์กับลิงค์ที่เชื่อมโยงข้อมูลเหล่านั้นส่วนใหญ่จึงมักนำระบบนี้มาใช้เป็นส่วนเสริมให้กับโครงสร้างข้อมูลแบบลำดับชั้น
โครงสร้างข้อมูลแบบฐานข้อมูล
มักนิยมใช้กับเว็บขนาดใหญ่ การนำระบบฐานข้อมูลมาใช้ในเว็บจะช่วยเพิ่ม
ความสามารถในการค้นหาข้อมูลได้อย่างรวดเร็วและถูกต้อง แต่เป็นเรื่องยาก
ที่จะเอาข้อมูลทั้งหมดมาไว้ในฐานข้อมูล
