17 องค์ประกอบสำคัญสำหรับแบบฟอร์มหน้า Landing Page ที่มีการแปลงสูง [พิสูจน์แล้ว]

แบบฟอร์มหน้า Landing Page สามารถส่งผลกระทบต่อผลกำไรของคุณได้มากน้อยเพียงใด?

ลองดูที่ Expedia: ย้อนกลับไปในปี 2010 Expedia ค้นพบว่าฟิลด์แบบฟอร์มทางเลือกชื่อ “บริษัท” มีราคา 12 ล้าน ดอลลาร์ต่อปี

อะไร?!

ได้.

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

หลังจากที่พวกเขาลบฟิลด์แบบฟอร์มพิเศษ ยอดขายก็พุ่งสูงขึ้นในชั่วข้ามคืน

เย้ๆ

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

ซึ่งเป็นหนึ่งในสาเหตุที่ฟอร์มหน้า Landing Page เป็นหนึ่งในองค์ประกอบที่มีการศึกษามากที่สุดในด้านการตลาดทั้งหมด

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

ทำให้ถูกต้องและคุณมีทองคำแปลง

หากเข้าใจผิด คุณอาจพบว่าตัวเองมีอาการตกเลือด เช่น Expedia

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

คำตอบสั้น ๆ : ใช่และไม่ใช่

ให้ฉันอธิบาย ...

มีแลนดิ้งเพจอยู่สองประเภท: เพจดักจับลูกค้าเป้าหมายและเพจคลิกผ่าน

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

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

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

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

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

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

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

Takeaway: ไม่ใช่ทุกหน้า Landing Page ที่มีแบบฟอร์ม แต่ในบางจุด ทุกเส้นทางสู่การแปลงจะต้องผ่านแบบฟอร์ม คุณไม่สามารถหลีกเลี่ยงได้ และอย่างน้อยที่สุด ทุกเว็บไซต์ต้องมีแบบฟอร์มการติดต่อ ดังนั้นจงฟัง!

เพื่อไม่ให้เป็นการเสียเวลา เรามาสำรวจองค์ประกอบ 17 ประการของการออกแบบแบบฟอร์มหน้า Landing Page ที่มี Conversion สูง (โดยไม่เรียงลำดับเฉพาะ):

1. เค้าโครงแบบฟอร์ม
2. เทคนิคการเบรดครัมบ์ (หลายขั้นตอน)
3. ตัวชี้วัดความก้าวหน้า
4. จำนวนช่อง
5. ป้ายชื่อสนาม
6. ข้อความตัวยึดตำแหน่ง
7. คลิกทริกเกอร์
8. ไมโครสำเนา
9. คำกระตุ้นการตัดสินใจ (CTA)
10. แบบฟอร์มป๊อปอัปเทียบกับการฝัง
11. ป้อนอัตโนมัติ
12. จัดรูปแบบอัตโนมัติ
13. หลักฐานทางสังคม
14. จำเป็นเทียบกับตัวเลือก
15. เป็นมิตรกับมือถือ
16. ตรรกะแบบมีเงื่อนไข
17. ปุ่มตัวเลือกเทียบกับดรอปดาวน์

เมื่อพูดถึงฟอร์ม คุณมีตัวเลือกเค้าโครงสามแบบ: คอลัมน์เดียว คอลัมน์คู่ หรือไฮบริด

แบบฟอร์มคอลัมน์เดียวคือแบบฟอร์มเชิงเส้นที่มีเขตข้อมูลฟอร์มที่จัดเป็นเส้นตรงจากบนลงล่าง ตัวอย่างเช่น แบบฟอร์มโอกาสในการขายจาก Hellosign มีเค้าโครงแบบคอลัมน์เดียว:

ในทางกลับกัน แบบฟอร์มสองคอลัมน์จะมีสองคอลัมน์ของเขตข้อมูลฟอร์มที่จัดเรียงเป็นแถวจากบนลงล่าง ตัวอย่างเช่น แบบฟอร์มโอกาสในการขายจาก Hubspot มีเค้าโครงแบบสองคอลัมน์:

และสุดท้าย แบบฟอร์มไฮบริดคือแบบฟอร์มที่มีทั้งคอลัมน์เดี่ยว และ คอลัมน์คู่ ตัวอย่างเช่น แบบฟอร์ม Oscar นี้มีเค้าโครงแบบไฮบริด:

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

ตัวอย่างเช่น Peep จาก CXL ได้ระบุไว้ในอดีตว่ารูปแบบคอลัมน์เดียวทำงานได้ดีกว่ารูปแบบคอลัมน์คู่ Ben Labay (นักออกแบบ UX และผู้อำนวยการฝ่ายการตลาดของ Speero) ได้ตีพิมพ์ผลการศึกษาที่ประกาศรูปแบบเชิงเส้นได้เร็วกว่าและดีกว่า

แต่ไม่ใช่ทุกคนที่เห็นด้วย

ตัวอย่างเช่น Hubspot นำรูปแบบคอลัมน์เดียวมาทดสอบ และพบว่ารูปแบบคอลัมน์คู่มีประสิทธิภาพเหนือกว่ารูปแบบคอลัมน์เดียวถึง 57%

ทำไม ช่องแบบฟอร์มเพิ่มเติม

แบบฟอร์ม Hubspot มี 13 ช่อง; เลย์เอาต์แบบคอลัมน์เดียวดูน่ากลัว มีแนวโน้มว่าเหตุใดรูปแบบคอลัมน์คู่ที่สั้นกว่าจึงถูกแปลงให้สูงขึ้น

Takeaway: เมื่อพูดถึงเลย์เอาต์ของฟอร์ม ให้พิจารณาจำนวนฟิลด์ของฟอร์มก่อนเลือกตัวเลือก

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

หากคุณมีช่องแบบฟอร์มมากกว่า 10 ช่อง เช่น Hubspot แบบฟอร์มสองคอลัมน์น่าจะทำงานได้ดีกว่า ในกรณีนี้ แบบฟอร์มสองคอลัมน์จะทำให้ความยาวของแบบฟอร์มสั้นลงและไม่ซับซ้อน

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

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

แบบฟอร์มหลายขั้นตอน (AKA เทคนิคเบรดครัมบ์) แบ่งแบบฟอร์มยาวๆ ออกเป็นหลายขั้นตอน โดยแต่ละขั้นตอนจะมีช่องแบบฟอร์มไม่เกิน 3-4 ช่อง (ควรให้อยู่ในคอลัมน์เดียว)

แต่นั่นไม่ใช่ทั้งหมด

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

ฮะ?

จิตวิทยาเชิงพฤติกรรมบอกเราว่าผู้คนชอบทำสิ่งที่เริ่มต้นให้เสร็จ ความมหัศจรรย์ของเทคนิคเบรดครัมบ์ทำให้พวกเขาเริ่มต้นด้วยการถามคำถามซอฟต์บอลก่อน

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

ผลลัพธ์? การแปลงเพิ่มเติม

มาดูข้อมูลกัน…

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

• CPA ลดลงจาก $800+ เป็น $35
• ปริมาณการแปลงเพิ่มขึ้นจาก 6 เป็น 135/เดือน
• อัตราการแปลงเพิ่มขึ้นจาก 1% เป็นเกือบ 20%

นี่คือแบบฟอร์ม:

และนี่คือผลลัพธ์:

เราทำเช่นเดียวกันกับลูกค้ารายอื่นและได้รับ Conversion เพิ่มขึ้น 74% และ CPA ลดลง 51%

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

ตัวอย่างเช่น การติดตามยานพาหนะ Lytx ใช้แบบฟอร์มหลายขั้นตอนในหน้า Landing Page:

และ ADP ใช้แบบฟอร์มหลายขั้นตอนในหน้า Landing Page:

Takeaway: อินสแตนซ์เดียวที่แบบฟอร์มหลายขั้นตอน ไม่ได้ แปลงสูงกว่าแบบฟอร์มขั้นตอนเดียวคือสำหรับข้อเสนอที่มีมูลค่าต่ำและมีราคาต่ำ เช่น คู่มือ สมุดปกขาว หรือ eBook สำหรับหน้า Landing Page มาตรฐานอื่นๆ ทุกหน้า (เช่น ขอการสาธิตหรือคำปรึกษาฟรี) แบบฟอร์มหลายขั้นตอนจะแปลงให้สูงกว่าแบบฟอร์มขั้นตอนเดียว

