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

วันนี้เรามาลองลงรายละเอียดเพิ่มขึ้น อยากให้ลองสังเกต icon รูปบัตรเครดิตที่อยู่ด้านบนของฟอร์มกรอกบัตรเครดิต

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

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

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

ถ้าให้ดี “icon ควรอยู่ใกล้กับช่องกรอกตัวเลข แต่ไม่ขึ้นมาเด่นกว่าฟอร์ม”

อยากให้ลองดูตัวอย่างการวาง icon ของ Walmart และ Office Depot ดูครับ

ทั้งสองมีการวาง icon ไว้ใกล้กับช่องสำหรับกรอกหมายเลขบัตร (card number) แต่ไม่เด่นมาก ผู้ใช้จึงมีสมาธิกับการกรอกข้อมูลมากกว่า โดยจะมอง icon เป็นแค่ข้อมูลเสริมในการกรอกบัตรเท่านั้น แบบนี้ช่วยลดปัญหาว่าผู้ใช้มาสนใจ icon มากเกินไป

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

โอมิเซะขอเป็นกำลังใจให้ทุกคน!