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

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

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

1. ให้ผู้ซื้อเลือกแบรนด์ของบัตรเครดิตก่อน

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

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

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

2. ให้ผู้ซื้อใส่ชื่อบนบัตรก่อน

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

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

3. แสดงเลขบัตรเครดิตติดกัน

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

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

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

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

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

เรามีคำแนะนำเพื่อศึกษาเพิ่มเติม:

• jsfiddle: example of javascript for card number
• stackoverflow: how do you detect credit card type base on number
• braemoor: JavaScript Credit Card Validation Function

4. อธิบาย CVV ไม่ชัด

บัตรแต่ละแบรนด์มีวิธีเรียก Security code ไม่เหมือนกัน

• MasterCard เรียก  CVC2 (card validation code)
• Visa เรียก CVV2 (card verification value)
• Discover เรียก CID (card identification number)
• American Express เรียก CID (card identification number)
• บัตรเดบิตเรียก CSC (card security code)

การใช้คำว่า “Security code” จึงเป็นคำเรียกกลางๆ แล้วแอบบอกผู้ซื้อด้วยการแสดงจุดสามจุดบนช่องกรอกข้อมูล และมีปุ่มเครื่องหมายคำถามไว้สำหรับคนที่ไม่เข้าใจจริงๆ เมื่อกดเครื่องหมายคำถาม ควรทำเป็น pop up คำอธิบายขึ้นมาแทนการเปิดหน้าต่างอื่นขึ้นมาอธิบายเพื่อหลีกเลี่ยงการนำผู้ซื้อออกไปยังหน้าอื่น ๆ (ผู้ซื้อบางคนไปแล้วไปเลยนะ)

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

5. ไม่บอกว่าจ่ายเท่าไหร่

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

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

เราแนะนำให้หลีกเลี่ยงการวางรูปกุญแจไว้บนปุ่ม หรือไว้ที่ด้านหน้าปุ่ม Submit payment เพราะจะทำให้ผู้ซื้อรู้สึกว่ากดไม่ได้ หรือรู้สึกว่าต้องทำอะไรกับกุญแจก่อนกด

อีกหนึ่งสิ่งที่ควรให้ความสำคัญคือการเลือกใช้คำบนปุ่ม ควรหลีกเลี่ยงคำว่า “ดำเนินการต่อ” หรือ “Next” เพราะจะสร้างความคาดหวังว่าจะมีฟอร์มให้ทำต่ออีกในขั้นถัดไป เราแนะนำให้ใช้ข้อความเช่น “Submit payment” หรือ “Pay now” แทน

อย่าทำตามบทความ ให้ปรับตามบริบทของร้านค้า

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

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

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

แต่ถ้าต้องการได้ฟอร์มดี ๆ เร็ว ๆ เราเตรียมไว้ให้แล้ว 💁

มีทั้งครบทั้ง iOS, Android และ Web ในแบบ Opensource เพื่อให้ติดตั้งแล้วเรียกใช้งานได้เลย หรือจะเอา code มาปรับแก้ให้เข้ากับโปรแกรมของท่านก็ได้ ช่วยลดเวลาได้มากครับ แต่ละ Platform จะมีรายละเอียดให้เข้าไปดูอยู่บน github.com/omise

• iOS สามารถเข้าไปดูได้ที่ github.com/omise/omise-ios สามารถเรียกใช้งานได้ทั้งภาษา Swift และ Objective-C ดูตัวอย่างการทำงานได้บน youtube หรือถ้ามีคำถามในการใช้งานสามารถปรึกษากับนักพัฒนาได้ที่ gitter chat

• Android สามารถเข้าไปดูได้ที่ github.com/omise/omise-android ดูตัวอย่างการทำงานได้บน youtube หรือถ้ามีคำถามสามารถคุยกับนักพัฒนาผ่าน gitter chat ได้เช่นกัน

• Web สามารถเข้าไปดูได้ที่ github.com/omise/omise.js เพราะตัวฟอร์มสำหรับรับบัตรเครดิต จะถูกรวมไว้กับ omise.js อยู่แล้ว จึงสามารถเรียกใช้ได้ทันที ดูตัวอย่างได้ใน Repository หรือดูวิธีการใช้งานแบบ step by step ได้ที่คู่มือการใช้งาน

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

ขอให้ทำมาค้าขึ้นกันนะครับ (^_^)/