หากคุณเลือกใช้แบบฟอร์มแบบหลายขั้นตอน อย่าลืมตัวระบุความคืบหน้า (โดยเฉพาะแบบฟอร์มที่ยาวกว่า)

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

ตัวอย่างเช่น ADP ระบุความคืบหน้าโดยการนับแต่ละขั้นตอนของแบบฟอร์มและเน้นขั้นตอนปัจจุบันเป็นสีน้ำเงิน:

แถบความคืบหน้าอีกสองประเภทรวมถึงขั้นตอนเปอร์เซ็นต์ที่สมบูรณ์และขั้นตอนที่มีป้ายกำกับ (ไม่มีตัวเลข):

เปอร์เซ็นต์เสร็จสมบูรณ์

เหลือขั้นตอน (ไม่มีตัวเลข)

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

คำถามล้านดอลลาร์: ฉันควรรวมฟิลด์แบบฟอร์มกี่ฟิลด์ในแบบฟอร์มหน้า Landing Page ของฉัน

ตาม Hubspot แบบฟอร์มการสร้างลูกค้าเป้าหมายทั่วไปประกอบด้วยฟิลด์แบบฟอร์มห้าฟิลด์:

และตาม Hubspot อีกครั้ง ยิ่งฟอร์มยาว การแปลงยิ่งต่ำ:

ดูเหมือนตรรกะใช่ไหม

ไม่เร็วนัก

ใช่ เป็นความจริงที่ฟิลด์แบบฟอร์มที่สั้นกว่ามักจะนำไปสู่ ​​Conversion ที่สูงขึ้น—แต่ไม่เสมอไป

ตัวอย่างเช่น ในการทดสอบที่มีชื่อเสียงจาก Michael Aagaard (เดิมคือ Unbounce) เขาค้นพบว่าการนำช่องแบบฟอร์มสามช่องออก (จาก 9 เป็น 6) ช่วยลด Conversion ลง 14%

เกิดอะไรขึ้น ไมเคิลสรุปว่า สามสาขาที่เขากำจัดไปนั้นเป็นสามสาขาที่ผู้มีโอกาสเป็นลูกค้ามีส่วนร่วมมากที่สุด ดังนั้นเขาจึงเพิ่มกลับเข้าไป และอัปเดตสำเนาเพื่อจำกัดความเสียดทานแทน และพบว่า Conversion เพิ่มขึ้น 19% จากต้นฉบับ

ในอีกตัวอย่างหนึ่ง CXL ค้นพบว่า เพียงแค่ ขออีเมล Conversion ลดลง 13.56% เมื่อเทียบกับตอนที่ถามชื่อ สถานะ และประสบการณ์ในการขับขี่:

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

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

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

นอกจากนี้ แบบฟอร์มที่สั้นกว่าอาจเพิ่มการแปลงโดยการลดฟิลด์แบบฟอร์ม แต่ลดคุณภาพโอกาสในการขายในเวลาเดียวกัน ไม่มีบัวโน

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

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

สุดท้าย เราติดต่อ Oli Gardner ซีอีโอและผู้ก่อตั้ง Unbounce เพื่อรับข้อเสนอแนะเกี่ยวกับความยาวของแบบฟอร์ม นี่คือสิ่งที่เขาพูด:

“ฉันเริ่มต้นด้วยความคิดแบบเดียวกับที่คนส่วนใหญ่มี ว่าฟิลด์แบบฟอร์มที่น้อยกว่าจะทำงานได้ดีกว่า

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

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

แต่จงเลือกเขตข้อมูลเหล่านั้นอย่างระมัดระวัง มิฉะนั้น ความขัดแย้งจะสร้างข้อมูลเท็จ

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

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

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

