web-dev-qa-db-ja.com

ツールチップには閉じるボタンが必要ですか?

私はツールチップに取り組んでおり、閉じるボタンのあるツールチップがあると言われたとき。閉じるボタンのツールチップは使いやすいですか?

enter image description here

14
Pradeep

ツールチップをユーザーが閉じることができるかどうかを知るには、いつ表示されるかを知る必要があります。

  • マウスオーバーとして:いいえ、ユーザーが離れると非表示になります。
  • 一部のイベントでは、それ以外の場合はどのように閉じられますか?時間は、アクセシビリティガイドラインに違反するため、適切なオプションではありません。
  • テキスト行をクリックします:不要ですが、stackexchangeが実行しているため、このオプションを提供します。ユーザーは制御することを好みます。

一般的には、閉じるボタンを提供します。通常それはデザインを破壊しませんが、ほとんどの人はそれを好きになります。

34
Gustav

(画面上の他のすべてと同様に)ツールチップの問題は、認知負荷が増加し、ユーザーが処理(読み取り)する必要があることです。

したがって、尋ねる一般的な質問は、ユーザーがツールチップを永続的に表示する必要がある(または希望する)か、それとも閉じることを許可する必要があるかです。ツールチップは本当に役に立ちますか?

一般にツールチップは、ユーザーに重要なメッセージを伝える限りのみ表示する必要がありますと言います。したがって、他のユーザー入力(マウスのホバー、関連する要素のクリック、問題の修正など)、または時間遅延(ただし、以前の回答で述べたように、アクセシビリティに問題があるガイドラインなので、簡単な情報にのみ使用してください)。

TL; DR;

スクリーンショットに表示されている現在のコンテキストでは、UXの問題が2つあり、ツールチップに閉じるボタンを配置しないことをお勧めします。

  1. ユーザー名またはパスワード、あるいはその両方に問題がありました。これは非常に頻繁に発生し、ほとんどの人はこの状況で何をすべきかを知っています:ユーザー名入力フィールドを選択し、ユーザー名を再入力し、タブを押すか、パスワードフィールドをクリックして選択し、パスワードを再入力して、Enterキーを押すか、送信ボタンをクリックします。ユーザーがクリックしてポップアップを閉じることは冗長なクリック操作です(ポップアップが入力フィールドをブロックしない限り、これはひどい配置であり、このメッセージをツールチップではなくフォームの下のテキスト文字列として表示することをお勧めします)。

  2. ツールチップは通常、要素に関連付けられており、その要素へのポインタがあります。ツールチップに「問題がありました」と表示され、送信ボタンを指しています。送信ボタンが誤ってクリックされたか、何らかの理由でユーザー名/パスワードが誤っている可能性があります。 :)したがって、ユーザー名/パスワードフィールドを指定するか、フォームの下に文字列テキストエラーメッセージを使用します。

7
Harijs Deksnis

私はハライスの答えに同意します。

そもそもなぜエラー処理にツールチップを使用するのかという問題に取り組む必要があります。ここに役立つ記事があります:

フォームにエラーメッセージを表示するには、次の4つの基本ルールを考慮する必要があります。

  1. エラーメッセージは短くて意味のあるものである必要があります。

  2. メッセージの配置はフィールドに関連付ける必要があります。

  3. メッセージのスタイルは、フィールドラベルと指示のスタイルから分離する必要があります。

  4. エラーフィールドのスタイルは、通常のフィールドとは異なる必要があります。

出典: http://www.nomensa.com/blog/2010/4-rules-for-displaying-error-messages-from-a-user-experience-perspective/

エラーメッセージにはツールチップを使用しないでください。

補足情報はエラー、警告、またはステータスですか?場合は、バルーン、エラーメッセージ、ステータスバーなどの別のUI要素を使用します。通知領域アイコンの情報ヒントは、ステータス情報を表示するために使用できるため、例外です。

ソース: http://msdn.Microsoft.com/en-us/library/aa511495.aspx#rightcontrol

こちらの別のSE投稿で概説されているように、最初にツールチップを使用する条件も考慮してください:

ツールチップにするかツールチップしないか

特にログイン時のエラー処理について、別のアプローチを試すことを強くお勧めします。ここにいくつかの素晴らしい例があります:

色を使用して:

example

右側の空白を使用:

example

各フィールドの下:

example

example

この例はツールチップのように見えますが、検証でエラーとマークされている限り、エラーメッセージが表示されると思います。動的な場合と、ユーザーがログインをクリックした場合があります。

example

6
Pdxd

タッチスクリーンデバイス上にホバーするようなものはないので、レスポンシブなWebサイトのツールチップには閉じるボタンを必ず使用します。

これは、ホバーではなくクリックでツールチップにアクセスする場合です。私の仕事では、コードベースを小さく保つために、この種の情報にアクセスするための単一の方法を提供するよう努めており、ユーザーがたまたま使用しているデバイスに関係なく、1つの方法を学ぶだけでよいようにしています。

実際には、タッチスクリーンデバイスの人気が高まっているため、ホバーをまったく使用しないようにしています。

1
pathfinder

ツールチップの場合、「閉じる」ボタンは、これが実際にツールチップであり、閉じることができることをユーザーに保証する目的に役立つと思います。これは、ユーザーがインターフェースに不慣れな場合のクイックフィックスであり、必須ではありません。

アプリを使用する方法をユーザーに教える必要があることを覚えておいてください。「より速い馬」を与えるだけではありません。

しかし、この特定の例では、このメッセージはツールチップではなく、発生したすべてのエラーをリストするテキストフィールドに表示されると思います。

0
user1306322