แนวทางทำ CTA ที่ดี: ถ้อยคำ การออกแบบ และตำแหน่งวาง

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

ทั้งหมดนี้ไม่ได้ขึ้นอยู่กับสีวิเศษสีไหน CTA ที่ดีคือคำสัญญาที่ชัดเจน วางไว้ในจุดที่ผู้เข้าชม พร้อมจะตอบรับ

สรุปแนวทาง CTA

• ถ้อยคำ: กริยาที่เจาะจง บวกผลลัพธ์ ให้ตรงกับความพร้อมของผู้เข้าชม เช่น “ดูราคา” สำหรับคนที่กำลังเปรียบเทียบ และ “ขอใบเสนอราคา” สำหรับคนที่กำลังตัดสินใจ
• การออกแบบ: โดดเด่นด้วยคอนทราสต์ และน้ำหนักทางสายตา ขนาดผ่านเกณฑ์ขนาดเป้าหมายของ WCAG 2.2 และใช้ลิงก์เมื่อพาไปที่อื่น ใช้ปุ่มเมื่อต้องทำอะไรบางอย่างบนหน้า
• ตำแหน่ง: อยู่บนหน้าจอแรก แล้ววางซ้ำในจุดที่เกิดการตัดสินใจ คือหลังหลักฐาน หลังราคา และท้ายหน้า
• ลำดับความสำคัญ: การกระทำหลักหนึ่งอย่างต่อหนึ่งหน้าจอ พร้อมทางเลือกรองที่เบากว่า และผูกมัดน้อยกว่า
• ความซื่อตรง: ไม่มีปุ่ม “ส่ง” เฉย ๆ ไม่มีลิงก์ปฏิเสธที่ทำให้รู้สึกผิด ไม่มีความเร่งด่วนปลอม

ถ้อยคำ: ปุ่ม CTA ควรเขียนว่าอะไร

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

ใช้กริยาที่เจาะจง บวกผลลัพธ์

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

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

ขอให้ตรงกับขั้นของผู้เข้าชม

ความผิดพลาดด้านถ้อยคำที่พบบ่อย คือการขอมากเกินไป เร็วเกินไป คนที่เพิ่งอ่านครั้งแรกยังไม่พร้อมนัดปรึกษา ส่วนคนที่ศึกษาราคา และกรณีศึกษาสามเรื่องมาแล้ว ควรได้อะไรที่มากกว่า “ดูเพิ่มเติม”

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

บอกว่าคลิกแล้วจะเกิดอะไร

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

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

ปุ่ม CTA ควรหน้าตาแบบไหน

คอนทราสต์และน้ำหนัก ไม่ใช่สีวิเศษ

คำกล่าวอ้างเรื่องสีปุ่มที่ได้ conversion ดีที่สุด มองข้ามกลไกที่แท้จริง ปุ่มดึงสายตาได้ เพราะแตกต่างจากสิ่งรอบข้าง ซึ่งเรียกว่า isolation effect หรือ von Restorff effect ปุ่มสีส้มบนหน้าที่มีสีส้มเยอะจะกลืนหายไป แต่บนหน้าที่เรียบและใช้สีกลาง ๆ ปุ่มเดียวกันจะโดดเด่นขึ้นมาทันที

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

คอนทราสต์ก็มีเกณฑ์ขั้นต่ำเช่นกัน WCAG 2.2 ระดับ AA กำหนดคอนทราสต์ 4.5:1 ระหว่างข้อความบนปุ่มกับพื้นหลัง (3:1 สำหรับข้อความขนาดใหญ่) และ 3:1 สำหรับสัญญาณทางสายตา ที่คนใช้ระบุว่าอะไรเป็นปุ่ม หรือปุ่มอยู่ในสถานะไหน เช่น กรอบโฟกัส ปุ่มแบบ “ghost” ที่สีจาง มักไม่ผ่านตรงนี้ และไม่เหมาะกับการกระทำหลักอยู่แล้ว คู่มือ WCAG 2.2 ของเราอธิบายรายละเอียดไว้

ใหญ่พอให้กดโดน

