web-dev-qa-db-ja.com

スマートフォンのアプリケーションフォームでテキスト入力フィールドにラベルを付ける最善の方法は何ですか?

プラットフォーム:iOS。すべて(おそらくほとんど)のiPhoneデバイスで実行できる必要があります。

スマホアプリのデザインの一環として、現在ウェブフォームで実装されている「イベント作成」フォームをデザインしています。

Webフォームには5つのステップがあります(私はできる限り減らすようにしています)。

1つの特定のステップ(ここではステップ3として示されています)では、ユーザーがイベントを作成する必要があります。画面の不動産が低いため、フォームフィールドを表示するさまざまな方法を検討しています。

添付されているのは、私が始めた2つのクイックデザインです。

デザインA:テキスト入力フィールドを使用し、フィールド内に説明文を入れました。

必須フィールドは赤です。私はこれに100%満足していないので、これを変更することがあります。これは私が答える必要があるもう1つの質問です。

デザインB:赤の必須フィールドがないデザインAも示しました。

デザインC:説明フィールドを入力フィールドの上に配置しました。

私の個人的な見解では、デザインAとデザインCを比較すると、デザインAはデザインCよりもはるかに明確で読みやすいということです。 enter image description here しかし、私は両方のデザインに関していくつかの批判をお願いします。

注意:これはステップ3です。ステップに2つの画面があるにもかかわらず、デザインの両方の画面にステップ3が表示されています。

3
Bernard Tyers

アプローチCを使用します。

その理由は、インラインラベルはスペースを節約し、ユーザーに通知する目的にも役立ちますが、ユーザーがフィールドを選択するとテキストが表示されず、ユーザーがフィールドの意味を知らない場合に非常に独特な欠点があります彼は混乱する可能性があり、入力したデータ全体をクリアして、正しいフィールドにデータを入力しているかどうかを確認する必要があります(これは、ユーザーのフォーカスが選択したフィールドからシフトしたと想定しており、フィールドが空の場合にラベルが返されます) )。

上部に配置されたラベルのアプローチに行くことをお勧めします。モバイルUXフォームデザインに関するこの記事では、トップアラインラベルの利点について説明しています。

各ラベルの配置には長所と短所があります。 Webフォームをデザインするときは、フォームの目的やデザインの制約などに適したものを選択することがより重要です。ただし、モバイルフォームでは、水平方向のラベル(左揃えと右揃え)は避けてください。ユーザーが入力フィールドをクリックすると、多くの場合、ページはフィールドに焦点を合わせるために自動的にズームインされます。水平ラベルを使用する場合、1つの画面でラベルと入力フィールドの両方を表示することはほとんど不可能です。さらに、画面が小さいため、モバイルデバイスで水平方向のラベリングが使用されている場合、長いラベルを表示するのは難しい場合があります(たとえば、Virgin Blueモバイルバージョンの管理予約フォーム)。

これらの問題は、上揃えのラベルを使用することで回避できます。

何らかの理由でインラインテキストを使用する必要がある場合は、それを使用して、入力するデータの形式に関するヒントを提供します。

enter image description here

必須フィールドの色分けに関しては、それが通常一般的な方法ではないため、どれほど効果的であるかわかりません。*を必須フィールドであることを示すことをお勧めします。その理由は、*(ラベルまたはフィールドの前に)があることは、フォームフィールドが必須であり、新しいデザインを考え出すことに関して、事実上の標準になっているため、必須かどうかについて人々を混乱させるだけかもしれません。ない。

これ Smashing Magazineによる記事 は、必須フィールドをラベルの横に置くことを明示的に提案する代替アプローチを提供します

必須フィールドマーカーは、次の2つの場所のいずれかに配置できます。

  • ラベルの横にあるので、ユーザーはフォームをすばやくスキャンできます。
  • 入力フィールドの横または内部

最後に、設計では2つのフィールドしか必要ないため(ステップ3のように)、必須ではないフィールドにマークを付けることができます。これはそれについて話す興味深い記事です:

常に必須ではないオプションのフォームフィールドをマークする

それを引用するには:

ユーザーの生活を楽にするために、必須フィールドのマークを終了し、オプションフィールドのみをマークする必要があります。これは、ユーザーが通常すべての記入を期待しているフォームに来るためです。フォームの性質上暗黙的であるため、ユーザーが入力する必要があるものをユーザーに明示的に伝える必要はありません。さらに役立つのは、作業を削減するために記入する必要がないものを伝えることです。ユーザーがフィールドに入力する必要があるかどうかを質問するのは、あなたが求めている情報が、本当に提供したくないものであるかどうかだけです。このため、フォームが絶対に必要な情報のみを要求することが重要です。

enter image description here

5
Mervin

私はA over Cのクリーンさに同意します。「プレースホルダー」テキストが「郵便番号」フィールド(灰色で斜体)に似ていることを確認します。

必要なフィールドのカラーリングも好きです。ただし、これの欠点は、一部のユーザーが続行するために必要な最低限の情報しか入力しない可能性があることです。これは、特定のフィールドを色付けしないことで取得できたはずの適切なデータが失われることになります。

これがお役に立てば幸いです。

1
kwelch