12 เทคนิคสำหรับแรงบันดาลใจในการออกแบบหน้า Landing Page หลังคลิก

เผยแพร่แล้ว: 2017-07-14

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

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

ที่ Instapage เรามีหมวดหมู่บล็อกทั้งหมดโดยเฉพาะสำหรับตัวอย่างหน้า Landing Page หลังการคลิก เราค้นคว้าและเขียนหัวข้อนี้เป็นประจำเพื่อให้ผู้ชมของเราได้รับแรงบันดาลใจจากแบรนด์ที่ใหญ่ที่สุดในโลก รวมถึง Microsoft, Lyft, Marketo, Constant Contact, Oracle, Facebook, MailChimp และ HubSpot

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

หน้า Landing Page หลังคลิกคือหน้าร้านดิจิทัลของคุณ ซึ่งจำเป็นสำหรับการโปรโมตผลิตภัณฑ์และบริการของคุณ

คลิกเพื่อทวีต

แรงบันดาลใจในการออกแบบหน้า Landing Page หลังคลิก

ภาพฮีโร่ที่น่าสนใจ

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

TaskEasy เข้าใจสิ่งนี้ และพวกเขาใช้ประโยชน์จากภาพฮีโร่บนหน้าของพวกเขาได้อย่างดีเยี่ยม ทันทีที่ผู้เยี่ยมชมเข้ามาบนเพจ พวกเขาจะได้เห็นว่าสนามหญ้าของพวกเขาจะเป็นอย่างไรหากพวกเขาจ้าง TaskEasy:

สิ่งที่เพจทำได้ดี

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

สิ่งที่ต้องทดสอบ A/B:

โลโก้ TaskEasy มีไฮเปอร์ลิงก์ซึ่งหมายความว่าผู้เยี่ยมชมมีเส้นทางออกจากหน้าได้ง่าย
ปุ่ม CTA ของ Property Manager ที่ด้านบนของหน้าจะนำผู้เข้าชมออกจากหน้านี้ แม้ว่าจะเปิดหน้าการจับลูกค้าเป้าหมายอีกหน้าหนึ่ง แต่ก็ควรมีแคมเปญของตัวเองซึ่งแยกจากหน้านี้โดยสิ้นเชิง
การเพิ่มสำเนา จะช่วยให้ผู้มีแนวโน้มจะเป็นลูกค้าเข้าใจถึงประโยชน์ของการทำงานกับ TaskEasy ได้ดีขึ้น ขณะนี้ไม่มีสำเนาในหน้า ซึ่งอาจทำให้ผู้เข้าชมรู้สึกไม่ดีต่อบริษัทและข้อเสนอได้ยาก
การนำทางส่วนท้าย ช่วยให้ผู้เยี่ยมชมสามารถหลบหนีจากหน้าเพจโดยไม่ทำ Conversion ได้หลายวิธี
หมายเลขโทรศัพท์ สามารถเปิดใช้งานแบบคลิกเพื่อโทรได้ ทำให้ผู้เยี่ยมชมติดต่อ TaskEasy ได้ง่ายขึ้น โดยเฉพาะอย่างยิ่งเมื่อบริษัทสนับสนุนให้พวกเขาโทรด้วย "ต้องการโทรหาเราไหม อยู่ที่นี่!"

เครื่องหมายหัวข้อ

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

ตัวอย่าง Yodle นี้ใช้สัญลักษณ์แสดงหัวข้อย่อย (เครื่องหมายถูก) เพื่อเน้นประโยชน์ของซอฟต์แวร์ของตน มันโดดเด่นกว่าสำเนาที่เหลือบนหน้าที่มีพื้นที่สีขาวเช่นกัน:

สิ่งที่เพจทำได้ดี

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

สิ่งที่ต้องทดสอบ A/B:

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

F-Patern

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

หน้า Landing Page สาธิตหลังการคลิกของ Oracle ด้านล่างมีรูปแบบ F-Pattern ที่แตกต่างกัน องค์ประกอบที่สำคัญแต่ละอย่างจะตั้งอยู่ตามเส้นทาง F-Pattern ซึ่งผู้เยี่ยมชมจะดูเป็นธรรมชาติเมื่อดูหน้าเว็บ

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

สิ่งที่เพจทำได้ดี

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

สิ่งที่ต้องทดสอบ A/B:

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

Z-Patern

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

นี่คือตัวอย่างจาก Business-Software.com ที่มีรูปแบบ Z ที่ชัดเจน

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

สิ่งที่เพจทำได้ดี

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

สิ่งที่ต้องทดสอบ A/B:

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

พื้นที่สีขาว

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

