กระบวนการเค้าโครงหน้า Landing Page 11 ขั้นตอนสำหรับการแปลงเพิ่มเติม [2022]

อัตราการแปลงหน้า Landing Page เฉลี่ยอยู่ที่ประมาณ 10%

ไม่เลว เมื่อพิจารณาอัตราการแปลงเว็บไซต์โดยเฉลี่ยอยู่ที่ประมาณ 3%

ยัง… 10%?

เราสามารถทำได้ดีกว่า

และทุกอย่างเริ่มต้นด้วยเลย์เอาต์หน้า Landing Page ที่ดีขึ้น

ความจริง? แม้ว่าการออกแบบเลย์เอาต์หน้า Landing Page ที่มี Conversion สูงอาจต้องใช้วิทยาศาสตร์เล็กน้อย แต่ก็ไม่ใช่วิทยาศาสตร์ จรวด อย่างแน่นอน และในบทความนี้ เราจะมาพิสูจน์กัน

ยังไง?

โดยทำให้การออกแบบหน้า Landing Page กระจ่างขึ้นทุกครั้ง และโดยการกลั่นเค้าโครงหน้า Landing Page ให้เหลือ 11 ขั้นตอนง่ายๆ

เราจะแชร์เค้าโครงหน้า Landing Page แบบเต็มความยาว 15 แบบที่เราชื่นชอบเพื่อเป็นแรงบันดาลใจ (และปัดไฟล์)

มาเริ่มกันเลย.

หลังจากฝึกฝนมาหลายปี การทดสอบการเพิ่มประสิทธิภาพอัตรา Conversion มากกว่า 10,000 ครั้ง และการชนะและแพ้นับไม่ถ้วน เราได้ค้นพบว่าการจัดวางหน้า Landing Page ที่มี Conversion สูงทุกรูปแบบมี 11 ขั้นตอนต่อไปนี้เป็นอย่างน้อย:

1. เริ่มต้นด้วยครีเอทีฟบรีฟ
2. รวบรวมสำเนา
3. กำหนดสถาปัตยกรรมข้อมูลของคุณ (โครงสร้าง)
4. สร้างลำดับชั้นภาพ
5. รักษาอัตราส่วนความสนใจให้ใกล้เคียงกับ 1:1 มากที่สุด
6. สร้างความประทับใจแรกที่ลบไม่ออก (ครึ่งหน้าบน)
7. รวมทรัพย์สินที่แตกต่างในการออกแบบของคุณ
8. เพิ่มบริบทด้วยโสตทัศนูปกรณ์
9. รองรับผลประโยชน์ด้วยคุณสมบัติ
10. ตรวจสอบการเรียกร้องด้วยหลักฐานทางสังคม
11. พูดอีกทีแต่ต่าง (ท้ายหน้า)

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

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

Enter: บทสรุปครีเอทีฟโฆษณา

เอเจนซีและธุรกิจส่วนใหญ่มักมองข้ามครีเอทีฟบรีฟหรือยกเว้นทั้งหมด

ความผิดพลาดครั้งใหญ่.

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

บรีฟโฆษณาของคุณควรมีอะไรบ้าง

รับ/ใคร/ถึง/โดย (ชมเชยจูเลียน โคล):

ส่วนใหญ่ใช้เทมเพลตบรีฟโฆษณา Get/Who/To/By สำหรับครีเอทีฟโฆษณา แต่ก็ทำงานได้ดีสำหรับหน้าเว็บหรือหน้า Landing Page เช่นกัน

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

แค่นั้นแหละ.

ตัวอย่างเช่น เราต้องการ...

• รับ ธุรกิจ SaaS ขนาดเล็กถึงขนาดกลางด้วยงบประมาณการตลาดประจำปีที่ $300,000 หรือน้อยกว่า...
• ที่ ล้มเหลวในการปรับขนาดการตลาดตามผลงานเนื่องจากการจำกัดงบประมาณและการเข้าถึงผู้มีความสามารถ...
• เพื่อ ลงทะเบียนรับคำปรึกษาฟรี…
• โดย แสดงให้พวกเขาเห็นว่าเอเจนซี่ของเราสามารถเพิ่ม Conversion ได้ 25% ลดราคาต่อหนึ่งการกระทำ (CPA) ลง 25% และลดจำนวนพนักงานลง 18%

บูม .

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

