กระบวนการพัฒนาเว็บไซต์
• Phase 1 : สำรวจปัจจัยสำคัญ(Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
• สิ่งที่ได้รับ
1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3. กลยุทธ์ในการแข่งขัน
• Phase 2 : พัฒนาเนื้อหา(Site Content)
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
• สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
• Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
• สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
• Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
• สิ่งที่ได้รับ
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ
• Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
• สิ่งที่ได้รับ
1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3. กลยุทธ์ในการแข่งขัน
• Phase 2 : พัฒนาเนื้อหา(Site Content)
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
• สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
• Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
• สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
• Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
• สิ่งที่ได้รับ
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ
• Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
*************************************************************************
ออกแบบเพื่อผู้ใช้ (Design for Users)
1. ออกแบบเพื่อผู้ใช้ (Design for Users)กระบวนการแรกของการออกแบบ เว็บไซต์คือการกำหนดเป้าหมายของเว็บไซต์กำหนดกลุ่มผู้ใช้ ซึ่งการจะให้ได้มาซึ่งข้อมูล ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือจำลองสถานการณ์ สิ่งเหล่านี้จะช่วยให้เราสามารถออกแบบเนื้อหาและการใช้งานเว็บไซต์ได้อย่าง เหมาะสม ตรงกับความต้องการของผู้ใช้อย่างแท้จริง 1.1 กำหนดเป้าหมายของเว็บไซต์ ขั้น ตอนแรกของการออกแบบเว็บไซต์ คือการกำหนดเป้าหมายของเว็บไซต์ให้แน่ชัดเสียก่อน เพื่อจะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายที่ได้ตั้งเอาไว้ โดยทั่วไปมักจะเข้าใจว่าการทำเว็บไซต์มีจุดมุ่งหมายเพื่อบริการข้อมูลของ หน่วยงานหรือองค์กรเท่านั้น แต่ในความเป็นจริงแล้ว เว็บไซต์แต่ละแห่งก็จะมีเป้าหมายของตนเองแตกต่างกันออกไป ตัวอย่างของเป้าหมายเว็บไซต์ทางธุรกิจ ได้แก่ - สร้างความเชื่อถือให้กับบริษัท - ให้บริการข้อมูลของสินค้าหรือบริการ - สร้างความแตกต่างเหนือคู่แข่ง - ช่วยสื่อความหมายสำคัญของผลิตภัณฑ์ - สำรวจความต้องการของลูกค้า - กระตุ้นยอดขาย - เป็นแหล่งบริการข้อมูลที่เข้าถึงได้ตลอดเวลา - ช่วยในการเลือกสรรพนักงานใหม่ - ส่งข่าวสารถึงลูกค้าและผู้สนใจอย่างรวดเร็วด้วยต้นทุนที่ต่ำมาก 1.2 กำหนดกลุ่มผู้ใช้เป้าหมาย ผู้ ออกแบบเว็บไซต์จำเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการเว็บไซ ต์ เพื่อที่จะได้ตอบสนองความต้องการของผู้ใช้ได้อย่างชัดเจน ตัวอย่างเช่นเว็บไซต์ที่มีกลุ่มผู้ใช้หลากหลาย เช่น เซิร์ชเอ็นจิน เว็บท่า และเว็บไดเรกทอรี่ แต่เว็บไซต์ส่วนใหญ่นั้นจะตอบสนองความต้องการเฉพาะกลุ่มเท่านั้น ไม่สำหรับทุกคน เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลายได้ในเว็บไซต์เดียว การกำหนดประเภทของกลุ่มเป้าหมาย มีลักษณะใหญ่ ๆ คือ - การกำหนดกลุ่มเป้าหมายเฉพาะเจาะจง ตัวอย่างเช่น เว็บไซต์ขายเสื้อผ้า อาจจะกำหนดกลุ่มเป้าหมายเป็นผู้หญิง แต่สินค้าที่นำมาจำหน่ายอาจเป็นสินค้าที่มียี่ห้อและราคาแพงจึงกำหนดกลุ่ม ผู้ใช้ที่เป็นผู้หญิงและมีฐานะทางการเงินที่ดี เป็นต้น - การกำหนดกลุ่มเป้าหมายหลาย ๆ กลุ่ม ตัวอย่างเช่น เว็บไซต์ของร้านขายของเล่น ซึ่งอาจจะมองว่ากลุ่มเป้าหมายที่เข้ามาเป็นเด็ก ทั้งที่จริงแล้วผู้ใช้บริการอาจจะเป็นพ่อแม่ที่มาหาของเล่นให้ลูก หรือหนุ่มสาวที่เข้ามาซื้อของขวัญ หรือครูอาจารย์เข้ามาเลือกสินค้าเพื่อนำไปใช้ในห้องเรียน ซึ่งจุดนี้ผู้ออกแบบเว็บไซต์ต้องคำนึงถึงกลุ่มเป้าหมายทุกกลุ่ม 1.3 สิ่งที่ผู้ใช้ต้องการจากเว็บ หลัง จากที่ได้เป้าหมายและกลุ่มเป้าหมายของเว็บไซต์แล้ว ลำดับต่อไปคือการออกแบบเว็บไซต์เพื่อดึงดูดผู้ใช้งานให้ได้นานที่สุด ด้วยการสร้างสิ่งที่น่าสนใจเพื่อดึงดูดผู้ใช้โดยทั่วไปแล้ว สิ่งที่ผู้ใช้คาดหวังจากการเข้าชมเว็บไซต์หนึ่ง ได้แก่ - ข้อมูลและการใช้งานที่เป็นประโยชน์ - ข่าวและข้อมูลที่น่าสนใจ - การตอบสนองต่อผู้ใช้ - ความบันเทิง - ของฟรี การนำเสนอข้อมูลสินค้าที่ทำให้น่าสนใจ ด้วยการแสดงข้อมูลสินค้าในหลาย ๆ รูปแบบ ที่ผู้ใช้สามารถเลือกการแสดงข้อมูลได้ด้วยตนเอง 1.4 ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์ เมื่อ เราทราบถึงความต้องการที่ผู้ใช้ต้องการได้รับเมื่อเข้าชมเว็บไซต์หนึ่ง ๆ แล้ว เราก็ออกแบบเว็บไซต์ให้มีข้อมูลที่ผู้ใช้ต้องการ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์ - ข้อมูลเกี่ยวกับบริษัท - รายละเอียดของผลิตภัณฑ์ - ข่าวความคืบหน้าและข่าวจากสื่อมวลชน - คำถามยอดนิยม - ข้อมูลในการติดต่อ ************************************************************************* ออกแบบระบบเนวิเกชัน ความสำคัญของระบบเนวิเกชัน ความสำคัญแบบโครงสร้างข้อมูลที่ดีช่วยให้ผผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชันเป็นส่วนเสริมในการสร้างสิ่งแวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างและควรจะไปทางไหนต่อ รูปแบบของระบบเนวิเกชันแบ่งออกเป็น 4 รูปแบบ 1.ระบบเนวิเกชันแบบลำดับขั้น Hierarcical เป็นระบบพื้นฐานคือมีหน้าโฮมเพจหนึ่งหน้าและมีลิงค์ไปยังหน้าอื่นๆ ภายในเว็บถือเป็นแบบลำดับขั้นอย่างหนึ่งแล้ว แต่มีข้อจำกัดคือเคลื่อนที่ได้เฉพาะแนวตั้ง บน-ล่าง 2.ระบบเนวิเกชันแบบโกลบอล Global หรือเรียกว่าแบบตลอดทั่วทั้งไซท์ เป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชันแบบลำดับขั้น ทำให้สามารถเคลื่อนที่ได้ทั้งในแนวตั้งและแนวนอนอย่างมีประสิทธิภาพตลอดทั้งไซท์ 3.ระบบเนวิเกชันแบบโลคอล Local สำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบแบบโลคอลหรือแบบเฉพาะส่วนเข้ามาช่วยเมื่อมีบางส่วนที่ต้องการระบบเนวิเกชันที่มีลักษณะเฉพาะตัว 4.ระบบเนวิเกชันเฉพาะที่ Ad-Hoc เป็นแบบเฉพาะที่ตามจำเป็รของเนื้อหาซึ่งก็คือลิงค์ของคำหรือข้อความที่หน้าสนใจซึ่งฝังอยู่ในประโยค ที่เชื่อมโยงไปยังรายละเอียดเกี่ยวกับคำนั้นๆเพิ่มเติม เนวิเกชันรูปแบบนี้เป็นวิธีที่ดีในการนำเสนอจุดเด่นที่น่าสนใจได้อย่างไม่เด่นชัดจนเกินไป องค์ประกอบของระบบเนวิเกชันหลักวิเกชันบาร์ ระบบเนวิเกชันเป็นพื้นฐานที่ใช้ได้หลายรูปแบบ ทั้งแบบลำดับขั้น แบบโกบอล และแบบโลคอล โดยทั่วไปเนวิเกชันบาร์จะประกอบด้วยกลุ่มของลิงค์ต่างๆที่อยู่รวมกันในบริเวฯหนึ่งของหน้าเว็บ อาจเป็นตัวหนังสือหรือกราฟิก เนวิเกชันบาร์แบบเฟรม คุณสมบัติของเฟรมจะทำให้สามารถแสดงเว็บหลายๆ หน้าในหน้าต่างบราวเซอร์เดียวกัน โดยแต่ละหน้ายังเป็นอิสระต่อกัน การลิงค์เฟรมที่เป็นเนวิเกชันบาร์สามารถควบคุมการแสดงผลของข้อมูลอีกเฟรมหนึ่งได้ ส่วนที่เป็นเนวิเกชันบาร์จะปรากฏอยู่คงที่เสมอ ในขณะที่ผู้ใช้เลื่อนดูข้อมูลใดๆในอีกเฟรมหนึ่ง การแยกระบบเนวิเกชันแบบนี้ทำให้ผู้ใช้เข้าถึงระบบเนวิเกชันได้ตลอดเวลาและยังคงความสม่ำเสมอทั่วทั้งไซท์ Pull Down Menu เป็นส่วนประกอบของฟอร์มที่มีลักษณะเด่นคือ มีรายการให้เลือกมายมายแต่ใช้พื้นที่น้อยเมื่อเทียบองค์ประกอบชนิดอื่นๆ วิธีนี้ จะช่วยให้ผู้ใช้เลือกรายการย่อยเข้าไปสู้เป้าหมายได้อย่างสะดวก Pop up Menu เป็นเมนูอีกรูปแบบหนึ่งที่มีลักษณะคล้าย Pull Down Menu แต่รายการย่อยของเมนูจะปรากฏขึ้นเองเมื่อผู้ใช้นำเมาส์ไปวางเหนือตำแหน่งของรายการในเมนูหลัก จากนั้นผู้ใช้ก็สามารถเลื่อนเมาส์ไปเลือกรายการต่างๆที่ปรากฏขึ้นได้ Image Map การใช้รูปกราฟิกเป็นลิงค์ในแบบ Image Map ได้รับความนิยมนำมาใช้กับระบบเนวิเกชันมากขึ้นโดยบางบริเวณของกราฟิกจะถูกกำหนดให้เป็นลิงค์ไปยังส่วนต่างๆ ตามความต้องการแต่ไม่ควรที่จะใช้เป็นลิงค์ไปยังส่วนต่างๆตามความต้องการ แต่ไม่ควรที่จะใช้ Image Map เป็นระบบเนวิเกชันเดียวในเว็บ เพราะอาจทำให้ผู้ใช้บางคนที่ไม่รู้ว่ารูปกราฟิกนั้นสามารถคลิกไปยังข้อมูลอื่นได้ Search Box การจัดเตรียมระบบสืบค้นข้อมูล ภายในเว็บเป็นระบบเนวิเกชันสำหรับเว็บที่มีข้อมูลปริมาณมาก ทำให้ผู้ใช้ค้นหาสิ่งที่ต้องการได้อย่างรวดเร็วโดยระบุคีย์เวิร์ดที่สนใจ เนื่องจากข้อมูลในเว็บ อาจไม่ตรงกับความต้องการของผู้อ่าน ************************************************************************* |
