ช่องเดียวเอาอยู่

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

ด้วย UI นี้ เราต้องการเพียงช่องกรอกข้อมูลเพียงช่องเดียวเท่านั้นเอง เคล็ดลับของการทำงานของช่องกรอกข้อมูลอันเดียวนี้ (single-field credit card input) คือการแบ่งขั้นตอนการตรวจสอบข้อมูลออกเป็นขั้นตอนย่อยๆ ซึ่งเราต้องกรอกข้อมูลเลขบัตรเครดิตให้ถูกต้องเสียก่อน จึงจะสามารถกรอกข้อมูลอื่นต่อไปได้ เช่น เลขหลังบัตร CVC, วันหมดอายุ เป็นต้น

ช่องกรอกข้อมูลนี้จึงทำงานเสมือน real-time validator (ตัวตรวจสอบรูปแบบของขัอมูล) ที่คอยดูความถูกต้องและแสดงผลตอบรับ ณ เวลานั้นเลย ผ่านทางไอคอนที่บอกเราได้ว่าเป็นบัตรประเภทไหน (VISA, MASTER, AMEX) และหากกรอกค่าสำเร็จก็จะขึ้นข้อความยินดีสีเขียวๆ ด้านล่างช่อง  จากนั้นจึงขึ้นรูปแบบข้อมูลใหม่ที่เราต้องกรอกในช่องเดียวกันอีก แต่หากกรอกไม่ถูกต้องในขั้นตอนแรก ก็จะมี feedback ออกมาในรูปแบบที่เป็นช่องข้อความที่สั่นพร้อมตัวหนังสือสีแดงแจ้ง

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

คุณค่าของ UI

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

ข้อจำกัด

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

ผู้อยู่เบื้องหลัง

สุดท้ายนี้ต้องขอขอบคุณมิสเตอร์ Luke Wroblewski, UI designer ระดับแนวหน้าที่ได้นำเสนอและสร้างสรรค์ UI ที่มหัศจรรย์เช่นนี้ครับ และแนะนำให้ชมภาคเต็มได้จาก youtube ด้านล่างนี้นะครับ ช่องเดียวเอาอยู่จริงๆ