นอกจาก Scroll Bar ของหน้าต่างเว็บบราวเซอร์แล้ว ผู้ออกแบบสามารถสร้าง Scroll Bar เสริมที่ช่องกรอกข้อความ (Text Area) หรือสร้างระบบนำทาง (Navigation) โดยใช้ Scroll Bar เพื่อซ่อนรายการเมนูเชื่อมโยงได้ ซึ่งการเลือกใช้ Scroll Bar ต้องคำนึงถึงรูปแบบและความจำเป็นในการใช้งานด้วย เพราะ Scroll Bar แต่ละแบบก็จะมีข้อจำกัดในการใช้งานที่ต่างกัน ซึ่งจะได้กล่าวถึงในหัวข้อต่อไป
รูปแบบของ Scroll Bar
รูปแบบของ Scroll Bar จะพิจารณาจากโครงรางของเว็บเพจเป็นหลัก เนื่องจากเป็นองค์ประกอบที่ใช้งานควบคู่กัน ดังนั้นหัวข้อนี้จะได้กล่าวถึงโครงร่างหน้าเว็บประเภทต่าง ๆ และรูปแบบของ รูปแบบของ Scroll Bar ที่ใช้งานร่วมกับเว็บเพจนั้น
- โครงร่างเว็บเพจขนาดพอดีกับจอภาพ
เว็บเพจลักษณะนี้จะถูกออกแบบมาเพื่อให้พอดีกับขนาดของจอภาพ เนื่องจากข้อมูลยนหน้าเว็บมีน้อยจึงไม่จำเป็นต้องใช้ Scroll Bar เพื่อเลื่อนชมข้อมูล นับเป็นข้อดีที่ช่วยอำนวยความสะดวกแก่ผู้ชม เพราะเว็บเพจจะถูกแสดงในตำแหน่งตรงหน้าผู้ชมเพียงอย่างเดียว (ไม่ได้ถูกซ่อนจนกว่าจะเลื่อน Scroll Bar) ผู้ชมจึงสามารถมองเห็นรายละเอียดบนหน้าเว็บนั้นได้ทั้งหมด
แสดงตัวอย่างหน้าเว็บwww.kipling.com ที่มีขนาดพอดีกับหน้าจอภาพผู้ชมสามารถมองเห็นรายละเอียดบนหน้าเว็บนั้นได้ทั้งหมด
- โครงร่างเว็บเพจในแนวตั้ง เป็นโครงร่างเว็บเพจที่มีการใช้งานมากที่สุด โดยลักษณะของ Scroll Bar อยู่ในรูปแบบแนวตั้งเช่นกัน โครงร่างเว็บเพจลักษณะนี้เกิดจากข้อมูลบนหน้าเว็บมีความยาวกว่าความสูงของ หน้าต่างเว็บบราวเซอร์ จึงต้องใช้ Scroll Bar ของเว็บบราวเซอร์เพื่อเลื่อนชมข้อมูล
หมายเหตุ Scroll Bar แนวตั้ง ป็น Scroll Bar พื้นฐานที่มักนำมาใช้กับทุกเว็บเพจ และใช้ร่วมกับ รูปแบบอื่น ๆ ด้วย
Scroll Bar แนวตั้งเป็นรูปแบบที่เหมาะสมสำหรับการออกแบบเพื่อนำเสนอข้อมูลที่เป็นตัว อักษร เนื่องจากมุมมองด้านความกว้างของข้อมูลถูกจำกัดให้เท่ากับหน้าต่างบราวเซอร์ ปกติ ซึ่งเหมาะสมกับระยะสายตาของผู้ชมจึงทำให้อ่านข้อมูลได้ง่ายและข้อมูลมีความ ต่อเนื่อง นอกจากนี้ Scroll Bar แนวตั้งยังเป็นรูปแบบอินเตอร์เฟสที่ใช้ในโปรแกรมอื่น ๆ ด้วย ผู้ชมส่วนใหญ่สามารถเข้าใจและเรียนรู้วิธีการใช้งานได้ไม่ยาก
- โครงร่าวเว็บเพจในแนวนอน เป็นโครงร่างเว็ยเพจที่ขยายพื้นที่ข้อมูลออกตามความกว้างของหน้าต่างเว็บ บราวเซอร์ ผู้ชมสามารถรับชมข้อมูลที่อยู่นอกพื้นที่หน้าต่างเว็บบราวเซอร์ในขนาดความ กว้างปกติโดยคลิกที่ Scroll Bar ในแนวนอน โครงร่างเว็บเพจนี้มีข้อจำกัด คือ การอ่านข้อมูลที่เป็นตัวอักษรจะทำได้ยาก เพราะผู้ชมต้องคอยเลื่อน Scroll Bar ทุกครั้งเพื่อให้อ่านข้อมูลใน 1 บรรทัดได้หมด โดยที่ข้อมูลบางส่วนอยู่นอกพื้นที่หน้าต่างเว็บบราวเซอร์โดยมากผู้ ออกแบบจะไม่ใช้ Scroll Bar แนวนอน หรือหากจำเป็นจริง ๆ ก็จะใช้แถบเลื่อนน้อยมากเพื่อป้องกันปัญหาข้างต้น แต่มีข้อระวังในการเลือกใช้ Scroll Bar ลักษณะนี้ คือ ความละเอียดในการแสดงผล เนื่องจากยางเว็บเพจเมื่อแสดงผลในความละเอียด 1024 x 768 พิกเซล เว็บเพจจะมีจนาดพอดีกับหน้าต่างเว็บบราวเซอร์โดยไม่ต้องใช้ Scroll Bar หรือใช้การเลื่อนแถบเพื่อรับชมข้อมูลน้อยมาก แต่เมื่อนำเพจดังกล่าวมาแสดงผลที่ความละเอียด 800 x 600 พิกเซล กลับต้องเลื่อนแถบ Scroll Bar เพื่อชมข้อมูลมากกว่าเดิม ดังนั้นโครงร่างเว็บเพจแนวนอนจึงเหมาะสมสำหรับใส่ภาพหรือกราฟฟิก เช่น ภาพสินค้า สถานที่ท่องเที่ยว เป็นต้น เพราะเป็นข้อมูลที่มีรายละเอียดในการรับชมน้อยกว่าตัวอักษร และไม่จำเป็นต้องอาศัยความต่อเนื่องในการรับชมมากนัก (หากเป็นตัวอักษรถ้าอ่านข้ามประโยคหรือข้อความใดไปอาจทำให้ความหมายผิดไป ได้)
- โครงสร้าวเว็บเพจแบบผสม เป็นโครงร่างเว็บเพจที่มีการใช้งาน Scroll Bar ของเครื่องมือเว็บบราวเซอร์ และอาจมีการสร้างเครื่องมือบางชนิดที่มี Scroll Bar เป็นส่วนประกอบเพื่อใช้งานภายในหน้าเว็บอีก เช่น ใช้ Scroll Bar เมื่อมีการแบ่งเฟรม สร้าง Scroll Bar ของช่องกรอกข้อความ (Text Area) หรือเมนูนำทาง (Navigation Bar) เพื่อเพิ่มพื้นที่ใส่รายละเอียดข้อมูล ดังรูปที่ 8.6 การใช้งาน Scroll Bar ประเภทนี้ผู้ชมต้องใช้เวลาเรียนรู้รูปแบบการทำงานของเครื่องมือเพิ่ม เพราะผู้ออกแบบในปัจจุบันมักออกแบบส่วนของ Scroll Bar โดยใช้เทคนิคที่หลากหลาย เช่น เปลี่ยนสี Scroll Bar ให้กลืนกับสีพื้นหลัง หรือการเปลี่ยนรูปลักษณ์ของ Scroll Bar ที่ต่างไปจากเดิม รวมทั้งลักษณะการทำงานของ Scroll Bar ด้วย
หลักการออกแบบ Scroll Bar
การใช้ Scroll Bar เพื่อเลื่อนชมข้อมูลบนหน้าเว็บที่มีความยาวมากเกินไป นอกจากจะไม่คล่องตัวในการใช้งานแล้ว ยังเป็นการกระตุ้นให้ผู้ใช้เกิดความเบื่อหน่ายที่จะอ่านข้อมูลด้วย Scroll Bar ยังสร้างปัญหาการใช้งานด้านอื่น เช่น เมื่อผู้ใช้พบข้อมูลที่ต้องการ หรือพบว่าสามารถเข้าถึงข้อมูลโดยผ่านระบบนำทาง Navigation ตั้งแต่หน้าเว็บบนจอภาพส่วนแรกแล้วก็จะไม่เลื่อนแถบ Scroll Bar เพื่อรับชมข้อมูลส่วนอื่นอีก และด้วยตำแหน่งข้อมูลที่อยู่ด้านล่าง จึงเป็นสาเหตุให้ผู้ใช้มักไม่ค่อยให้ความสนใจ เพราะเข้าใจว่าเป็นข้อมูลที่ไม่มีความสำคัญมากนัก ซึ่งเป็นความเข้าใจที่ไม่ถูกต้อง ดังนั้นเพื่อแก้ปัญหาการออกแบบหน้าเว็บโดยใช้ Scroll Bar ผู้ออกแบบจึงต้องคำนึงถึงปัจจัยต่างๆ ดังนี้
ความยาวของข้อมูลบนหน้าเว็บ ข้อมูลที่อยู่บนหน้าเว็บไม่ควรกำหนดให้มีความยาวมากเกินไป เพราะทำให้ค้นหาข้อมูลได้ยาก ซึ่งผู้ออกแบบต้องคำนึงถึงเสมอว่า ผู้ชมต้องการความรวดเร็วเพื่อเข้าถึงข้อมูล และไม่ต้องการกวาดสายตาเพื่อมองหาข้อมูลที่ต้องการจากข้อมูลจำนวนมาก ดังนั้นถ้าข้อมูลบนหน้าเว็บมีปริมาณมากจริงๆ และจำเป็นต้องแสดงภายในเพจนั้น ควรสร้างการเชื่อมโยงภายในเพจให้ผู้ชมคลิกเลือกจากคำหรือหัวข้อที่เกี่ยว ข้องเพื่อเชื่อมโยงไปยังข้อมูลส่วนนั้นแทน โดยไม่ต้องเลื่อนแถบ Scroll Bar ให้เสียเวลา
หมายเหตุ เว็บเพจบางหน้าอาจจำเป็นต้องใส่ข้อมูลที่มีความยาวมาก เช่น ใส่รายละเอียดของสินค้า หรือประวัติความเป็นมาขององค์กร เป็นต้น ข้อดีของการใส่ข้อมูลที่มีความยาวบนหน้าเว็บเดียว คือ เป็นการจัดกลุ่มข้อมูลที่สัมพันธ์ไว้โดยตรง เมื่อผู้ชมเข้ามายังหน้าเว็บเพียงครั้งเดียวก็สามารถพบข้อมูลที่เกี่ยวข้อง กับเรื่องที่ต้องการได้ทั้งหมด ไม่ต้องเสียเวลาค้นหาจาหเพจย่อยอื่นอีก
ข้อความเชื่อมโยงที่ผู้ออกแบบสร้างจะต้องมีความหมาย หรือเป็นชื่อเรื่องที่ตรงกับข้อมูลที่จะนำเสนอ เพื่อให้ผู้ใช้เข้าใจตรงกัน นอกจากนี้ผู้อ่านจะพบว่าบางเว็บไซต์ หากไม่ต้องการนำเสนอข้อมูลมากๆ บนหน้าเว็บเพียงหน้าเดียว ก็จะสร้างการเชื่อมโยงโดยให้ผู้ใช้คลิกคำว่า “Next”, “ถัดไป” หรือสัญลักษณ์ „ เพื่อเปิดหน้าเว็บใหม่ที่มีข้อมูลต่อเนื่องจากหน้าเว็บเดิมขึ้นมาเช่นนี้ไป เรื่อยๆ จนกว่าจะเสนอข้อมูลหมด ในที่นี้ขอแนะนำว่า ผู้ออกแบบไม่ควรกระทำเช่นนั้น และควรใช้การทำงานของ Scroll Bar มากกว่า เพราะการคลิกที่ข้อความเชื่อมโยง “Next” ผู้ใช้ไม่อาจทราบได้เลยว่าข้อมูลต่อไปจะเกี่ยวข้องกับสิ่งใด และข้อมูลมีความยาวมากน้อยเพียงใด ซึ่งถ้าเป็น Scroll Bar ผู้ใช้สามารถสังเกตได้จากความยาวของแถบเลื่อน (หากแถบเลื่อนสั้นแสดงว่ามีข้อมูลมาก แต่หากแถบเลื่อนยาวแสดงว่ามีข้อมูลน้อย)
ระวังการใช้เครื่องมือพิเศษ การเพิ่มพื้นที่ข้อมูลโดยใช้เครื่องมือพิเศษ เช่น ช่องกรอกข้อความ (Text Area) จะช่วยจำกัดขอบเขตข้อมูลที่ต้องการไว้ในพื้นที่เดียวกันได้ แต่ต้องระวังการใช้ช่องกรอกข้อความขนาดเล็กที่วางปะปนกับข้อมูลบนหน้าเว็บ ที่มีจำนวนมาก หรือใช้ช่องกรอกข้อความที่มีสีพื้นหลังกลืนกับสีของเว็บ จนทำให้ผู้ใช้มองข้ามข้อมูลไปโดยไม่ทันสังเกตได้ (ใช้ Scroll Bar เลื่อนชมข้อมูลแบบผ่านๆ ไปอย่างรวดเร็ว)
ดังนั้นการใช้เครื่องมือเพิ่ม พื้นที่ข้อมูลข้างต้น จึงเหมาะกับเว็บเพจที่มีข้อมูลบนหน้าเว็บไม่หนาแน่นมากนัก และควรขยายพื้นที่กรอกข้อมูลให้มีความกว้างที่ผู้ชมสามารถสังเกตเห็นได้ชัด หากเป็นข้อมูลที่มีความสำคัญ ควรจัดตำแหน่งของช่องกรอกข้อมูลไว้ในส่วนบนของเว็บเพจ เพื่อให้ผู้ใช้ที่เปิดมาครั้งแรกสามารถเห็นเครื่องมือนี้ได้ทันที
ตรวจสอบการแสดงผลของหน้าเว็บ โดยเฉพาะเว็บเพจที่ออกแบบมาให้มีขนาดพอดีกับจอภาพ มักมีปัญหาในการแสดงผลบนความละเอียดหรือขนาดจอภาพที่ต่างกัน เช่น บางเว็บถูกออกแบบมาเพื่อแสดงผลบนความละเอียด 1024x768 พิกเซล ได้อย่างพอดี แต่ถ้านำไปแสดงบนความละเอียด 800x600 พิกเซล จะมีภาพบางส่วนของเว็บที่ขาดหายไป และเนื่องจากเว็บเพจลักษณะนี้ส่วนมากจะออกแบบด้วยภาพกราฟฟิกที่ถูกกำหนดไว้ ให้มีขนาดพอดี จึงไม่สามารถใช้ Scroll Bar เพื่อเลื่อนชมข้อมูลที่หายไปได้
การใช้พื้นที่ว่างคั่นระหว่างข้อมูล ควรระวังความเข้าใจผิดของผู้ใช้ ในกรณีที่หน้าเว็บมีข้อมูลหนาแน่นเกินไป ผู้ออกแบบบางคนอาจเว้นระยะห่างระหว่างข้อมูล โดยปล่อยให้เกิดช่องว่างสีขาว ซึ่งผู้ชมที่ไม่ได้สังเกตแถบ Scroll Bar จะเลื่อนข้อมูลมาหยุดอยู่แค่พื้นที่ว่างดังกล่าว และเข้าใจว่าข้อมูลหมดแล้ว จึงไม่รับชมข้อมูลส่วนอื่นต่อไป
ข้อความเชื่อมโยงที่ผู้ออกแบบสร้างจะต้องมีความหมาย หรือเป็นชื่อเรื่องที่ตรงกับข้อมูลที่จะนำเสนอ เพื่อให้ผู้ใช้เข้าใจตรงกัน นอกจากนี้ผู้อ่านจะพบว่าบางเว็บไซต์ หากไม่ต้องการนำเสนอข้อมูลมากๆ บนหน้าเว็บเพียงหน้าเดียว ก็จะสร้างการเชื่อมโยงโดยให้ผู้ใช้คลิกคำว่า “Next”, “ถัดไป” หรือสัญลักษณ์ „ เพื่อเปิดหน้าเว็บใหม่ที่มีข้อมูลต่อเนื่องจากหน้าเว็บเดิมขึ้นมาเช่นนี้ไป เรื่อยๆ จนกว่าจะเสนอข้อมูลหมด ในที่นี้ขอแนะนำว่า ผู้ออกแบบไม่ควรกระทำเช่นนั้น และควรใช้การทำงานของ Scroll Bar มากกว่า เพราะการคลิกที่ข้อความเชื่อมโยง “Next” ผู้ใช้ไม่อาจทราบได้เลยว่าข้อมูลต่อไปจะเกี่ยวข้องกับสิ่งใด และข้อมูลมีความยาวมากน้อยเพียงใด ซึ่งถ้าเป็น Scroll Bar ผู้ใช้สามารถสังเกตได้จากความยาวของแถบเลื่อน (หากแถบเลื่อนสั้นแสดงว่ามีข้อมูลมาก แต่หากแถบเลื่อนยาวแสดงว่ามีข้อมูลน้อย)
ระวังการใช้เครื่องมือพิเศษ การเพิ่มพื้นที่ข้อมูลโดยใช้เครื่องมือพิเศษ เช่น ช่องกรอกข้อความ (Text Area) จะช่วยจำกัดขอบเขตข้อมูลที่ต้องการไว้ในพื้นที่เดียวกันได้ แต่ต้องระวังการใช้ช่องกรอกข้อความขนาดเล็กที่วางปะปนกับข้อมูลบนหน้าเว็บ ที่มีจำนวนมาก หรือใช้ช่องกรอกข้อความที่มีสีพื้นหลังกลืนกับสีของเว็บ จนทำให้ผู้ใช้มองข้ามข้อมูลไปโดยไม่ทันสังเกตได้ (ใช้ Scroll Bar เลื่อนชมข้อมูลแบบผ่านๆ ไปอย่างรวดเร็ว)
ดังนั้นการใช้เครื่องมือเพิ่ม พื้นที่ข้อมูลข้างต้น จึงเหมาะกับเว็บเพจที่มีข้อมูลบนหน้าเว็บไม่หนาแน่นมากนัก และควรขยายพื้นที่กรอกข้อมูลให้มีความกว้างที่ผู้ชมสามารถสังเกตเห็นได้ชัด หากเป็นข้อมูลที่มีความสำคัญ ควรจัดตำแหน่งของช่องกรอกข้อมูลไว้ในส่วนบนของเว็บเพจ เพื่อให้ผู้ใช้ที่เปิดมาครั้งแรกสามารถเห็นเครื่องมือนี้ได้ทันที
ตรวจสอบการแสดงผลของหน้าเว็บ โดยเฉพาะเว็บเพจที่ออกแบบมาให้มีขนาดพอดีกับจอภาพ มักมีปัญหาในการแสดงผลบนความละเอียดหรือขนาดจอภาพที่ต่างกัน เช่น บางเว็บถูกออกแบบมาเพื่อแสดงผลบนความละเอียด 1024x768 พิกเซล ได้อย่างพอดี แต่ถ้านำไปแสดงบนความละเอียด 800x600 พิกเซล จะมีภาพบางส่วนของเว็บที่ขาดหายไป และเนื่องจากเว็บเพจลักษณะนี้ส่วนมากจะออกแบบด้วยภาพกราฟฟิกที่ถูกกำหนดไว้ ให้มีขนาดพอดี จึงไม่สามารถใช้ Scroll Bar เพื่อเลื่อนชมข้อมูลที่หายไปได้
การใช้พื้นที่ว่างคั่นระหว่างข้อมูล ควรระวังความเข้าใจผิดของผู้ใช้ ในกรณีที่หน้าเว็บมีข้อมูลหนาแน่นเกินไป ผู้ออกแบบบางคนอาจเว้นระยะห่างระหว่างข้อมูล โดยปล่อยให้เกิดช่องว่างสีขาว ซึ่งผู้ชมที่ไม่ได้สังเกตแถบ Scroll Bar จะเลื่อนข้อมูลมาหยุดอยู่แค่พื้นที่ว่างดังกล่าว และเข้าใจว่าข้อมูลหมดแล้ว จึงไม่รับชมข้อมูลส่วนอื่นต่อไป
