แนวทางของปุ่ม“ เรียกร้องให้ดำเนินการ” แนวทางปฏิบัติที่ดีที่สุดและตัวอย่าง
ปุ่มการกระตุ้นให้ดำเนินการบนเว็บไซต์มักถูกละเลย. บางครั้งนักออกแบบอาจไม่เข้าใจสิ่งที่ทำให้ปุ่มเรียกร้องการกระทำที่ดีเกินความน่าดึงดูดและเหมาะสมกับการออกแบบโดยรวม แต่ปุ่มการเรียกร้องให้ดำเนินการนั้นสำคัญเกินกว่าที่จะออกแบบโดยไม่เข้าใจว่าอะไรทำให้มีประสิทธิภาพ ท้ายที่สุดประเด็นหลักของปุ่มเรียกร้องให้ดำเนินการคือให้ผู้เยี่ยมชม ทำ บางสิ่งบางอย่าง.
สิ่งสำคัญคือการได้รับความเข้าใจขั้นพื้นฐานอย่างน้อยเกี่ยวกับสีขนาดขนาดภาษาและปัจจัยอื่น ๆ ที่มีผลต่ออัตราการแปลงของปุ่มโทรกระตุ้นให้ดำเนินการ แนวคิดที่นี่ไม่ซับซ้อน แต่ใช้ความคิดล่วงหน้าเล็กน้อยและการวางแผนเพื่อสร้างปุ่มเรียกร้องให้ดำเนินการที่มีประสิทธิภาพที่สุดเท่าที่จะเป็นไปได้ภายในการออกแบบที่กำหนด อ่านต่อเพื่อรับข้อมูลเพิ่มเติมเกี่ยวกับแต่ละประเด็นและอื่น ๆ.
วัตถุประสงค์ของปุ่ม "กระตุ้นให้ดำเนินการ"
ปุ่มเรียกร้องให้ดำเนินการสามารถรองรับฟังก์ชั่นที่หลากหลาย หลังจากนั้น, “เรียกร้องให้ดำเนินการ” ค่อนข้างคลุมเครือ ทั้งหมดหมายความว่ามีวัตถุประสงค์หลักเพื่อให้ผู้เข้าชมเว็บไซต์ของคุณ ทำอะไรสักอย่าง. มีบางอย่างที่อาจเพิ่มผลิตภัณฑ์ลงในตะกร้าสินค้าดาวน์โหลดข้อมูลขอข้อมูลหรืออะไรก็ได้.
เนื่องจากปุ่มเรียกร้องให้ดำเนินการมีวัตถุประสงค์ที่แตกต่างกันเช่นนั้นการพิจารณาหลายอย่างต้องพิจารณาถึงสิ่งที่ปุ่มมีเป้าหมายเพื่อให้บรรลุ ประเภทของไซต์ตลาดเป้าหมายและการกระทำที่ต้องการสามารถมีบทบาทในการออกแบบปุ่มโทรถึงการทำงานได้ดีที่สุด.
ประเภทของปุ่ม "กระตุ้นให้ดำเนินการ"
มีปุ่มเรียกร้องให้ดำเนินการที่แตกต่างกันสองสามชนิด ในขณะที่แต่ละประเภทมีจุดมุ่งหมายเพื่อให้ผู้เข้าชมดำเนินการบางอย่างการกระทำนั้นอาจแตกต่างกันมาก ด้านล่างนี้เป็นปุ่มเรียกร้องให้ดำเนินการที่พบบ่อยที่สุดโดยขึ้นอยู่กับการกระทำที่พวกเขาต้องการให้คุณทำ.
1. เพิ่มลงในปุ่มรถเข็น
โดยทั่วไปไซต์อีคอมเมิร์ซใช้ปุ่มเรียกร้องให้ดำเนินการจำนวนหนึ่ง แต่ปุ่มที่ใช้กันอย่างแพร่หลายที่สุดก็คือ “เพิ่มในรถเข็น” ปุ่ม. โดยทั่วไปปุ่มเหล่านี้จะปรากฏในหน้าผลิตภัณฑ์แต่ละหน้า วัตถุประสงค์ของพวกเขาคือเพื่อดึงดูดลูกค้าให้ซื้อสินค้า องค์ประกอบการออกแบบทั่วไปในปุ่มสั่งซื้อรวมถึงการใช้ถ้อยคำง่ายๆ (เช่น “ใส่ในรถเข็น” หรือ “เพิ่มลงในกระเป๋า” หรือ “ซื้อเลย“) และการใช้ไอคอน (มักจะเป็นกระเป๋าหรือรถเข็น).
2. ดาวน์โหลดปุ่ม
ปุ่มดาวน์โหลดนั้นคล้ายกับปุ่มสั่งซื้อที่พวกเขาพยายามดึงดูดผู้เข้าชมให้ครอบครองสินค้า ในกรณีของปุ่มดาวน์โหลดนักออกแบบหลายคนเลือกที่จะรวมข้อมูลมากกว่าปุ่มประเภทอื่น ๆ (เช่นข้อมูลรุ่นหรือขนาดดาวน์โหลด).
3. ปุ่มทดลองใช้
บางเว็บไซต์พยายามดึงดูดผู้เข้าชมให้ลองเสนอของพวกเขาโดยทั่วไปในรูปแบบของการทดลองใช้ฟรี นี่อาจเป็นการดาวน์โหลดฟรีหรือบัญชีฟรีขึ้นอยู่กับเว็บไซต์นั้น ๆ บางเว็บไซต์ใช้ “น้อยเป็นมากขึ้น” ปรัชญาและทำให้ภาษาบนปุ่มของพวกเขาให้น้อยที่สุดในขณะที่คนอื่น ๆ ต้องการให้ข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่มีอยู่ในการทดลอง.
4. เรียนรู้ปุ่มเพิ่มเติม
โดยทั่วไปจะใช้ปุ่มเรียนรู้เพิ่มเติมที่ส่วนท้ายของข้อมูลทีเซอร์ (มักอยู่ที่หน้าแรก) ปุ่มเหล่านี้มักจะง่าย แต่มักจะมีขนาดใหญ่เพื่อดึงดูดความสนใจของผู้เข้าชม.
5. ปุ่มสมัคร
ปุ่มสมัครใช้งานมักจะปรากฏในสองเวอร์ชั่นที่แตกต่างกัน ประเภทแรกมักจะเกี่ยวข้องโดยตรงกับแบบฟอร์มการสมัคร ประเภทที่สองมักจะใช้ในลักษณะคล้ายกับ “เพิ่มในรถเข็น” ปุ่มเพื่อให้ผู้ใช้ซื้อหรือสมัครใช้บริการหรือบัญชีก่อนที่พวกเขาจะไปถึงแบบฟอร์มสมัครใช้งาน.
มีปุ่มเรียกร้องให้ดำเนินการประเภทอื่น ๆ แต่ปุ่มเหล่านี้เป็นปุ่มที่พบบ่อยที่สุด แนวทางที่ใช้กับสิ่งที่กล่าวมาข้างต้นอาจนำไปใช้กับปุ่มการเรียกร้องให้ดำเนินการประเภทอื่น ๆ ที่คุณอาจกำลังออกแบบ.
การใช้พื้นที่เชิงลบอย่างมีประสิทธิภาพ
คุณต้องการให้ปุ่มเรียกร้องให้ดำเนินการโดดเด่นจากเนื้อหาโดยรอบและรับคำสั่งจากผู้เยี่ยมชมไซต์ของคุณ ด้วยเหตุนี้คุณจะต้องใช้พื้นที่เชิงลบรอบปุ่มเหล่านั้น รวมช่องว่างระหว่างเนื้อหาของคุณและปุ่มกระตุ้นการตัดสินใจ แม้ว่าสิ่งนี้จะมีความสำคัญน้อยลง (และเป็นเรื่องธรรมดาน้อยกว่า) ในบางปุ่มเช่นเพิ่มลงในปุ่มตะกร้าสำหรับผู้อื่นเช่นคนที่ต้องการเรียนรู้เพิ่มเติมทำงานได้ดีขึ้นด้วยพื้นที่มากขึ้น.
สิ่งสำคัญคือการสร้างความสมดุลของจำนวนพื้นที่ว่างเชิงลบที่คุณมีรอบปุ่มด้วยขนาดของปุ่มต่างๆ มันเกี่ยวกับสัดส่วน คุณต้องการปุ่มของคุณพื้นที่รอบ ๆ และเนื้อหาโดยรอบให้ดูเหมือนว่ามันจะอยู่ด้วยกันแม้จะมีขนาดไม่เท่ากัน คุณอาจจะต้องทำตัวกลมกลืนกับสิ่งต่าง ๆ เล็กน้อยเพื่อให้พวกเขาดูถูกต้อง.
แนวทางบางส่วน:
- ตรวจสอบให้แน่ใจว่ามีที่ว่างพอรอบปุ่มของคุณเพื่อให้รู้สึกไม่รก
- พิจารณาหลักการอย่างเช่นกฎที่สามหรืออัตราส่วนทองคำเมื่อพิจารณาว่าจะรวมเนื้อที่เท่าใด
- พื้นที่เชิงลบทำให้ห้องปุ่มเรียกร้องให้ดำเนินการของคุณโดดเด่นจากเนื้อหาอื่น ๆ ของคุณและแยกออกจากกัน
ขนาดและสี
ปุ่มการเรียกร้องให้ดำเนินการของคุณมีความสำคัญมากเพียงใด ปุ่มที่ใหญ่เกินไปจะเอาชนะทุกอย่างรอบตัวได้ ปุ่มที่เล็กเกินไปจะหายไปในการสับเปลี่ยนเนื้อหาอื่น ๆ ทั้งหมดบนหน้าเว็บ คุณต้องการให้ปุ่มของคุณมีขนาดใหญ่พอที่จะโดดเด่นโดยไม่ต้องออกแบบมากเกินไป.
สีสามารถใช้เพื่อเอฟเฟกต์ที่ยอดเยี่ยมเพื่อช่วยปรับสมดุลขนาดของปุ่มของคุณ สำหรับปุ่มที่ใหญ่ขึ้นให้เลือกสีที่โดดเด่นน้อยกว่าในการออกแบบของคุณ (แต่ยังคงความโดดเด่นของพื้นหลัง) สำหรับปุ่มที่เล็กกว่าคุณอาจต้องการเลือกสีที่สว่างกว่าและตัดกันเพื่อทำให้ปุ่มปรากฏขึ้นจริง ๆ ในกรณีใดกรณีหนึ่งตรวจสอบให้แน่ใจว่าสีที่คุณใช้ตั้งค่าปุ่มแยกจากกันโดยไม่กระทบกับการออกแบบโดยรวมของไซต์.
แนวทางบางส่วน:
- ปุ่มเรียกร้องให้ดำเนินการของคุณควรเป็นปุ่มที่ใหญ่ที่สุดในหน้าเว็บหนึ่ง ๆ
- ใช้สีที่ตัดกันเพื่อทำให้ปุ่มขนาดเล็กโดดเด่นขึ้น
- ใช้สีที่แตกต่างน้อยลงเพื่อทำให้ปุ่มที่มีขนาดใหญ่พอดีดีขึ้น
- คุณสามารถเรียกใช้ปุ่มคำสั่งได้โดยไม่ต้องกังวลกับการออกแบบของคุณ
ภาษา
ถ้อยคำที่แน่นอนที่คุณเลือกที่จะใช้กับปุ่มกระตุ้นให้ดำเนินการสามารถมีผลอย่างมากต่อการแปลง เปรียบเทียบ “ซื้อเลย” กับ “ใส่ในรถเข็น“. หนึ่งเร่งด่วนกว่าอีกอันหนึ่ง หรือวิธีการเกี่ยวกับ “ทดลองใช้ฟรี” กับ “ทดลองฟรี“? หนึ่งคือ punchier กว่าอื่น ๆ และโดดเด่นมากขึ้น.
ภาษาที่คุณใช้กับปุ่มคำกระตุ้นการตัดสินใจควรตรงไปตรงมาและง่ายที่สุด คุณต้องการให้ผู้เข้าชมทราบด้วยเพียงแค่สิ่งที่พวกเขาจะได้รับเมื่อคลิกปุ่ม หากพวกเขาถามคำถามนั่นหมายความว่าพวกเขาหยุดชั่วคราวซึ่งอาจนำไปสู่อัตราการแปลงที่ลดลง.
อย่าลืมขนาดตัวอักษรของคุณด้วย ข้อความบนปุ่มเรียกร้องให้ดำเนินการของคุณควรมีขนาดใหญ่และหนาเหมาะสมกับขนาดและสีของปุ่ม ตรวจสอบให้แน่ใจว่ามีความคมชัดเพียงพอและข้อความอ่านง่าย.
แนวทางบางส่วน:
- ใช้ภาษาที่ง่ายและตรง
- ใช้ตัวอักษรขนาดใหญ่และหนาบนปุ่มสำหรับข้อความหลัก
- ตรวจสอบให้แน่ใจว่าภาษาต้องการการกระทำที่ชัดเจนอย่างชัดเจน
สร้างด่วน
คุณต้องการให้ผู้เยี่ยมชมเว็บไซต์ของคุณทำสิ่งที่ต้องการโดยคิดน้อยที่สุด ในขณะที่คุณไม่ต้องการหลอกลวงผู้เยี่ยมชมโอกาสที่คุณให้พวกเขาหยุดและพิจารณาสิ่งที่พวกเขากำลังทำคือโอกาสที่คุณให้พวกเขาพูดมากขึ้น “ไม่”.
คุณต้องการปุ่มของคุณเพื่อให้พวกเขารู้สึกว่าพวกเขาต้องทำทันที คุณต้องการสนับสนุนให้พวกเขาตัดสินใจทันทีในทันที แม้ว่าสิ่งนี้จะไม่สามารถใช้ได้กับทุกปุ่มเรียกร้องให้ดำเนินการ (โดยเฉพาะปุ่มซื้อสินค้าตั๋วสูง) สำหรับการกระทำที่มีต้นทุนต่ำหรือฟรีการมีผู้เยี่ยมชมคลิกด้วยความสุขุมเล็กน้อยเป็นสิ่งที่พึงปรารถนา.
แนวทางบางส่วน:
- ส่งเสริมให้ผู้เยี่ยมชมของคุณทำหน้าที่ทันที
- อย่าให้ผู้เข้าชมหยุดด้วยเหตุผลใด ๆ
- ในขณะที่ความเร่งด่วนมีความสำคัญอย่าทำให้ผู้เข้าชมเข้าใจผิดในทางใด ๆ
ให้ข้อมูลเพิ่มเติม
ใช้ปุ่มเรียกร้องให้ดำเนินการเพื่อให้ข้อมูลเพิ่มเติมแก่ผู้เยี่ยมชมเกี่ยวกับสิ่งที่พวกเขาจะได้รับหากพวกเขาคลิกปุ่ม เรื่องนี้เห็นได้บ่อยที่สุดกับปุ่มทดลองหรือปุ่มดาวน์โหลด ตัวอย่างทั่วไปของข้อมูลเพิ่มเติมรวมถึงระยะเวลาที่การทดลองใช้ฟรีจะมีอายุหรือขนาดของการดาวน์โหลดไฟล์ ข้อมูลเวอร์ชันยังพบเห็นได้ทั่วไป.
เมื่อรวมถึงข้อมูลเพิ่มเติมโปรดจำไว้ว่าคุณต้องมุ่งเน้นไปที่การเรียกร้องให้ดำเนินการจริง ตรวจสอบให้แน่ใจว่าข้อความสำหรับภาษาที่ดึงดูดผู้เข้าชมให้ทำนั้นโดดเด่นที่สุดพร้อมด้วยข้อมูลอื่น ๆ ที่มองเห็นได้น้อยกว่ามาก.
แนวทางบางส่วน:
- รวมเฉพาะข้อมูลเพิ่มเติมเมื่อมันเพิ่มประสบการณ์ของผู้ใช้
- ข้อมูลเสริมมีความเหมาะสมเฉพาะกับปุ่มการโทรเพื่อดำเนินการบางประเภทปุ่มดาวน์โหลดหรือทดลองที่สะดุดตาที่สุด
- ตรวจสอบให้แน่ใจว่าคำกระตุ้นการตัดสินใจหลักยังคงเป็นข้อความที่เด่นที่สุดบนปุ่มของคุณ
จัดลำดับความสำคัญ
เป็นสิ่งสำคัญที่จะต้องจัดลำดับความสำคัญของปุ่มเรียกร้องให้ดำเนินการบนหน้าเว็บของคุณหากมีมากกว่าหนึ่งปุ่ม สิ่งนี้สามารถทำได้หลายวิธี แต่ที่พบมากที่สุดคือการใช้สีและขนาด.
ใช้สีเพื่อเน้นปุ่มที่สำคัญที่สุดในหน้าหรือเพื่อให้ปุ่มที่สำคัญน้อยกว่าดูโดดเด่นน้อยลง หรือใช้ขนาดเพื่อทำให้ปุ่มที่สำคัญที่สุดโดดเด่น (โดยทำให้ใหญ่ขึ้น) และไม่เน้นปุ่มที่สำคัญน้อยกว่า.
ไอคอนและรูปภาพ
การรวมตัวชี้นำแบบเห็นภาพในปุ่มการเรียกร้องให้ดำเนินการของคุณยังสามารถช่วยเพิ่มอัตราการแปลงได้อีกด้วย ไอคอนของตะกร้าสินค้าบน “เพิ่มในรถเข็น” ตัวอย่างเช่นปุ่มหรือลูกศรบนปุ่มดาวน์โหลดเป็นตัวอย่างที่ดี นึกถึงไอคอนที่ไม่เหมือนใครที่จะใช้เช่นกัน แต่ให้แน่ใจว่าไอคอนนั้นเพิ่มให้กับประสบการณ์การใช้งานของผู้ใช้โดยการอธิบายว่าปุ่มนี้มีไว้เพื่ออะไรและไม่เพิ่มความสับสนใด ๆ.
แนวทางบางส่วน:
- ตรวจสอบให้แน่ใจว่าไอคอนที่คุณใช้ช่วยอธิบายความหมายของปุ่มของคุณแทนที่จะทำให้สับสน
- ไอคอนที่จดจำได้ง่ายสามารถบ่งบอกความหมายได้ทันทีต่อผู้เข้าชมของคุณ
- อย่ากลัวที่จะใช้ไอคอนที่ใช้น้อยกว่าปกติตราบใดที่ความหมายของมันยังชัดเจน
ตัวอย่าง
ที่นี่มีไม่กี่ ตัวอย่างของปุ่มเรียกร้องให้ดำเนินการที่ยอดเยี่ยม. แม้ว่าพวกเขาจะไม่สอดคล้องกับแนวทางข้างต้นอย่างสมบูรณ์ แต่ก็มีคุณสมบัติตรงตามเกณฑ์ที่จะพิจารณาว่ายอดเยี่ยม.
Livestream - การแยกความแตกต่างของปุ่ม "ซื้อเลย" (สำหรับตัวเลือกแบบชำระเงิน) และ "ลงทะเบียน" (สำหรับตัวเลือกฟรี) เป็นกลยุทธ์ที่ดี.
วินโดว 7 - ปุ่ม "รับ Windows7" สีเขียวขนาดใหญ่นั้นง่ายสำหรับผู้เข้าชมที่จะเห็น.
กองบัญชาการแชร์แชร์ - ปุ่มสีเขียวสดใสที่นี่โดดเด่นเหนือพื้นหลังสีขาว.
สมุดจดรายการต่าง - การใช้สีที่แตกต่างกันสำหรับปุ่ม "ดาวน์โหลด" และ "ซื้อ" จะแยกสีและให้ความสำคัญกับปุ่ม "ซื้อ".
TasteBook - ปุ่มนี้ใช้ประโยชน์จากไอคอนได้อย่างยอดเยี่ยมและใช้ข้อความที่มีขนาดใหญ่และหนาขึ้นเพื่อโดดเด่น.
GoodBarry - ปุ่มเรียกร้องให้ดำเนินการสีเขียวสดใสอีกปุ่ม.
Creative Lifetree - การพิมพ์แบบอักษรต่อจากตัวคัดลอกไปยังปุ่มการเรียกร้องให้ดำเนินการสร้างความรู้สึกของการทำงานร่วมกัน.
Resumator - ปุ่มเรียกร้องให้ดำเนินการสีแดงสดที่มีประเภทตัวหนาโดดเด่นเหนือพื้นหลังสีน้ำเงิน.
Notepod - ตัวอย่างที่ดีของการรวมข้อมูลพิเศษไว้ในปุ่มกระตุ้นให้ดำเนินการ.
Inkd - ตัวอย่างที่ดีของการจัดลำดับความสำคัญของปุ่มด้วยขนาด.
ธีมที่สง่างาม - อีกตัวอย่างที่ยอดเยี่ยมของการใช้สีเพื่อโดดเด่นโดยไม่กระทบกับองค์ประกอบการออกแบบโดยรอบ.
Zendesk - อีกหนึ่งตัวอย่างที่ดีของการสร้างปุ่มที่โดดเด่นด้วยการใช้สี.
Storenvy - ปุ่มกลมไม่คาดคิดและโดดเด่นโดยเฉพาะเมื่อล้อมรอบด้วยเส้นขอบสีขาว.
Bara'Mail - บางครั้งปุ่มที่ผสมผสานจะทำงานได้ดีขึ้นในการออกแบบเว็บไซต์โดยรวมของคุณโดยเฉพาะอย่างยิ่งเมื่อการกระทำนั้นเร่งด่วนน้อยลง.
ทรัพยากรเพิ่มเติม
- ปุ่มเรียกร้องให้ดำเนินการ: ตัวอย่างและแนวทางปฏิบัติที่ดีที่สุด - จากนิตยสารยอดเยี่ยม
- ปุ่มกระตุ้นการตัดสินใจดี - จากตู้ UX
- ปุ่มเรียกร้องให้ดำเนินการ: ขนาดมีความสำคัญหรือไม่ - จากรับความยืดหยุ่น
- 10 เทคนิคที่มีประสิทธิภาพ “คำกระตุ้นการตัดสินใจ” - จาก Boagworld
- 5 เคล็ดลับสำหรับการสร้างปุ่มโทรเพื่อกระตุ้นการตัดสินใจ - จาก SitePoint
