ความจริงเกี่ยวกับสีของปุ่มเรียกร้องให้ดำเนินการที่ดีที่สุดสำหรับเว็บไซต์ของคุณ

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

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

ฉันก็เหมือนกัน เมื่อได้อ่านบทความนี้จาก Yahoo! ธุรกิจขนาดเล็กที่พวกเขาบอกว่าสีที่ดีที่สุดที่จะใช้บนปุ่มคือสีแดง สีเขียว และสีส้มหรือสีเหลือง สิ่งแรกที่ฉันคิดว่าควรลองใช้บนเว็บไซต์ของเราเอง

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

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

ไปกันเถอะ!

การสร้างการทดสอบ A/B ของ CSS

วิธีที่ง่ายที่สุดในการเปลี่ยนสีของปุ่มบนหน้าคือการเพิ่มกฎ CSS เพิ่มเติมสองสามข้อเพื่อใช้สีใหม่ คุณใส่กฎ background-color ใหม่ให้กับปุ่มด้วยสีที่คุณต้องการ เท่านี้ก็เรียบร้อย ง่าย สบาย.

ด้วยการทดสอบ Nelio A/B คุณจะสามารถสร้างการทดสอบ A/B ของสไตล์ CSS เพื่อทดสอบกฎ CSS เพิ่มเติมในรูปแบบต่างๆ คุณเพียงแค่ต้องสร้างการทดสอบใหม่และเลือกตัวเลือก CSS ในตัวเลือกประเภทการทดสอบ:

ซึ่งจะนำคุณไปยังเครื่องมือแก้ไขการทดสอบ โดยที่สิ่งแรกที่คุณต้องทำคือสร้างตัวแปรต่างๆ โปรดทราบว่าในการทดสอบประเภทนี้ ตัวแปรแรกคือหน้าที่แสดงลักษณะที่ปรากฏในปัจจุบัน โดยไม่มี CSS เพิ่มเติม

จากนั้น คุณสร้างตัวแปรสำหรับ ในกรณีของเรา สีเพิ่มเติมแต่ละสีที่เราจะทดสอบ: สีหนึ่งสำหรับสีเขียว และอีกสีสำหรับสีแดง ตัวแปรแรกเป็นสีส้มอยู่แล้ว ดังนั้นเราจึงเตรียมทุกอย่างให้พร้อม

สำหรับรายละเอียดปลีกย่อยเพิ่มเติมแต่ละรายการ คุณสามารถไปแก้ไขเพื่อเพิ่มกฎ CSS เพิ่มเติมที่เปลี่ยนสีของปุ่มได้ กฎ CSS ที่คุณต้องการจะขึ้นอยู่กับธีมที่คุณใช้ใน WordPress ในตัวแก้ไข CSS ที่ Nelio A/B Testing มีให้ คุณสามารถดูได้ในแบบเรียลไทม์ว่ากฎ CSS ใหม่ของคุณเปลี่ยนรูปลักษณ์ของไซต์ของคุณอย่างไร สิ่งนี้จะช่วยคุณตรวจสอบว่าคุณทำถูกต้องหรือไม่

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

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

เป้าหมายแรกจะวัดการคลิกบนปุ่มการทำงาน ในขณะที่เป้าหมายที่สอง เราจะวัดการคลิกเหล่านั้นด้วย แต่จะวัดเฉพาะที่เกิดขึ้นในหน้าการกำหนดราคาเนื้อหา Nelio

สุดท้ายนี้ โปรดทราบว่าการทดสอบ A/B ของ CSS จะส่งผลต่อทุกหน้าในเว็บไซต์ของคุณ เพื่อจำกัดลักษณะการทำงานนี้ในการทดสอบ Nelio A/B ในแถบด้านข้างขวาของตัวแก้ไขการทดสอบ A/B คุณมีตัวเลือกในการจำกัดขอบเขตของการทดสอบ ฉันได้ทำไปแล้วเพื่อให้มีผลกับหน้าหลักของเนื้อหา Nelio และหน้าการกำหนดราคาเท่านั้น

เรามีทุกอย่างพร้อมที่จะเริ่มการทดสอบ เมื่อเราทำเสร็จแล้ว การทดสอบ A/B ของ Nelio จะรับผิดชอบในการแบ่งการเข้าชมที่เข้าชมสองหน้านี้ให้คุณ และแสดงรูปแบบสีต่างๆ ตลอดจนติดตามการแปลง (คลิกที่ปุ่ม)

จำไว้ว่าคุณต้องรอให้ผู้เยี่ยมชมผ่านหน้าเหล่านั้นเท่านั้นจึงจะเริ่มเห็นผลลัพธ์

วิเคราะห์ผลลัพธ์

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

แต่ขอเริ่มต้นด้วยผลการทดสอบบนเว็บของเราในภาษาสเปน:

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

สำหรับเป้าหมายที่สอง ซึ่งวัดเฉพาะการคลิกในหน้าการกำหนดราคาเนื้อหา Nelio เราเห็นว่าไม่มีสีที่ชนะที่ชัดเจนเช่นกัน เรายังสังเกตได้ว่าสีเขียวมีประสิทธิภาพแย่กว่าสีส้มอย่างไร แม้ว่าเราจะไม่สามารถสรุปผลที่ชัดเจนเกี่ยวกับข้อมูลที่ Nelio A/B Testing ได้รวบรวมจากผู้เข้าชมของเรา:

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

นอกจากนี้ เราสามารถยืนยันได้ว่าสีเขียวเป็นสีที่ชนะการทดสอบ ผลลัพธ์มีนัยสำคัญทางสถิติโดยมีระดับความเชื่อมั่นมากกว่า 99% สีเขียวเป็นสีที่ดีที่สุดที่เราสามารถใช้บนเว็บไซต์ของเราเป็นภาษาอังกฤษสำหรับปุ่มต่างๆ ในหน้าเนื้อหา Nelio

หากเราดูเฉพาะการคลิกในหน้าการกำหนดราคาเนื้อหา Nelio (เป้าหมายที่สองของการทดสอบ) เราจะเห็นว่าผลลัพธ์นั้นสอดคล้องกับเป้าหมายแรกของการทดสอบ:

เมื่อเห็นสิ่งนี้แล้ว เราสามารถพูดได้ว่าสีเขียวเป็นสีที่เหมาะสมที่สุดสำหรับผู้ชมของเราเป็นภาษาอังกฤษในหน้าเนื้อหา Nelio อย่างไรก็ตาม สำหรับผู้ชมชาวสเปน เราไม่สามารถหาสีที่ได้ผลดีไปกว่าสีที่เรามีอยู่แล้ว

บทสรุป

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

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

ฉันจะโง่ถ้าบอกคุณว่าคุณต้องใช้สีเขียวบนหน้าเว็บของคุณ ไม่มีใครควรบอกคุณว่า ไม่ใช่ฉัน ไม่ใช่ใคร ฉันไม่รู้ว่าสีเขียวจะเหมาะกับคุณหรือไม่

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

ภาพเด่นโดย Robert Katzki บน Unsplash