【 UIシリーズ】テキストフィールド＆フォームデザイン
ユーザーが記入しやすいフォームをデザインするのに役立つ簡単なルール
フォームは長い間、様々な場面で使われてきました。情報化社会に伴って、情報を集める手段はますます進化しています。今まで作られてきた過去のフォームのデザインから、より良いフォーム作りのためのいくつかのヒントを見ていきましょう。
テキストフィールドの構造
テキストフィールド（入力欄）を使用すると、ユーザーはUIにテキストを入力できます。これは、フォームとダイアログで使用されることが多いです。テキストフィールドのデザインでは、目的が明確であること、見つけやすいこと、無駄がなくアクセスしやすいことが求められます。
基本的なテキストフィールドの構成要素
コンテナ — 入力欄
入力テキスト — テキストフィールドに入力するもの
ラベルテキスト — 特定の入力欄のタイトルをユーザーに伝えるもの
プレースホルダーテキスト — ユーザーが入力する前の例で、ユーザーが入力するとその内容に置き換えられる
ヘルパーまたは検証テキスト（オプション） — 追加の文章または検証メッセージを提供するもの
先頭のアイコン（オプション） — テキストフィールドに必要な入力項目を説明するもの
末尾のアイコン（オプション） — クリア、非表示/表示など、入力されたテキストをさらにコントロールするもの
テキストフィールドタイプ
入力する情報に適した様々なタイプのテキストフィールドがあります。クレジットカード番号入力の際によくみられます。UI全体で最も一般的に使用される入力タイプの例を次に示します。
（チェックボックスやラジオボタンなどのいくつかの入力タイプについては、シリーズの後半で説明するため省きます。）
Point 1: 収集するデータに適した入力欄を使用する
収集データごとに入力欄のタイプを使い分けることで、入力操作が可能な限り簡単かつ効率的になります。これによりユーザーが情報を入力しやすくなり、入力ミスも防げます。
Point 2: テキストフィールドは、ユーザーの操作に合わせて外観を変更する
テキストフィールドの状態を、視覚的な方法でユーザーに伝えることができます。入力欄には、非アクティブ、一時停止、無効、焦点、検証中、エラーのいずれかの状態を設定できます。すべての状態が明確に区別され、フォームとアプリケーション全体で一貫して統一されている必要があります。ユーザーのために最適な状態を提供できるよう心がけましょう。
Point3: 最適なテキストフィールドスタイルの選択
ラベルの配置には主に、上、左、右揃えの3つの選択肢があります。それぞれメリットとでペリッとがあるので、デザインするフォーム、情報、およびプラットフォームの目的と大きさに応じて最適なスタイルを使い分けましょう。
最近は下線入力が普及していますが、最良の選択肢であるとは限りません。
最新のマテリアルデザイン進化の研究結果によると、ユーザーは角が丸い入力欄を好むことがわかりました。
左揃えのラベル
入力する際に問われる内容が、ユーザーにとって馴染みのない場合に適しています。
メリット
簡単に理解できる、垂直方向のスペースの有効活用ができる。
デメリット
ラベルと対応する入力欄の間の距離にばらつきがあることにより、完了するまでの時間が長くなる。
右揃えのラベル
左揃えのラベルと比較して、制作時間が約2倍速くなります。
メリット
テキストフィールドのラベルと入力欄が近接して配置されているため、目を動かす回数が減り、完了時間が短縮される。
デメリット
フォームにすばやく目を通して、必要な情報のすべてを理解するのが難しい。
このトピックは「フォームデザインのベストプラクティス-LukeWroblewski著」および「フォームでのラベル配置-MateoPenzo著」で詳細を学ぶことができます。
Point 4: テキストフィールドの長さは、予想される文字数に合わせる
フォーム内のすべてのテキストフィールドに同じ大きさの入力欄を使用すると、見た目は美しくなりますが、かえって入力が難しくなります。
Point 5: プレースホルダーをラベルの代わりにしない
入力する際にプレースホルダーが消えてしまうと、入力しなければならない内容を思い出す必要があるため、ユーザーに負担をかけてしまいます。
また、ラベルがないとユーザーはフォームを送信する前に入力したすべての内容を見直すことができません。
フォームの大きさが限られておりラベルを貼ることが困難な場合は、フローティングラベルアプローチ（フォームのラベルが入力時にアニメーションで上方向に移動するテクニック）を使用できます。
また、入力欄にプレースホルダーテキストでヒントや説明を書いておくのも、入力した際に消えてしまうので避けたほうが良いです。入力欄外に小さく添付することをおすすめします。
Point 6: ユーザーの入力を助ける方法
オートコンプリート機能
オートコンプリート機能（過去に入力した文字を記憶し、次に入力される内容を予想して表示する機能）を使って、ユーザーの入力操作を助けましょう。
入力欄に文字を入れると自動的に提案し、ユーザーはEnterキーまたは「右矢印キー」を押して使うことができます。
オートサジェスト機能
（インターネットのサーチエンジンで、検索した文字列に関連の深い語句を予測して表示する機能）で、関連のある語句をリストアップして提案しましょう。このリストアップは、ドロップダウン形式で表示されます。
・初期設定の段階で事前入力をし、ユーザーの手間を省きましょう。多くの場合、IPまたはジオロケーションによってユーザーの国と都市を簡単に検出できます。その情報に基づき、初期設定の段階で入力欄に候補が挙げられている状態にすることが可能です。しかし、ネットショッピングなどの電子商取引は例外です。サイズや色などの購入に関連する設定を事前に選択しないでください。
コンテキスト情報の提供
正しい判断をしたり、間違いを回避したりするために、ユーザーが送金時に口座残高などの追加情報を必要とすることがわかっている場合は、遠慮なく提示してください。
Point 7: インライン検証で入力内容を確認する
「ライブインライン検証」では、ユーザーがフォームを送信するときに入力内容を一括でチェックするのではなく、ユーザーがフォームを進めるときにその入力内容を即時チェックします。
以下の点に注意してください。
各入力欄の近くに検証メッセージを表示しましょう
ユーザーを非難するような文言は使わないでください。エラーメッセージは、ユーザーを非難するのではなく、問題を解決する方法をユーザーに伝えるためにあるものです。
入力内容がはっきりしていない段階での検証はかえってユーザーを混乱させてしまうので避けましょう。
前向きな表現を含んだ検証メッセージを表示しましょう。
Point 8: 入力欄の数を減らす
必要最低限の入力欄にすることで、見た目もシンプルになり視覚的負担も軽減できます。
以下の点に注意してください。
フルネームや日付などのテキストを複数の入力欄に分割しないでください
同じ情報を何度も要求しないでください
ラベルとヒントのコピーを使用して、可能な限り短くしましょう
Point 9: 無関係な入力欄を非表示にする
情報を段階的に表示することで、重要な情報のみを明確にし、ユーザーが必要な場合のみ入力できるようにします。
そうすることでどれを入力すればいいのかがユーザーにとって分かりやすくなります。
Point 10: 条件付き段階フォームを使用する
条件付き段階フォームを使用すると、ユーザーの回答に基づいて、入力欄を自動的に表示または非表示にしたり、フォーム内のページをスキップしたりできます。これにより、入力欄の数が減るだけでなく、入力過程がより個別化され、会話のようなフォームを実現できます。
Point 11: 入力欄のグループ化
複雑なフォームを単純化する最も簡単な方法の1つは、関連する入力欄をグループ化することです。
ゲシュタルト心理学によると、伝わりやすいグループ化には近接性、類似性、継続性、閉鎖性、接続性の複数の原則があります。
数十の入力欄を関連性のあるいくつかのセットにグループ化すると、フォームの使いやすさが大幅に向上します。
Point 12: レイアウトの複数使用を避ける
ひとつ固定された入力欄のレイアウトがあると、ユーザーが入力を完了するまでの時間を予想しやすくなります。複数のレイアウトを使用してしまうと、入力欄をスキップしたり、入力ミスが起こってしまったり、ユーザーが入力を放棄してしまったりする可能性があるので、気をつけましょう。
Point 13: 複雑なフォームを簡単なステップに分割する
不要なものをすべて削除した後でも、一部のフォームが多くなる場合があります。多いタスクを一連の小さなタスクに分割することで、フォームが簡単に見え、ユーザーのモチベーションを維持させることができます。
以下でいくつかのヒントを提示します。
手順を表示し、ユーザーの進捗状況を視覚的に伝えます。これにより、満足度が高まり、入力する意欲が高まります。
フォームを細かくしないでください。手順が多すぎるとかえってユーザーを困らせるので気をつけましょう。
入力する際に重要な情報の要約をし、ユーザーに提示しましょう。また、最後に校閲を行う必要があります。
Point 14: ナビゲート機能を最小限に抑える
もしフォームが複数のステップに分かれるほどの大きさであれば、それに対応するための明確なスペースを確保する必要があります。一般的なナビゲーションや、プロセスを混乱させるようなリンクを表示するとかえって混乱を招くだけです。また、小さなポップアップに複数のステップのフォームを表示することはお勧めしません。
Point 15: 適切なキーボードタイプを表示する
AndroidまたはiOSには、さまざまな種類の入力を容易にできるように、異なる種類のキーボードが用意されています。データ入力を効率化させるには、入力欄を編集するときに表示されるキーボードが、その内容のタイプに適している必要があります。キーボードが表示される場所に注意しましょう。不必要にスクロールを導入しないように、入力欄を上部に配置します。
Point 16: 強力なパスワードの設計を促す
パスワードを要求する際、隠した状態で2回入力してもらうのではなく、パスワードを表示された状態で一回入力してもらうほうが良いです。これは、パスワード生成アプリにも適しています。
パスワード要件を常に表示し、すべての基準を満たすためのユーザーの進捗状況を示しましょう。ユーザーへの要件を単純化するようにしてください。
強度メーターは、より強力なパスワードを作成することをユーザーに促すことができます。
原文：https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0
著者：Taras Bakusevych
本記事は2020年3月25日に公開された情報を和訳、追記したものです。
英文を翻訳したものであるため、詳細や正しい表現は原文を参照ください。