ตอนนี้ได้เวลาเริ่มออกแบบแล้ว อืม เกือบ…

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

แต่ฉันใช้ขั้นตอนนี้เป็นอันดับสองเพื่อเตือนคุณว่าคำต่างๆ มักจะมาก่อนการออกแบบเสมอ (ขออภัย นักออกแบบกราฟิก)

ทำไม

จำได้ไหมว่าเราพูดถึงการสร้างกล่องเพื่อสร้างสรรค์ภายในได้อย่างไร?

หากบรีฟงานสร้างสรรค์ของคุณ (กลุ่มเป้าหมาย คำชี้แจงปัญหา เป้าหมาย ข้อความ) ทำหน้าที่เป็นกรอบของกล่อง สำเนาของคุณจะทำหน้าที่เป็นตะปูและสกรูยึดเข้าด้วยกัน

คัดลอกกำหนดขนาด โครงสร้าง พื้นที่ และทิศทางศิลปะ

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

ตอนนี้ก็ถึงเวลาเลือกโครงสร้างโดยรวมของเลย์เอาต์หรือเรียกอีกอย่างว่าสถาปัตยกรรมข้อมูลของคุณเมื่อรวมคำเข้าด้วยกัน

ใน การจัดระเบียบ ข้อมูลบนเพจของคุณ คุณมีสองตัวเลือกหลัก:

• รูปตัว F
• รูปตัว Z

รูปแบบรูปตัว F คือลำดับชั้นข้อมูลที่ได้รับความนิยมสูงสุดทางออนไลน์

และด้วยเหตุผลที่ดี

จากการศึกษาที่ใช้ซอฟต์แวร์ติดตามการมอง คนส่วนใหญ่อ่านหน้าโดยธรรมชาติจากบนลงล่างในรูปของ F.

ใช้ลำดับชั้นรูปตัว F สำหรับแลนดิ้งเพจ ที่มีข้อความ จำนวนมาก

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

ใช้ลำดับชั้นรูปตัว Z สำหรับ แลนดิ้ง เพจที่มีภาพสวยงาม

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

ยังไง?

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

ไม่มีการออกแบบหน้า Landing Page ที่คุ้มค่าหากปราศจากลำดับชั้นภาพที่ชัดเจน

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

อัตราส่วนความสนใจหมายถึงจำนวนลิงก์บนหน้าเทียบกับจำนวนเป้าหมายการแปลง

ตัวอย่างเช่น หากหน้า Landing Page ของคุณมีเป้าหมายการแปลงเพียงเป้าหมายเดียว (เช่น การทดลองใช้ฟรี) และลิงก์เดียว (ปุ่ม CTA) นั่นคืออัตราส่วนความสนใจ 1:1

ทำไม 1:1 ถึงดีที่สุด?

ไม่มีการรบกวน

ทุกแคมเปญที่ส่งการเข้าชมไปยังหน้า Landing Page ควรมีเป้าหมายเดียว เช่นเดียวกับหน้า Landing Page ควรมีเป้าหมายเดียว แค่นั้นแหละ.

การเพิ่มลิงก์การนำทาง ลิงก์ส่วนท้าย หรือไอคอนโซเชียลมีเดียที่ไม่จำเป็น มีพลังในการสร้างไปป์ที่รั่ว

เมื่อออกแบบหน้า Landing Page ให้ส่วนหัวและส่วนท้ายของคุณสะอาด ไม่รวมลิงก์การนำทางหรือลิงก์ส่วนท้าย (ยกเว้นข้อกำหนดและนโยบายความเป็นส่วนตัว)

ให้ความสนใจของผู้เยี่ยมชมมุ่งเน้นไปที่เป้าหมายเดียว

ตัวอย่างเช่น สังเกตว่า Spotify Lander นี้มีลิงก์หลักเพียงลิงก์เดียว: ลิงก์ที่จะแปลงบน CTA แค่นั้นแหละ.

การออกแบบหน้า Landing Page ที่มีคุณภาพยังคงไว้ซึ่งการแนะนำ: ครึ่งหน้าบน

ครึ่งหน้าบนหมายถึงส่วนของหน้า Landing Page ที่ผู้เข้าชมของคุณเห็นเมื่อเข้ามายังหน้าของคุณก่อนที่จะเลื่อนลง

ตัวอย่างเช่น ตรวจสอบส่วนครึ่งบนของหน้าแรกของเรา:

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

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

