หากคุณไม่รู้ว่าต้องเปลี่ยนอะไร ลองเปลี่ยนสีเว็บไซต์ของคุณสิ

เผยแพร่แล้ว: 2021-10-28

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

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

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

มีการศึกษาหลายครั้งเกี่ยวกับทฤษฎีสีและวิธีที่มนุษย์เรารับรู้ สิ่งที่อาจดูเหมือนเป็นเพียงแค่การตีความความยาวคลื่นต่างๆ ที่ระบบการมองเห็นของเราจับได้ (ตา เส้นประสาทตา และสมอง) ได้ซ่อนภูมิหลังทางจิตวิทยาไว้มากมาย

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

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

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

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

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

Colores originales de la tabla de precios.
Colores alternatives del tabla de precios
สีเดิม (ซ้าย) และสีอื่นที่จะทดสอบ (ขวา) ในตารางราคา

ในการทดสอบการเปลี่ยนแปลง เราใช้การทดสอบ A/B ของ Nelio เป็นปลั๊กอินการทดสอบ A/B อ้างอิงของเรา สิ่งแรกที่เราจะทำคือสร้างการทดสอบหน้า A/B ใหม่ ซึ่งเป็นองค์ประกอบที่เราจะทำการทดสอบ

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

ในหน้าจอแก้ไขของการทดสอบ A/B เราเลือกหน้าฐานที่เราต้องการทดสอบ (หน้าการกำหนดราคาของเรา) และสร้างตัวแปรใหม่ ซึ่งเราจะแก้ไขในภายหลัง:

หน้าจอการสร้างการทดสอบ A/B ของหน้าที่เราสร้างขึ้น
แก้ไขหน้าจอสำหรับการทดสอบ A/B ของเพจที่เราสร้างขึ้น

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

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

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

การแก้ไขสีของเวอร์ชันทางเลือกเพื่อทดสอบด้วยตัวแก้ไขหน้า WordPress
การแก้ไขสีของเวอร์ชันทางเลือกด้วยตัวแก้ไขบล็อกของ WordPress

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

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

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

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

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

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

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

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

ภาพเด่นโดย Jeremy Thomas บน Unsplash