แบนเนอร์เป็นสิ่งที่แทบทุกเว็บมี และเป็นสิ่งที่คนใช้เวลาออกแบบมากที่สุดชิ้นหนึ่ง แต่กลับเป็นสิ่งที่ผู้ใช้มองข้ามเก่งที่สุดเช่นกัน
บทความนี้อธิบายว่าแบนเนอร์แบบไหนยังทำงานได้ อะไรทำให้คนกด และต้นทุนที่ซ่อนอยู่ซึ่งหลายคนมองไม่เห็น
Banner คืออะไร
Banner คือพื้นที่บนหน้าเว็บที่ใช้ภาพหรือกราฟิกสื่อสารข้อความหนึ่ง โดยมักมีปุ่มหรือลิงก์ให้กดต่อ
แบ่งได้เป็นสองกลุ่มใหญ่ที่ทำงานคนละแบบ
แบนเนอร์ของเว็บตัวเอง ใช้ประกาศโปรโมชัน แนะนำบริการ หรือพาไปหน้าที่ต้องการ กลุ่มนี้ควบคุมได้ทั้งหมดและวัดผลได้ตรง
แบนเนอร์โฆษณาจากภายนอก คือพื้นที่ที่ขายให้คนอื่นมาลงโฆษณา หรือโฆษณาของเราที่ไปแสดงบนเว็บอื่น
ประเภทที่ใช้บ่อยบนเว็บธุรกิจ
Hero Banner พื้นที่ใหญ่บนสุดของหน้าแรก เป็นสิ่งแรกที่คนเห็น จึงมีผลต่อการตัดสินใจว่าจะอยู่ต่อหรือปิดหน้าไป
Banner ในเนื้อหา วางคั่นระหว่างเนื้อหาเพื่อพาไปหน้าที่เกี่ยวข้อง แบบนี้ได้ผลดีถ้าเกี่ยวกับสิ่งที่คนกำลังอ่านอยู่จริง
Sticky Banner แถบที่ติดอยู่ขอบบนหรือล่างตลอดเวลา มีอัตราการเห็นสูงแต่รบกวนได้ง่าย โดยเฉพาะบนมือถือที่พื้นที่จอน้อย
Popup ทางเทคนิคไม่ใช่แบนเนอร์ แต่ใช้แทนกันบ่อย ข้อควรระวังคือ Popup ที่บังเนื้อหาทันทีที่เปิดหน้าบนมือถือ เป็นสิ่งที่ Google ระบุว่าเป็นประสบการณ์ที่ไม่ดีและอาจกระทบอันดับ
ทำไมแบนเนอร์ส่วนใหญ่ถึงไม่มีใครกด
เพราะคนเรียนรู้ที่จะมองข้าม ผู้ใช้อินเทอร์เน็ตมานานพอจะรู้ว่ากล่องสี่เหลี่ยมสีสดที่มุมหน้ามักเป็นโฆษณา แล้วสายตาก็เลี่ยงไปเอง โดยไม่ต้องคิด
เพราะข้อความไม่ได้พูดถึงสิ่งที่ผู้อ่านสนใจ แบนเนอร์ที่เขียนว่า “บริการครบวงจร” ไม่ได้บอกอะไรที่ทำให้คนอยากกด
เพราะวางผิดที่ แบนเนอร์ที่ขวางระหว่างคนกับสิ่งที่เขากำลังจะทำ ถูกกดปิดมากกว่าถูกกดเข้า
หลักออกแบบให้คนกด
ข้อความสำคัญกว่าภาพ
สิ่งที่ทำให้คนกดคือคำ ไม่ใช่กราฟิก แบนเนอร์ที่ดีบอกได้ในสามวินาทีว่า ผู้อ่านจะได้อะไร
เทียบให้เห็น “รับทำเว็บไซต์” ด้อยกว่า “เว็บโรงแรมที่แขกจองตรงได้ ไม่ต้องผ่าน OTA” เพราะอย่างหลังบอกผลลัพธ์ที่คนอยากได้
หนึ่งแบนเนอร์ หนึ่งข้อความ
แบนเนอร์ที่พยายามบอกสามอย่างพร้อมกันไม่ได้ผลสักอย่าง
ปุ่มต้องดูเหมือนปุ่ม
ข้อความที่กดได้ต้องดูกดได้ ตัวอักษรสีต่างที่ไม่มีขอบไม่มีพื้นหลัง คนจำนวนมากไม่รู้ว่ากดได้
ข้อความบนปุ่มบอกการกระทำ
“ดูราคาแพ็กเกจ” ดีกว่า “คลิกที่นี่” เพราะบอกว่ากดแล้วจะเจออะไร อ่านต่อที่ CTA คืออะไร
ออกแบบจากมือถือก่อน
ผู้เข้าชมเว็บไทยส่วนใหญ่ใช้มือถือ แบนเนอร์ที่สวยบนจอกว้างแต่ตัวหนังสือเล็กจนอ่านไม่ออกบนมือถือ คือแบนเนอร์ที่ไม่ทำงาน
วิธีตรวจง่าย ๆ คือย่อภาพลงเหลือความกว้างเท่าจอมือถือ แล้วดูว่ายังอ่านข้อความหลักออกไหม
ต้นทุนที่มองไม่เห็น: แบนเนอร์ทำให้เว็บช้า
นี่คือส่วนที่คนออกแบบมักไม่ได้คิดถึง
Hero Banner มักเป็นภาพที่ใหญ่ที่สุดบนหน้า และเป็นภาพที่โหลดก่อนใคร ซึ่งแปลว่ามันคือตัวที่กำหนดค่า LCP ของหน้านั้นโดยตรง
ภาพขนาด 3 MB ที่อัปโหลดขึ้นไปโดยไม่ย่อ ทำให้ค่า LCP เกิน 4 วินาทีได้ง่าย ๆ บนเครือข่ายมือถือ ซึ่งกระทบทั้งประสบการณ์ผู้ใช้และคะแนน Core Web Vitals
สิ่งที่ควรทำ
บีบภาพและใช้ฟอร์แมตสมัยใหม่ WebP หรือ AVIF ให้ขนาดเล็กกว่า JPEG มากที่คุณภาพเท่ากัน อ่านต่อที่ WebP กับ AVIF
ระบุขนาดภาพในโค้ด เพื่อไม่ให้หน้ากระตุกตอนภาพโหลดเสร็จ ซึ่งเป็นสาเหตุของค่า CLS ที่แย่ อ่านต่อที่ CLS คืออะไร
อย่าใช้สไลด์หลายภาพบนหน้าแรก นอกจากจะโหลดหลายภาพพร้อมกันแล้ว ยังมีข้อมูลว่าคนส่วนใหญ่เห็นแค่ภาพแรก ภาพที่เหลือคือน้ำหนักที่จ่ายไปเปล่า
อย่าใส่ข้อความสำคัญไว้ในภาพอย่างเดียว เพราะเครื่องมือค้นหาอ่านข้อความในภาพไม่ได้ ให้ใช้ข้อความจริงวางทับภาพแทน ซึ่งดีทั้งกับ SEO และกับการปรับให้อ่านได้บนมือถือ
วัดผลอย่างไร
อัตราการคลิกของแบนเนอร์ เทียบระหว่างเวอร์ชัน ไม่ใช่ดูตัวเลขเดี่ยว ๆ
สิ่งที่เกิดขึ้นหลังคลิก ถ้าคนกดเยอะแต่ออกจากหน้าปลายทางทันที แปลว่าแบนเนอร์สัญญาสิ่งที่หน้าปลายทางไม่ได้ให้
ผลต่อความเร็วหน้า วัดก่อนและหลังเพิ่มแบนเนอร์ ถ้าค่า LCP แย่ลงชัดเจน ต้องกลับไปแก้ขนาดภาพ
ทดสอบทีละอย่างเสมอ อ่านวิธีได้ที่ A/B Testing
สรุป
แบนเนอร์ที่ได้ผลไม่ใช่แบนเนอร์ที่สวยที่สุด แต่คือแบนเนอร์ที่บอกได้เร็วที่สุดว่าผู้อ่านจะได้อะไร วางในจังหวะที่เขากำลังสนใจเรื่องนั้นพอดี และไม่ทำให้หน้าโหลดช้าลง
ถ้าต้องเลือกแก้อย่างเดียว ให้แก้ข้อความก่อนเสมอ เพราะให้ผลมากกว่าการเปลี่ยนภาพหรือสี
อ่านบทความอื่นในหมวดนี้ได้ที่ คู่มือทำเว็บไซต์