วิธีออกแบบเว็บไซต์ Landing Page ที่ดีที่สุด

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

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

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

ประการแรก Landing Page คืออะไร?

เพื่อไม่ให้เข้าใจผิดว่าเป็นหน้าแรก หน้า Landing Page เป็นเวอร์ชันแบบแยกส่วน โดยมีจุดประสงค์เดียว เปลี่ยนผู้เยี่ยมชมให้ เป็นผู้นำ ขณะนี้มีหน้า Landing Page มากมายเหลือเฟือ หน้า Landing Page ที่ดึงดูดลูกค้าเป้าหมาย, หน้า Landing Page แบบคลิกผ่าน, หน้า Squeeze, หน้าการขาย, หน้า Infomercial, Splash Page, Viral Landing Page, Microsite, หน้าอ้างอิง, Coming Soon Page – เพียงไม่กี่ชื่อ แต่ความตั้งใจยังเหมือนเดิม รับโอกาสในการขายมากขึ้น!

และไม่เราไม่ได้หมายถึงสุนัขนำทาง (ภาพโดย Vidar)

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

แนวทางที่ดีที่สุด

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

  1. หนึ่งเป้าหมาย (หนึ่งคำกระตุ้นการตัดสินใจ)
  2. ล้างข้อความและคัดลอก
  3. สิ่งรบกวนน้อยที่สุด
  4. 3 ท็อปปิ้ง 3 สี

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

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

ล้างข้อความและคัดลอก

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

จากการวิเคราะห์หน้า Landing Page 18,000 หน้าของ Unbounce นั้นHelen Fooddเน้นว่า:

“แลนดิ้งเพจที่มีคำน้อยกว่า100 คำประสบความสำเร็จมากกว่าเพจที่มีคำมากกว่า 500 คำถึง 50%”

ตัวอย่างข้อมูลที่ฉันจำได้เสมอคือความสำคัญของการลดการคัดลอกบนเว็บไซต์ให้มากที่สุด

“กำจัดคำครึ่งหนึ่งในแต่ละหน้า จากนั้นกำจัดสิ่งที่เหลือครึ่งหนึ่ง”

— สตีฟ ครูก, Don't Make Me Think

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

เนื่องจากผู้คนไม่ค่อยอ่านบนเว็บไซต์มากนัก ทางที่ดีควรเก็บสำเนาไว้สแกน ต่อไปนี้เป็นเคล็ดลับดีๆ สำหรับส่วนฮีโร่ (ครึ่งหน้าบน):

  • เริ่มต้นหน้าด้วยพาดหัว เน้นประโยชน์หลัก และทั้งหมดประมาณ 10 คำหรือน้อยกว่า
  • ด้านล่างนี้ ใช้หัวข้อย่อยที่มีรายละเอียดหรือประโยชน์เพิ่มเติมประมาณ 20 คำหรือน้อยกว่า
  • สุดท้าย แต่ไม่ท้ายสุดคือ CTA ใน 5 คำหรือน้อยกว่า
  • ค่อนข้างคล้ายกับเว็บไซต์ที่น่าทึ่งนี้
เชื่อหรือไม่. รูปภาพในฮีโร่ (ครึ่งหน้าบน) ไม่จำเป็นเสมอไป

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

สิ่งรบกวนน้อยที่สุด

สุดท้าย แต่ไม่มีความหมายน้อยที่สุด การสร้างเว็บไซต์โดยมีสิ่งรบกวนน้อยที่สุดเป็นสิ่งสำคัญ อาจเป็นเรื่องยากที่จะลอกเนื้อหาและคัดลอกสิ่งที่คุณเขียนอย่างไม่รู้จักเหน็ดเหนื่อย แต่พูดตรงๆ อาจเป็นการใช้พื้นที่โดยเปล่าประโยชน์ “Less is more”ไม่สามารถนำมาใช้ได้มากไปกว่าการออกแบบหน้า Landing Page ยิ่งดูเรียบง่ายและเรียบง่ายมากเท่าไหร่ก็ยิ่งดีเท่านั้น ลดความซับซ้อนของหน้า รวมทั้งลดข้อความ รูปภาพ และจำนวนองค์ประกอบ นอกจากนี้ พื้นที่เชิงลบ (พื้นที่สีขาว) คือเพื่อนของคุณ ใช้มันให้มากที่สุด วิธีนี้จะช่วยลดสิ่งรบกวนและนำความสนใจที่ไม่มีการแบ่งแยกของลูกค้าไปที่คำกระตุ้นการตัดสินใจของคุณโดยตรง ด้วยหน้า Landing Page เราได้พัฒนาการออกแบบไปอีกขั้นหนึ่ง เพื่อหมายถึงทิศทางที่มุ่งเน้นและมีประสิทธิภาพ เป็นมากกว่าการมองเห็น แต่ใช้งานได้จริง

