UI Blogazine

UI Pattern

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

single-cc-demo

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

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

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

clear-all-button

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

form-keyboard

คุณค่าของ UI

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

ข้อจำกัด

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

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

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

Tagged

About uiblogaziner

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

View all posts by uiblogaziner →

2 thoughts on “ช่องเดียวเอาอยู่

Leave a Reply

Your email address will not be published. Required fields are marked *

บทความล่าสุด