นอกจากจะเพิ่มการโฟกัสไปที่องค์ประกอบเฉพาะแล้ว พื้นที่สีขาวยังช่วยอีกด้วย

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

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

สิ่งที่เพจทำได้ดี

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

สิ่งที่ต้องทดสอบ A/B:

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

แท็กสมอ

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

PRWeb รวมแท็กสมอสองแท็กในหน้าของพวกเขา - ทั้ง "เริ่มต้นทันที!" ปุ่ม CTA อยู่ครึ่งหน้าล่าง ซึ่งเมื่อคลิกแล้ว ให้ส่งผู้เยี่ยมชมกลับไปที่ฟอร์มการจับลูกค้าเป้าหมายในครึ่งหน้าบน:

สิ่งที่เพจทำได้ดี:

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

สิ่งที่ต้องทดสอบ A/B:

ลิงก์ออก (โลโก้บริษัท ปุ่มโซเชียลมีเดีย และการนำทางส่วนท้าย) ล้วนสามารถนำผู้คนออกจากเพจโดยไม่ทำ Conversion
สำเนาสัญลักษณ์แสดงหัวข้อย่อย อาจโดดเด่นกว่า การเยื้องหรือขยายลูกศรจะดึงดูดความสนใจไปที่มันมากขึ้น
รูปภาพ ของคู่มือถูกตัดออก ซึ่งทำให้ดูเหมือนการออกแบบผิดพลาด นอกจากนี้ยังสามารถคลิกได้ แต่เมื่อภาพเปิดขึ้น ก็ยังไม่ใช่ภาพเต็มหรือใหญ่กว่าใดๆ
ช่อง 7 ฟอร์ม อาจข่มขู่ผู้เข้าชมและขัดขวางไม่ให้พวกเขากรอกแบบฟอร์ม โดยเฉพาะอย่างยิ่งเนื่องจากมีแนวโน้มว่าจะยังอยู่ในขั้นตอนการพิจารณาเส้นทางของผู้ซื้อ
สี ของ ปุ่ม CTA (ของทั้งสามปุ่ม) ไม่โดดเด่นเนื่องจากมีการใช้สีแดงและสีน้ำเงินทั่วทั้งหน้า
การคัดลอกปุ่ม CTA (อีกครั้งบนปุ่มทั้งสาม) นั้นคลุมเครือ บางอย่างเช่น “ฉันต้องการคู่มือการตลาด!” น่าสนใจกว่าและน่าจะส่งผลให้มีการคลิกมากขึ้น
คำรับรองของลูกค้า ไม่ได้รับการปรับให้เหมาะสม ไม่มีภาพหน้าของ Craig Kasnoff ไม่มีชื่อบริษัท (และไม่ควรมีเครื่องหมายจุลภาคตามหลัง Media Consultant) และคำรับรองเองก็ไม่ได้พูดอะไรเฉพาะเจาะจงเพื่อส่งเสริมให้ผู้ที่มีแนวโน้มจะเป็นลูกค้ามาร่วมงานกับบริษัทเช่นกัน

GIFs

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

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

ActiveCampaign ทำสิ่งนี้บนหน้าของพวกเขา:

สิ่งที่เพจทำได้ดี

หัวเรื่องและหัวเรื่องย่อย มีความน่าสนใจ พาดหัวใช้สำเนาของบุคคลที่ 2 และหัวเรื่องย่อยช่วยเสริมพาดหัวข่าวได้ดี ทำให้ผู้มีโอกาสเป็นลูกค้าทราบว่านักการตลาดอื่น ๆ กว่า 150,000 คนใช้ ActiveCampaign
“ไม่ต้องใช้บัตรเครดิต” ทำให้ผู้เข้าชมมั่นใจว่าข้อเสนอนี้ฟรีโดยสมบูรณ์
มีเพียงสองช่องแบบฟอร์มเท่านั้นที่ ทำให้มีโอกาสที่ผู้มีโอกาสเป็นลูกค้าจะกรอกแบบฟอร์มมากขึ้น
คำรับรองจากลูกค้า นั้นยอดเยี่ยมสำหรับการเพิ่มหลักฐานทางสังคม แต่ตัวจัดการ Twitter สามารถนำผู้เยี่ยมชมออกจากหน้าโดยไม่ต้องแปลงก่อน
แบบฟอร์มการเลื่อนและปุ่ม CTA เพิ่มโอกาสให้ผู้เยี่ยมชมดำเนินการ เนื่องจากจะมองเห็นได้ไม่ว่าพวกเขาจะอยู่ที่ใดบนหน้า

สิ่งที่ต้องทดสอบ A/B:

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

ตัวชี้นำภาพ

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

ลูกศร

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

สิ่งที่เพจทำได้ดี

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

