เนื้อหา

การออกแบบหน้าเว็บ

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

หลักการออกแบบหน้าเว็บ

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

2.สร้างรูปแบบ บุคลิก และสไตล์
-รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู้ใช้ได้ดีขึ้น
-บุคลิก บุคลิกที่ดีเหมาะสมกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดียิ่งขึ้น
-สไตล์ คือลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิก ชนิดและการจัดตัวอักษร

3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
   ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชั่นทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า

4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
   ส่วนบนของหน้า หมายถึง ส่วนแรกของหน้าที่จะปรากฏขึ้นในหน้ารวมบราวเซอร์ที่ยังไม่มีการเคลื่อนหน้าจอใดๆ

5.สร้างจุดสนใจด้วยความแตกต่าง
   เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้

6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
   เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่าย แยกเป็นสัดส่วน และดูไม่แน่นจนเกินไป

7.ใช้กราฟิกอย่างเหมาสม
   ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น และสิ่งอื่นๆตามความเหมาะสมและไม่มากเกินไป

-------------------------------------------------------------------------------------------------

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

ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
เบราเซอร์ที่ใช้
        เบราเซอร์ คือ โปรแกรมที่ใช้เรียกดูหน้าเว็บเพจ โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร รูปภาพ และภาพเคลื่อนไหว
ระบบปฏิบัติการของคอมพิวเตอร์
           ระบบปฏิบัติการเป็นปัจจัยที่ทีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ ระดับความละเอียดของหน้าจอ ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
ความละเอียดของหน้าจอ
          ความละเอียดของหน้าจอจะไม่ขึ้นกับขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
จำนวนสีที่จอของผู้ใช้สามรถแสดงได้
          ชุดสีสำหรับเว็บ (Web Palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac
ชนิดของตัวอักษรที่มี่อยู่ในเครื่องของผู้ใช้
           เบราเวอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อ คอมพิวตอร์เครื่องนั้นมีฟอนต์เหล่านั้นที่ติดตั้งอยู่ในเครื่อง
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
          ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
ขนาดของเบราเซอร์
          ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้
ความสว่างและค่าความต่างของโทนสี
          ผู้ออกแบบเว็บเพจตองระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และคสรเลือกใช้โทนสีที่ต่างกันพอสมควร

-------------------------------------------------------------------------------------------------

ออกแบบเนวิเกชันสำหรับเว็บ

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

 รูปแบบของเนวิเกชัน

     
           ระบบเนวิเกชันสำหรับเว็บไซท์ขนาดใหญ่มักใช้หลายรูปแบบร่วมกันเพื่อเพิ่มช่อง ทางการเข้าถึงข้อมูลให้มากขึ้น
ซึ่งผู้ออกแบบควรมีความเข้าใจและเลือกใช้อย่างเหมาะสม โดยไม่ให้หลากหลายหรือจำกัดเกินไป
ระบบเนวิเกชั่นแบ่งออกเป็น 4 รูปแบบดังนี้
1. ระบบเนวิกเกชั่นแบบลำดับขั้น (Hierarchical)
2. ระบบเนวิกเกชันแบบโกลบอล (Global)
3. ระบบเนวิกเกชั่นแบบโลคอล (Local)
4. ระบบเนวิกเกชันแบบเฉพาะที่ (Ad Hoc)
       

องค์ประกอบของระบบเนวิกเกชันหลัก (Main Navigation Elements)

       
        ระบบเนวิกเกชันที่สำคัญและพบได้มากที่สุดคือ เนวิเกชันที่อยู่ในหน้าเดียวกับเนื้อหา ไม่ใช่เนวิกเกชันที่อยู่ในหน้าแรก เนื่องจากเมื่อผู้ใช้ผ่านหน้าแรกเข้าไปสู่ภายในเว็บไซท์แล้ว ก็ไม่อยากจะกลับมาเริ่มต้นใหม่ที่หน้าแรกทุกครั้งก่อนจะเข้าไปดูเนื้อหาในส่วนอื่นๆ ระบบเนวิเกชันหลักทั้งแบบโกบอลและแบบโลคอล จึงช่วยให้ผู้ใช้สามารถย้ายจากหน้าใดๆ ไปสู่ส่วนอื่นในเว็บไซท์ได้อย่างคล่องตัว องค์ประกอบของเนวิกเกชันมีได้หลายรูปแบบได้แก่ เนวิเกชั่นบาร์ เนวิกเกชันเฟรม Pull down, menu, pop-up menu, image map และ search box
       

เนวิเกชันบาร์ (Nevigation Bar)

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

คุณสมบัติสำคัญของระบบเนวิเกชัน

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