Lecture

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                   เนวิเกชั่นที่ดี จะต้องบรรลุวัตถุประสงค์ต่อไปนี้

1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ

2.สามารถเข้าถึงข้อมูลได้อย่างไร

3. สามารถกลับไปยังหน้าเดิมได้อย่างไร

4. หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลเเล้ว

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

1.ระบบเนวิเกชั่นเเบบลำดับขั้น

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

2.ระบบเนวิเกชั่นเเบบโกลบอล

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

3. ระบบเนวิเกชั่นเเบบโลคอล

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

4. ระบบเนวิเกชั่นเฉพาะที่

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

เนวิเกชั่นบาร์

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

วิเกชั่นระบบเฟรม

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

  ข้อเสีย เสียพื้นที่ไปในบางส่วน

                เเสดงผลช้า

               ใช้การออกแบบที่ซับซ้อน

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

สร้างระบบเนวิเกชั่นหลัก

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

เนวิเกชั่นเเบบกราฟฟิก VS ตัวอักษร

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

เนวิเกชั่นเเบบกราฟิกพร้อมคำอธิบาย

เนวิเกชั่นเเบบกราฟิกหรือไอคอนเพื่อเพิ่มความน่าสนใจของลิงค์ ควรใส่คำอธิบายควบคู่

กับกราฟฟิกด้วย 

*******************************************************************************

บทที่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 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด

*******************************************************************************

 

บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม

ปัจจัยที่เกี่ยวข้องกับการท่องเว็บไซต์

·       เบราเซอร์ที่ใช้

·       ระบบปฏิบัติการของคอมพิวเตอร์

·       ความละเอียดของหน้าจอ

·       จำนวนสีที่จอของผู้ใช้สามารถแสดงได้

·       ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้

·       ความเร็วในการเชื่อมต่ออินเตอร์เน็ต

·       ขนาดหน้าต่างเบราเซอร์

·       ความสว่างและค่าความต่างของโทนสี

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

เว็บเบราเซอร์ที่ได้รับความนิยม ได้แก่

·       Inernet Explore

·       Firefox

·       Google Chrome

·       Opera

·       The world

·       Netscape Navigator

ระบบปฏิบัติการ

เป็น ปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ เบราเซอร์ที่ใช้ได้, ระบบความละเอียดของหน้าจอ, ชุดสีของระบบและชนิดของตัวอักษรที่มาพร้อมกับระบบ

ความละเอียดของหน้าจอ

·       ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15”,17”,21” อื่น ๆ

·       ออกแบบควรใช้ความละเอียด 800x600 แต่ควรจัดวาง องค์ประกอบสำคัญ เช่น ระบบเนวิชันไว้ในส่วนพื้นที่ 640x480

จำนวนสีที่จอของผู้ใช้สามารถแสดงได้

·       มอนิเตอร์มีสามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ

·       จำนวนหน่วยความจำของการ์ดจอที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น

·       จำนวนสีที่การ์ดจอสามารถแสดงได้นั้นขึ้นอยู่กับความละเอียดของสี

ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้

·       เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง

ความเร็วในการเชื่อมต่ออินเตอร์เน็ต

·       ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ

·       ความเร็วของอินเตอร์เน็ตมีผลต่อระดับ

·       สิ่งที่เราสนใจในการออกแบบเว็บเพจให้ผู้ชมส่วนใหญ่สามารถเข้าถึงเว็บได้อย่างรวดเร็ว

ขนาดหน้าต่างเบราเซอร์

·       ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้

·       ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้

·       ออกแบบเว็บเพจให้มีความคงที่

ความสว่างและค่าความต่างของโทนสี

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