ทดสอบสไตล์ต่างๆ ในปุ่มชำระเงิน

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

เมื่อไม่นานมานี้ เราได้ศึกษาสีของปุ่มการทำงานบนหน้าหลักของ Nelio Content ต้องขอบคุณการทดสอบ A/B ของสไตล์ CSS ทำให้เราเห็นว่าสีเขียวทำงานได้ดีที่สุดสำหรับผู้เยี่ยมชมหน้านั้นที่พูดภาษาอังกฤษของเรา

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

คำจำกัดความของการทดสอบ A/B

สมมติฐานสำหรับการปรับปรุงของเราคือ การเปลี่ยนสีและขนาดของปุ่มชำระเงินในตารางราคา Nelio A/B Testing จะได้รับการคลิกปุ่มเหล่านี้มากขึ้น และด้วยเหตุนี้ เราจะมียอดขายเพิ่มขึ้น

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

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

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

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

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

ดังนั้นเราจึงมีรูปแบบ CSS ที่แตกต่างกันสามเวอร์ชันของตารางราคา Nelio A/B Testing:

• เดิมโดยไม่มีการเปลี่ยนแปลงรูปแบบ
• รุ่นแรกที่มีสีโดดเด่นกว่าบนปุ่มต่างๆ
• รุ่นที่สองที่มีสีโดดเด่นและขนาดปุ่มที่ใหญ่ขึ้น

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

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

ดังที่คุณเห็นในภาพหน้าจอด้านบน เราได้จำกัดขอบเขตของการทดสอบไว้ที่หน้าราคาการทดสอบ A/B ของ Nelio เช่นเดียวกับการที่เรากำหนดเป้าหมายห้าเป้าหมายที่จะวัดภายในการทดสอบ:

• คลิกที่ปุ่มของแผนใด ๆ
• คลิกที่ปุ่มของแผนพื้นฐาน
• คลิกที่ปุ่มของแผนมืออาชีพ
• คลิกที่ปุ่มของแผนองค์กร
• จำนวนการซื้อ

ทั้งหมดนี้สร้างขึ้น ซึ่งจะใช้เวลาไม่เกิน 10 นาที เราจะเริ่มการทดสอบและรอผลการทดสอบ ตอนนี้ถึงตาของ Nelio A/B Testing ที่จะทำหน้าที่นี้ ปลั๊กอินของเรามีหน้าที่แยกการเข้าชมที่เข้ามาระหว่างรูปแบบต่างๆ และการนับ Conversion ในแต่ละเป้าหมายที่กำหนดไว้ในการทดสอบ A/B

การวิเคราะห์ผลการทดสอบ A/B

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

เป้าหมายแรกคือการวัดการคลิกที่เกิดขึ้นจากปุ่มใดๆ ของแผนในตารางราคา ในกรณีนี้ ผลลัพธ์แสดงว่าตัวแปรที่มีสีที่เปลี่ยนไปนั้นได้รับคลิกเพิ่มขึ้น 17.2% ในทางกลับกัน ตัวแปรที่เปลี่ยนสีและขนาดนั้นแย่กว่ารุ่นดั้งเดิมของหน้า 15%

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

เป้าหมายที่สองนับคลิกเฉพาะปุ่มของแผนพื้นฐาน ในกรณีนี้ ผลลัพธ์จะคล้ายกับเป้าหมายก่อนหน้า เรามีรุ่นที่เปลี่ยนสีได้ดีที่สุดในสามรุ่น และรุ่นที่มีสีและขนาดแย่ที่สุด

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

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

เราสามารถพูดได้ว่าการใช้สีที่เด่นชัดมากขึ้นทำให้เราได้รับการคลิกมากขึ้น ปุ่มสีส้มทำงานได้ดีกว่าปุ่มสีน้ำเงินที่เราเคยมีมาก่อน

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

สิ่งที่คลิกทั้งหมดนี้เป็นเรื่องปกติ แต่ถ้าเรามองแค่ผลลัพธ์ก่อนหน้านี้ เราก็จะมีวิสัยทัศน์ของความเป็นจริงเพียงบางส่วน

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

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

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

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

ภาพเด่นโดย Grooveland Designs บน Unsplash