モバイルにおける入力フォームデザインのためのチェックリスト
モバイルデバイス用の入力欄をデザインするときには、14のユーザビリティ要件からなるこのリストを満たしているかどうかをチェックしよう。
デザイン対象がWebページであれ、Webベースのアプリケーション(たとえば、SaaS)やネイティブモバイルアプリであれ、基本の構成要素の1つになるのが、ユーザーがテキストを入力する地味なテキスト入力欄である。このウィジェットは大量に利用されているので、その利用自体について、この記事で話す気はない。アプリケーションデザインにおいて、ワークフロー等の全体像に関わる問題は良質なユーザーエクスペリエンスにとって重要であり、指摘する必要のある課題がたくさんあるからである(こうしたテーマは我々の1日トレーニングコース「アプリケーションデザイン」で論じられる)。
この記事で取り上げるのは入力欄に関する核心の部分である。ここで挙げる課題の1つ1つはささいなもののように思えるかもしれない。しかし、これらのユーザビリティガイドラインが守られないと、特にそれがモバイルのユーザーインタフェースでは、ごく小さな苛立ちの種であっても重大で深刻な問題に育っていき、ユーザーのスピードを下げ、タスクの達成を妨害するケースを、再三、我々は目にしているのである。
以下が入力欄のあるべき姿である:
そして、以下がモバイルの入力欄の14のガイドラインからなるチェックリストである。:
そもそもそこに必要か |
|
---|---|
説明 |
|
視認性 |
|
ユーザーのための穴埋め |
|
入力 |
|
自分たちのデザインを見直し、1つ1つの入力欄がこのチェックリストを満たすようにしよう。そう、これはひと仕事だ。しかし、あなた方が苦労するほうがユーザーに苦労させるよりはましである。
理想的には、あなた方のサイトやアプリのすべて(100%)の入力欄が、チェックリストの要件を100%順守しているとよい。100%を切ると、あなた方のユーザーエクスペリエンスは間違いなく標準以下のものになってしまうからである。
しかし、実際には、こうしたUX要件に100%対応するリソースはないかもしれない。その場合には、最も利用される入力欄、あるいはタスクの達成にとって最も重要な入力欄が最優先されるように、入力欄に優先順位をつけるといいだろう。