คำแนะนำและตัวอย่างหน้า Landing Page ที่สวยงาม

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

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

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

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

เคล็ดลับสำหรับการออกแบบหน้า Landing Page

เคล็ดลับง่ายๆบางข้อในการเริ่มต้นเมื่อออกแบบหน้า Landing Page:

1. ใช้หลักการ AIDA

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

1. ความตระหนัก - ดึงดูดความสนใจจากผู้เข้าชม
2. ดอกเบี้ย - ซึ่งสามารถกระตุ้นโดยเน้นประโยชน์ให้กับลูกค้า
3. ปรารถนา - ชักนำให้ลูกค้าเกิดความคิดว่าพวกเขา ต้องการ ผลิตภัณฑ์หรือบริการ
4. การกระทำ - ลูกค้าดำเนินการกระบวนการซื้อ

2. ไม่รบกวนมากเกินไป ปล่อยให้ทางออก

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

3. ทำให้ผ่านการทดสอบกะพริบ

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

4. อย่าสร้างความคาดหวังที่ผิดพลาด

หน้า Landing Page จะต้องสอดคล้องกับคำแนะนำจากโฆษณาดั้งเดิมหรือในทางกลับกัน ผู้เข้าชมต้องค้นหาในหน้า Landing Page สิ่งที่พวกเขาสัญญาไว้ในโฆษณาที่พวกเขาคลิก.

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

ตู้โชว์: หน้า Landing ที่สวยงาม

99designs

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

123rf

123RF สร้างคำแถลงที่ชัดเจนในหน้า Landing Page นี้ด้วยแถบเลื่อนภาพและกล่องค่ามัธยฐานทั้งสี่ คุณเข้าใจได้ทันทีว่าบริการคืออะไรและใช้งานอย่างไร (ค้นหา, ลงทะเบียน, จ่ายเงินตามการใช้งาน, ซื้อการสมัครสมาชิก) พื้นหลังสีเทาอ่อนไม่สร้างความรำคาญและให้ความสำคัญกับเนื้อหาที่เป็นภาพ สิ่งที่ฉันคิดว่าพวกเขาสามารถปรับปรุงได้คือรายการหมวดหมู่การถ่ายภาพสต็อก และ CTA นั้นบอบบางเกินไปสำหรับกล่องที่คลิกได้.

Favomatic

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

BiznessApps

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

Brusheezy

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

การแหกคุก

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

สงวนลิขสิทธิ์

Minimalism เป็นแนวคิดหลักที่นี่ โดยส่วนตัวแล้วฉันชอบที่หน้านี้ไม่ได้บอกคุณทุกอย่างทันที แต่เชิญคุณให้ค้นพบ อย่างไรก็ตามสิ่งที่ฉันไม่ค่อยสนุกเท่าไหร่เป็นวิดีโอที่เริ่มโดยอัตโนมัติ (คุณสมบัติที่ฉันมักจะหลีกเลี่ยง) - แม้ว่าแอนดรูว์พาวเวอร์จะไม่เพียง แต่มีทักษะ แต่ยังหล่อ! นอกจากนี้ความจริงที่ว่าไม่มี CTA ทันทีอาจเป็นข้อเสียเปรียบสำหรับเว็บไซต์.

Pico

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

Shoeboxed

บรรทัดคำอธิบายสำหรับแต่ละส่วนเป็นตัวอย่างของการใช้ภาษาเชิงอธิบาย คุณเข้าใจข้อความในเสี้ยววินาทีขณะที่สายตาคุณสแกนแถวแรกอย่างรวดเร็วและมาถึงที่ปุ่ม CTA หากคุณยังลังเลอยู่มีข้อความรับรองให้ความช่วยเหลือพร้อมการรับรองที่แข็งแกร่งคุณจะไม่ไว้วางใจ บริษัท ที่ให้ความสำคัญกับ Forbes และ Tech Crunch หรือไม่? ฉันจะ.

Squarespace

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

หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนโดย Laura Moisei สำหรับ Hongkiat.com ลอร่าจบการศึกษาระดับปริญญาตรีสาขาวิทยาศาสตร์การสื่อสารและใช้เวลาส่วนใหญ่ในการใฝ่หางานออกแบบและการเขียน เธอทำงานให้กับ 123ContactForm ซึ่งเป็นฟอร์มออนไลน์และเครื่องมือสร้างแบบสำรวจที่ช่วยให้ผู้ใช้สร้างฟอร์มที่สวยงามสำหรับหน้าเว็บใด ๆ.