モバイルの入力フィールドのベストプラクティス
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
レイアウト1-画面サイズに合わせてストレッチされた入力フィールドと中央揃えのボタン
レイアウト2-これは、Webからモバイルへの直接の翻訳です。フィールドは同じサイズですが、ボタンと右揃えで右揃えです-整列
レイアウト3-フィールドは画面に合わせて引き伸ばされず、フォーム全体が中央揃えになります（カードのようなレイアウト）
レイアウト4-要件に応じた可変フィールドサイズで、画面に合う最長（または最大）フィールドとボタンが右揃えされます
以下で説明したすべてのレイアウトが使用可能であり、これは意見に基づく質問のように思えるかもしれませんが、どちらが望ましいか知りたくありません。
私の質問は、使いやすさと使いやすさの点でどちらが最適かということです。
私にとっては、オプション4。
数文字分しか入力できないフィールドには、短い入力フィールドを使用します。それ以外の場合は、全幅フィールドを使用します。理由は 入力フィールドの長さがその内容と一致する場合は、期待をよりよく管理できます 彼らは彼らがはるかに多くのスペースを与えられているので、人々が何か間違っていると考えてほしくない必要。学校のテスト用紙で、答えが首尾一貫して洞察力を必要とするのに1文だけで十分な場合に、たくさんのスペースを与えることを考えてください。あなたは自分を疑い始めます。フォームに記入する間、ユーザーは自信を持って安心していただけるようにしてください。
ベイマードインスティテュートのユーザビリティ調査では、フィールドが長すぎるか短すぎる場合、ユーザーはラベルを正しく理解しているかどうか疑問に思い始めています。これは、一般的でないデータやCVV（カード確認コード）などの技術ラベルを持つフィールドに特に当てはまりました。
フィールドを全幅に広げる最初の方法に進みます。携帯電話の場合、これは理にかなっています：
- 画面が小さいため、フィールド幅が不均衡になることはありません。
- 左利きと右利きの人は親指でより簡単にフィールドに到達できます。
- すべての左揃えフィールドは左から同じ位置から始まり、すべての右揃えフィールド（数値）は右側の同じ位置から始まります。
対称的なレイアウトは、見た目にも美しく、見やすくなります。
要求された入力に十分なスペースを与えることについてヒントを与えることは良い考えですが、説明的なラベルと指示に焦点を合わせる方が良いです。
使いやすさと使いやすさの点でどちらが最適ですか？
1つ目は、ユーザーがこれらのフィールドをタップするのが非常に簡単になるためです。
ボタンを全幅にして、タップ領域を増やし、フォームフィールドで視覚的にさらに魅力的にするようにします。