เพิ่มสไตล์ให้กับแบบฟอร์มความคิดเห็นของคุณใน WordPress

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

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

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

ปรับปรุงการออกแบบแบบฟอร์มแสดงความคิดเห็นของ WordPress

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

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

โดยพื้นฐานแล้วเราได้ทำการเปลี่ยนแปลงสามประการในแบบฟอร์มความคิดเห็น:

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

ตอนนี้เรามีการออกแบบใหม่พร้อมแล้ว สิ่งที่เราต้องทำคือทดสอบ

การสร้างการทดสอบ A/B ของสไตล์ CSS

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

ด้วยการทดสอบ Nelio A/B เราสร้างการทดสอบ A/B ใหม่ของ CSS รูปภาพถัดไป：หน้าจอแก้ไขของการทดสอบดังกล่าว:

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

เรายังได้ลดขอบเขตของการทดสอบเป็น URL ที่มี https://neliosoftware.com/blog/ เพื่อให้การทดสอบมีผลกับโพสต์ในบล็อกของเราเท่านั้น

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

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

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

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

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

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

จำนวนการแปลงทั้งหมดที่ทดสอบได้รับนั้นไม่น่าตื่นเต้น ในช่วงเวลานั้นบล็อกของเราได้รับความคิดเห็น 27 รายการ (นั่นเป็นสาเหตุที่ผลการทดสอบมี Conversion 27 ครั้ง)

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

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

การออกแบบที่ประณีตยิ่งขึ้นส่งเสริมการโต้ตอบ

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

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

ภาพเด่นโดย Jason Leung บน Unsplash