คู่มือเริ่มต้นเพื่อแปลงผู้ใช้มือถือ

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

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

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

สารบัญ

การออกแบบฟอร์มมือถือกับเดสก์ท็อป

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

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

เหตุใดการออกแบบฟอร์มมือถือจึงมีความสำคัญ

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

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

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

เหตุใดการออกแบบฟอร์มมือถือจึงควรแตกต่างจากการออกแบบเดสก์ท็อป

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

“และแน่นอนว่ารวมถึงแบบฟอร์มต่างๆ ด้วย โดยเฉพาะอย่างยิ่งเมื่อรู้สึกว่าคุณต้องกรอกแบบฟอร์มอยู่ตลอดเวลาขณะที่ใช้มือถือ”

โดยเฉพาะอย่างยิ่ง ให้นึกถึงความแตกต่างของจอแสดงผลหรือขนาดหน้าจอระหว่างอุปกรณ์พกพา เช่น Apple iPhone ซึ่งโดยทั่วไปจะมีขนาดตั้งแต่ 4.7″ ถึง 6.7″; และแล็ปท็อปหรือเดสก์ท็อป Mac ซึ่งโดยทั่วไปจะมีขนาดตั้งแต่ 13” ถึง 24” ถือได้ว่ารูปแบบที่เหมาะกับหน้าจอ iPhone จะไม่พอดีกับหน้าจอเดสก์ท็อปอย่างสมบูรณ์

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

การออกแบบเว็บที่ตอบสนองคืออะไร?

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

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

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

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

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

การออกแบบแบบฟอร์มมือถือ: 11 หลักเกณฑ์ UX

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

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

1. ลดจำนวนฟิลด์แบบฟอร์มให้น้อยที่สุด

เคยได้ยินคำพูดที่ว่า “น้อยแต่มาก”? นั่นคือสิ่งที่คุณควรคิดในขณะที่สร้างแบบฟอร์มมือถือของคุณ

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

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

ที่มาของภาพ

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

2. ป้อนข้อมูลอัตโนมัติเมื่อทำได้

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

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

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

ในตัวอย่างด้านล่าง ผู้ใช้สามารถกรอกข้อมูลอัตโนมัติได้ง่ายๆ โดยคลิกที่ป๊อปอัปขนาดเล็กที่ปรากฏขึ้น

ที่มาของภาพ

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

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

ที่มาของภาพ

เค้าโครงแบบฟอร์มคอลัมน์เดียวคือ:

ก. อ่านง่ายขึ้น

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

ข. น่ากลัวน้อยลง

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

ค. เสร็จเร็วขึ้น

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

ดูแบบฟอร์มลงทะเบียนบนเว็บไซต์ HubSpot เมื่อดูจากเดสก์ท็อปหรือแล็ปท็อป

ที่มาของภาพ

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

ที่มาของภาพ

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

4. ความสม่ำเสมอมีความสำคัญ (และรูปร่างหน้าตาก็เช่นกัน)

คุณจะปิดโฟลเดอร์หรือแท็บที่เปิดอยู่บนแล็ปท็อปของคุณได้อย่างไร?

โดยคลิกปุ่ม 'x' ที่มุมบนขวา

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

อาจจะสับสนหรือหงุดหงิด คุณอาจใช้เวลาหนึ่งหรือสองนาทีในการหาวิธีปิดแอปพลิเคชัน

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

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

ต่อไปนี้เป็นเคล็ดลับบางประการเพื่อให้แน่ใจว่าจะได้รับประสบการณ์ที่สอดคล้องกัน:

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

ที่มาของภาพ

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

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

5. ระลึกถึงประสบการณ์การสัมผัส

ลองนึกถึงวิธีที่คุณถือโทรศัพท์ขณะส่งข้อความ

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

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

ต่อไปนี้เป็นคำแนะนำที่ควรทราบ:

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

ที่มาของภาพ

6. ใช้ประโยชน์จากข้อจำกัดในการป้อนข้อมูล

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

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

ที่มาของภาพ

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

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

นี่เป็นอีกตัวอย่างหนึ่งของข้อจำกัดอินพุต

ที่มาของภาพ

7. สร้างปุ่มการดำเนินการที่ชัดเจน

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

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

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

ที่มาของภาพ

8. จัดหาเครื่องสแกนบัตรสำหรับชำระเงิน

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

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

ที่มาของภาพ

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

9. อธิบายความต้องการข้อมูลเฉพาะ

ขณะกรอกใบสมัครทางอีเมลหรือแบบฟอร์มการลงทะเบียน คุณเคยถูกขอให้ระบุข้อมูลส่วนบุคคลที่ไม่เกี่ยวข้องกับแบบฟอร์มการสมัครหรือไม่

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

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

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

ที่มาของภาพ

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

10. รวบรวมการตรวจสอบและข้อเสนอแนะ

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

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

ที่มาของภาพ

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

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

ที่มาของภาพ

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

ที่มาของภาพ

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

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

ต่อไปนี้คือตัวอย่างหน้าความสำเร็จบน HubSpot ที่ปรากฏขึ้นหลังจากที่ผู้ใช้ลงชื่อสมัครใช้เพื่อรับ Google Ads Kit ฟรี

ที่มาของภาพ

11. ทำให้แบบฟอร์มสามารถเข้าถึงได้

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

ต่อไปนี้เป็นคำแนะนำเฉพาะสำหรับการสร้างแบบฟอร์มที่สามารถเข้าถึงได้จาก World Wide Web Consortium Web Accessibility Initiative, WebAIM และ The A11Y Project Checklist)

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

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

กลับไปหาคุณ

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

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

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

หมายเหตุบรรณาธิการ: โพสต์นี้เผยแพร่ครั้งแรกในเดือนธันวาคม 2018 และได้รับการอัปเดตเพื่อความครอบคลุม