เกณฑ์ Target Size (ขั้นต่ำ) ระดับ AA ของ WCAG 2.2 กำหนดให้เป้าหมายที่กดหรือคลิก มีขนาดอย่างน้อย 24 x 24 CSS pixel หรือมีระยะห่างรอบเป้าหมาย ที่เล็กกว่านั้นมากพอ ให้มองเป็นเกณฑ์ขั้นต่ำ เพราะเกณฑ์ระดับ AAA กำหนดไว้ที่ 44 x 44 ส่วน Human Interface Guidelines ของ Apple แนะนำ 44 x 44 point และ Material Design ของ Google แนะนำ 48 x 48 density-independent pixel ปุ่มหลักสูง 44 ถึง 48 พิกเซล ที่คลิกได้ทั้งพื้นที่ จึงเป็นค่าเริ่มต้นที่สมเหตุสมผล

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

เลือกใช้ลิงก์หรือปุ่มอย่างตั้งใจ

• ลิงก์ (<a href>) พาไปที่อื่น เช่น “ขอใบเสนอราคา” ที่เปิดหน้าติดต่อ ลิงก์ตกแต่งให้หน้าตาเหมือนปุ่มได้
• ปุ่ม (<button>) ทำอะไรบางอย่างบนหน้า เช่น ส่งแบบฟอร์ม เปิดเมนู

ทำไมเรื่องนี้สำคัญ ผู้ใช้คีย์บอร์ดเปิดลิงก์ด้วยปุ่ม Enter และกดปุ่มด้วย Enter หรือ Space ส่วนโปรแกรมอ่านหน้าจอ ก็อ่านสองอย่างนี้ต่างกัน div ที่ใส่ click handler ไม่ใช่ทั้งสองอย่าง และเข้าถึงด้วยคีย์บอร์ดไม่ได้ ถ้าไม่เขียนโค้ดเพิ่ม ให้ข้อความที่มองเห็นกับชื่อในโค้ดตรงกันด้วย (กฎ Label in Name ของ WCAG) ถ้าปุ่มเขียนว่า “ขอใบเสนอราคา” แต่ชื่อสำหรับเทคโนโลยีช่วยเหลือคือ “ส่งแบบฟอร์ม” ผู้ใช้ระบบสั่งงานด้วยเสียง ที่พูดตามสิ่งที่เห็น จะกดปุ่มนั้นไม่ได้

ออกแบบทุกสถานะ

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

ตำแหน่งวาง CTA ที่เหมาะสม

วางในจุดตัดสินใจ ไม่ใช่แค่ส่วนบน

“ใส่ CTA ไว้เหนือจุดที่ต้องเลื่อน” ถูกแค่ครึ่งเดียว หน้าจอแรกบนมือถือ ควรแสดงการกระทำหลัก สำหรับผู้เข้าชมที่มาพร้อมแล้ว แต่คนส่วนใหญ่ที่กำลังชั่งใจ เรื่องการซื้อที่ต้องคิดให้รอบคอบ ยังไม่พร้อมตั้งแต่ตอนนั้น งานวิจัยการติดตามสายตา เรื่องการเลื่อนหน้า ของ Nielsen Norman Group พบว่าคนเลื่อนหน้าจริง แม้ความสนใจส่วนใหญ่ จะยังอยู่ใกล้ส่วนบน การกระทำหลักจึงควรอยู่ด้านบน และวางซ้ำในทุกจุดที่ผู้เข้าชมเริ่มเชื่อมั่น บนหน้าบริการทั่วไป:

1. ส่วน hero ด้านบนสุด
2. หลังราคาหรือรายละเอียดแพ็กเกจ
3. หลังหลักฐาน เช่น กรณีศึกษา รีวิว ผลลัพธ์
4. หลังคำถามที่พบบ่อย เมื่อข้อกังวลได้รับคำตอบแล้ว
5. ท้ายหน้า

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

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

CTA ติดหน้าจอบนมือถือ

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

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

