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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

field with tips.png

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

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

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

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

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