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

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

บทความนี้ให้ข้อมูลอะไรบ้าง

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

องค์ประกอบหลักของ UI การชำระเงินด้วยบัตรเครดิตมีอะไรบ้าง

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

• ช่องหมายเลขบัตร: ยอมรับประเภทบัตรหลักๆ ทั้งหมด และตรวจจับแบรนด์ของบัตรโดยอัตโนมัติเมื่อผู้ใช้พิมพ์ข้อมูลโดยอิงจากตัวเลขชุดแรก แสดงโลโก้บัตรที่เกี่ยวข้อง เนื่องจากไอคอนเล็กๆ ที่คุ้นเคย เช่น โลโก้ Visa หรือ American Express จะช่วยสร้างความมั่นใจให้ผู้ใช้ว่าคุณยอมรับประเภทบัตรที่พวกเขามี

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

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

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

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

• ปุ่มชำระเงิน: ออกแบบปุ่มนี้ให้ชัดเจน ใช้ป้ายกำกับที่เด่นชัดและกระตุ้นการดำเนินการ เช่น “ชำระเงินเลย” หรือ “สั่งซื้อ” เพิ่มไอคอนรูปแม่กุญแจบนปุ่มเพื่อแสดงให้เห็นว่าหน้านี้ปลอดภัย

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

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

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

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

• ให้แบบฟอร์มช่วยชี้แนะผู้ใช้ขณะพิมพ์ข้อมูล: การจัดรูปแบบข้อมูลที่ป้อนนั้นเกี่ยวข้องกับความง่ายในการใช้งานและการป้องกันข้อผิดพลาด ให้จัดกลุ่มหมายเลขบัตรโดยอัตโนมัติให้อยู่ในรูปแบบที่อ่านง่าย (เช่น 1111 2222 3333 4444) เพื่อให้ผู้ใช้สามารถตรวจสอบอีกครั้งได้อย่างรวดเร็ว รองรับการจัดรูปแบบเฉพาะบัตร เช่น บัตร American Express จะมีรูปแบบตัวเลข 4-6-5 และ UI ควรปรับเปลี่ยนตาม ทำการตรวจสอบ Luhn ขณะที่ผู้ใช้พิมพ์เพื่อตรวจจับข้อผิดพลาดที่ชัดเจนก่อนที่พวกเขาจะกด “ส่ง”

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

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

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

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

คุณควรจัดการข้อความแสดงข้อผิดพลาดและการตรวจสอบข้อมูลสำหรับบัตรเครดิตอย่างไร

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

ตรวจสอบข้อมูลแบบเรียลไทม์

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

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

ทำให้ข้อความแสดงข้อผิดพลาดมีความเฉพาะเจาะจงและเป็นประโยชน์

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

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

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

แสดงข้อผิดพลาดในตำแหน่งที่ถูกต้อง

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

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

เก็บรักษาข้อมูลที่ผู้ใช้ป้อนไว้ทุกครั้งที่เป็นไปได้

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

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

เสนอการดำเนินการหรือขั้นตอนถัดไป

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

หากปัญหาน่าจะเกิดจากทางธนาคาร ควรแจ้งให้ชัดเจน เช่น “ธนาคารของคุณปฏิเสธการเรียกเก็บเงินนี้ ไม่มีการชำระเงินเกิดขึ้น”

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

รักษาสมดุลระหว่างความชัดเจนและความปลอดภัย

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

ให้ข้อเสนอแนะแก่ผู้ใช้หลังจากการส่งข้อมูล

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

• เมื่อสำเร็จ ให้แสดงหน้าการชำระเงินที่สำเร็จ ใบเสร็จ หรือแบนเนอร์แสดงการทำรายการเสร็จสิ้น

• เมื่อล้มเหลว ให้ตอบสนองอย่างรวดเร็ว บอกพวกเขาว่าเกิดอะไรขึ้นและควรทำอย่างไร

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