ออกแบบแบบฟอร์มที่ดีขึ้นด้วยเคล็ดลับเหล่านี้เพื่อทำให้แบบฟอร์มเป็นมิตรกับ UX

เผยแพร่แล้ว: 2018-10-23

ต้องการรวบรวมข้อมูลโดยไม่ทำให้ผู้ใช้ของคุณเบื่อใช่ไหม ออกแบบฟอร์มให้ดีขึ้น!

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

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

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

กำลังวิ่ง? บุ๊กมาร์กบทความนี้ และดูสรุป 2 นาทีนี้ หากคุณต้องการภาพรวมโดยย่อ:

ออกแบบแบบฟอร์มที่ดีขึ้นด้วยคำแนะนำที่มีประโยชน์เหล่านี้

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

  1. ทำให้แบบฟอร์มสั้นและเรียบง่าย
  2. ให้ส่วนต่างๆชิดกัน
  3. หนึ่งคอลัมน์เทียบกับหลายคอลัมน์
  4. การแยกส่วนแบบฟอร์มสำหรับการตอบแบบค่อยเป็นค่อยไป
  5. วางคำแนะนำเครื่องมือ/ข้อความช่วยเหลือและแนะนำผู้ใช้ของคุณ
  6. ข้อจำกัดสำหรับแต่ละฟิลด์
  7. ตั้งชื่อหัวข้อที่สร้างแรงบันดาลใจให้แบบฟอร์มของคุณ
  8. ช่องป้อนข้อมูลที่มีสัดส่วนดี
  9. คำอธิบาย CTA
  10. ระบุเหตุผลที่คุณต้องการข้อมูลเฉพาะ
  11. ป้อนอัตโนมัติของเบราว์เซอร์
  12. จำเป็นต้องตรวจสอบแบบฟอร์ม
  13. ทำให้มันสนุก
  14. ตั้งโฟกัสอัตโนมัติ
  15. อย่าทำให้ผู้ใช้ของคุณหวาดกลัว

ทำให้แบบฟอร์มสั้นและเรียบง่าย

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

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

ทำให้แบบฟอร์มของคุณสั้นและเรียบง่าย

โดยการปฏิบัติตามหลักปฏิบัตินี้ คุณจะมั่นใจได้ว่า:

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

เคล็ดลับสำหรับมือโปร: รวมเฉพาะฟิลด์ที่สำคัญที่สุดเท่านั้น

กลับไปด้านบน ️

ให้ส่วนต่างๆชิดกัน

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

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

ออกแบบรูปแบบที่ดีกว่า wp แบบฟอร์มคล่องแคล่ว wpmanageninja

อย่างไรก็ตาม ด้วยการจัดตำแหน่งที่เหมาะสม ผลลัพธ์ต่อไปนี้จะรับประกัน:

  • ฟอร์มจะดูดีขึ้น
  • ผู้ใช้จะได้รับประสบการณ์ที่มีเสน่ห์

เคล็ดลับสำหรับมือโปร: จัดป้ายกำกับชิดซ้าย

กลับไปด้านบน ️

หนึ่งคอลัมน์เทียบกับหลายคอลัมน์

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

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

หนึ่งคอลัมน์เทียบกับหลายคอลัมน์

ประโยชน์สองประการที่กล่าวถึงด้านล่าง:

  • ผู้ตอบแบบสอบถามมีมุมมองที่ง่ายและชัดเจนของแบบฟอร์ม
  • การเลื่อนที่ปราศจากสิ่งรบกวน

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

กลับไปด้านบน ️

การแยกส่วนแบบฟอร์มสำหรับการตอบแบบค่อยเป็นค่อยไป

ก่อนจะพูดถึงประเด็นนี้ เรามาพูดถึงแนวคิดนอกประเด็นกันก่อนดีกว่า คุณคิดว่าหมายเลขโทรศัพท์รูปแบบใดต่อไปนี้ที่จำง่ายกว่า +18067442444 หรือ +1 806-744-2444 ฉันเกือบจะแน่ใจว่าคุณจะไปหาคนที่สอง

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

ออกแบบรูปแบบที่ดีกว่า wp แบบฟอร์มคล่องแคล่ว wpmanageninja

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

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

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

ออกแบบรูปแบบที่ดีกว่า wp แบบฟอร์มคล่องแคล่ว wpmanageninja

ดังนั้นรูปแบบจะมีประโยชน์มากขึ้นโดยการจัดกลุ่มอย่างไร:

  • ทำให้ผู้ใช้รู้สึกก้าวหน้าโดยไม่รู้สึกสับสนและต้องผ่านกระบวนการที่ยาวนาน
  • มันทำให้รู้สึกดีขึ้นโดยการรวมกลุ่มตรรกะ

เคล็ดลับสำหรับมือโปร: เรียงลำดับจากง่ายไปยาก ใช้ข้อมูลพื้นฐานก่อน

กลับไปด้านบน ️

วางคำแนะนำเครื่องมือ/ข้อความช่วยเหลือและแนะนำผู้ใช้ของคุณ

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

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

การตรวจสอบแบบฟอร์มอินไลน์มีประโยชน์สองวิธี:

  • บอกทันทีว่าทำอะไรผิดพลาดหรือเปล่า
  • จะช่วยประหยัดเวลาและความพยายาม

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

กลับไปด้านบน ️

ข้อจำกัดสำหรับการป้อนข้อมูลภาคสนาม

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

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