เค้าโครงที่ดีที่สุดและการเจาะลึก

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

  • ล้างส่วนต่างๆ
  • ความคุ้นเคย
  • การทดสอบและการวนซ้ำอย่างต่อเนื่อง

ล้างส่วนต่างๆ

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

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

ความคุ้นเคย

มีเหตุผลว่าทำไมหน้า Landing Page ส่วนใหญ่จึงใช้เลย์เอาต์ที่คล้ายกัน หลายปีของการทดสอบเวอร์ชันต่างๆ และใช้เงินหลายล้านดอลลาร์ เพื่อค้นหาว่าการออกแบบใดที่แปลงมากที่สุดทำให้เกิดรูปแบบที่แตกต่างกันอย่างชัดเจน ถอดความ Steve Krug ในDo n't Make Me Think เขาอธิบายว่าเป็นการดีกว่าที่จะรักษาการออกแบบให้ผู้ใช้คุ้นเคย ดีกว่าที่จะละเว้นจากการพยายามสร้างวงล้อขึ้นมาใหม่ แต่ถ้าคุณทำและประสบความสำเร็จ มันก็สามารถปฏิวัติได้ แต่ส่วนใหญ่แล้วควรทำความคุ้นเคยไว้จะดีกว่า เพราะช่วงการเรียนรู้จะทำให้เกิดแรงเสียดทานอยู่เสมอ

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

การทดสอบและการวนซ้ำ

สิ่งนี้ไปพร้อมกับประเด็นสุดท้ายเกี่ยวกับความคุ้นเคย จากการศึกษาพบว่าประสบการณ์ที่คุ้นเคยนั้นดีที่สุดและบางส่วนควรมีลักษณะที่แน่นอน วิธีเดียวที่จะทราบได้อย่างแท้จริงคือการลองใช้เวอร์ชันต่างๆ ทดสอบและติดตามข้อมูล การออกแบบหน้า Landing Page ที่เหมาะสมจำเป็นต้องมีการทดลอง ทุกเว็บไซต์และผลิตภัณฑ์ต้องผ่านการทดสอบ และฉันไม่ได้พูดถึงการเสียบปลั๊ก Google Analytics แล้วทิ้งไว้อย่างนั้น คุณต้องวิเคราะห์ข้อมูลและดูว่าคุณสามารถปรับปรุงตรงไหนได้บ้าง แม้แต่การปรับปรุงเพียง 1% ก็สามารถสร้างผลกระทบอย่างใหญ่หลวงได้ อีกอันที่ยอดเยี่ยมคือการทดสอบ A/B วิธีที่ดีที่สุดคือการทดสอบองค์ประกอบต่างๆ แทนที่จะใช้การออกแบบที่แตกต่างกันสองแบบ คุณอาจลองทดสอบ: ข้อความ H1 ข้อความหัวข้อย่อย คำกระตุ้นการตัดสินใจ (รวมถึงข้อความและสไตล์) สี รูปภาพ ฯลฯ

เคล็ดลับโบนัส: ความยาวของแบบฟอร์ม

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

ตัวอย่างในโลกแห่งความเป็นจริง

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

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

สรุปแล้ว

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

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

— เจสมอนด์ อัลเลน และเจมส์ ชัดลีย์ สุดยอดการออกแบบ UX

บรรณานุกรม

https://unbounce.com/landing-pages/sweet-science-of-landing-page-practices-and-why-they-work/

https://www.goodreads.com/en/book/show/8675550-smashing-ux-design