インタラクションデザイン: 入力マスクを使用してテキストボックスのインタラクション品質を向上させる

[編集者注]: この記事は @C7210 によって翻訳されました。モバイル アプリケーションの設計者は、ユーザー入力の量を減らすために懸命に取り組んできました。画面が小さすぎて指で正確にタッチできず、入力中にミスをしてしまうことがよくあります。

入力の量を無制限に減らすことはできません。入力を簡単にする方法を考える必要がある場合が多くあります。

入力マスクは、コンテンツの形式を制限し、入力エラーを回避する方法です。たとえば、電話番号入力ボックスでは数字のみを受け付け、他の種類の文字には応答しないようにすることができます。受け入れられる数値を範囲またはパターンに制限することもできます。ただし、入力マスクの機能はエラー防止に限定されません。複数の入力内容を論理的なシーケンスにマージして、ユーザーが複数の入力ボックス間を行き来しなくても済むようにするなど、より「アクティブな」場所でも使用できます。

以下の翻訳は、原著者の一人称視点によるものです。

最近、私（英語記事の原著者）は、Square の iPhone アプリケーション（Square Wallet）で興味深い入力方法を見つけました。ユーザーは、クレジットカードの種類、カード番号、有効期限、CVV 番号（カード裏面の 3 桁の番号）、郵便番号を 1 つの入力ボックスに入力できます。

入力ボックスの左端には、クレジットカードを表すアイコンがあります。メインコンテンツはカード番号を入力するために使用され、マスクルールは一般的な 4 桁の区切りです。ユーザーが入力すると、システムはカード番号に基づいて VISA や MasterCard などのカードの種類を判別し、それに応じて左側のクレジットカード アイコンを変更します。この方法により、ユーザーはカードの種類を選択する手間が省け、フィードバックを提供する非常にポジティブな方法となり、ユーザーがシステムが自分の操作に応答していることを感じることができます (関連記事: ユーザーの成功した操作に対してポジティブなフィードバックを提供する)。

ユーザーが 16 桁のカード番号を正しく入力すると、テキスト ボックスの表示モードが自動的に変更されます。以前に入力したカード番号の最後の 4 桁のみが表示され、保存された 3 つのフィールドは有効期限、CVV コード、郵便番号に割り当てられます。ユーザーがこれらのコンテンツを入力すると、形式の制限、日付の有効性の判断、スラッシュの自動追加、次のフィールドへの自動フォーカスなどの入力マスクによる支援も受けられます。

ここには素晴らしい詳細があります。ユーザーが CVV コードを入力すると、左側のアイコンが変わり (上の写真のように)、いわゆる CVV コードがカードの裏面にある 3 桁の数字であることをユーザーに思い出させます。とても思いやりのある機能です。

これまでのところ、人々はこのインタラクション モデルに好意的に反応しているようです。それは確かです。使用されるテキスト ボックスは 1 つだけなので、入力マスクのエラー防止機能とアクセシビリティ機能が効果的に活用され、従来のモードで使用されるテキスト ボックスの数が大幅に削減されます。Squre は素晴らしいです。

また、Zachary Forrest がフロントエンド テクノロジを通じてこの対話型モードを Web に「移植」したことも特筆に値します。興味のある方は、ぜひご覧になってみてください。

出典: lukew & FunctionSource

翻訳者のブログ: BeForWeb

ウェブ

元のタイトル: インタラクション デザイン: 入力マスクを使用してテキスト ボックスのインタラクション品質を向上させる

キーワード: インタラクション、使用、入力、ボード、高品質テキスト、品質、編集者、この記事、翻訳者、@C、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化