ข้อจำกัดในการป้อนข้อมูล
  • ช่วยผู้ใช้ในการรวมข้อมูลที่ถูกต้อง
  • ข้อจำกัดหมายถึงการมอบอำนาจให้ผู้ใช้

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

กลับไปด้านบน ️

ตั้งชื่อหัวข้อที่สร้างแรงบันดาลใจให้แบบฟอร์มของคุณ

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

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

ออกแบบรูปแบบที่ดีกว่า wp แบบฟอร์มคล่องแคล่ว wpmanageninja

การระบุชื่อที่ถูกต้องเป็นการแจ้งให้ผู้ใช้ทราบ:

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

เคล็ดลับสำหรับมือโปร: แทนที่ “ลงทะเบียน” ด้วยข้อความที่เข้าใจง่ายกว่า เช่น “สมัครและรับส่วนลด 20%”

กลับไปด้านบน ️

ช่องป้อนข้อมูลที่มีสัดส่วนดี

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

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

ช่องป้อนข้อมูลที่กระจายอย่างดี

หากเรากล่าวถึงประโยชน์ของแนวปฏิบัติที่ดีที่สุดนี้โดยสังเขป

  • ผู้ใช้จะรู้ว่าต้องเขียนเท่าไหร่
  • วิธีสร้างมินิมอลให้ดูสะอาดตา ไม่เปลืองพื้นที่

เคล็ดลับสำหรับมือโปร: รับความช่วยเหลือจากนักออกแบบ UI เพื่อดูมุมมองที่ 3 หากฟอร์มของคุณดูดี

กลับไปด้านบน ️

คำอธิบาย CTA

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

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

คำกระตุ้นการตัดสินใจ

CTA ที่มีข้อความที่ชัดเจนมีประโยชน์หลายประการ

  • จะช่วยให้การดำเนินการมีประสิทธิภาพมากขึ้น
  • สามารถเข้าใจสิ่งที่พวกเขาทำได้อย่างง่ายดาย

เคล็ดลับสำหรับมือโปร: ตรวจสอบให้แน่ใจว่าปุ่มเดียวเป็นปุ่มที่โดดเด่นหากมีมากกว่าหนึ่งปุ่ม

กลับไปด้านบน ️

ทำไมคุณถึงต้องการข้อมูลเฉพาะ

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

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

การส่งข้อความช่วยเหลือจะเป็นการแจ้งให้ผู้ใช้ทราบ:

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

เคล็ดลับสำหรับมือโปร: ใช้คำแนะนำเครื่องมือเพื่อให้ผู้ใช้รับการแจ้งเตือนได้ง่ายๆ โดยวางเมาส์ไว้

กลับไปด้านบน ️

ป้อนอัตโนมัติของเบราว์เซอร์

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

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

ทำไมถึงมีประโยชน์?

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

เคล็ดลับสำหรับมือโปร: ออกแบบแบบฟอร์มด้วยชื่อช่องทั่วไป หลีกเลี่ยงเงื่อนไขที่ซับซ้อน

กลับไปด้านบน ️

จำเป็นต้องตรวจสอบแบบฟอร์ม

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

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

และประเด็นสำคัญสามารถกล่าวถึงได้ดังนี้:

  • ผู้ใช้จะไม่ถูกครอบงำ
  • การตรวจสอบความถูกต้องช่วยให้มั่นใจว่าข้อมูลที่ให้มานั้นถูกต้อง

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

กลับไปด้านบน ️

ทำให้มันสนุก

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

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

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

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

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

กลับไปด้านบน ️

ตั้งโฟกัสอัตโนมัติ

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

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

ออกแบบรูปแบบที่ดีกว่า wp แบบฟอร์มคล่องแคล่ว wpmanageninja

และข้อดีที่สืบทอดมาคือ:

  • ผู้ตอบไม่ต้องมองหาจุดเริ่มต้น
  • คุณสามารถบันทึกผู้ใช้จากการคลิกเพิ่มเติมและการเก็งกำไรซ้ำซ้อนมากมาย

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

กลับไปด้านบน ️

อย่าทำให้ผู้ใช้ของคุณหวาดกลัว

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

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

ถ้าฉันพูดถึงผลลัพธ์ที่สำคัญสองประการของการปฏิบัตินี้ พวกเขาจะเป็น:

  • ลูกค้าจะได้รู้ว่าไม่มีอะไรต้องกังวล ไม่มีค่าใช้จ่ายแอบแฝงหรือไม่มีธุรกิจยุ่งยาก
  • เวลาในการกรอกแบบฟอร์มจะลดลงและการแปลงจะถูกขยาย

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

กลับไปด้านบน ️

จนกว่าจะถึงครั้งต่อไป

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

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

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

สุดท้าย ลิงก์ต่อไปนี้จะช่วยคุณสร้างแบบฟอร์มด้วยปลั๊กอิน WordPress

  • อ่านเอกสารสำหรับ WP Fluent Form ซึ่งเป็นตัวสร้างฟอร์ม WordPress ที่ใช้งานง่าย
  • คุณสมบัติของ WP Fluent Form ที่ทำให้โดดเด่น

สมัครสมาชิกช่อง YouTube ของเราเพื่อรับคำแนะนำและเคล็ดลับเกี่ยวกับ WordPress ติดตามเราบน Twitter และ Facebook


1 NT BG . ใหม่

WP Fluent Forms Pro

ลองใช้ Fluent Forms วันนี้และดูด้วยตัวคุณเอง!

ดาวน์โหลดเดี๋ยวนี้