บทที่ 5
ออกแบบระบบเนวิเกชั่น(Designing Web Navigation)
ความสำคัญของระบบเนวิเกชั่น
ประกอบด้วยองค์ประกอบหลายอย่าง เช่น เนวิเกชั่นบาร์ หรือ pop-up menu
-การออกแบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชั่นเป็นส่วนเสริมในการสร้างสิ่งแวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง
ผู้ใช้สามารถรู้ได้ว่าตัวเองอยู่ที่หน้าไหน
Navigation ที่ดีจะต้องสามารถตอบคำถามหรือบรรลุวัตถุประสงค์ต่อไปนี้
1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ
/2.สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างไร
3.สามารถกลับไปยังหน้าเว็บเดิมได้อย่างไร
4.หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลแล้ว
คุณสมบัติการนำทางของบราวเซอร์
Open URL เป็นช่องว่างสำหรับกรอกที่อยู่เว็บที่ต้องการ เพื่อเข้าไปเว็บนั้น
History แสดงรายชื่อเว็บที่เคยเข้าไปย้อนหลังตามเวลาที่กำหนดไว้
Bookmaek ทำให้บราวเซอร์จำที่อยู่ของเว็บช่วยให้ผู้ใช้กลับมายังหน้าเดิมได้ง่าย
Status Bar แสดงรายละเอียด URL สีมาตรฐานของลิงค์ น้ำเงิน,ม่วง
รูปแบบของระบบเนวิเกชั่นแบ่งออกเป็น 4 รูปแบบ
1.ระบบเนวิเกชั่นแบบลำดับขั้น (Hierarchical)
2.ระบบเนวิเกชั่นแบบโกลบอล (Global)
3.ระบบเนวิเกชั่นแบบโลคอล (Local)
4.ระบบเนวิเกชั่นเฉพาะที่ (Ad Hoc)
ออกประกอบของระบบเนวิเกชั่นหลัก
มีได้หลายรูปแบบได้แก่
-วิเกชั่นบาร์
-วิเกชั่นบาร์ระบบเฟรม
-Pull down menu
-Pop up menu
-Image map
-Search box
การออกแบบระบบเนวิเกชันหลัก
เริ่มจากการมีโครงสร้างลำดับขั้นของข้อมูลที่เหมาะสม รายการหลักในกลุ่มข้อมูลชั้นแรกเป็นตัวกำหนดว่าระบบเนวิเกชันแบบโกลบอลจะต้องมีอะไรบ้าง รายการหลักจะถูกลิงค์ให้เข้าถึงได้ทุกหน้าในเว็บและเป็น ต้นแบบให้กับระบบเนวิเกชันแบบโลคอลและแบบเฉพาะที่ ต่อไปในทุกลำดับชั้นข้อมูลที่สูงกว่าส่งผลกระทบต่อการออกแบบในชั้นรองลงไปในโครงสร้างข้อมูล
เนวิเกชันแบบกราฟิก VS ตัวอักษร
จะเลือใช้แบบใดขึ้นอยู่กับผู้ออกแบบ โดยปกติรูปแบบกราฟิกจะดูสวยกว่าแบบตัวอักษรอยู่แล้วแต่แบบนี้จะทำให้การแสดงผลหน้าเว็บช้าลง แต่หากมีเนวิเกชันบาร์เดียวกันตลอดทั้งไซท์ ความล่าช้าที่เกิดจากการโหลดรูปกราฟิกจะเกิดขึ้นในครั้งแรกเพียงครั้งเดียวเท่านั้น
เนวิเกชันแบบกราฟิกพร้อมคำอธิบาย
หรือไอคอนเพื่อเพิ่มความน่าสนใจของลิงค์ ควรใส่คำอธิบายควบคู่กับกราฟิกด้วย ซึ่งจะช่วยเพิ่มความสะดวกให้เข้ามาใช้งาน ดังนั้นการใส่คำอธิบายควบคู่กับไอคอนเนวิเกชันจะช่วยให้สื่อความหมาย
สมบูรณ์ยิ่งขึ้น
ความสำคัญของระบบเนวิเกชั่น
ประกอบด้วยองค์ประกอบหลายอย่าง เช่น เนวิเกชั่นบาร์ หรือ pop-up menu
-การออกแบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชั่นเป็นส่วนเสริมในการสร้างสิ่งแวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง
ผู้ใช้สามารถรู้ได้ว่าตัวเองอยู่ที่หน้าไหน
Navigation ที่ดีจะต้องสามารถตอบคำถามหรือบรรลุวัตถุประสงค์ต่อไปนี้
1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ
/2.สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างไร
3.สามารถกลับไปยังหน้าเว็บเดิมได้อย่างไร
4.หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลแล้ว
คุณสมบัติการนำทางของบราวเซอร์
Open URL เป็นช่องว่างสำหรับกรอกที่อยู่เว็บที่ต้องการ เพื่อเข้าไปเว็บนั้น
History แสดงรายชื่อเว็บที่เคยเข้าไปย้อนหลังตามเวลาที่กำหนดไว้
Bookmaek ทำให้บราวเซอร์จำที่อยู่ของเว็บช่วยให้ผู้ใช้กลับมายังหน้าเดิมได้ง่าย
Status Bar แสดงรายละเอียด URL สีมาตรฐานของลิงค์ น้ำเงิน,ม่วง
รูปแบบของระบบเนวิเกชั่นแบ่งออกเป็น 4 รูปแบบ
1.ระบบเนวิเกชั่นแบบลำดับขั้น (Hierarchical)
2.ระบบเนวิเกชั่นแบบโกลบอล (Global)
3.ระบบเนวิเกชั่นแบบโลคอล (Local)
4.ระบบเนวิเกชั่นเฉพาะที่ (Ad Hoc)
ออกประกอบของระบบเนวิเกชั่นหลัก
มีได้หลายรูปแบบได้แก่
-วิเกชั่นบาร์
-วิเกชั่นบาร์ระบบเฟรม
-Pull down menu
-Pop up menu
-Image map
-Search box
การออกแบบระบบเนวิเกชันหลัก
เริ่มจากการมีโครงสร้างลำดับขั้นของข้อมูลที่เหมาะสม รายการหลักในกลุ่มข้อมูลชั้นแรกเป็นตัวกำหนดว่าระบบเนวิเกชันแบบโกลบอลจะต้องมีอะไรบ้าง รายการหลักจะถูกลิงค์ให้เข้าถึงได้ทุกหน้าในเว็บและเป็น ต้นแบบให้กับระบบเนวิเกชันแบบโลคอลและแบบเฉพาะที่ ต่อไปในทุกลำดับชั้นข้อมูลที่สูงกว่าส่งผลกระทบต่อการออกแบบในชั้นรองลงไปในโครงสร้างข้อมูล
เนวิเกชันแบบกราฟิก VS ตัวอักษร
จะเลือใช้แบบใดขึ้นอยู่กับผู้ออกแบบ โดยปกติรูปแบบกราฟิกจะดูสวยกว่าแบบตัวอักษรอยู่แล้วแต่แบบนี้จะทำให้การแสดงผลหน้าเว็บช้าลง แต่หากมีเนวิเกชันบาร์เดียวกันตลอดทั้งไซท์ ความล่าช้าที่เกิดจากการโหลดรูปกราฟิกจะเกิดขึ้นในครั้งแรกเพียงครั้งเดียวเท่านั้น
เนวิเกชันแบบกราฟิกพร้อมคำอธิบาย
หรือไอคอนเพื่อเพิ่มความน่าสนใจของลิงค์ ควรใส่คำอธิบายควบคู่กับกราฟิกด้วย ซึ่งจะช่วยเพิ่มความสะดวกให้เข้ามาใช้งาน ดังนั้นการใส่คำอธิบายควบคู่กับไอคอนเนวิเกชันจะช่วยให้สื่อความหมาย
สมบูรณ์ยิ่งขึ้น
บทที่6
แก้ไขปัญหาต่างๆ ได้ ก็คือ การที่ฉันเข้าใจว่า ธรรมชาติของความผิดพลาด
ออกแบบหน้าเว็บ (Page Design)
หน้าเว็บแรกเป็นส่วนที่สำคัญมากเพราะมีหน้าที่เป็นสื่อกลาง ให้ผู้ใช้เข้าถึงข้อมูลและระบบงานของเว็บนั้นได้
หลักสำคัญในการออกแบบยหน้าเว็บ
การใช้รูปภาพและองค์ประกอบต่างๆรวมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหา หรือลักษณะสำคัญของเว็บให้น่าสนใจ บทพื้อฐานของความเรียบง่ายและสะดวกต่อผู้ใช้
แนวคิดในการออกแบบหน้าเว็บ
-เรียนรู้จากเว็บไซต์ต่างๆ(สิ่งที่ได้คือรูปแบบและเทคนิคไหม่ๆ)
-ประยุกต์รูปแบบจากสิ่งพิมพ์
-ใช้แบบจำลองเปรียบเทียบ (Metaphor)
-ออกแบบอย่างสร้างสรรค์
หลักการออกแบบหน้าเว็บ
1.สร้างลำดับขั้นความสำคัญขององค์ประกอบ (Visual Hierarchy)
2.สร้างรูปแบบบุคลิกและสไตล์
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4.จัดวางองค์ประกอบในส่วนที่สำคัญไว้ในส่วนบนของหน้าเสมอ
5.สร้างจุดสนใจด้วยความแตกต่าง
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7.ใช้กราฟิกอย่างเหมาะสม
เข้าใจลักษณะการใช้งานของเว็บ
เราสามารถใช้ประโยชน์จากเว็บได้สองแนวทาง
1.การใช้เป็นสื่อโดยตรงให้อ่านบนหน้าจอ
2.การใช้เป็นสื่อกลางในการพิมพ์ข้อมูลลงในหน้ากระดาษเพื่อเก็บ ประรวบรวมหรืออ่านในภายหลัง
สำหรับเว็บที่ใช้อ่านบนหน้าจอควรมีขนาดกะทัดรัด ไม่ยืดยาวหรือใช้กราฟิกมากเกินไป
ส่วนหน้าที่คาดว่าจะพิมพ์ควรออกแบบให้มีการใช้ประโยชน์ของพื้นที่อย่างเต็มที่เพื่อไม่ให้เปลื่องกระดาษ
ออกแบบหน้าเว็บไห้มีความยาวเหมาะสม
หน้าเว็บที่ไม่ยาวนักทำให้ดูน่าอ่าน ขณะที่หน้าเว็บยาวๆทำให้งายต่อการจัดการสำหรับผู้ที่ต้องการดาวโหลดหรือสั่งพิมพ์หน้าเหล่านั้น
หน้าเว็บแรกเป็นส่วนที่สำคัญมากเพราะมีหน้าที่เป็นสื่อกลาง ให้ผู้ใช้เข้าถึงข้อมูลและระบบงานของเว็บนั้นได้
หลักสำคัญในการออกแบบยหน้าเว็บ
การใช้รูปภาพและองค์ประกอบต่างๆรวมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหา หรือลักษณะสำคัญของเว็บให้น่าสนใจ บทพื้อฐานของความเรียบง่ายและสะดวกต่อผู้ใช้
แนวคิดในการออกแบบหน้าเว็บ
-เรียนรู้จากเว็บไซต์ต่างๆ(สิ่งที่ได้คือรูปแบบและเทคนิคไหม่ๆ)
-ประยุกต์รูปแบบจากสิ่งพิมพ์
-ใช้แบบจำลองเปรียบเทียบ (Metaphor)
-ออกแบบอย่างสร้างสรรค์
หลักการออกแบบหน้าเว็บ
1.สร้างลำดับขั้นความสำคัญขององค์ประกอบ (Visual Hierarchy)
2.สร้างรูปแบบบุคลิกและสไตล์
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4.จัดวางองค์ประกอบในส่วนที่สำคัญไว้ในส่วนบนของหน้าเสมอ
5.สร้างจุดสนใจด้วยความแตกต่าง
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7.ใช้กราฟิกอย่างเหมาะสม
เข้าใจลักษณะการใช้งานของเว็บ
เราสามารถใช้ประโยชน์จากเว็บได้สองแนวทาง
1.การใช้เป็นสื่อโดยตรงให้อ่านบนหน้าจอ
2.การใช้เป็นสื่อกลางในการพิมพ์ข้อมูลลงในหน้ากระดาษเพื่อเก็บ ประรวบรวมหรืออ่านในภายหลัง
สำหรับเว็บที่ใช้อ่านบนหน้าจอควรมีขนาดกะทัดรัด ไม่ยืดยาวหรือใช้กราฟิกมากเกินไป
ส่วนหน้าที่คาดว่าจะพิมพ์ควรออกแบบให้มีการใช้ประโยชน์ของพื้นที่อย่างเต็มที่เพื่อไม่ให้เปลื่องกระดาษ
ออกแบบหน้าเว็บไห้มีความยาวเหมาะสม
หน้าเว็บที่ไม่ยาวนักทำให้ดูน่าอ่าน ขณะที่หน้าเว็บยาวๆทำให้งายต่อการจัดการสำหรับผู้ที่ต้องการดาวโหลดหรือสั่งพิมพ์หน้าเหล่านั้น
แก้ไขปัญหาต่างๆ ได้ ก็คือ การที่ฉันเข้าใจว่า ธรรมชาติของความผิดพลาด
คือ การที่มันเกิดขึ้นแล้ว จะคงอยู่ถาวร ฉันไม่ได้รับอนุญาตให้ใช้ยางลบ
ลบความผิดพลาดแต่ฉันจำเป็นต้องใช้สมองต่อเติมแก้ไขภาพวาดของฉัน
ให้สมบูรณ์ด้วยตัวเอง ดังนั้นถ้าความผิดพลาดมันเกิดขึ้นกับเราแล้ว
การที่เราจะมานั่งร้องห่มร้องไห้ อ้อนวอนขอแหกกฎเพื่อใช้ยางลบกลับไป
แก้ไขมันนั้น ย่อมเป็นไปไม่ได้ สิ่งเดียวที่จะทำได้ก็คือ รู้จักพลิกแพลงแก้ไข
สิ่งเหล่านั้นด้วยสติ และวาดภาพของตัวเองต่อไปด้วยความระแวดระวัง
มากยิ่งขึ้น ทุกคนมีดินสอหนึ่งแท่งเพื่อที่จะวาดภาพชีวิตของเราให้สวยงาม
แต่เราไม่มียางลบสักก้อนที่จะเอาไปลบสิ่งที่เราทำผิดพลาดมาแล้วได้
ดังนั้นเราต้องตั้งใจ และมีสติทุกครั้งที่ลากเส้น ถึงแม้ภาพที่เราวาดออกมา
จะไม่เหมือนกับภาพที่เราฝันไว้สักเท่าไหร่ แต่มันก็ออกมาจากมือของเรา
เราควรจะภูมิใจกับมันได้เสมอไม่ต้องกลัวหรอก แม้จะรู้ดีว่าสักวันหนึ่ง
เราอาจลากเส้นบิดเบี้ยวไปบ้างเพราะถึงอย่างไร ฉันยังเชื่อว่าถ้าสมอง
และหัวใจของเราทำงานอย่างเต็มที่ภาพชีวิตเราก็งดงามได้โดยไม่ต้องใช้ยางลบ
บทที่ 7
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
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) จากมอนิเตอร์ได้
- ต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และความเลือกใช้โทนสีที่ต่างกันพอสมควร
- ต้องหลีกเลี่ยงตัวหนังสือสีส้มบนพื้นแดง
