8 หลักการออกแบบเบื้องหลังหน้า Landing Page ที่มีการแปลงสูง

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

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

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

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

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

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

ในโพสต์นี้ คุณจะค้นพบหลักการออกแบบแปดประการที่จะช่วยให้หน้า Landing Page ของคุณมีประสิทธิภาพมากขึ้น

ออกแบบเพื่อคน

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

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

• การวิเคราะห์ของ Google และ Facebook
• ค้นหาคีย์เวิร์ดของ Google อย่างตั้งใจ
• กำลังมองหาความคิดเห็นสาธารณะเกี่ยวกับ Reddit และ Quora
• การศึกษาโปรไฟล์โซเชียลมีเดียของผู้ใช้
• ดำเนินการสัมภาษณ์ส่วนตัว

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

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

ความสม่ำเสมอ

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

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

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

มินิมอล

หลักการออกแบบนี้ไม่เพียงมีประโยชน์เมื่อคุณสร้างงานศิลปะร่วมสมัยเท่านั้น นอกจากนี้ยังมีประโยชน์มากสำหรับการออกแบบแลนดิ้งเพจจากทุกสิ่ง

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

ตรวจสอบให้แน่ใจว่าไม่มีการรบกวนบนหน้า และผู้ใช้จะถูกนำตรงไปยังส่วน CTA

เว็บไซต์ NGO นี้มีน้อยที่สุดเท่าที่จะได้รับ เส้นตรงด้านบนจะเลื่อนลงมาเล็กน้อยเพื่อดูเพิ่มเติม

ที่มา: California Calling

แต่คุณไม่จำเป็นต้องใช้ศิลปะแบบมินิมอลลิสต์อย่างเต็มรูปแบบในหน้า Landing Page เช่น California NGO นี้ คุณสามารถรักษาจำนวนองค์ประกอบให้น้อยที่สุดเช่น Shopify

ที่มา: shopify

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

เบื้องหน้า

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

ใช้สีพื้นหลังและแบบอักษร ขนาดและรูปร่างของแบบอักษร และพื้นที่สีขาวเพื่อเบื้องหน้าองค์ประกอบที่สำคัญที่สุดในหน้าของคุณ

ตัวอย่างที่ง่ายที่สุดของโฟร์กราวด์คือการทำให้หัวข้อย่อยใหญ่ขึ้นและให้สีที่ต่างออกไป

การให้สีที่ตัดกันกับ CTA ที่สำคัญก็เป็นเรื่องธรรมดาเช่นกัน

จับความสนใจ

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

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

หน้า Landing Page ของ Airbnb นี้ประกอบด้วยสามสิ่งจากรายการ

ที่มา: Airbnb

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

กริดและการสื่อสารด้วยภาพสำหรับการเขียน UX

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

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

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

ที่มา: shopify

นี่คือตารางที่มีสองคอลัมน์จากหน้า Landing Page ของ Airbnb

ที่มา: Airbnb

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

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

นี่เป็นตัวอย่างที่เรียบง่ายและชัดเจนจาก NGO ของแคลิฟอร์เนีย

ที่มา: California Calling

แปลงได้อย่างง่ายดาย

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

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

หากไม่เป็นเช่นนั้น ให้เลือกตัวเลือกที่สองไว้เผื่อว่าผู้ใช้ยังไม่พร้อมที่จะทำ Conversion ในตอนนี้ ตัวเลือกไม่ควรอยู่ระหว่างใช่กับไม่ใช่ แต่ระหว่างใช่และใช่ แต่ในภายหลัง

การมีแชทบอทเป็น CTA สำรองของคุณก็เป็นความคิดที่ดีเช่นกัน

ศึกษาว่าผู้คนโต้ตอบกับการออกแบบอย่างไร

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

คุณทำอย่างนั้นได้อย่างไร? คุณสามารถเริ่มต้นด้วยการสำรวจว่าเว็บไซต์จะมีลักษณะอย่างไรจากมุมมองของลูกค้าของคุณ

ใช้เครื่องมือสำหรับนักพัฒนา Chrome หรือ Firefox เพื่อปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูว่าการออกแบบเปลี่ยนไปอย่างไรในหน้าจอขนาดต่างๆ เว็บไซต์ของคุณกำหนดเป้าหมายลูกค้าจากสถานที่ต่างๆ ทั่วโลกหรือไม่? เพื่อการทดสอบที่ดีขึ้น คุณควรใช้ VPN เพิ่มเติม ตัวอย่างเช่น มี VPN มากมายสำหรับ Mac, Android และอื่นๆ นี้จะช่วยให้คุณไม่สูญเสียลูกค้า

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

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

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

ความคิดสุดท้าย

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

รูปภาพเด่นผ่าน PureSolution / Shutterstock.com