วิธีสร้าง Landing Page Wireframe พร้อมคำแนะนำจากผู้เชี่ยวชาญ

เผยแพร่แล้ว: 2018-05-08

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

โครงร่างหน้า Landing Page หลังการคลิกคืออะไร

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

Rares Cimpean นักออกแบบภาพสำหรับ Instapage อธิบายว่า:

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

ต่อไปนี้คือตัวอย่างหน้า Landing Page หลังการคลิกของ wireframe ทั้งแบบยาวและแบบสั้น:

เทมเพลตโครงร่างหน้า Landing Page หลังการคลิกมีจุดประสงค์หลักหลายประการ:

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

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

ไม่ว่าคุณจะวางโครงร่างเพจประเภทใด Rafal Bogdan ผู้จัดการฝ่ายออกแบบกราฟิกของเรา ได้แสดงความสำคัญของการทำให้โครงร่างของคุณเรียบง่ายในตอนแรก เพื่อไม่ให้ครอบงำผู้มีส่วนได้ส่วนเสียที่เกี่ยวข้อง:

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

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

วิธีการวางโครงร่างหน้า Landing Page หลังการคลิก

ไม่มีการนำทาง

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

หลายบริษัทเห็นการเปลี่ยนแปลงอย่างมากในอัตรา Conversion หลังจากลบแถบการนำทางออก:

Career Point College พบว่าอัตราการแปลงเพิ่มขึ้น 336% หลังจากลบแถบการนำทางด้านบนและปรับเปลี่ยนเค้าโครงแบบฟอร์ม
Yuppiechef พบว่าอัตราการแปลงเพิ่มขึ้น 100% (จาก 3% เป็น 6%) โดยการนำแถบการนำทางออก
SparkPage มีอัตรา Conversion เพิ่มขึ้นจาก 9.2% เป็น 17.6% ในเดือนที่พวกเขาทดสอบ A/B ในการลบการนำทางด้านบนออก

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

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

หัวเรื่องและหัวเรื่องย่อย

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

ใช้พาดหัวย่อยเพื่อเสริมพาดหัวหลักของคุณ โดยเฉพาะอย่างยิ่งถ้าพาดหัวหลักยาวหรือต้องมีบริบทเพิ่มเติม (เช่น สถิติ เป็นต้น)

สิ่งสำคัญในการเขียนพาดหัวข่าวที่ดีคือต้องแน่ใจว่านำเสนอคุณค่าที่ไม่ซ้ำใคร (UVP) หรือสิ่งที่ทำให้ผลิตภัณฑ์หรือบริการของคุณแตกต่างจากคู่แข่ง

พาดหัว Landing Page หลังการคลิก Autopilot นี้ช่วยให้บริษัทต่างๆ รู้ว่าพวกเขาสามารถ "เติบโตเร็วขึ้น" บน Autopilot ได้เมื่อเทียบกับซอฟต์แวร์การตลาดอัตโนมัติอื่นๆ จากนั้นหัวข้อย่อยจะช่วยเสริมแนวคิดนี้โดยอธิบาย ว่า พวกเขาสามารถเติบโตได้เร็วขึ้นได้อย่างไร:

นอกจากการรวม UVP ของคุณแล้ว ยังมีหัวข้อหลักที่น่าสนใจอีกสี่ประเภท:

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

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

สื่อ

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

ประเภทของรูปภาพหน้า Landing Page หลังการคลิก ได้แก่

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

ดูภาพที่ iContact ใช้เพื่อแสดงตัวอย่างอีเมลธุรกิจที่ผู้มีแนวโน้มจะเป็นลูกค้าสร้างขึ้น:

นอกจากรูปภาพแล้ว ยังมีวิดีโอหน้า Landing Page หลังการคลิกหลายประเภท:

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

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

สำเนา

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

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

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

หลักฐานทางสังคม

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

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

เมื่อมองย้อนกลับไปที่หน้า Landing Page ของ Highfive หลังการคลิกก่อนหน้านี้ ให้ตรวจดูหลักฐานทางสังคมทั้งหมดที่พวกเขาเคยใช้เพื่อชักชวนให้ผู้เข้าชมทำ Conversion — โลโก้แบรนด์ คำรับรองที่ยกมา และการจัดอันดับดาวของอุตสาหกรรม:

นี่เป็นอีกตัวอย่างหนึ่ง คราวนี้จาก Splash Omnimedia ที่มีการพิสูจน์ทางสังคมทุกประเภท — จำนวนลูกค้า โลโก้แบรนด์ วิดีโอกรณีศึกษา และคำรับรองที่ยกมา:

ด้วยการรวมหลักฐานทั้งหมดนี้ คุณชักชวนให้ผู้มีแนวโน้มจะเป็นลูกค้าแปลงโดยคลิกปุ่ม CTA ของคุณ

แบบฟอร์มการจับตะกั่ว

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

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

ในทางตรงกันข้าม การทดลองใช้ฟรีของ Autopilot จะอยู่ด้านล่างของช่องทาง ดังนั้นการขอข้อมูลเพิ่มเติมจึงเป็นที่ยอมรับได้:

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

ปุ่ม CTA ของคุณเป็นที่ที่เกิดการแปลงหน้า Landing Page หลังการคลิก ดังนั้นจึงต้องโดดเด่นและขอร้องให้คนคลิก ต่อไปนี้คือประเด็นสำคัญในการเพิ่มประสิทธิภาพปุ่ม CTA ของคุณ:

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

ส่วนท้ายขั้นต่ำ

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

ดูเส้นทางหลบหนีเหล่านี้ทั้งหมดที่ Infegy ให้บริการแก่ผู้เยี่ยมชม:

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

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

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

ลดความยุ่งเหยิง
ช่วยเพิ่มความสามารถในการอ่าน
กำหนดลำดับชั้นภาพ
ทำให้หน้า Landing Page ของคุณดูเป็นมืออาชีพมากขึ้น

เปรียบเทียบหน้า Landing Page หลังคลิกจาก NASM และ Acquisio:

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

ทุกอย่างเริ่มต้นด้วย wireframe หน้า Landing Page หลังคลิก

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

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