ออกแบบหน้าชำระเงินสำหรับมือถือเป็นหลัก

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

เข้าใจพฤติกรรมการจ่ายเงินบนมือถือ

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

หลักการออกแบบ 6 ข้อ

1. ใส่ทุกอย่างในคอลัมน์เดียว

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

2. ปุ่มใหญ่พอให้กดด้วยนิ้วโป้ง

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

3. QR ต้องใหญ่และมีทางเลือกสำรอง

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

4. ลดการพิมพ์ให้เหลือน้อยที่สุด

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

5. อัปโหลดสลิปให้ง่าย

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

6. โหลดเร็วบนสัญญาณไม่ดี

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

เปรียบเทียบก่อนและหลังปรับ

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

วิธีทดสอบจริง

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

เช็กลิสต์สั้น ๆ

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

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