แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบฟอร์มมือถือ

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

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

อะไรทำให้ฟอร์มมีประสิทธิภาพ

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

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

ส่วนประกอบของแบบฟอร์ม

รูปแบบทั่วไปมีห้าองค์ประกอบต่อไปนี้:

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

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

ช่องใส่

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

ลดจำนวนฟิลด์ทั้งหมดให้น้อยที่สุด

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

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

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

แยกแยะฟิลด์ที่ไม่บังคับทั้งหมดอย่างชัดเจน

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

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

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

ขนาดช่องตามลำดับ

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

เสนอการโฟกัสภาคสนาม

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

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

อย่าขอให้ผู้ใช้กรอกที่อยู่อีเมลซ้ำ

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

ระบุตัวเลือก "แสดงรหัสผ่าน"

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

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

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

อย่าแบ่งช่องข้อมูล

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

หลีกเลี่ยงเมนูแบบเลื่อนลง

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

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

ใช้ตัวยึดตำแหน่งและอินพุตที่ปิดบัง

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

ข้อความตัวยึด

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

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

อินพุตที่ปิดบัง

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

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

จัดเตรียมแป้นพิมพ์ที่ตรงกัน

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

ตั้งค่าประเภทอินพุต HTML เพื่อแสดงปุ่มกดที่ถูกต้อง อินพุตเจ็ดประเภทเกี่ยวข้องกับการออกแบบแบบฟอร์ม:

• input type="text" แสดงแป้นพิมพ์ปกติของอุปกรณ์มือถือ
• input type="email" จะแสดงแป้นพิมพ์ปกติและ '@' และ '.com'
• input type="tel" แสดงแป้นตัวเลข 0 ถึง 9
• input type="number" จะแสดงแป้นพิมพ์พร้อมตัวเลขและสัญลักษณ์
• input type="date" แสดงตัวเลือกวันที่ของอุปกรณ์มือถือ
• input type="datetime" จะแสดงตัวเลือกวันที่และเวลาของอุปกรณ์มือถือ
• input type="month" จะแสดงตัวเลือกเดือนและปีของอุปกรณ์เคลื่อนที่

ใช้ตัวเลื่อนเมื่อขอช่วงเฉพาะ

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

อธิบายให้ชัดเจนว่าทำไมคุณถึงขอข้อมูลที่ละเอียดอ่อน

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

ระวังด้วยค่าเริ่มต้นคงที่

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

ปกป้องข้อมูลผู้ใช้

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

ดำเนินการอัตโนมัติ

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

ต่อไปนี้คือสิ่งที่คุณสามารถทำได้เพื่อให้บรรลุเป้าหมายนี้:

เติมข้อความอัตโนมัติ

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

ตัวพิมพ์ใหญ่อัตโนมัติ

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

แก้ไขอัตโนมัติ

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

กรอกรายละเอียดส่วนบุคคลโดยอัตโนมัติ

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

ใช้คุณสมบัติดั้งเดิมของอุปกรณ์มือถือเพื่อทำให้การป้อนข้อมูลง่ายขึ้น

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

ด้านล่างนี้เป็นเพียงเคล็ดลับเล็กๆ น้อยๆ ในการใช้เซ็นเซอร์และฮาร์ดแวร์ของอุปกรณ์

บริการตำแหน่ง

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

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

การอนุญาตไบโอเมตริกซ์

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

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

กล้อง

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

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

เสียง

อุปกรณ์ควบคุมด้วยเสียง เช่น Apple HomePod, Google Home และ Amazon Echo กำลังรุกล้ำเข้าสู่ตลาดอย่างแข็งขัน จำนวนผู้ที่ชอบใช้เสียงในการดำเนินการทั่วไปเพิ่มขึ้นอย่างมาก จากข้อมูลของ ComScore 50% ของการค้นหาทั้งหมดจะเป็นการค้นหาด้วยเสียงภายในปี 2020

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

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

ป้ายชื่อสนาม

เขียนฉลากที่ชัดเจนและรัดกุม

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

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

วางฉลากและอินพุตไว้ใกล้กัน

วางป้ายกำกับแต่ละป้ายไว้ใกล้กับช่องป้อนข้อมูล เพราะดวงตาจะรับรู้ด้วยสายตาว่าผูกติดกัน

อย่าใช้ข้อความตัวแทนที่หายไปเป็นป้ายกำกับ

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

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

ป้ายแนวด้านบน

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

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

กรณีประโยคเทียบกับ กรณีชื่อเรื่อง

มีสองวิธีทั่วไปในการใช้อักษรตัวพิมพ์ใหญ่:

• หัวเรื่อง: ใช้ตัวพิมพ์ใหญ่ทุกคำ “นี่คือชื่อเรื่อง”
• กรณีประโยค: ใช้อักษรตัวพิมพ์ใหญ่ในคำแรก “นี่คือกรณีของประโยค”

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

หลีกเลี่ยงการใช้ตัวพิมพ์ใหญ่สำหรับฉลาก

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

เค้าโครง

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

ใช้เค้าโครงคอลัมน์เดียว

การศึกษาโดยสถาบัน CXL พบว่าแบบฟอร์มคอลัมน์เดียวสามารถกรอกได้เร็วกว่าแบบฟอร์มหลายคอลัมน์ ในการศึกษานั้น ผู้เข้าร่วมการทดสอบสามารถกรอกแบบฟอร์มคอลัมน์เดียวได้เร็วกว่าแบบฟอร์มหลายคอลัมน์โดยเฉลี่ย 15.4 วินาที

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

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

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

สร้างกระแสด้วยคำถามของคุณ

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

เลื่อนคำถามเชิงลึกไปจนสุดทาง

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

