ทำไมผู้ใช้ไม่ค่อยสนใจ หรือกรอกข้อมูลในเว็บไซต์?

Publish Published: 25/04/2019 Category Category: User Experience

เทคนิคการออกแบบช่องกรอกข้อมูล

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

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

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

แบบฟอร์มตัวอย่างที่ 1

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

แบบฟอร์มตัวอย่างที่ 2

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

แบบฟอร์มตัวอย่างที่ 3

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

รูปตัวอย่าง แสดงช่องกรอกข้อมูลแต่ละสถานะ
รูปตัวอย่าง แสดงช่องกรอกข้อมูลแต่ละสถานะ

สุดท้ายเราอาจจะเพิ่มลูกเล่นเข้าไปนิดหน่อย ให้ดู user friendly ไม่ต้องออกแบบขอบให้เป็นเหลี่ยมเหมือนปกติ อันนี้ก็แล้วแต่ว่า CI(corporate identity) ของบริษัทเป็นอย่างไร ทำขอบโค้งได้ไหม หรือพื้นหลังของช่องกรอกต้องสัมพันธ์กับสีหลักขององค์กร ก็แล้วแต่ความเหมาะสมในการปรับแต่งครับ

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