web-dev-qa-db-ja.com

マテリアルデザインの入力ツールチップ

マテリアルデザインの入力デザインに従うときに、入力要素のフィールドの説明はどこに配置しますか。 Bootstrap implements it in a very straightforward manner since it has static labels

私が直面している問題は、入力要素にフォーカスがあるときにのみツールチップアイコンを表示するか、常に横に表示するかです。後者の問題は、大きなフォームを処理するときに、対応するフォーム要素にアイコンを関連付けるのが難しいことです。つまり、添付のスクリーンショットとは異なり、アイコンがラベル自体に近ければ、関連付けが簡単になります。どんな洞察もいただければ幸いです。

4
Adarsh Sosale

ツールチップのサイズ(および目的)に応じて、関連する役立つ情報をinput要素のすぐ下に配置します。

適切な入力ルール(パスワードフィールドなど)に関する情報を提供しようとしている場合は、情報が常に表示され、正しい入力の下にあることを確認します。

これはいくつかのことに役立ちます:

1)ユーザーは、有用な情報を表示するために入力をクリックする必要はありません。最初から「パスワードには8文字以上で、記号と数字を含める必要がある」と伝えた場合、ユーザーは適切なパスワードを使用する準備ができているため、フォームの入力に失敗する可能性が低く、変換率が低下します。

2)レスポンシブデザインが容易になります。 「フローティング」ツールチップは、さまざまなビューでの配置、特に十分なスペースがないモバイルデバイスでは、かなり不安定になる傾向があります。情報が自然に下にある場合(そしてツールチップのように見えるようにすることもできます)、フォームにレスポンシブルールを(遡及的にも)適用する方が簡単になる傾向があります。

マテリアルデザインガイドラインの例を以下に示します

enter image description here

PS私はインライン検証で同じルールに従います(つまり、ユーザーが提供した情報が正しいかどうかをユーザーに通知します)

1
Socrates Kolios

Tooltips は、ユーザーが要素にカーソルを合わせる、フォーカスする、または要素に触れると表示されるテキストラベルです。

ツールチップは、アクティブ化されたときに要素を識別します。機能に関する簡単なヘルパーテキストが含まれている場合があります。たとえば、アクション可能なアイコンに関するテキスト情報が含まれている場合があります。

いつも横に見せれば

  • あなたはユーザーのメンタルモデルに反対しています。
  • フォーム/フィールドに精通しているユーザーにとっては望ましくないコンテンツになります。
  • すべてのユーザーが読みたくない場合でも、それを読むように強制することができます。
  • UIが複雑に見え、不必要に混乱を招きます。
  • タスクを完了するのが難しくなります。

編集:

質問のアイコン部分を読み間違えました。

アイコンをラベルの横に配置し、常に表示されるようにします。

4
DPS