จัดกลุ่มสาขาที่เกี่ยวข้องเข้าด้วยกัน

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

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

ทำให้แบบฟอร์มยาวดูเรียบง่ายขึ้น

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

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

มีสองเทคนิคในการทำเช่นนี้

การเปิดเผยข้อมูลแบบก้าวหน้า

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

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

การจัดเป็นกลุ่ม

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

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

ปุ่มการทำงาน

ปุ่มเป็นองค์ประกอบแบบโต้ตอบที่นำผู้ใช้ให้ดำเนินการ

ทำให้ปุ่มการทำงานเป็นคำอธิบาย

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

อย่าใช้ปุ่มล้างหรือรีเซ็ต

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

ใช้รูปแบบที่แตกต่างกันสำหรับปุ่มหลักและรอง

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

ออกแบบเป้าหมายการสัมผัสที่เป็นมิตรกับนิ้ว

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

ภาพด้านล่างแสดงว่าความกว้างของนิ้วผู้ใหญ่โดยเฉลี่ยอยู่ที่ประมาณ 11 มม.

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

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

ปิดการใช้งานปุ่มหลังจาก Tap

การดำเนินการกับแบบฟอร์มมักต้องใช้เวลาในการประมวลผล ตัวอย่างเช่น อาจต้องมีการคำนวณข้อมูลหลังจากส่ง It's essential not only to provide feedback when an action is in progress, but also to disable the submit button to prevent users from accidentally tapping the button again. This is especially important for e-commerce websites and apps. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

Assistance And Support

Provide Success State

Upon successful completion of a form, it's critical to notify users about that. It's possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Errors And Validation

Users will make mistakes. It's inevitable. It's essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it's still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you're a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it's usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it's better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today's date or a date in the future. Such a selector would force users to pick a date range that fits.

Don't Make Data Validation Rules Too Strict

While there might be cases where it's essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It's very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state's abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it's the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

• Never blame the user.
  The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You've entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
• Avoid vague or general error messages.
  Messages like “Something went wrong. Please, try again later” don't say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
• Make error messages human-readable.
  Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.

Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.

การวางตำแหน่งข้อความแสดงข้อผิดพลาดแบบอินไลน์จะดีกว่ามาก อันดับแรก ตำแหน่งนี้สอดคล้องกับขั้นตอนการอ่านจากบนลงล่างตามธรรมชาติของผู้ใช้ ประการที่สอง ข้อผิดพลาดจะปรากฏในบริบทของการป้อนข้อมูลของผู้ใช้

ใช้การตรวจสอบแบบไดนามิก

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

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

• อัตราความสำเร็จเพิ่มขึ้น 22%
• ข้อผิดพลาดลดลง 22%
• คะแนนความพึงพอใจเพิ่มขึ้น 31%
• ลดลง 42% ในเวลาที่เสร็จสิ้น
• จำนวนการตรึงตาลดลง 47%

แต่การตรวจสอบความถูกต้องแบบอินไลน์ควรใช้อย่างระมัดระวัง:

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

การช่วยสำหรับการเข้าถึง

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

ตรวจสอบให้แน่ใจว่าแบบฟอร์มมีความคมชัดที่เหมาะสม

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

• ข้อความขนาดเล็กควรมีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 เทียบกับพื้นหลัง
• ข้อความขนาดใหญ่ (ที่ตัวหนา 14 จุด ปกติ 18 จุดขึ้นไป) ควรมีอัตราส่วนคอนทราสต์อย่างน้อย 3:1 เทียบกับพื้นหลัง

การวัดคอนทราสต์ของสีอาจดูล้นหลาม โชคดีที่เครื่องมือบางอย่างทำให้กระบวนการนี้ง่ายขึ้น หนึ่งในนั้นคือ Web AIM Color Contrast Checker ซึ่งช่วยให้นักออกแบบสามารถวัดระดับคอนทราสต์ได้

อย่าพึ่งใช้สีเพียงอย่างเดียวในการสื่อสารสถานะ

ตาบอดสี (หรือการมองเห็นสีบกพร่อง) ส่งผลกระทบต่อผู้ชายประมาณ 1 ใน 12 คน (8%) และผู้หญิง 1 ใน 200 คนในโลก แม้ว่าตาบอดสีจะมีหลายประเภท แต่ที่พบบ่อยที่สุดคือ protanomaly หรือความไวต่อแสงสีแดงลดลง และ deuteranomaly หรือความไวต่อแสงสีเขียวลดลง เมื่อแสดงข้อผิดพลาดในการตรวจสอบความถูกต้องหรือข้อความแสดงความสำเร็จ อย่าใช้สีเพียงอย่างเดียวในการสื่อสารสถานะ (เช่น โดยทำให้ฟิลด์ป้อนข้อมูลเป็นสีเขียวหรือสีแดง) ตามแนวทางของ W3C ไม่ควรใช้สีเป็นสื่อทางภาพเพียงอย่างเดียวในการถ่ายทอดข้อมูล ระบุการกระทำ กระตุ้นการตอบสนอง หรือสร้างความแตกต่างให้กับองค์ประกอบภาพ นักออกแบบควรใช้สีเพื่อเน้นหรือเสริมสิ่งที่มองเห็นได้อยู่แล้ว สนับสนุนคนตาบอดสีโดยให้สัญญาณภาพเพิ่มเติมที่ช่วยให้พวกเขาเข้าใจอินเทอร์เฟซผู้ใช้

อนุญาตให้ผู้ใช้ควบคุมขนาดตัวอักษร

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

ทดสอบการตัดสินใจออกแบบของคุณ

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

บทสรุป

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

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