แยกการทดสอบด้วย CSS สไตล์ชีต

เผยแพร่แล้ว: 2021-07-19

วิธีที่เร็วที่สุดในการทดสอบเว็บไซต์แยกกันอย่างมากคือทำการเปลี่ยนแปลงที่ชัดเจนใน cascading style sheet (CSS) ภายในการทดสอบทั่วทั้งไซต์

เหตุใดสไตล์ชีต CSS จึงมีความสำคัญ

ไฟล์ CSS หลักของเว็บไซต์เป็นจุดศูนย์กลางของการอ้างอิง ซึ่งควบคุมลักษณะทั่วไป ตำแหน่ง และพฤติกรรมขององค์ประกอบทั้งหมดในทุกหน้าเว็บ

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

การทดสอบแยกทั่วทั้งไซต์ที่คุณควรทำทุกครั้ง Perform

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

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

ปุ่มคำกระตุ้นการตัดสินใจ

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

มีสีเขียวเล็กน้อยที่ใช้สำหรับปุ่ม "ซื้อเลย" ชุดค่าผสม 2 ให้ผลผลิตเพิ่มขึ้น 1.5% เมื่อเทียบกับชุดค่าผสมเดิม 1 — มีสีเขียวเล็กน้อยที่ใช้สำหรับปุ่ม "ซื้อเลย" (เน้นไว้) ชุดค่าผสม 2 ทำให้ผู้ใช้เพิ่มผลิตภัณฑ์ลงในรถเข็นมากขึ้น 1.5% เมื่อเทียบกับชุดควบคุมดั้งเดิม ชุดค่าผสมที่ 4 แย่ลง 1.4%4%

ขนาดตัวอักษร

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

แบบอักษร

อีกครั้ง รูปแบบของฟอนต์นั้นไม่ค่อยถูกทดสอบบนเว็บไซต์หลายแห่ง ดูเหมือนว่าจะตัดสินใจได้ในขั้นตอนการออกแบบเริ่มต้นของการพัฒนา และหลังจากนั้นก็ลืมไปว่าหลายๆ เว็บไซต์ ฟอนต์สไตล์ต่างๆ มีระดับความอ่านง่ายต่างกัน นอกจากนี้ แบบอักษรบางแบบมีเฉพาะในอุปกรณ์บางประเภทเท่านั้น และบางแบบอักษรอาจแสดงผลได้ไม่ดีนักในอุปกรณ์บางขนาดบางขนาดโดยไม่มีการแรสเตอร์แบบอักษร คุณสามารถใช้ตระกูลฟอนต์เพื่อใช้ชุดฟอนต์ต่างๆ ได้ โดยเริ่มจากฟอนต์ที่คุณชอบและค่อยๆ ลดขนาดลงเป็นฟอนต์ที่เรียบง่ายขึ้น เช่น Arial ซึ่งอยู่ในทุกอุปกรณ์เสมอ ฟอนต์ใหม่สามารถรวมบนเว็บไซต์ผ่าน JavaScript หรือบริการต่างๆ Google แบบอักษร คุณสามารถหาข้อมูลเพิ่มเติมได้ในโพสต์นี้ที่ TypeWolf.com เกี่ยวกับแบบอักษรบนเว็บสิบอันดับแรกของปี 2016

รูปแบบตัวอักษร

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

การแปลงเพิ่มขึ้น 1.9% เพียงแค่เปลี่ยนแบบอักษรบนเว็บไซต์นี้

สีพื้นหลัง

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

การวางตำแหน่งหรือซ่อนองค์ประกอบ

ไฟล์ CSS ควบคุมระยะขอบและช่องว่างภายในสำหรับองค์ประกอบทั่วไปทั้งหมดบนหน้าเว็บ และยังช่วยให้คุณสามารถลบบางรายการได้อย่างสมบูรณ์โดยใช้คำสั่ง "display:none" บางวิธีที่คุณสามารถใช้วิธีนี้ได้คือพยายามลดพื้นที่ว่างในแนวตั้ง ลบข้อมูลที่ไม่จำเป็น เปลี่ยนระยะห่างระหว่าง CTA ที่สำคัญ หรือทดลองลบบล็อกเนื้อหาบางส่วน ในบางครั้ง หน้าเว็บเพจอาจไม่ค่อยมีประโยชน์ (หลักการง่ายๆ โง่ๆ) และควรดูว่าสามารถลบออกจากหน้าเว็บได้มากน้อยเพียงใดพร้อมทั้งปรับปรุงอัตราการแปลง

การมีส่วนร่วมดีขึ้นกว่า 16% เมื่อเนื้อหาถูกเพิ่มลงในหน้านี้ — การมีส่วนร่วมดีขึ้นกว่า 16% เมื่อเนื้อหารวมอยู่ในหน้าหมวดหมู่

แพลตฟอร์มสำหรับการทดสอบแยกไฟล์ CSS ทั่วทั้งไซต์

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

ต้องใช้ซอฟต์แวร์ทดสอบการแยกพิเศษเพื่อให้การเปลี่ยนแปลงไฟล์ CSS สอดคล้องกันในแต่ละหน้าสำหรับผู้ใช้แต่ละราย ขออภัย "การทดสอบเนื้อหา" ที่ให้บริการฟรีของ Google Analytics ไม่รองรับการทดสอบแยกประเภทเหล่านี้ นี่คือเครื่องมือบางอย่างที่คุณอาจต้องการใช้:

Visual Website Optimizer (VWO) – vwo.com – เราพบว่านี่เป็นซอฟต์แวร์ทดสอบแบบแยกส่วนที่ง่ายที่สุดในการใช้งาน มันจัดการการทดสอบแยกทุกประเภทใน HTML, CSS หรือ JavaScript และยังสร้างแผนที่ความร้อนของผู้ใช้หากจำเป็น ดูโครงสร้างราคาได้ที่นี่
ปรับ ให้เหมาะสม - Optily.com - นอกจากนี้ยังจัดการการทดสอบแยกทุกประเภทใน HTML, CSS หรือ JavaScript และสามารถทำการทดสอบแยกขั้นสูงบางอย่างได้หากจำเป็น สามารถดูข้อมูลราคาได้ที่นี่

บทสรุป

การตั้งค่าการทดสอบแยก CSS ทั่วทั้งไซต์นั้นง่ายและมีประสิทธิภาพ แต่คุณอาจต้องการความช่วยเหลือ 15 นาทีจากนักพัฒนาหากคุณไม่คุ้นเคยกับ CSS

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

หากคุณต้องการความช่วยเหลือ อย่าลังเลที่จะติดต่อเรา