Ghost button หรือปุ่มใส จะนำไปใช้ตอนไหนดี?

Publish เขียนเมื่อ: 03/01/2018 Category หมวดหมู่: ประสบการณ์ผู้ใช้

ปุ่มใส ช่วยให้เว็บไซต์ดูทันสมัย หรือใช้งานยาก

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

ghost-button

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

Product - ghost button

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

Product

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

ซึ่งมีหลายที่มายืนยันเป็นเสียงเดียวกันว่า การใช้ปุ่มใสนั้นทำให้ conversion rate ในการคลิกต่ำลงด้วย คุณผู้อ่านสามารถเข้าไปดูผลลัพธ์การทดลองได้ที่เว็บไซต์ Ghost Buttons: UX Disaster or Effective Design? และ GHOST BUTTONS: THE GOOD, THE BAD, THE SPOOKY: PART 2 ซึ่งเว็บไซต์ปลายทางได้ทำการใช้ A/B testing พร้อมแนบตารางผลลัพธ์มาให้เราวิเคราะห์กันด้วย

ghost-button-ab-testing
ภาพประกอบจาก https://www.elevatedthird.com

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

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

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