บทที่2
กระบวนการพัฒนาเว็บไซต์
Web Development Processes
1. จัดระบบโครงสร้างข้อ้อมูล (Information Architecture)
• การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด
เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
การจัดระบบโครงสร้าง
เป็นพื้นฐานการออกแบบเว็บไซต์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
จัดระบบโครงสร้างข้อ้อมูล(Information Architecture)
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.เว็บต้นแบบที่ใช้ในการพัฒนา
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11.ลงมือพัฒนาเว็บ
12.เปิดเว็บไซท์
13.ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ
1.เว็บที่สมบูรณื
2.เปิดตัวเว็บให้เป็นที่รู้จัก
3.แนวทางการดูแลและพัฒนาต่อไป
บทที่3
ออกแบบเพื่อผู้ใช้
Designing for Users
ออกแบบเพื่อผู้ใช้
Designing for Users
• Phase 1 : สำรวจปัจจัยสำคัญ(Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
• สิ่งที่ได้รับ
1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3. กลยุทธ์ในการแข่งขัน
กำหนดเป้าหมายของเว็บ
เป้าหมายของเว็บไซต์นั้นควรจะสัมพันธ์กับเป้าหมาย
ของหน่วยงาน สามารถวัดผลได้ และตั้งอยู่บนความเป็นไปได้
เพื่อจะได้ออกแบบเนื้อหาและการใช้งานภายในเว็บ ได้ตรงตามเป้าหมายที่ตั้งไว้
ความต้องการของหน่วยงาน V.S.ความต้องการของผู้ใช้
เว็บท่า : ต้องการรวมทุกสิ่งทุกอย่างไว้ในเว็บของตนเพื่อเป็นศูนย์กลางความบันเทิง ข่าวสาร และสาระต่างๆ ขณะที่ผู้ใช้อาจต้องการเพียงเข้าไปค้นหาลิงค์ ของเว็บที่สนใจ เพื่อเข้าไปยังเว็บไซต์เหล่านั้น
เว็บธุรกิจ : ต้องการปรับตำแหน่งของบริษัทให้มีภาพลักษณ์ที่ดีขึ้น โดยอาศัยการออกแบบที่สวยงามและเน้นถึงกลยุทธใหม่ของบริษัท ขณะที่ผู้ใช้อาจไม่สนใจสิ่งเหล่านั้น ต้องการเพียงข้อมูลของสินค้าเท่านั้น
รู้จักกลุ่มผู้ใช้
คำถามสำคัญเกี่ยวกับผู้ใช้ ประกอบด้วย
1. ใครคือผู้ใช้หลักของเว็บ
2. พวกเขามีจำนวนเท่าไร?
3. พวกเขาเข้าถึงเว็บไซต์ได้อย่างไร?
4. อะไรคือสิ่งที่พวกเขาต้องการ?
5. พวกเขาทำอะไร เมื่อเข้ามาถึงเว็บไซต์
ข้อมูลผู้ใช้แบ่งได้เป็น 4 แบบ ดังต่อไปนี้
1. Demographics : ข้อมูลทางประชากร เป็นข้อมูลขั้นต้นที่ง่ายที่สุด เช่น เพศ อายุ ที่อยู่
2. Webographics : ข้อมูลเกี่ยวกับประสบการณ์ ความคิดและพฤติกรรม ที่เกี่ยวข้องกับเว็บ ได้แก่ - สถานที่ในการเข้าสู่อินเตอร์เน็ต
- ช่วงเวลาที่ออนไลน์
- ความถี่ในการเข้าชมเว็บ
3. Psychographics : ลักษณะทางจิตวิทยา ครอบคลุมถึง ความสนใจ ความนิยม ทัศนคติ บุคลิกภาพ
4. Behavior & Activities : พฤติกรรมและกิจกรรมอาจได้แก่ กิจกรรมที่ชื่นชอบ กีฬาที่สนใจ งานอดิเรก พฤติกรรมอื่น ๆ
บทที่8
เลือกใช้สีสำหรับเว็บไซต์
สีสันเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากเป็นสิ่งแรกที่ผู้ใช้มองเห็น
- การใช้สีพื้นใกล้เคียงกับตัวอักษร บางครั้งลำบากในการอ่าน
- การใช้สีมากเกินอาจสร้างความสับสนให้ผู้อ่านได้
- การใช้สีที่กลมกลืน ช่วยให้น่าดูมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- ชักนำสายตาทุกบริเวณในหน้าเว็บ
- เชื่อมโยงบริเวณที่ไดรับการออกแบบเข้าด้วยกัน
- แบ่งบริเวณต่างๆออกจากกัน
- ดึงดูดความสนใจของผู้อ่าน
- สร้างอารมณ์โดยรวมของเว็บ
- สร้างระเบียบ
- ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
การผสมสี มี 2 แบบ
- การผสมแบบบวก เป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
- การผสมแบบลบ ไม่เกี่ยวข้องกับแสงแต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้ามสีกับอารมณ์บอกความรู้สึกต่างๆ
สีเเดง เเสดง ถึงพลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดง ถึงความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาต สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อาำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้ามสีกับอารมณ์บอกความรู้สึกต่างๆ
สีเเดง เเสดง ถึงพลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดง ถึงความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาต สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อาำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ
