Lecture

บทที่ 5 ออกแบบระบบเนวิเกชัน ( Designing Web Navigation)
ความสำคัญของระบบเนวิเกชัน
การออกแบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชันเป็นส่วนเสริมในการสร้างสิ่งแวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน
รูปแบบของระบบเนวิเกชัน แบ่งออกเป็น 4 รูปแบบ
1.ระบบเนวิเกชันแบบลำดับขั้น ( Hierarchical )
เป็นแบบพื้นฐานคือมีหน้าโฮมเพจหนึ่งหน้าและมีลิงค์ไปยังหน้าอื่นๆ ภายในเว็บถือเป็นแบบลำดับขั้นอย่างหนึ่งแล้ว แต่มีข้อจำกัดคือเคลื่อนที่ได้เฉพาะแนวตั้ง( บน-ล่าง )
2.ระบบเนวิเกชันแบบโกลบอล( Global )
เป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชันแบบลำดับขั้น ทำให้สามารถเคลื่อนที่ได้ทั้งในแนวตั้งและแนวนอนอย่างมีประสิทธิภาพตลอดทั้งไซท์
3.ระบบเนวิเกชันแบบโลคอล ( Local )
สำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบแบบโลคอลเข้ามาช่วยเมื่อมีบางส่วนที่ต้องการระบบเนวิเกชันที่มีลักษณะเฉพาะตัว เช่น หัวข้อย่อยของเนื้อหาที่อยู่ภายในส่วนหลักๆ ของเว็บเพื่อเพิ่มความสะดวกและสื่อความหมายให้ดีขึ้น
4.ระบบเนวิเกชันเฉพาะที่ ( Ad Hoc )
เป็นแบบเฉพาะที่ตามความจำเป็นของเนื้อหาซึ่งก็คือลิงค์ของคำหรือข้อความที่หน้าสนใจซึ่งฝังอยู่ในประโยค ที่เชื่อมโยงไปยังรายละเอียดเกี่ยวกับคำนั้นๆ เพื่อให้ผู้สนใจคลิกเข้าไปหารายละเอียดเพิ่มเติมเอง
ระบบเนวิเกชันที่มีประสิทธิภาพ ควรมีคุณสมบัติ ดังนี้
1. เข้าใจง่าย
2. มีความสม่ำเสมอ
3. มีการตอบสนองต่อผู้ใช้
4. มีความพร้อมและเหมาะสมต่อการใช้งาน
5. นำเสนอหลายทางเลือก
6. มีขั้นตอนสั้นและประหยัดเวลา  
7. มีรูปแบบที่สื่อความหมาย
8. มีคำอธิบายที่ชัดเจนและเข้าใจได้ง่าย
9. เหมาะสมกับวัตถุประสงค์ของเว็บ
10. สนับสนุนเป้าหมายและพฤติกรรมของผู้ใช้

บทที่ 6 ออกแบบหน้าเว็บ ( Page Design )
หน้าเว็บหน้าแรกเป็นส่วนที่สำคัญมาก เพราะมีหน้าที่เป็นสื่อกลางให้ผู้ใช้เข้าถึงข้อมูลและระบบงานของเว็บนั้นได้
การใช้แบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1.จำลองแบบการจัดระบบ ( Organizational metaphor )
คือใช้ประโยชน์จากความคุ้นเคยของการจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น เช่น เว็บร้านขายหนังสือ สามารถจำลองการแบ่งหมวดหมู่หนังสือได้ตามที่ใช้ในร้านหนังสือจริง
2.จำลองการใช้งาน( Functional metaphor )
คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานบนเว็บ เช่น เว็บของโรงภาพยนต์ ที่ควรให้ผู้ใช้สามารถดูโปรแกรมหนัง , จองที่นั่งล่วงหน้า ได้เหมือนกับไปโรงภาพยนต์จริง
3.จำลองลักษณะที่มองเห็น( Visual metaphor )
คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลักษณะที่คุ้นเคยของคนทั่วไป เช่น เว็บไซต์เกี่ยวกับดนตรีที่ให้บริการฟังเพลงบนเว็บได้ การนำลักษณะของปุ่มเล่นเพลง ปิดเพลง ที่ทุกคนรู้จักจากเครื่องเสียงมาใช้ ทำให้เข้าใจง่ายและรวดเร็ว
หลักการออกแบบหน้าเว็บ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ
2.สร้างรูปแบบ บุคลิกและสไตล์
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
5.สร้างจุดสนใจด้วยความแตกต่าง
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7.ใช้กราฟิกอย่างเหมาะสม
การออกแบบหน้าโฮมเพจ ( Home page )
สิ่งสำคัญในการออกแบบหน้าแรกคือ การคำนึกถึงสิ่งที่ ผู้ใช้คาดหวังและจัดเตรียมสิ่งเหล่านั้นไว้ให้พร้อม ทำให้ผู้ใช้รู้ได้ทันทีว่าเว็บนั้นเกี่ยวข้องกับอะไร รวมถึงการสร้างระบบเนวิเกชันให้ผู้ใช้เข้าถึงข้อมูลที่ต้องการได้อย่างสะดวกและรวดเร็ว รูปแบบของหน้าแรกขึ้นอยู่กับลักษณะและวัตถุประสงค์ของเว็บ 
หน้าโฮมเพจที่ดีควรมีลักษณะ ดังนี้
1.แสดงถึงภาพรวมและสิ่งที่เป็นประโยชน์ในเว็บ
2.ดูน่าสนใจและมีลักษณะที่สัมพันธ์กับเนื้อหา
3.มีลิงค์ที่สามารถเชื่อมโยงไปสู่ส่วนหลักๆ ของเว็บ
4.แสดงผลได้อย่างรวดเร็ว โดยใช้รูปกราฟิกอย่างจำกัด
5.แสดงถึงเอกลักษณ์ของเว็บด้วยการแสดงชื่อของเว็บ
6.แสดงวันที่ปัจจุบัน
7.สร้างส่วนของเนื้อหาที่แสดงถึงสิ่งใหม่ๆ ในเว็บ
ข้อแนะนำในการออกแบบโฮมเพจ
1.ออกแบบโครงสร้างของหน้าโดยใช้โปรแกรมกราฟิก
2.กำหนดชื่อของเว็บให้สื่อความหมาย
3.สร้างความแตกต่างของสิ่งที่แตกต่างให้เห็นอย่างชัดเจน เช่น สีของลิงค์ สีของตัวอักษร
4.เลือกใช้รูปพื้นหลังที่เหมาะสม
5.หลีกเลี่ยงการใช้เทคโนโลยีขั้นสูง
6.อย่าใช้ภาพเคลื่อนไหวมากจนเกินไป


บทที่ 8 เลือกใช้สีสำหรับเว็บไซต์ ( Designing Web Colors )
- สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากผู้ใช้จะมองสิ่งแรกคือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกโดยของเว็บไซต์
- เราสามารถใช้สีได้กับองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
ประโยชน์ของสีในเว็บไซต์
1.สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่
2.สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
3.สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน
4.สีสามารถใช่ในการดึงดูดความสนใจของผู้อ่าน
5.สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
6.ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
7.สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
รูปแบบชุดสีพื้นฐาน ( Simple Color Schemes )
- ชุดสีร้อน
- ชุดสีแบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามข้างเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีแบบสามเส้า
- ชุดสีตรงข้าม