Square 的巧妙設計——單一文字框搞定信用卡訊息輸入

對許多人來說,在行動裝置上輸入訊息不如在電腦前用鍵盤打字容易。來看看美國行動支付公司 Square 如何透過巧妙的設計,用單一輸入框搞定手機上信用卡資訊輸入。
評論
評論

本文作者是 c7210,一位 UX 玩家、互動設計師、iOS 開發菜鳥、貓奴、guitar fucker。原文刊載於 Be For Web,編譯自 〈 Collecting Payment Information Within a Single Input 〉 和 〈 Making beautiful forms; Square and Recurly 〉 兩篇文章。

行動 app 的設計師們一直在努力降低使用者輸入文字的量。因為螢幕太小,手指無法精準控制,在輸入過程中出錯簡直是家常便飯。而輸入量不會無限地降低,常常我們更需要考慮的是如何使輸入訊息變得更加容易。

格式限制是一種限制內容格式、避免輸入錯誤的方式。舉個例子,我們可以使電話號碼輸入框只接受數字,而不對其它任何類型的文字、符號做出反應。甚至接受的數字也可以被限定在某個範圍或模式。不過,格式限制的功能不僅限於防錯,它還可以被用在更「積極」的地方,例如將多種輸入的內容合併成一個邏輯序列,讓使用者不必在多個輸入框來回切換。

最近我(英文原文作者)在 Square 的 iPhone app(Square Wallet)當中見到的輸入方式就很有意思,使用者在一個輸入框就可以完成信用卡類型、卡號、有效期限、CVV(卡片背後的 3 位數字)和郵遞區號的填寫。

輸入框當中的最左端是一個代表信用卡的圖示,主要內容部分用於輸入卡號,格式限制是典型的四位分隔。隨著使用者輸入數字,系統會根據卡號判斷卡片的類別,例如 VISA 或 MasterCard,並且配合改變左側的信用卡圖示。這種方式幫使用者省掉一個選擇卡片類型的步驟,而且是一種很積極的訊息回應方式,讓使用者能夠感受到系統對他們的操作產生反應。

當使用者正確完成 16 碼卡號填寫後,文字框會自動改變顯示模式,之前輸入的卡號只會顯示出最後的四位,節省出的三個段落就分配給有效期限、CVV 和郵遞區號。使用者在鍵入這些內容的時候同樣會得到格式限制的輔助,例如格式、日期有效性的判定、自動加入斜線、自動切換到下一段文字等。

這裡有一個很棒的細節,當使用者在輸入 CVV 時,左側的圖示會發生變化(如上圖所示),提示使用者所謂的 CVV 就是卡片背後的 3 位數字;非常貼心。

目前看來人們對這套互動模式的反應都很好;這簡直是一定的。只用一個輸入框,有效的利用格式限制的防錯與輔助功能,又極大減少傳統模式輸入框的使用量——Square 厲害!

另外值得一提的是,Zachary Forrest 用網頁前端技術將這套互動模式「移植」到網頁上,有興趣的朋友們也不妨去看看。


精選熱門好工作

Front-End Developer 前端工程師

Infocast
臺北市.台灣

獎勵 NT$15,000

西餐廚師Commis1,2,3,副領班

Sugar Pea
臺北市.台灣

獎勵 NT$15,000

iOS工程師

Omlet Arcade 美商歐姆雷特
臺北市.台灣

獎勵 NT$15,000

評論