ออกแบบเนวิเกชันสำหรับเว็บ
ความสำคัญของระบบเนวิเกชัน
ในชีวิตจริงของเราบางครั้งอาจมีความจำเป็นต้องขับรถไปในที่ๆ ไม่เคยไปมาก่อนสิ่งที่ทุกคนปราถนาคือการไปถึงที่หมายโดยไม่หลงทางเพราะนอกจากจะทำให้เราไป ไม่ถึงที่หมาย เสียเวลาเสียพลังงานแล้วยังอาจทำให้อารมณ์เสียได้อีก โชคดีที่เรามีระบบการป้องกันการจราจรที่ดี เช่นป้ายแสดงชื่อถนน ป้ายแสดงชื่อทางแยก สิ่งเหล่านี้เมื่อนำมาใช้ปะกอบกันก็จะช่วยให้เรารู้ตำแหน่งปัจจุบัน และทิศทางไปสู่จุดหมายได้ เช่นเดียวกับโลกอินเตอร์เน็ท ที่คุณอาจหลงทางในเว็บไซท์บางแห่ง เพราะขาดระบบการนำทางที่ดีทำให้เกิดความ รู้สึกสับสนและไม่พอใจ ขณะที่การออกแบบโครงสร้างข้อมูลที่ดี ช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบนิเนวิเกชั่นเป็นส่วนเสริมในการสร้างสิ่งแวดล้อมที่สื่อความหมาย เพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง ทำให้ผู้ใช้รู้สึกสบายขณะที่ท่องเว็บ โดยสามารถรู้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้าง และควรจะไปทางไหนต่อ การเข้าถึงข้อมูลอย่างสะดวกเป็นหัวใจสำคัญของระบบเนวิเกชั่น การมีเนื้อหาในเว็บไซท์ที่ดี จะเป็นสิ่งดึงดูดให้ผู้ใช้เข้ามาใช้บริการอย่าง สม่ำเสมอแต่เนื้อหานั้นจะไม่มีประโยชน์เลยถ้าผู้ใช้ค้นหาสิ่งที่ต้องการไม่พบ ความสำเร็จของเว็บไซท์ส่วนหนึ่งมาจากการที่ผู้ใช้สามารถพึ่งพาระบบเนวิเกชั่นในการนำทางไปถึงที่หมายได้ ระบบเนวิเกชั่นนั้นอาจประกอบด้วยองค์ประกอบหลายๆ อย่าง เช่นเนวิเกชันบาร์ หรือ 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. สนับสนุนเป้าหมายและพฤติกรรมของผู้ใช้
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้ เบราเซอร์ คือ โปรแกรมที่ใช้เรียกดูเว็บเพจ สามารถแสดงผลได้ทั้งรูปแบบตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้รับความนิยม เช่น Internet Explorer , Netscape Navigator Opera , Mozilla , Firefox ปัจจุบันได้มีองค์กรกลางได้ทำการกำหนดมาตรฐานเพื่อให้เป็นมาตรฐานกลาง คือ W3C
2. ระบบปฏิบัติการ(Operating System) จะ มีผลต่อการทำงานของเบราเซอร์มาก แต่ละระบบปฏิบัติการ
จะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ ที่ใช้ ระดับความละเอียดของหน้าจอ ชุดสีระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ
3. ความละเอียดของหน้าจอ ความละเอียด 640x480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 ความละเอียดของหน้าจอจะขึ้นอยู่กับประสิทธิภาพของการ์ดแสดงผล
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้ จำนวนสีที่การ์ดจอสามารถแสดงได้นั้นขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือ จำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซลชุดสีสำหรับเว็บ (Web Palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac
5. ชนิด ของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้ จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมี ฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
- MS SansSerif เป็นฟอนต์แบบบิตเเมพ(bitmapped font)
- Microsoft Sans Serif เป็นฟอนต์แบบเวคเตอร์หรือลายเส้น(vector font) สามารถปรับขนาดได้อย่างไม่จำกัด
ข้อดี 1. สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอนทั้งชนิด ขนาด สี
2. สามารถมองเห็นได้โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ในเครื่อง
3. สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
ข้อเสีย 1. ใช้เวลาในการ Downlond มาก
2. ลำบากในการแก้ไขและเปลี่ยนแปลง
3. ข้อความเป็นกราฟฟิกจะไม่สามารถค้นหาได้ด้วย search engine
6. ความ เร็วในการเชื่อมต่ออินเตอร์เน็ต จะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ ความเร็วของอินเตอร์เน็ตมีหลายระดับ คือ - ผู้ใช้ตามบ้าน จะใช้ความเร็ว 56 kbps
- หน่วยงานบางแห่ง จะใช้ความเร็วสูง เช่น ADSL , Cable modem ซึ่งมีความเร็วตั้งแต่ 128 kbpsจนถึง 10 kbps
7. ขนาดหน้าต่างเบราเซอร์
-ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้(Flexible Design)องค์ประกอบทั้งหมดจะมีการจัดเรียงตัวกันใหม่ ตามขนาดพื้นที่ใหม่
ข้อดี 1.พื้นที่หน้าจอทั้งหมดถูกใช้อย่างเต็มที่
2. เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ
ข้อเสีย
1.ไม่สามารถคาดการณ์รูปแบบที่จะปรากฏต่อสายตาผู้ชมได้
-ออกแบบเว็บเพจให้มีขนาดคงที่(Fixed Design) ผู้ที่ต้องการควบคุมโครงสร้างของหน้าเว็บให้คงที่เสมอ
ข้อดี 1. เว็บเพจจะปรากฏต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ
2. สามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี ทำให้ตัวอักษรไม่ยาวเกินไป
ข้อเสีย
1. ต้องอาศัย scroll bar ในการเลื่อนดูข้อมูล
8. ความสว่างและค่าความต่างของโทนสี
- สามารถปรับความสว่าง(Brightness) และความต่างของโทนสี(Contrast) จากมอนิเตอร์ได้
- ต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และความเลือกใช้โทนสีที่ต่างกันพอสมควร
- ต้องหลีกเลี่ยงตัวหนังสือสีส้มบนพื้นแดง
ออกแบบกราฟฟิกสำหรับเว็บไซต์ (Design Web Graphics) กราฟฟิกเป็นองค์ประกอบสำคัญของเว็บเพจ ซึ่งปัญหาส่วนใหญ่ที่เกิดขึ้นมักจะเกิดขึ้น
กับการสร้างกราฟฟิก
คือการใช้ลักษณะรูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป
กราฟฟิกรูปแบบหลัก 2 ประเภท คือ
1. GIF ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุดแรก
-มีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
- การบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วย สีพื้น
2. JPG ย่อมาจาก Joint Photographic Experts Group
- มีข้อมูลสีขนาด 24 บิต แสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)
- ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
3. PNG ย่อมาจาก Portable Network Graphic
- สามารถสนับสนุนสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
- การบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย(lossless)
- ควบคุมแกมม่า (Gamma) และความโปร่งใส(Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
-ใช้หน่วยวัดเป็น พิกเซล
-ความละเอียดของภาพควรใช้ หน่วย pixle per inch (ppi)
-การใช้งานจะนำหน่วย dot per inch (dpi) จะเหมาะสมกับเครื่องพริ้นท์
-ควรมีความละเอียดแค่ 72 ppt
กราฟฟิกรูปแบบGIF
ลักษณะเด่นของ GIF
- ไม่ขึ้นอยู่กับระบบปฏิบัติการใด ๆ
- สามารถนำไปใช้กับเบราเซอร์ทุกชนิดได้โดยไม่ต้องคำนึงถึงเวอร์ชันใด ๆ
- เก็บข้อมูลสี ได้สูงสุด 8 บิต
- คุณสมบัติ Interlacing ข้อดี คือ ผู้ใช้เห็นภาพที่กำลังดาวน์โหลดอยู่มีความชัดเจนขึ้นเรื่อย ๆ
ข้อเสีย คือ ขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
- ระบบการบีบอัดข้อมูลของ GIF จะมีการบีบอัดข้อมูลแบบไม่สูญเสีย ใช้การบีบอัดที่เรียกว่า LZW ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม zip
-คุณสมบัติในการเคลื่อนไหว(Animated GIF) ข้อดี คือ ไม่ต้องอาศัย plug-in
- ข้อคิดในการใช้ Animated GIF
ใช้ภาพเคลื่อนไหวในจุดที่ต้องการให้ผู้ชมสนใจมากที่สุด ไม่ควรใช้ภาพเคลื่อนไหวมากเกินไป จะทำให้ผู้ใช้สับสน ทำให้ภาพเคลื่อนไหวนั้นโหลดได้เร็ว
- การลดขนาดไฟล์ GIF พยายามจำกัดขนาดของกราฟฟิกใช้สีพื้นๆเข้าไว้ รูปที่มีลวดลายตามแนวนอนจะมีขนาดไฟล์ที่เล็กกว่า
กราฟฟิกรูปแบบ JPEG
- ใช้วิธีการบีบบอัดข้อมูลแบบJFIF (JPEG File interchange format)
- ใช้ระบบสีขนาด 24 บิต จะให้สีสมจริงมากถึง 16.7 ล้านสี ส่งผลให้ได้รูปที่มีคุณภาพ
- ระบบการบีบอัดข้อมูลในไฟล์ JPEG เป็นการบีบอัดแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป
- ใช้วิธีเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยม
ประสิทธิภาพจะขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป
- การขยายข้อมูลของ JPEG จะใช้เวลาในการแสดงผลรูปJPEG มากกว่า GIF
- การลดขยายไฟล์ JPEG ไม่สามารถลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