ทรัพย์สินที่แตกต่างหมายถึงรหัสเฉพาะของแบรนด์ของคุณ: โลโก้ สี มาสคอต สไตล์ เสียง แบบอักษร และอื่นๆ

ทำไมพวกเขาถึงมีความสำคัญ?

เล่นเกมกันเถอะ…

ข้างล่างนี้ยี่ห้ออะไรคะ?

ข้างล่างนี้ยี่ห้ออะไรครับ

ยี่ห้อ 1: Mailchimp.

แบรนด์ 2: การทำงานเป็นทีม

แม้จะไม่มีโลโก้ พวกคุณส่วนใหญ่จะรู้จัก Mailchimp เนื่องจากมีพื้นหลังสีเหลือง ลักษณะภาพ และฟอนต์คู่ที่ชัดเจน

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

กล่าวคือ เนื้อหาที่แตกต่างกันมีความสำคัญเนื่องจากสร้าง ความคุ้นเคย

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

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

เค้าโครงหน้า Landing Page จำนวนมากเกินไปใช้ภาพเป็นตัวเติมช่องว่าง

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

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

ตัวอย่างเช่น สังเกตว่า Webflow ใช้ GIF แบบเคลื่อนไหวเพื่อแสดงจุดที่พวกเขาสร้างในสำเนาได้อย่างไร

หรือสังเกตว่า Buffer ทำเช่นเดียวกัน แต่ด้วย screengrabs กึ่งเคลื่อนไหว:

คุณอ่านถูกต้องแล้ว: รองรับผลประโยชน์ด้วยคุณสมบัติ ไม่ใช่ในทางกลับกัน

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

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

ตัวอย่างเช่น สังเกตว่า Jasper (เดิมคือ Jarvis) ไม่เคยพูดถึงคุณลักษณะต่างๆ เช่น AI หรือแมชชีนเลิร์นนิง แม้ว่าสิ่งเหล่านี้เป็นคุณสมบัติหลักที่ขับเคลื่อนคุณประโยชน์แต่ละอย่าง:

หรือ ClickUp ที่สำรวจประโยชน์ของตนอย่างเชี่ยวชาญโดยใช้แท็บที่มีชื่อคุณลักษณะ:

คุณควรโรยหลักฐานทางสังคมหรือการตรวจสอบโดยบุคคลที่สามของผลิตภัณฑ์หรือบริการของคุณ ทุกที่บนเลย์เอาต์หน้า Landing Page ของคุณ

ข้อพิสูจน์ทางสังคมคืออะไร?

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

และอีกมากมาย

คุณควรวางหลักฐานทางสังคมไว้ที่ไหน?

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

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

ตัวอย่างเช่น หน้า Landing Page ของ Jasper Peppers เป็นหลักฐานทางสังคมจากบนลงล่าง แต่พวกเขายังออกแบบส่วนของตัวเองในเลย์เอาต์ด้วย:

เลย์เอาต์หน้า Landing Page ที่ออกแบบมาอย่างดีจะรวม CTA หลายตัวทั่วทั้งหน้า

แต่ในขณะที่ส่วนครึ่งหน้าบนของคุณควรทิ้งความประทับใจแรกที่ลบไม่ออก ส่วน CTA สุดท้ายของคุณควรทิ้งความประทับใจสุดท้ายที่น่าจดจำ

คราวนี้ ให้ทบทวนคุณค่าที่คุณตั้งใจจะจัดหาและวิธีที่คุณตั้งใจจะจัดหาให้ใหม่ โดยใช้คำพูดที่ต่างกันเท่านั้น

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

และนั่นคือ 11 ขั้นตอนง่ายๆ ในการสร้างเค้าโครงหน้า Landing Page ที่มี Conversion สูง

ตอนนี้ มาสำรวจตัวอย่างและการออกแบบในโลกแห่งความเป็นจริงกัน

ตอนนี้ส่วนที่สนุก: ตัวอย่าง

ดังที่เราได้กล่าวไปแล้ว เค้าโครงหน้า Landing Page ของคุณจะแตกต่างกันไปตามประเภทของหน้า Landing Page ที่คุณใช้

ตัวอย่างเช่น หน้าบันทึกลูกค้าเป้าหมายมีแบบฟอร์ม แต่หน้าการคลิกผ่านไม่มี

