Lecture

บทที่ 5 ออกแบบระบบเนวิเกชั่น

ความสำคัญของระบบเนวิเกชั่น

การออกเเบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชั่นเป็นส่วนเสริมในการสร้าง
สิ่งเเวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัว โดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างเเละควรจะไปไหนต่อ

รูปแบบของระบบเนวิเกชั่น แบ่งออกเป็น  4 รูปแบบ 

1.ระบบเนวิเกชั่นเเบบลำดับขั้นเป็นเเบบพื้นฐาน คือ มีหน้าโฮมเพจหนึ่งหน่าเเละมีลิงค์ไปยังหน้าอื่นๆ 

ภายในเว็บถือเป็นลำดับขั้นอย่างหนึ่งแล้ว
2.ระบบเนวิเกชั่นเเบบโกลบอลเป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชั่นเเบบลำดับขั้นทำให้สามารถเคลื่อนที่ได้ทั้งในเเนวตั้งเเละเเนวนอนอย่างมีประสิทธิภาพ

3. ระบบเนวิเกชั่นเเบบโลคอลสำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบเเบบโลคอลหรือเเบบเฉพาะส่วน

4. ระบบเนวิเกชั่นเฉพาะที่เป็นเเบบเฉพาะที่ตามความจำเป็นของเนื้อหาซึ่งก็คือลิงค์ของคำที่ฝั่งอยู่ในประโยค เเต่ไม่ควรใช้มากจนเกินไป เพราะผู้ใช้อาจ มองข้ามไปทำให้ไม่สนใจ

องค์ประกอบของระบบเนวิเกชั่นหลัก

ระบบเนวิเกชั่นที่สำคัญเเละพบมากที่สุด คือเนวิเกชั่นที่อยู่หน้าเดียวกับเนื้อหา ไม่ใช่เนวิเกชั่นที่อยู่ภายในเว็บ ซึ่งได้แก่ เนวิเกชั่นบาร์ เนวิเกชั่นระบบเฟรม    pull down   ,  pop up menu   ,  image map  ,  searchbox

- เนวิเกชั่นบาร์  เป็นพื้นฐานที่ใช้ได้หลายรูปแบบ ทั้งเเบลำดับขั้น เเบบโกบอลเเละเเบบโลคอล โดยทั่วไปเนวิเกชั่นบาร์จะประกอบด้วยกลุ่มของลิงค์ต่างๆที่อยู้รวมกันในหน้าเว็บ

-เนวิเกชั่นระบบเฟรม  คุณสมบัติของเฟรมจะทำให้ไม่สามารถเเสดงเว็บหลายๆหน้าต่างเบราวเซอร์เดียวกัน โดยเเต่ละหน้าจะเป็นอิสระต่อกัน

ข้อเสีย 

--->>>  เสียพื้นที่ไปในบางส่วนเเสดงผลช้าใช้การออกแบบที่ซับซ้อน pull downmenuเป็นส่วนประกอบของฟอร์มที่มีลักษณะเด่น คือ มีรายการให้เลือกมากมาย ใช้พื้นที่น้อยเหมาะสำหรับข้อมูลที่มีข้อมูลประเภทเดียวกัน pop up menu เป็นเมนูอีกรูปแบบหนึ่งที่มีลักษณะคล้าย pull down menu เเต่รายการย่อยของเมนูจะปรากฏขึ้นเองเมื่อผู้ใช้นำเมาส์ไปวาง

--->>> ไม่ควรใช้มากจนเกินไปเพราะผู้ใช้อาจไม่รู้ว่าภาพเหล่านั้นสามารถลิ้งค์ได้ search Box การจัดเตรียมระบบสืบค้นข้อมูล ภายในเว็บเป็นระบบเนวิเกชั่นสำหรับเว็บที่มีข้อมูลปริมาณมากทำให้ผู้ใช้ค้นหาสิ่งที่ต้องการได้อย่างรวดเร็ว

ข้อดี
--->>> ช่วยให้หน้าเว็บไม่รกจนเกินไป image Map การใช้รูปกราฟิกเป็นลิงค์ในเเบบ image map ได้รับความนิยมนำมาใช้กับระบบเนวิเกชั่นมากขึ้น โดยบางบริเวณสามารถลิงค์ได้ด้วย 

การออกแบบระบบเนวิเกชั่น

สร้างระบบเนวิเกชั่นหลัก การออกแบบที่ดีควรเริ่มจากการทีโครงสร้างลำดับขั้นของข้อมูลที่เหมาะสม รายการหลักในกลุ่มข้อมูลชั้นเเรกเป็นตัวกำหนดว่าระบบเนวิเกชั่นเเบบโกบอลจะต้องมีอะไรบ้าง รายการหลักจะถูกลิงค์ให้เข้าถึงได้ทุกหน้าในเว็บเเละเป็นต้นเเบบให้กับระบบเนวิเกชั่นเเบบโลคอลเเละเเบบเฉพาะทีต่อไปทุกลำดับขั้นข้อมูลที่สูงกว่า

ระบบเนวิเกชั่นที่มีประสิทธิภาพ ควรมีคุณสมบัติ ดังนี้

1. เข้าใจง่าย

2. มีความสม่ำเสมอ

3. มีการตอบสนองต่อผู้ใช้

4. มีความพร้อมเเละเหมาะสมต่อการใช้งาน

5. นำเสนอหลายทางเลือก

6. มีขั้นตอนสั้นเเละประหยัดเวลา

7. มีรูปแบบที่สื่อความหมาย

8. มีคำอธิบายที่ชัดเจนเเละเข้าใจได้ง่าย

9. เหมาะสมกับวัตถุประสงค์ของเว็บ

10. สนับสนุนเป้าหมายเเละพฤติกรรมของผู้ใช้

บทที่ 6  การออกเเบบหน้าเว็บไซต์

หลักสำคัญในการออกเเบบหน้าเว็บไซต์ คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายเเละสะดวกของผู้ใช้ เเนวคิดในการออกเเบบหน้าเว็บ
เรียนรู้จากเว็บไซต์ต่างๆประยุกต์รูปแบบจากสื่อพิมพ์ใช้เเบบจำลองเปรียบเทียบ (Metaphor)ออกแบบอย่างสร้างสรรค์ใช้เเบบจำลองเปรียบเทียบ (Metaphor)

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

                                          บทที่8  เลือกใช้สีสำหรับเว็บไซต์
สีสันเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากเป็นสิ่งแรกที่ผู้ใช้มองเห็น       - การใช้สีพื้นใกล้เคียงกับตัวอักษร บางครั้งลำบากในการอ่าน

       - การใช้สีมากเกินอาจสร้างความสับสนให้ผู้อ่านได้

       - การใช้สีที่กลมกลืน ช่วยให้น่าดูมากยิ่งขึ้น

ประโยชน์ของสีในเว็บไซต์

       - ชักนำสายตาทุกบริเวณในหน้าเว็บ

       - เชื่อมโยงบริเวณที่ไดรับการออกแบบเข้าด้วยกัน

       - แบ่งบริเวณต่างๆออกจากกัน

       - ดึงดูดความสนใจของผู้อ่าน

       - สร้างอารมณ์โดยรวมของเว็บ

       - สร้างระเบียบ

       - ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ

การผสมสี มี 2 แบบ

       - การผสมแบบบวก  เป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ

       - การผสมแบบลบ ไม่เกี่ยวข้องกับแสงแต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ

รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)

- ชุดสีร้อน

- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม

สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ
สีเเดง เเสดงถึง พลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดงถึง ความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาติ สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