Lecture

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

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

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

รูปแบบของระบบเนวิเกชั่น เเบ่งออกเป็น 4รูปแบบ
       1.ระบบเนวิเกชั่นเเบบลำดับขั้น
              เป็นเเบบพื้นฐาน คือ มีหน้าโฮมเพจหนึ่งหน่าเเละมีลิงค์ไปยังหน้าอื่นๆ ภายในเว็บถือเป็บลำดับขั้นอย่างหนึ่งเเล้ว
        2.ระบบเนวิเกชั่นเเบบโกลบอล
              เป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชั่นเเบบลำดับขั้น ทำให้สามารถเคลื่อนที่ได้ทั้งในเเนวตั้งเเละเเนวนอนอย่างมีประสิทธิภาพ
         3. ระบบเนวิเกชั่นเเบบโลคอล
              สำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบเเบบโลคอลหรือเเบบเฉพาะส่วน
        4. ระบบเนวิเกชั่นเฉพาะที่
             เป็นเเบบเฉพาะที่ตามความจำเป็นของเนื้อหาซึ่งก็คือลิงค์ของคำที่ฝั่งอยู่ในประโยค เเต่ไม่ควรใช้มากจนเกินไป เพราะผู้ใช้อาจ มองข้ามไปทำให้ไม่สนใจ

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

ระบบเนวิเกชั่นที่มีประสิทธิภาพ ควรมีคุณสมบัติ ดังนี้
           1. เข้าใจง่าย
           2. มีความสม่ำเสมอ
           3. มีการตอบสนองต่อผู้ใช้
           4. มีความพร้อมเเละเหมาะสมต่อการใช้งาน
           5. นำเสนอหลายทางเลือก
           6. มีขั้นตอนสั้นเเละประหยัดเวลา
           7. มีรูปแบบที่สื่อความหมาย
           8. มีคำอธิบายที่ชัดเจนเเละเข้าใจได้ง่าย
           9. เหมาะสมกับวัตถุประสงค์ของเว็บ
          10. สนับสนุนเป้าหมายเเละพฤติกรรมของผู้ใช้

การออกแบบเว็บไซต์

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

         เเนวคิดในการออกเเบบหน้าเว็บ

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

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

การจัดรูปแบบตัวอักษรสำหรับเว็บไซต์

ส่วนประกอบของตัวอักษร                   ในแต่ละตัวอักษรประกอบด้วยส่วนต่าง ๆ  ที่เราน่าจะรู้จักไว้  เพื่อที่จะใช้ประโยชน์เมื่อต้องการเปรียบเทียบลักษณะของตัวอักษณแต่ละชนิดได้  ส่วนประกอบหลัก ๆ  ที่ควรรู้จัก  มีดังนี้   Ascender  ส่วนบนของตัวอักษรพิมพ์เล็ก  ที่สูงกว่าความสูง x-height ของตัวอักษร Descender  ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline  ของตัวอักษร Baseline  เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่ Cap height  ความสูงจากเส้น baseline  ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่ x-height   หมายถึง  ความสูงของตัวอักษร x  ในแบบพิมพ์เล็ก  ซึ่งมักจะใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวมส่วนบนและส่วนล่าง point size  ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร ช่องว่างระหว่างตัวอักษร (Tracking) และช่องว่างระหว่างคำ                 ความรู้สึกของตัวอักษรอาจจะเป็นผลมาจากพื้อที่ว่างโดยรอบ ที่อยู่ระหว่างตัวอักษร ระหว่างคำ หรือระหว่างบรรทัด คุณสามารถปรับระยะของช่องว่างเหล่านี้เพื่อให้อ่านได้ง่ายขึ้น แม้ว่าตัวอักษรจะถูกออกแบบมาให้มีระยะห่างที่เหมาะสมอยู่แล้ว แต่ในบางสถานการณ์ อาจมีความต้องการให้ตัวอักษรดูแน่นหรือหลวมเป็นพิเศษ อย่างเช่นตัวอักษีที่ใช้ ตัวพิมพ์ใหญ่ทั้งหมด (UPPERCASE) จะดูค่อนข้างแน่นเพราะถูกออกแบบให้ใช้ร่วมกับตัวพิมพ์เล็กดังนั้นคุณควรเพิ่มช่องว่างระหว่างตัวอักษรให้มากขึ้นเล็กน้อย สำหรับคำที่ใช้ตัวพิมพ์ใหญ่ทั้งหมด                 ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะห่างไม่เหมาะสม จำเป็นต้องทำการปรับแต่งที่เรียกว่า Kerning เป็นการปรับระยะห่างระหว่างคู่ของตัวอักษร ซึ่งจะมีความสำคัญมากเมื่อใช้ตัวอักษรขนาดใหญ่หรือตัวอักษรที่ใช้เป็นหัวข้อหลัก เพราะเมื่อตัวอักษรใหญ่ขึ้นก็จะเกิดช่องว่างที่มากขึ้นด้วย จุดประสงค์ของการทำ kerning คือการปรับระยะห่างของตัวอักษรให้เท่ากันโดยตลอด เพื่อที่สายตาจะได้เคลื่อนที่อย่างราบเรียบและสม่ำเสมอ                 ช่องว่างระหว่างคำสำหรับภาษาอังกฤษ หรือ ช่องว่างระหว่างคำในภาษาไทย เป็นสิ่งที่ควรจะเท่ากันเสมอ ไม่ว่าจะเป็นการจัดตำแหน่งแบบ Justify ช่องว่างของแต่ละคำจะแตกต่างกันไปในแต่ละบรรทัด เพื่อช่วยให้ขอบซ้ายและขวาเท่ากัน คุณอาจต้องใช้เครื่องหมายยัติภังค์ (-) มาช่วยแยกคำให้อยู่คนละบรรทัด หรือปรับเปลี่ยนการเว้รวรรคใหม่ เพื่อไม่ให้มีช่องว่างมากเกินไป การจัดตำแหน่ง (Alignmen                 การจำตำแหน่งของตัวอักษรในแต่ละส่วนมีผลต่อความรู้สึกของเอกสาร โดยที่การจัดตำแหน่งแต่ละแบบจะให้ความรู้สึกที่ต่างกัน ตัวอักษรที่ถูกจัดให้ชิดขอบด้านซ้ายโดยที่ปล่อยให้ด้านขวามีลักษณะไม่สม่ำเสมอ จะให้ความรู้สึกไม่เป็นทางการ และจะอ่านได้ง่ายกว่าการจัดชิดขอบขวา โดยทั่วไปแล้วพยายามหลีกเลี่ยงการจัดชิดขวา ยกเว้นเมื่อมีความเหมาะสมกับรูปแบบจริงๆ ส่วนตัวอักษรที่มีการปรับระยะให้ชิดขอบทั้งซ้ายและขวา (Justify) เป็นที่นิยมใช้ในหนังสือพิมพ์และจุลสาร พร้อมกับให้คามรู้สึกที่เป็นทางการอีกด้วย