モバイルにおける入力フォームデザインのためのチェックリスト

モバイルデバイス用の入力欄をデザインするときには、14のユーザビリティ要件からなるこのリストを満たしているかどうかをチェックしよう。

デザイン対象がWebページであれ、Webベースのアプリケーション(たとえば、SaaS)やネイティブモバイルアプリであれ、基本の構成要素の1つになるのが、ユーザーがテキストを入力する地味なテキスト入力欄である。このウィジェットは大量に利用されているので、その利用自体について、この記事で話す気はない。アプリケーションデザインにおいて、ワークフロー等の全体像に関わる問題は良質なユーザーエクスペリエンスにとって重要であり、指摘する必要のある課題がたくさんあるからである(こうしたテーマは我々の1日トレーニングコース「アプリケーションデザイン」で論じられる)。

この記事で取り上げるのは入力欄に関する核心の部分である。ここで挙げる課題の1つ1つはささいなもののように思えるかもしれない。しかし、これらのユーザビリティガイドラインが守られないと、特にそれがモバイルのユーザーインタフェースでは、ごく小さな苛立ちの種であっても重大で深刻な問題に育っていき、ユーザーのスピードを下げ、タスクの達成を妨害するケースを、再三、我々は目にしているのである。

以下が入力欄のあるべき姿である:

mobile-input-checklist

そして、以下がモバイルの入力欄の14のガイドラインからなるチェックリストである。:

そもそもそこに必要か
  1. この入力欄は絶対に必要か。
説明
  1. (入力欄の中でも下でもなく)上にラベルがあるか。
  2. その入力欄には必須か(*)、任意かという表示があるか。
  3. 入力欄内のプレースホルダは削除したか。
視認性
  1. 入力される可能性のあるたいていの値が見やすいだけの十分な大きさがあるか。
  2. キーボードを表示中に、画面の向きが縦横どちらになっていても入力欄が見えるようになっているか。
ユーザーのための穴埋め
  1. この入力欄に適切なデフォルト値はあるか。
    • 利用できる履歴はないか。
    • よく利用される値が利用できないか。
  2. 携帯電話の機能(カメラやGPS、音声、連絡先)を利用して、入力できるようになっているか。
  3. 上記以外の情報(たとえば、郵便番号に基づく州やクーポンコード入力欄)をベースに入力内容をユーザーのために割り出せるようになっているか。
入力
  1. 入力欄内へのコピー&ペーストをサポートしているか。
  2. この入力欄の入力に適したキーボードになっているか。
  3. 最初の1文字目を基にしたサジェストや自動補完が可能になっているか。
    • 名前や住所、Eメールアドレスの自動修正はしてはならない。
  4. タイプミスや略語に寛容か。
  5. ユーザーが自分の好きなフォーマットで入力できるようになっているか。(たとえば、電話番号やクレジットカードで)
    • ユーザーのためにオートフォーマットすることもできる。

自分たちのデザインを見直し、1つ1つの入力欄がこのチェックリストを満たすようにしよう。そう、これはひと仕事だ。しかし、あなた方が苦労するほうがユーザーに苦労させるよりはましである。

理想的には、あなた方のサイトやアプリのすべて(100%)の入力欄が、チェックリストの要件を100%順守しているとよい。100%を切ると、あなた方のユーザーエクスペリエンスは間違いなく標準以下のものになってしまうからである。

しかし、実際には、こうしたUX要件に100%対応するリソースはないかもしれない。その場合には、最も利用される入力欄、あるいはタスクの達成にとって最も重要な入力欄が最優先されるように、入力欄に優先順位をつけるといいだろう。

さらに学ぶ

調査レポート(英文)