ตัวอย่างเช่น ในแบบฟอร์มด้านล่าง ป้ายกำกับช่องสองช่องจะอ่านว่า "อีเมล" และ "รหัสผ่าน" (วางไว้ที่ด้านบนของช่องแบบฟอร์ม):

เมื่อพูดถึงการจัดวางป้ายกำกับ คุณมีสามตัวเลือกหลัก:

• ด้านบน (ชิดซ้าย)
• อินไลน์ (ชิดซ้าย)
• ด้านซ้ายของสนาม (จัดชิดขวา)

มาทบทวนกันทีละเรื่อง

ด้านบน (ชิดซ้าย)

ป้ายกำกับถูกวางไว้ เหนือ กล่องฟิลด์แบบฟอร์มและผลักไปทางซ้าย

ตัวอย่างเช่น แบบฟอร์มการสร้างบัญชี SEMRush ที่เราเพิ่งแสดง (ด้านบน) วางป้ายกำกับแบบฟอร์มที่ด้านบนของฟิลด์ โดยจัดชิดซ้าย

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

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

Inline หรือ "infield" (ชิดซ้าย)

ป้ายถูกวางไว้ ใน กล่องฟิลด์แบบฟอร์มและผลักไปทางซ้าย

ตัวอย่างเช่น แบบฟอร์ม Bob HR ด้านล่างจะวางป้ายกำกับฟิลด์ ไว้ใน กล่องฟิลด์:

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

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

ทำไม

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

ด้านซ้ายของสนาม (จัดชิดขวา)

ป้ายกำกับจะอยู่ ทางด้านซ้าย ของกล่องฟิลด์ (ด้านนอก)

แม้ว่าจะไม่มีประสิทธิภาพเท่ากับป้ายกำกับที่วางไว้บนช่องแบบฟอร์ม (เนื่องจากผู้เข้าชมต้องเลื่อนตาจากซ้ายไปขวา ขึ้นและลง) ป้ายกำกับที่วางไว้ทางด้านซ้ายของช่องแบบฟอร์มก็ต้องการภาระการรับรู้ที่จำกัดเช่นกัน

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

ไม่ว่าคุณจะเลือกตัวเลือกใด ให้คำนึงถึงสิ่งต่อไปนี้:

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

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

ตัวอย่างเช่น Oscar ใช้ข้อความตัวแทนภายในแต่ละฟิลด์ของฟอร์มการจับลูกค้าเป้าหมาย:

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

ทำไม มันเป็นภาระที่ไม่จำเป็นจริงๆ

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

จะทำอย่างไรแทน?

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

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

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

หรือตัวอย่างเก่าจาก ContentVerve พบว่าการสมัครรับจดหมายข่าวทางอีเมลเพิ่มขึ้น 87% โดยเพิ่มหัวข้อย่อยที่เกี่ยวข้องกับผลประโยชน์ลงในแบบฟอร์มการเลือกรับ:

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

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

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

แม้ว่าจะมีขนาดเล็ก แต่ไมโครสำเนาสามารถมีผลกระทบอย่างมากต่อการแปลงรูปแบบ

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

ไมโครสำเนาทั่วไปอีกประเภทหนึ่งประกอบด้วยข้อความแสดงข้อผิดพลาดดังตัวอย่างด้านล่าง:

ไมโครสำเนาแปลงหรือไม่ พนันได้เลย.

ตัวอย่างเช่น เนื่องจากค่าใช้จ่ายเป็นเหตุผล #1 ที่ผู้คนละทิ้งรถเข็น Yoast จึงเพิ่มวลี "จะไม่มีค่าใช้จ่ายเพิ่มเติม" ลงในแบบฟอร์มการชำระเงินและเพิ่ม Conversion ขึ้น 11.30%

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

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

ไม่มีแบบฟอร์มใดที่สมบูรณ์หากไม่มี CTA ที่น่าสนใจและน่าดึงดูดซึ่งกระตุ้นการดำเนินการ

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

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

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

ตัวอย่างเช่น Jarvis นำเสนอ CTA ที่ชัดเจน น่าสนใจ และเน้นการดำเนินการ ซึ่งคุณอดไม่ได้ที่จะคลิก:

สนใจเพิ่มเติม? เรามี 61 แนวคิดเพิ่มเติมสำหรับปุ่มตามค่า

ประการที่สอง การแปลงรูปแบบที่เพิ่มขึ้นนั้นเกี่ยวข้องกับสีของปุ่มน้อยกว่า และเกี่ยวข้องกับ คอนทรา สต์ของสีของปุ่มและพื้นหลังมากกว่า

ตัวอย่างเช่น ในกรณีศึกษานี้จากลูกค้าของเรา Darwin Homes การทดสอบ A/B ของปุ่ม CTA ช่วยลด CPA ลง 45% และเพิ่มอัตรา Conversion ได้ถึง 22%

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

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

เช่นเดียวกับปุ่มแบบฟอร์มของคุณ

แทนที่จะฝังแบบฟอร์มภายในหน้า Landing Page ให้ทดลองวางปุ่ม CTA แทน จากนั้นเปิดแบบฟอร์มในไลท์บ็อกซ์ป๊อปอัปหรือส่งการเข้าชมไปยังหน้า Conversion เมื่อคลิก

ในการศึกษาของ Aweber พวกเขาพบว่าการวางแบบฟอร์มไว้ด้านหลังปุ่มป๊อปอัป แทนที่จะฝังลงในหน้า Landing Page จะเพิ่ม Conversion ได้ถึง 1,375%

ในการศึกษาของ Hubspot พวกเขาพบว่าการแทนที่แบบฟอร์มด้วยปุ่ม CTA ที่นำไปสู่หน้าการเลือกเข้าร่วมโดยเฉพาะเพิ่มอัตรา Conversion ขึ้น 0.4% (จาก 2.4% เป็น 2.8%) นั่นอาจฟังดูไม่เยอะ แต่จากการเข้าชมนับพันครั้ง มีจำนวน Conversion เพิ่มขึ้นหลายร้อยครั้ง

ตัวอย่างเช่น ทั้ง Intercom และ AllHands (ด้านล่าง) วางแบบฟอร์มแลนดิ้งเพจไว้ด้านหลังปุ่มป๊อปอัป:

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

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

ตามที่ Google ระบุ การป้อนอัตโนมัติทำให้การกรอกแบบฟอร์มของคุณเร็วขึ้นถึง 30% ซึ่งเพิ่มการแปลงไปพร้อมกัน

Takeaway: ไม่มีใครชอบกรอกแบบฟอร์มบนเว็บ โดยเฉพาะบนอุปกรณ์เคลื่อนที่ ใช้การป้อนอัตโนมัติเพื่อลดแรงเสียดทานและเพิ่มการแปลง

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

เหมือนกัน.

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

ตัวอย่างเช่น ฟิลด์แบบฟอร์มนี้จะจัดรูปแบบค่าเงินดอลลาร์โดยอัตโนมัติเมื่อคุณเพิ่มตัวเลขมากขึ้น:

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

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

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

เหตุใดหลักฐานทางสังคมจึงมีความสำคัญ 66% ของลูกค้ากล่าวว่าการแสดงหลักฐานทางสังคมช่วยเพิ่มโอกาสในการซื้อ

ทำไมหลักฐานทางสังคมจึงทำงานได้ดี? เพราะเมื่อมีคนสงสัยเกี่ยวกับความมุ่งมั่นหรือความไม่แน่นอนเกี่ยวกับทางเลือก พวกเขามองหาแรงบันดาลใจจากคนที่เลือกแบบเดียวกันไปแล้ว และบ่อยครั้งที่พวกเขาเลือกสิ่งที่คนอื่นเลือก

หากคุณคิดว่าคุณต้องการเพียงหลักฐานทางสังคมในหน้า Landing Page จริงของคุณ ให้คิดใหม่

วางหลักฐานทางสังคม เช่น การให้ดาว คำรับรอง หรือโลโก้ลูกค้าใกล้หรือรอบๆ แบบฟอร์มของคุณเพื่อเตือนว่าพวกเขากำลังตัดสินใจถูกต้อง

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