สิ่งที่ต้องทดสอบ A/B:

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

จ้องตา

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

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

สิ่งที่เพจทำได้ดี:

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

สิ่งที่ต้องทดสอบ A/B:

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

วัตถุ

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

Lyft ทำสิ่งนี้ในตัวอย่างด้านล่างโดยการวางตำแหน่งรถโดยตรง - และเกือบจะสัมผัส - แบบฟอร์มการจับตะกั่ว:

สิ่งที่เพจทำได้ดี:

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

สิ่งที่ต้องทดสอบ A/B:

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

ลำดับชั้นภาพ

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

คุณลักษณะหลายอย่างมีบทบาทในการสร้างลำดับชั้นของภาพ ซึ่งรวมถึงแต่ไม่จำกัดเพียง:

ขนาด
สี/คอนทราสต์
ความหนาแน่น/ความใกล้เคียง
พื้นที่สีขาว
เนื้อสัมผัส/สไตล์

SendGrid ใช้องค์ประกอบเหล่านี้หลายอย่างบนหน้าของพวกเขา มาดูกันว่าพวกเขาใช้อันไหนและอันไหนที่พวกเขาควรพิจารณาปรับปรุง:

สิ่งที่เพจทำได้ดี

การแปรผันของขนาดและการจัดรูปแบบตัวหนา ช่วยดึงความสนใจไปยังส่วนสำคัญของสำเนา ทำให้เกิดลำดับชั้นภาพที่ชัดเจน
พาดหัวข่าว บังคับให้ผู้เยี่ยมชมใช้ SendGrid โดยกล่าวถึงบริษัทชื่อดังสามแห่งที่ใช้ SendGrid ด้วย
ปุ่ม CTA แบบร่วมมือหลายปุ่ม ช่วยให้ผู้มีโอกาสเป็นลูกค้ามีโอกาสมากมายในการแลกข้อเสนอพิเศษในสถานที่ต่างๆ ทั่วทั้งหน้า
รูปภาพผลิตภัณฑ์ แสดงตัวอย่างว่าเนื้อหาที่จัดส่งจะมีลักษณะอย่างไร
สัญลักษณ์แสดงหัวข้อย่อยที่มีการคัดลอกเพียงเล็กน้อย ทำให้ผู้มีแนวโน้มจะเป็นลูกค้าไม่ต้องอ่านข้อความในย่อหน้าเพื่อค้นหาสิ่งที่พวกเขากำลังมองหา
คำรับรองจากลูกค้าและตราบริษัท ทำหน้าที่เป็นหลักฐานทางสังคม ซึ่งมีแนวโน้มว่าจะโน้มน้าวให้ผู้มีโอกาสเป็นลูกค้าร่วมงานกับ SendGrid มากขึ้น เนื่องจากคนอื่น ๆ กำลังประสบความสำเร็จกับพวกเขา การเพิ่ม headshot ของ Dave Tomback ลงในคำรับรองของเขาจะทำให้มีประสิทธิภาพมากยิ่งขึ้น

สิ่งที่ต้องทดสอบ A/B:

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

ปุ่ม CTA ที่ดึงดูดความสนใจ

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

WalkMe ได้สร้างหน้าการเลือกเข้าร่วมสองขั้นตอนด้วยปุ่ม CTA ขนาดใหญ่ที่ตัดกันซึ่งโดดเด่นบนหน้าอย่างแน่นอน ดึงดูดความสนใจของผู้เยี่ยมชม:

สิ่งที่เพจทำได้ดี

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

สิ่งที่จะทดสอบ A/B

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

เทคนิคการออกแบบหน้า Landing Page หลังคลิกใดเป็นแรงบันดาลใจให้คุณ

การใช้แลนดิ้งเพจหลังการคลิกเพื่อโปรโมตและขายผลิตภัณฑ์และบริการของคุณเป็นส่วนสำคัญของกลยุทธ์ทางการตลาดของคุณ นั่นเป็นเพราะว่าเมื่อปรับให้เหมาะสมอย่างถูกต้อง — ด้วยเทคนิคที่อธิบายข้างต้น พร้อมด้วย Design Best Practices Guide และ Post-click Landing Page Optimization Guide สิ่งเหล่านี้สามารถเพิ่มอัตราการแปลงของคุณได้อย่างมาก

เปลี่ยนการคลิกโฆษณาเป็น Conversion สร้างหน้าโพสต์คลิกเฉพาะที่โหลดเร็วสำหรับทุกข้อเสนอ ดูวิธีจัดเตรียมหน้า Landing Page หลังคลิกที่ไม่ซ้ำกันให้กับผู้ชมของคุณโดยลงชื่อสมัครใช้ Instapage Enterprise Demo วันนี้