Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 901.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62

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

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

มีหลายสิ่งที่อาจผิดพลาดได้

5 กฎสำหรับการสร้างแบบฟอร์มการติดต่อที่สมบูรณ์แบบ

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

อยากรู้ว่ากฎเหล่านี้คืออะไร? ดังนั้นอ่านต่อไป

กฎ # 1: เน้นที่การจัดตำแหน่ง

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

คุณอาจเห็นแบบฟอร์มนี้ในเว็บไซต์ BrainTraffic และคิดว่า: อืมมม… แต่มันไม่นานเกินไปที่จะกรอกหรือไม่?

กรอกข้อมูลใน form.png

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

หากคุณต้องการให้แบบฟอร์มติดต่อของคุณตรงตามมาตรฐานการจัดตำแหน่งนี่คือสิ่งที่คุณต้องทำ:

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

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

กฎ 2: รวมฟิลด์ที่เกี่ยวข้องทั้งหมด

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

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

ตัวอย่างของแบบฟอร์มการติดต่อ court.png

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

กฎ # 3: ลดความซับซ้อนของเขตข้อมูล

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

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

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

นี่คือเทคนิคที่คุณควรรู้:

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

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

ฟอร์แมตฟิลด์ html.png

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

กฎ # 4: ออกทั้งหมด

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

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

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

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

รูปแบบ wordpress.png ข้อผิดพลาด

กฎ # 5: อย่าซ่อนคำแนะนำ

ข้อความของบอร์ดในแบบฟอร์มการติดต่อมีลักษณะดังนี้:

field with tips.png

ดูว่า Target วางป้ายในฟิลด์อย่างไร? ในรูปแบบการติดต่อบางรูปแบบป้าย / สัญลักษณ์เหล่านี้จะหายไปเมื่อผู้ใช้คลิกที่ฟิลด์ เป้าหมายจัดการสิ่งนี้แตกต่างกันเล็กน้อยและย้ายป้ายกำกับไปที่ด้านบนของช่องฟิลด์ (ดู "ที่อยู่อีเมล")

ไม่ว่าจะจัดการกับสิ่งนี้อย่างไรผู้เชี่ยวชาญด้านการใช้งานเช่นเดียวกับกลุ่ม Nielsen Norman, จะบอกคุณว่านี่เป็นการออกแบบที่ไม่ดีเพราะ:

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

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

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

16 หุ้น
หุ้น8
ทวีต1
Enregistrer7