การเชื่อมโยงบนเว็บเพจ


การเชื่อมโยงบนเว็บเพจ

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

รูปแบบที่ 1  ข้อความที่เชื่อมโยงแบบ Navigation Bar  เป็นการจัดกลุ่มของเว็บเพจที่สัมพันธ์กัน  หรือเป็นเพจย่อยของหน้าเว็บนั้นๆ  เช่น  ในหน้า Home Page แสดง Navigation Bar  ประกอบด้วยรายชื่อกลุ่มเพจย่อย  คือ Service, Member  และ  About Us  เป็นต้น

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

รูปแบบที่ 3  ข้อความเชื่อมโยงเพื่อบอกให้ผู้ชมคลิกดูรายละเอียดเพิ่มเติม  โดยจะแสดงข้อมูลของสินค้าเพียงคร่าวๆ แต่จะแสดงข้อความ  เช่น  “คลิกเพื่อดูรายละเอียด”  หรือ  “ยังมีต่อ....”  ไว้ตอนท้ายของข้อมูลดังกล่าว  
เพื่อให้ผู้ชมเป็นผู้ตัดสินใจเองว่าต้องการเข้าไปชมข้อมูลหรือไม่

1.1  การเลือกใช้คำอธิบายข้อความเชื่อมโยง
       คำอธิบายข้อความเชื่อมโยง  เป็นคำหรือข้อความที่บอกให้ผู้ชมทราบว่า  หากต้องการรายละเอียดข้อมูลเพิ่มเติมให้คลิกที่ข้อความนี้เพื่อเชื่อมโยงไปยังเว็บเพจที่เกี่ยวข้องได้  ซึ่งการออกแบบข้อความเชื่อมโยงในอดีตมักใช้คำว่า คลิกที่นี่”  หรือ “Click here”  แต่การออกแบบที่ดีควรหลีกเลี่ยงการใช้ข้อความลักษณะนี้  เพราะเป็นการระบุวิธีเข้าถึงข้อมูลเฉพาะการแสดงผลบนจอภาพคอมพิวเตอร์ที่ใช้เมาส์เพื่อคลิกชมข้อมูลเท่านั้น  ซึ่งในความเป็นจริง  เว็บเพจสามารถแสดงผลบนอุปกรณ์อื่นได้หลายชนิด  และวิธีการเข้าถึงข้อมูลก็แตกต่างกันไปด้วย 

หลักการออกแบบข้อความเชื่อมโยงมีดังนี้

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


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



ตัวอย่างการจัดกลุ่มข้อความเชื่อมโยงที่สัมพันธ์กันในเว็บ www.searin.org  ผู้ชมสามารถเลือกตัดสินใจได้ว่าจะรับชมข้อมูลใดบ้าง

1.2  การสร้าง Link Title
       กล่องคำอธิบายข้อความเชื่อมโยง (Link Title)  คือ  กล่องข้อความที่แสดงรายละเอียดสั้นๆ เกี่ยวกับเว็บเพจหรือเว็บไซต์ที่ข้อความนี้เชื่อมโยงไปถึงกล่องคำอธิบายข้อความเชื่อมโยงจะปรากฏขึ้นเมื่อผู้ชมเว็บไซต์เลื่อนเมาส์ไปวางที่ข้อความเชื่อมโยงนั้นๆ  ข้อดีของกล่องคำอธิบายเชื่อมโยง  คือ  ช่วยลดเวลาในการตัดสินใจของผู้ชมว่า  จุดเชื่อมโยงนี้จะเชื่อมโยงไปยังเว็บเพจที่มีข้อมูลที่ตนต้องการหรือไม่

หมายเหตุ   การสร้างกล่องคำอธิบายข้อความเชื่อมโยง  กระทำได้โดยเพิ่มแอททริบิวต์ “title”  ไว้ที่แท็ก <a> ใน HTML เช่น <a herf = www.w3.org/TR/xhtml2/ title=www.w3.org/TR/xhtml2| รายละเอียดของ XHTML 2.0>XHTML เวอร์ชัน 2.0 </a>

       อย่างไรก็ตาม  ต้องคำนึงถึงเว็บบราวเซอร์ที่รองรับแอททริบิวต์ “title” ของแท็ก <a> ใน HTML ด้วย  โดยสามารถแสดงผลในเว็บบราวเซอร์เวอร์ชัน 4.0 ขึ้นไป

หลักการออกแบบกล่องคำอธิบายข้อความที่เชื่อมโยง  มีดังนี้

1.  ระบุชื่อเว็บเพจหรือเว็บไซต์ที่เชื่อมโยงถึง  หากข้อความเชื่อมโยงไปยังข้อมูลที่อยู่ในเว็บไซต์อื่น  นักพัฒนาเว็บควรใส่ชื่อเว็บไซต์นั้นลงในกล่องคำอธิบายด้วย  ในทำนองเดียวกันถ้าเป็นการเชื่อมโยงภายในไซต์ (Site) ของตนเอง ก็ควรใส่ชื่อเว็บเพจย่อยหรือส่วนของข้อมูลที่อ้างอิง

2.  ระบุรายละเอียดของข้อมูล  โดยเป็นตัวอย่างข้อมูลที่จะพบในเว็บเพจที่เชื่อมโยงถึง  ซึ่งรายละเอียดของข้อมูลควรจะสัมพันธ์กับคำหรือข้อความที่เลือกใช้เป็นจุดเชื่อมโยงด้วย

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

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

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

หลักการเลือกใช้สีตัวอักษรเพื่อเปลี่ยนสถานะข้อความเชื่อมโยงดังนี้

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

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

หมายเหตุ  โทนสีมาตรฐาน ที่ใช้กำหนดสถานะข้อความเชื่อมโยง คือ สถานะปกติ ตัวอักษรเป็นสีน้ำเงิน (ขีดเส้นใต้) และสถานะเมื่อคลิกเชื่อมโยงแล้ว ตัวอักษรเป็นสีม่วงเข้ม

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



ตัวอย่างการใช้ข้อความเชื่อมโยงหลากหลายสีในเว็บ www.yenta4.com
(สังเกตจากระดับความเข้มของสีตัวอักษร) ที่ต่างกันอาจทำให้ผู้ชมเกิดความสับสนได้


1.4 Inbound Link

            “Inbound   Link” เป็นเทคนิคการเพิ่มจำนวนผู้เยี่ยมชมเว็บไซต์ของบริษัท โดยให้เว็บไซต์อื่น (เว็บไซต์ต้นทาง) สร้างการเชื่อมโยงมายังเว็บไซต์ของบริษัทเรา (เว็บไซต์ปลายทาง) ซึ่งนับว่าเป็นการประชาสัมพันธ์เว็บไซต์ของบริษัทโดยอัตโนมัติ “Inbound Link” แบ่งออกเป็น 2 กรณี ดังนี้


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

กรณีที่ 2    เป็นการประชาสัมพันธ์โดยขอเช่าพื้นที่โฆษณาเว็บไซต์จากบริษัทที่ให้บริการเช่าพื้นที่โฆษณา 

หลักการออกแบบ “Inbound Link” ที่สำคัญมีดังนี้

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