UX ในแบบฟอร์มการติดต่อ: สิ่งสำคัญในการเปลี่ยนลูกค้าเป้าหมายให้กลายเป็น Conversion

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

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

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

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

ตกลงที่จะวางแบบฟอร์มในสองคอลัมน์หรือไม่?

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

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

ควรติดฉลากไว้ที่ใด

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

การวางฉลากไว้เหนือฟิลด์

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

ให้เหตุผลฉลากซ้าย

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

การวางป้ายกำกับภายในฟิลด์ (ป้ายกำกับที่จัดชิดขอบในฟิลด์)

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

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

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

เราสามารถใช้ Placeholder Text แทน Label ได้หรือไม่?

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

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

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

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

จะลดภาระทางปัญญาของแบบฟอร์มได้อย่างไร?

ดูระยะห่าง

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

โฟกัสอัตโนมัติช่องป้อนข้อมูลแรก

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

อย่าใช้ตัวพิมพ์ใหญ่

ป้ายที่เขียนด้วยอักษรตัวพิมพ์ใหญ่ โดยเฉพาะในรูปแบบที่มีช่องสามถึงสี่ช่อง ตัวอักษรตัวพิมพ์ใหญ่ทั้งหมดอ่านยาก พวกเขายังทำท่าตะโกน

ปุ่มถือว่าเป็นส่วนหนึ่งของ UX ของแบบฟอร์มหรือไม่

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

ปุ่มควรอธิบายการดำเนินการที่ต้องทำ

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

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

แยกการกระทำหลักจากการกระทำรอง

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

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

ปุ่มเน้น

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

เป็นไปได้ไหมที่จะทำให้กระบวนการกรอกแบบฟอร์มง่ายขึ้น?

เพิ่มป้อนอัตโนมัติ

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

อย่าลืมเกี่ยวกับการป้อนข้อมูลแบบสวมหน้ากาก

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

มีความคิดสร้างสรรค์

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

หลีกเลี่ยงการเลือกแบบเลื่อนลงด้วยตัวเลือกเพียงสองหรือสามตัวเลือก

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

ตรวจสอบแบบฟอร์ม

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

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

เพิ่มความสะดวกเพื่อป้องกันข้อผิดพลาดทั่วไปในช่องรหัสผ่าน

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

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

ให้ผู้ใช้อนุญาตผ่านโซเชียลมีเดีย

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

ตำแหน่งของผู้ใช้ส่งผลต่อ UX ของแบบฟอร์มหรือไม่

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

นี่คือสิ่งที่ควรคำนึงถึง:

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

บทสรุป

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