web-dev-qa-db-ja.com

ツールチップ、どこに配置しますか?

内部には、jsonエディターWebアプリケーションがあります。これは非常に重いフォームであり、基本的には1次元ツリー構造のネストされたフォームのページに相当します。

このようなものを考えますが、さらに大きく、いくつかのフォームがさらにフォームにネストされ、注意することが重要です、シバン全体が左揃えであるため、ラベルと入力の間の移動は数スペース幅です

http://i.stack.imgur.com/gyQNi.png

これらのフォームには多くの属性、タイプ、サブタイプ、制約などがあるため、これを処理するために、スーパーツールチップを作成しました(とにかくツールチップが必要でした)。実際にはそのように呼ばれていたことは知りませんでしたが、nngroup.com/articles/best-application-designs /で確認できます。コンテンツは、ホバーされた要素に応じて動的に調整されます。

enter image description here

質問ですが、現在のツールチップは、入力フォームを400ミリ秒ホバーすることから発生します。外観に言及していない内部の正式なレビューと内部の非公式のコードレビューを1つ受け取りましたが、半分の部外者(同じ会社の他のチームの連絡担当者)が正式なレビューを行い、ツールチップは入力要素ではなくラベル要素に属していると述べました。

すべての種類のクロス(削除)、開く、折りたたみアイコンにツールチップがあり、テキストがないので、私はこの奇妙なことに気づきました。テキスト部分にツールチップを表示したことを覚えていないので、それらが偶然に発見されるかどうかさえわかりません。このリガードにはベストプラクティスがありますか?

3
hardcore

NGグループによる記事と、ツールヒントの実装方法が気に入っています。

一般的に、私はツールヒントの最大のファンではありません。タッチスクリーンではほとんど役に立たないからです。

列または行の名前ではなく、要素にツールヒントを表示する方法に同意します。

ユーザーがそれらを発見できるようにするためにできることは、次のとおりです。 400ミリ秒でホバリングすると、その長方形の右上に?それに印を付けます。これにより、常に表示されることを余儀なくされることなく、ツールヒント(別名ツールヒント)の詳細情報を知ることができます。

私が提案していることを確認するためのGoogleツールヒントアイコン。また、私は古い学校のようですが、傾向は、私が推測する情報については、その中にIが入った小さな円のようです。私は好き ?私はサークルですが、安価なAmazon機械式トルコ人は、ユーザーが一方を他方よりも認識する場合にあなたを示すことができます。

2
Frank Visaggio

フィールド入力/ラベルホバーに関するツールチップはあまりにも隠されており、偶然発見されただけです。ユーザーはどのようにして、どの要素にツールチップがなく、どの要素にツールチップがないかを知るのですか?入力にツールチップがあることを何らかの形で示す場合(たとえば、入力内のどこかに?)

推奨事項

したがって、タップまたはクリックできる関連するコントロールの横にある別のボタン要素を使用します。これにより、ツールチップのコンテンツを含むポップオーバーが表示されます。

原油モックアップenter image description here

2
Dave Haigh

私たちのチームではこの議論を行っていますが、別の視点から:アクセシビリティ。

そのため、視覚障害者向けの特別なブラウザを使用している場合、インタラクション(テキストフィールド、ドロップダウンなど)の後にツールチップを配置しても意味がありません。

少なくともタグとインタラクションの間にある必要があります。

名前(?)NameTextfield

これをカバーするテキストを知っていますか? WCAGには何も見つかりませんでした。

0
David C.

私にとって、ツールチップは「少数の人々が必要とするかもしれない情報ですが、それ以外はUIが雑然としているので、今のところ非表示にしましょう」です。

そのため、私は通常、ベストプラクティスはそれらを取り除くことであると主張します。これは重要な情報であり、画面上に表示する必要があるか、それほど重要ではなく、おそらくそこにある必要はありません。

ラベル対フィールドについては、コンテキストがすべてです。フィールドが何かを定義するのに直接役立つテキストの場合は、ラベルの一部にする必要があります。ユーザーがフィールドにデータを入力するのに役立つ場合は、フィールドの一部である可能性があります。どちらの場合も、このためのツールチップを使用すると、ユーザビリティ(特にタッチデバイス)とアクセシビリティ(実行可能ですが、必然的に合格するためにいくつかの手の込んだマークアップが必要になります)が複雑になります。

0
DA01