ตัวอย่างเช่น จาร์วิสวางจำนวนลูกค้าและโลโก้ลูกค้าไว้ข้างแบบฟอร์มการสร้างบัญชี:

InvisionApp ยังมีการพิสูจน์ทางสังคมข้างๆ แบบฟอร์ม คราวนี้มาในรูปแบบของคำรับรองจากลูกค้ารายหนึ่งของพวกเขา (Uber):

Takeaway: Pepper หลักฐานทางสังคมรอบหรือใกล้แบบฟอร์มของคุณเพื่อเตือนผู้เยี่ยมชมว่าทำไมพวกเขาควรไปต่อ

ถ้าไม่จำเป็นต้องใช้ช่องแบบฟอร์ม ให้ถามตัวเองว่าจำเป็นจริงๆ หรือไม่ เริ่มจาก หากคุณไม่ทำเช่นนั้น ให้กำจัดฟิลด์ที่ไม่จำเป็นออกไปทั้งหมด

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

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

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

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

แบบฟอร์มที่ปรับให้เหมาะกับอุปกรณ์เคลื่อนที่มีลักษณะอย่างไร แล้วการแตะสี่ครั้งและการปัดเพื่อจองโรงแรมล่ะ?

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

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

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

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

• ข้อความที่ใหญ่กว่า
• ปุ่ม CTA ที่ใหญ่ขึ้น
• พื้นที่สีขาวมากขึ้นระหว่างฟิลด์และรอบ ๆ ปุ่ม (เพื่อให้สัมผัสได้ง่าย)
• ไม่มีดรอปดาวน์ ให้เลือกปุ่มตัวเลือกแทน (ดรอปดาวน์ใช้เวลานานที่สุดในการกรอกบนมือถือ)
• เลือกใช้แบบฟอร์มที่ฝังหรือหน้าแบบฟอร์มแยกต่างหากบนป๊อปอัป

Takeaway: เค้าโครงคอลัมน์เดียว หลายขั้นตอน แถบความคืบหน้า ป้อนอัตโนมัติ ป้ายชื่อฟิลด์... ทั้งหมดนี้ใช้ได้กับอุปกรณ์เคลื่อนที่เช่นกัน เฉพาะบนหน้าจอที่เล็กกว่าเท่านั้น

ตรรกะตามเงื่อนไขช่วยให้คุณปรับแต่งประสบการณ์แบบฟอร์มแบบไดนามิกตามคำตอบของผู้เข้าชม

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

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

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

ยิ่งผู้เข้าชมต้องกรอกแบบฟอร์มน้อยลงเท่าใด โอกาสที่ผู้เยี่ยมชมจะกรอกก็จะมากขึ้นเท่านั้น ระยะเวลา.

จากข้อมูลของ CXL หลังจากทำการทดสอบเพื่อดูว่าปุ่มตัวเลือกหรือดรอปดาวน์ง่ายต่อการกรอกหรือไม่ พวกเขาพบว่าผู้ตอบแบบสอบถามกรอกปุ่มตัวเลือกเร็วกว่าเมนูแบบเลื่อนลง 2.5 วินาที

เช่นเดียวกับปุ่มตัวเลือก ช่องทำเครื่องหมายยังง่ายต่อการกรอก

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

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

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

แม้จะมีหลักฐานจำนวนมากที่สนับสนุนองค์ประกอบดังกล่าวของแบบฟอร์มหน้า Landing Page ที่มี Conversion สูง คุณก็ยังควรทดสอบ A/B ด้วยตนเอง

เพื่อให้ชีวิตง่ายขึ้น การวิเคราะห์ก็ช่วยได้เช่นกัน

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

เครื่องมือวิเคราะห์แบบฟอร์มที่เราชื่นชอบ:

• MouseFlow
• ซูโกะ
• ฮอทจาร์
• MonsterInsights (ปลั๊กอิน WP)

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

และไม่ว่าคุณจะทำอะไร ให้เก็บฟิลด์ที่ไม่บังคับเหล่านั้นออกจากแบบฟอร์มของคุณ เว้นแต่ว่าคุณต้องการ จริงๆ (ดูจากคุณ Expedia)