ดังนั้น ในส่วนนี้ เราจะพยายามจับความแตกต่างระหว่างเค้าโครงหน้า Landing Page โดยแสดงหน้า Landing Page ที่ดีที่สุดบางส่วนจากหมวดหมู่หน้า Landing Page ต่อไปนี้:

• จับตะกั่ว
• คลิกผ่าน
• SaaS
• B2C (อีคอมเมิร์ซ/DTC)
• แอพมือถือ

ข่าวดีก็คือเราเขียนบทความเชิงลึกเกี่ยวกับหน้า Landing Page แต่ละประเภทที่กล่าวถึงข้างต้น ดังนั้นเราจะไม่ดำลึกเกินไปที่นี่

แต่เรา จะ นำเสนอตัวอย่างยอดนิยมสามอันดับแรกของเรา (พร้อมลิงก์ไปยังยานลงจอดแบบเต็ม) พร้อมกับสิ่งที่ทำให้แต่ละตัวอย่างมีความพิเศษ

มาสำรวจกัน

1. ท่อ
2. KlientBoost
3. ออสการ์

ท่อ

สิ่งที่เราชอบ: ส่วนการพิสูจน์ทางสังคม

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

KlientBoost

สิ่งที่เราชอบ: เทคนิค Breadcrumb (แบบหลายขั้นตอน)

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

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

ทำไมต้องมีเลย์เอาต์หลายขั้นตอน?

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

ออสการ์

สิ่งที่เรารัก: ทัศนวิสัย + แบบฟอร์ม

แบบฟอร์มการจับลูกค้าเป้าหมายของออสการ์จะเติมกราฟิกของบัตรประโยชน์ด้านสุขภาพโดยอัตโนมัติ สดใส

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

เจาะลึก: ตัวอย่างหน้าจับภาพลูกค้าเป้าหมายที่ดีที่สุดในการคัดลอก

1. แจสเปอร์ (เดิมชื่อจาร์วิส)
2. เซมรัช
3. บรรณาธิการ X

แจสเปอร์

สิ่งที่เราชอบ: รหัสแบรนด์ที่แตกต่าง

เราได้กล่าวถึงส่วนการพิสูจน์ทางสังคมของ Jasper แล้วในตอนต้นของบทความนี้ แต่คราวนี้ มาเน้นที่ทรัพย์สินแบรนด์ที่โดดเด่นของพวกเขา:

• พื้นหลังสีเข้ม
• สีประจำแบรนด์ (ฟ้า/ม่วง/ชมพู)
• แจสเปอร์ หุ่นยนต์ (มาสคอต)

ไม่มีคำถามเกี่ยวกับเรื่องนี้ เมื่อมีคนเข้ามาในหน้านี้และเคยเจอโฆษณาของแจสเปอร์มาก่อน พวกเขาจะจำได้

เซมรัช

สิ่งที่เรารัก: ประโยชน์ที่ได้รับการสนับสนุนจากคุณสมบัติ

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

บรรณาธิการ X

สิ่งที่เราชอบ: ความเรียบง่าย

เลย์เอาต์หน้า Landing Page ของคุณไม่ต้องการอะไรมากเพื่อสร้างผลกระทบที่ยิ่งใหญ่ และ Editor X ก็พิสูจน์มัน

เรียบง่าย. ช่ำชอง. กระชับ. มีประสิทธิภาพ.

น้อยแค่ไหน? มีเพียงสามส่วน:

• ส่วนฮีโร่ (ครึ่งหน้าบน)
• ส่วนผลประโยชน์
• CTA .ที่สอง

*แม้ว่าเราจะแนะนำให้เพิ่มส่วนหลักฐานทางสังคมด้วย

ดูเลย์เอาต์เพิ่มเติม: หน้าคลิกผ่าน: คำจำกัดความ ตัวอย่าง วิธีปฏิบัติที่ดีที่สุด

1. พิซซ่า
2. CashApp
3. นารา เบบี้

พิซซ่า

สิ่งที่เรารัก: ส่วน CTA สุดท้าย

จริงๆ แล้ว อะไรจะดีไปกว่าการปิดการออกแบบหน้า Landing Page ของคุณมากกว่า CTA สุดท้ายที่มีคำรับรองจาก JK Rowling และ ปุ่ม CTA ของคุณ สวย.

CashApp

สิ่งที่เรารัก: ส่วน CTA