เกณฑ์ Focus Not Obscured (ขั้นต่ำ) ระดับ AA ของ WCAG 2.2 ก็ใช้ด้วย: องค์ประกอบที่ถูกโฟกัสด้วยคีย์บอร์ด ต้องไม่ถูกเนื้อหาที่คุณเพิ่มเข้ามาบังจนมิด เช่น ตัวแถบเอง การตั้งค่า CSS scroll-padding-bottom ให้เท่ากับความสูงของแถบ เป็นวิธีแก้หนึ่งที่ W3C บันทึกไว้

CTA หลักและ CTA รอง

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

• ใช้สไตล์ต่างกัน ปุ่มสีทึบสำหรับ CTA หลัก และปุ่มเส้นขอบหรือลิงก์ข้อความสำหรับ CTA รอง อย่าวางปุ่มสองปุ่มที่เด่นเท่ากันไว้ข้างกัน
• วาง CTA หลักไว้ก่อน ตามลำดับการอ่าน ในเวอร์ชันภาษาที่อ่านจากขวาไปซ้าย ลำดับปุ่มจะกลับด้านตามเลย์เอาต์
• ให้ CTA รองเป็นก้าวไปข้างหน้า ไม่ใช่ทางออก “ติดตามเราบนโซเชียลมีเดีย” คือการส่งผู้เข้าชมที่สนใจออกไปจากหน้า
• หยุดที่สองปุ่ม ตัวเลือกที่มากกว่านี้ในส่วน hero จะเริ่มแย่งความสนใจกันเอง

ควรมีช่องทางติดต่อแบบไหนบ้าง

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

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

ข้อผิดพลาดเรื่อง CTA ที่ควรเลี่ยง

• ข้อความที่คลุมเครือ เช่น “ส่ง” “คลิกที่นี่” หรือลิงก์ “ดูเพิ่มเติม” ห้าอันที่เหมือนกัน
• ลิงก์ปฏิเสธที่ทำให้รู้สึกผิด เช่น “ไม่ล่ะ ฉันไม่อยากได้ลูกค้าเพิ่ม” ซึ่งเรียกว่า confirmshaming เป็นการดูถูกผู้เข้าชม แค่ “ไม่ล่ะ ขอบคุณ” ก็พอ
• ความเร่งด่วนปลอม นาฬิกานับถอยหลังที่รีเซ็ตใหม่ และความขาดแคลนที่แต่งขึ้น ทำให้คนยิ่งไม่แน่ใจ และคำกล่าวอ้างที่ทำให้เข้าใจผิด อาจผิดกฎหมายคุ้มครองผู้บริโภค
• สิ่งที่ดูไม่เหมือนกดได้ และของตกแต่งที่ดูเหมือนกดได้ CTA ที่เป็นข้อความแบน ๆ มักถูกมองข้าม ส่วนแท็กที่แต่งให้เหมือนปุ่ม คนจะแตะแล้วไม่เกิดอะไรขึ้น
• ป๊อปอัปทันทีที่เข้าหน้า กล่องสมัครรับข่าวสารที่บังหน้า ก่อนที่ใครจะได้อ่านสักคำ แนวทางของ Google Search Central แนะนำให้เลี่ยง หน้าต่างป๊อปอัปเต็มจอ (interstitial) ที่รบกวนผู้ใช้ และแนะนำให้ใช้แบนเนอร์เล็ก ๆ แทน

ตรวจ CTA ด้วยตัวเอง

1. เลือกแลนดิ้งเพจห้าหน้าที่มีคนเข้ามากที่สุดใน Google Analytics รวมกับหน้าติดต่อ
2. บนมือถือของคุณ จดทุก CTA ลงในสเปรดชีต: ข้อความบนปุ่ม สไตล์ ตำแหน่ง และปลายทาง
3. ให้คะแนนแต่ละอันตามตารางด้านล่าง
4. จดอัตราการติดต่อสอบถามปัจจุบัน ของหน้าที่มีคนเข้ามากที่สุด แก้หน้านั้นก่อน แล้วเปรียบเทียบ ตามที่ คู่มือการปรับปรุงอัตรา conversion ของเราอธิบาย

ขั้นตอนต่อไป

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

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

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