1.1 กระบวนการพัฒนาเว็บไซต์
สิ่งแรกที่นักพัฒนาเว็บควรทำเมื่อเริ่มต้นพัฒนาเว็บไซต์ คือ กำหนดกรอบกระบวนการทำงาน (Framework) ที่แสดงให้เห็นถึงขั้นตอนของการพัฒนาเว็บ และรายละเอียดของงานในแต่ละขั้นตอน ตั้งแต่เริ่มต้นกระบวนการจนกระทั่งสิ้นสุดกระบวนการ เพื่อให้การพัฒนาเว็บเป็นไปอย่างมีแบบแผน ถึงแม้ว่าการกำหนดกรอบการทำงานจะเป็นขั้นตอนที่มีความยุ่งยากแต่ก็เป็นเครื่องมือสำคัญที่ช่วยให้การพัฒนาเว็บสำเร็จลุล่วงตรงตามวัตถุประสงค์ได้ เพราะกรอบการทำงานจะช่วยป้องกันความผิดพลาด และความสับสนในระหว่างการพัฒนาเว็บ โดยนักพัฒนาเว็บสามารถย้อนกลับมาตรวจสอบงานตามกรอบการทำงานในภายหลังได้
กรอบการทำงานหรือแบบจำลองกระบวนการ (Process Model) ที่ใช้เพื่อพัฒนาเว็บมีหลายรูปแบบ ยกตัวอย่าง เช่น แบบจำลองกระบวนการในรูปแบบ Agile Process (XP, Scrum, DSDM, FDD และ AM) แบบจำลองลำดับเชิงเส้น (Linear Sequential Model : LSM) เป็นต้น สำหรับในที่นี้จะขอแบบจำลองกระบวนการที่พัฒนาขึ้นโดย Jesse James Garrett ซึ่งจำแนกกระบวนการพัฒนาเว็บออกเป็น 5 ขั้นตอน ได้แก่ การสร้างกลยุทธ์ในการออกแบบ (Strategy Plane)
การกำหนดขอบเขตของข้อมูล (Scope Plane) การทำโครงสร้างข้อมูล (Structrue Plane) การออกแบบโครงร่างเว็บเพจ (Skeleton Plane) และการออกแบบรูปลักษณ์ของเว็บเพจ (Surface Plane)การสร้างกลยุทธ์ในการออกแบบ (Strategy Plane) เป็นขั้นตอนการวิเคราะห์ปัจจัยหลัก 3 ประการ คือ ผู้ใช้ องค์กร และคู่แข่ง เพื่อทราบเป้าหมายหรือแนวทางในการพัฒนาเว็บไซต์ โดยปัจจัยทั้ง 3 ประการ มีรายละเอียดดังนี้
- ผู้ใช้ (User) เป็นการวิเคราะห์ความต้องการของผู้ใช้ โดยการศึกษาหรือทำการสำรวจจากผู้ใช้ที่เป็นกลุ่มเป้าหมายเพื่อตอบคำถามว่า เมื่อผู้ใช้เข้ามายังหน้าเว็บแล้ว ต้องการได้รับข้อมูลใดกลับไปบ้าง มีฟังก์ชันหรือการใช้งานรูปแบบใดบนเว็บไซต์ที่ผู้ใช้ต้องการ และปัญหาหรือข้อบกพร่องที่เกิดจากการใช้งานเว็บที่ได้พบ
- องค์กร (Organization) เป็นการวิเคราะห์เป้าหมายทางธุรกิจ (Business Goal) ทั้งในส่วนเงินทุน บุคลากร และความเป็นไปได้ที่จะพัฒนาเว็บไซต์ขึ้นมาเพื่อใช้งาน รวมทั้งการเก็บรวบรวมข้อมูลขององค์กรที่จำเป็นต่อการออกแบบหน้าเว็บ เช่น โลโก้ (Logo) แบนเนอร์ (Banner) หรือการโฆษณาประชาสัมพันธ์เว็บไซต์ เหล่านี้จะช่วยให้ผู้ใช้จดจำเว็บไซต์ได้ง่ายขึ้น
- คู่แข่ง (Competitor) เป็นการประเมินขอบเขตข้อมูล รูปแบบนำเสนอ และเป้าหมายทางการค้าของบริษัทคู่แข่ง เพื่อพิจารณาจุดอ่อนและจุดแข็งของการออกแบบเว็บ แล้วนำมาประยุกต์ใช้ในการพัฒนาเว็บของบริษัทต่อไป
การกำหนดขอบเขตของข้อมูล (Scope Plane) เป็นการสรุปขอบเขตของข้อมูลที่ควรมีบนหน้าเว็บให้ชัดเจนขึ้น เนื่องจากผู้ออกแบบบางคนอาจมีเทคนิคนำเสนอข้อมูลที่ชื่นชอบ หรือมีแนวทางพัฒนาเว็บหลายวิธีจนทำให้เกิดความสับสนขั้นตอนนี้จึงเป็นการสรุปแนวทางพัฒนาเว็บ โดยพิจารณาขอบเขตข้อมูลให้สอดคล้องกับเป้าหมายที่ได้จากการวิเคราะห์ ปัจจัย 3 ประการในขั้นตอนแรก สามารถจำแนกข้อมูลบนเว็บไซต์ออกเป็น 2 ประเภท ดังนี้
- เนื้อหา (Content Requirements) เป็นข้อมูลทั่วไปที่นำเสนอให้กับผู้ใช้งาน เช่น ข้อความบรรยาย รูปภาพ หรือ เสียงเพลง เป็นต้น
- การใช้งาน (Functional Specfications) เป็นระบบการทำงานหรือการใช้งานบนหน้าเว็บ ซึ่งมักจะเป็นงานที่ต้องมีการปฏิสัมพันธ์โต้ตอบกับผู้ใช้ เข่น การับส่ง E-mail การประมวลผลค่าข้อมูลของแบบฟอร์ม โปรแกรมสนทนาระหว่างผู้ใช้ เป็นต้นการจัดทำโครงการสร้างข้อมูล (Structrue Plane) ภายหลังจากที่ได้กำหนดขอบเขตข้อมูลแล้ว ก็เริ่มต้นกำหนดความสัมพันธ์ระหว่างเนื้อหาและหน้าที่งานบนเว็บไซต์โดยขั้นตอนนี้ประกอบด้วยงาน 2 ลักษณะ ดังนี้
- การออกแบบส่วนปฏิสัมพันธ์กับผู้ใช้ (Interaction Design) เป็นการออกแบบหน้าเว็บสำหรับงานที่มีลักษณะโต้ตอบกับผู้ใช้ เช่น การสั่งซื้อสินค้า การกรอกแบบฟอร์ม และการรับส่ง E-mail เป็นต้น - สถาปัตยกรรมข้อมูล (Information Architecture) เป็นการกำหนดโครงสร้างของเนื้อหาทั้งหมดที่จะนำเสนอบนเว็บไซต์ โดยเชื่อมโยงเว็บเพจแต่ละส่วนไว้ด้วยกันตามความสัมพันธ์ของระบบงาน เพื่อให้ข้อมูลเคลื่อนที่อย่างเป็นระบบจนผู้ใช้งานไม่รู้สึกสะดุดหรือข้ามขั้นตอนเมื่อเรียกใช้หน้าเว็บนั้น โครงสร้างการนำเสนอเนื้อหาของเว็บมี 4 ชนิดได้แก่ Linear Structrue, Hierarchical Structure, Grid Structure และ Network Structure
1. โครงสร้างเชิงเส้น (Linear Structrue) เป็นโครงสร้างเนื้อหาที่จัดเรียงลำดับหน้าเว็บเพื่อเข้าถึงข้อมูลไว้ตายตัวโดยผู้ใช้จะต้องเข้าถึงหน้าเว็บในแนวเส้นตรง กล่าวคือ เข้าถึงหน้าเว็บทีละหน้าตามลำดับขั้นตอนไปจนถึงหน้าเว็บปลายทางที่ต้องการ ข้อดีของการจัดวางโครงสร้างเนื้อหาลักษณะนี้ คือ การออกแบบไม่ยุ่งยากและข้อมูลเป็นระเบียบ แต่ข้อเสีย คือ ต้องใช้เวลามากกว่าจะเข้าถึงหน้าเว็บที่ต้องการได้ เพราะต้องผ่านหน้าเว็บที่ไม่จำเป็นหลายขั้นตอน
2. โครงสร้างแบบลำดับขั้น (Hierarchical Structure) เรียกอีกชื่อหนึ่งว่า “โครงสร้างต้นไม้ (Tree Structure) ” เป็นโครงสร้างที่นิยมใช้งาน โดยจัดลำดับการเข้าถึงข้อมูลตามความสัมพันธ์จากหัวข้อใหญ่ไปจนถึงหัวข้อย่อยแตกออกไป ข้อดีของการจัดวางโครงสร้างเนื้อหาลักษณะนี้ คือ ข้อมูลถูกจัดวางอย่างเป็นระบบ ทำให้มองความสัมพันธ์ของข้อมูลแต่ละส่วนได้เป็นอย่างดี ข้อเสีย คือ การออกแบบมีความซับซ้อนเพิ่มขึ้น และต้องการออกแบบให้โครงสร้างต้นไม้มีความสมดุล
3. โครงสร้างแบบตาราง (Grid Structure) เป็นโครงสร้างเนื้อหาที่เพิ่มเส้นทางการเชื่อมโยงข้อมูลมากขึ้น เพื่อให้การเข้าถึงเว็บเพจมีความยืดหยุ่น กล่าวคือ ผู้ใช้สามารถเปลี่ยนทิศทางการเข้าถึงผ่านข้อมูลทางหน้าเว็บอื่นๆได้ จึงนับเป็นข้อดีประการสำคัญของโครงสร้างลักษณะนี้ แต่ข้อเสีย คือ การออกแบบมีความซับซ้อนสูง และต้องระวังผู้ใช้หลงเส้นทางการเชื่อมโยงด้วย
4. โครงสร้างเครือข่าย (Network Structure) เป็นโครงสร้างเนื้อหาที่มีความยืดหยุ่นในการเข้าถึงข้อมูลมากที่สุดเพราะทุกเว็บเพจถูกเชื่อมโยงไว้ด้วยกัน ดังนั้นผู้ใช้สามารถเข้าถึงข้อมูลผ่านทางหน้าเว็บใดๆ ไปยังหน้าเว็บปลายทางที่ต้องการได้ ข้อดีของการจัดวางโครงสร้างเนื้อหาลักษณะนี้ จึงเป็นความยืดหยุ่นที่ผู้ออกแบบกำหนดให้กับผู้ใช้งาน แต่ข้อเสีย คือ การออกแบบมีความซับซ้อนมาก จึงต้องอาศัยความเชี่ยวชาญของผู้ออกแบบสูง
การออกแบบโครงสร้างเว็บเพจ (Skeleton Plane) เป็นการจัดแบ่งพื้นที่บนหน้าเว็บ เพื่อใช้วางองค์ประกอบส่วนต่างๆ และเริ่มต้นออกแบบส่วนอินเตอร์เฟสกับผู้ใช้ โดยสร้างระบบนำทาง (Navigation System) เพื่อเชื่อมโยงการทำงานทุกส่วนเข้าไว้ด้วยกันโดยขั้นตอนนี้ประกอบด้วยกิจกรรมย่อย 3 กิจกรรม คือ
- การออกแบบส่วนอินเตอร์เฟส (Interface Design) เป็นการออกแบบส่วนติดต่อระหว่างผู้ใช้กับเว็บไซต์ เพื่อการนำเสนอ รับชม และใช้งานข้อมูลบนเว็บนั้นด้วยการโต้ตอบกับคอมพิวเตอร์ การออกแบบอินเตอร์เฟสบนเว็บไซต์ที่ดี มุ่งเน้นประสิทธิภาพหรือความสามารถในการใช้งานเว็บ (Web Usability) เป็นสำคัญ โดยจะต้องสามารถใช้งานได้ง่าย ใช้งานจริง และให้ผลลัพธ์เป็นที่พอใจของผู้ใช้งาน
- การออกแบบระบบนำทาง (Navigation Design) เป็นการออกแบบเส้นทางการเชื่อมโยงบนเว็บไซต์ เพื่อให้ผู้ใช้งานสามารถท่องเที่ยวไปในไซต์ได้อย่างสมบูรณ์แบบและไม่หลงทาง โดยใช้เครื่องมือนำทางรูปแบบต่างๆ เช่น รายการเมนูเชื่อม (Navigation Bar) ส่วนค้นหา (Search) หรือ Drop-Down Menu เป็นต้น ซึ่งระบบที่ดีต้องช่วยเหลือผู้ใช้งาน โดยสามารถบอกตำแหน่งที่ผู้ใช้อยู่ในปัจจุบัน การเข้าถึงข้อมูลปลายทาง ข้อมูลใดที่เคยผ่านการเข้าถึงแล้ว และเส้นทางที่จะกลับไปยังตำแหน่งเดิมได้ (ศึกษารายละเอียดเพิ่มเติมได้ในบทที่ 5 ระบบนำทาง)
- การออกแบบส่วนข้อมูล (Information Design) เป็นงานที่เกี่ยวข้องกับการตัดสินใจเลือกใช้วิธีนำเสนอข้อมูลอย่างไรจึงจะเหมาะสมกับชนิดข้อมูลนั้น และทำให้ผู้ใช้เข้าใจได้ง่ายที่สุด ยกตัวอย่างเช่น ตัวเลขทางสถิติควรเลือกนำเสนอด้วยรูปแบบตาราง กราฟ หรือแผนภูมิ ภาพสินค้าเคลื่อนไหว ควรเลือกนำเสนอด้วยรูปถ่าย วิดีโอ คลิป หรือแอนิเมชัน เป็นต้น (ศึกษารายละเอียดเพิ่มเติมได้ในบทที่ 3 การออกแบบส่วนข้อมูล) นอกจากนั้นการออกแบบส่วนข้อมูลที่เห็นได้ชัดเจน คือ การจัดกลุ่มข้อมูลภายในฟอร์ม
การออกแบบรูปลักษณ์ของเว็บเพจ (Surface Plane) หรือเรียกการออกแบบในขั้นตอนนี้ได้อีกอย่างหนึ่งว่า “Visual Design” เนื่องจากการออกแบบส่วนอินเตอร์เฟสในขั้นตอนที่ 4 จะมุ่งเน้นประสิทธิภาพด้านความสามารถในการใช้งาน และการจัดวางองค์กรประกอบบนหน้าเว็บเพื่ออำนวยความสะดวกให้กับผู้ใช้มากกว่าการตกแต่งหน้าเว็บให้มีความสวยงาม ดังนั้น งานในขั้นตอนสุดท้ายนี้ จึงเป็นการเพิ่มความสวยงามและความน่าสนใจให้กับหน้าเว็บ โดยเป็นการตกแต่งหน้าเว็บให้มีรูปลักษณ์ที่พร้อมจะนำเสนอต่อผู้ใช้งาน ซึ่งรูปลักษณ์ของหน้าเว็บที่สวยงาม พิจารณาจากปัจจัยด้านต่างๆ ได้แก่ การเลือกใช้โทนสี รูปแบบตัวอักษร พื้นหลัง และอื่นๆ