หน้า Landing Page ของแอปส่วนใหญ่มีปุ่ม CTA ที่เปิดร้านแอปเพื่อดาวน์โหลดแอป

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

CashApp กำจัดขั้นตอนเหล่านั้นทั้งหมดโดยใช้รหัส QR แทน สิ่งที่คุณต้องทำก็แค่ดึงโทรศัพท์ออกมา ถ่ายรูป จากนั้น App Store จะเปิดขึ้นบนมือถือของคุณ (ในจุดที่คุณต้องการ)

นารา เบบี้

สิ่งที่เราชอบ: ความประทับใจแรกพบที่ลบไม่ออก (ครึ่งหน้าบน)

ส่วนพับของ Nara Baby ทำเครื่องหมายทุกช่อง:

• พาดหัวข่าว
• หัวข้อย่อย
• ฮีโร่ยิง
• CTA

เจาะลึก: ตัวอย่างหน้า Landing Page ของแอปที่ดีที่สุด

1. Keeps
2. Dollar Shave Club
3. ของเธอ

Keeps

สิ่งที่เราชอบ: สื่อโสตทัศนูปกรณ์

อันนี้ง่าย จัดแสดงคนจริง ๆ โดยใช้ผลิตภัณฑ์ของพวกเขาในชีวิตจริง ทำให้สิ่งที่มองไม่เห็นมองเห็นได้ จำได้ไหม?

Dollar Shave Club

สิ่งที่เราชอบ: ลำดับชั้นข้อมูลรูปตัว Z

Dollar Shave Club เน้นข้อความ ซึ่งทำให้รูปแบบข้อมูลรูปตัว Z เหมาะสมที่สุด

ของเธอ

สิ่งที่เรารัก: ลำดับชั้นภาพ

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

คุณทราบโดยสรุปว่าส่วนใดของส่วนด้านล่างมีความสำคัญมากที่สุดและสัมพันธ์กันอย่างไร

สำรวจรูปแบบเพิ่มเติม: แนวคิดหน้า Landing Page ของอีคอมเมิร์ซเพื่อเพิ่มยอดขาย

1. ClickUp
2. ฮอทจาร์
3. Canva

ClickUp

สิ่งที่เราชอบ: ส่วนการพิสูจน์ทางสังคม

เช่นเดียวกับเลย์เอาต์ SaaS หลายๆ แบบ เป็นเรื่องปกติที่จะหาป้ายคำวิจารณ์ของบุคคลที่สามเพื่อเป็นหลักฐานทางสังคม ClickUp ก็ไม่ต่างกัน

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

ฮอทจาร์

สิ่งที่เราชอบ: ทัศนศิลป์

ใครบอกว่าเครื่องช่วยการมองเห็นต้องเป็นภาพกราฟิกหรือภาพถ่าย?

Hotjar ฝังแผนที่ความหนาแน่นจริง (พร้อมข้อมูล) ลงในหน้า Landing Page คุณสามารถหมุน สลับระหว่างมุมมอง และดาวน์โหลดข้อมูลตัวอย่างได้

พูดถึงการทำให้สิ่งที่มองไม่เห็นปรากฏให้เห็น การทำงานที่ดี.

Canva

สิ่งที่เรารัก: อัตราส่วนความสนใจ

Canva รู้วิธีรักษาผู้มีโอกาสเป็นลูกค้าให้จดจ่อกับเป้าหมาย Conversion เดียว

ไม่มีแถบนำทาง

ไม่มีลิงก์ส่วนท้าย

ไม่มี CTA อื่นนอกจาก "ลงทะเบียน"

สำรวจเลย์เอาต์เพิ่มเติม: ตัวอย่างหน้า Landing Page ของ SaaS ที่มีการแปลงสูง

เป็นการง่ายที่จะคิดใหม่เกี่ยวกับการออกแบบหน้า Landing Page และการทดสอบ A/B ในรูปแบบต่างๆ

แต่ความจริงยังคงอยู่—การออกแบบหน้า Landing Page ที่สะดุดตาซึ่งทำ Conversion ได้ไม่นาน ยึดมั่นในสิ่งที่สำคัญที่สุด:

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

การสร้างเลย์เอาต์หน้า Landing Page ที่ยอดเยี่ยมอาจเป็นวิทยาศาสตร์ แต่มันไม่ใช่วิทยาศาสตร์จรวด

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

มีความสุขในการเปลี่ยนใจเลื่อมใส!