web-dev-qa-db-ja.com

ユーザーが入力をクリックしたときにユーザーの画面をスクロールする代わりに、ツールチップを表示できるようにしますか?

ユーザーが「カード」のリストを作成できるフォームがWebアプリにあります。私たちのシステムは、高品質の情報を入力するのに役立つツールチップを動的に表示します。簡単な例としては、名前と住所を入力する場合があり、システムがユーザーに名前が正しいことを確認するように求めます。カードの内容をカバーしたくないので、ツールチップはカードの上に表示する必要があります。

First screen

私たちが抱えている問題は、カードが画面のほぼ上にあるときにツールチップを表示するためのスペースを作ることです。

Card off the top

現在の解決策は、カードを画面上の予測可能な場所までスクロールダウンして、カードの上にツールチップを表示できるようにすることです。ただし、これは悪いUXのように感じられます。ユーザーが入力しようとしているように、画面上で入力を移動しています。

これは悪い習慣ですか?私たちが見逃している明らかな代替策はありますか?

1
gar

まず、私はあなたに提案します この投稿を読む ツールチップで行くことが正しい方向でさえあるかどうか確認するために。

ツールチップは、カーソルがその上にあるときにのみ表示されるようになっています。

第二に、これがフォームの送信後でエラーが発生しない限り、ページをスクロールしないでください。

ユーザーがそのフィールドにフォーカスしているときにこれらのツールチップが関連している場合は、テキストの上に単に含めるのが良いでしょう。

Input example

2
mrchaarlie

私はいくつかの可能な解決策を考えることができます:

  1. 入力フィールドの下にインラインでメッセージを表示する
  2. ユーザーが下にスクロールしてツールチップのみを表示したときに表示されるページの上部に「固定」バーを配置する
  3. 入力の横にツールチップを配置することは、ユーザーがタップしたときに疑問符などのツールチップアイコンが表示されてスライドする可能性がある小さいデバイスを除いて、機能する場合があります。
0
Winter