web-dev-qa-db-ja.com

矢印のないツールチップ:使いやすさ?

私はAngular Material、Googleのマテリアルデザイン仕様に基づくフレームワークを使用してプロジェクトに取り組んでいます。そのため、次のように 矢印のないツールチップ を使用しています:

enter image description here

ガイドラインによると:

ツールチップには方向矢印がありません。代わりに、方向を伝えるためにソースから発せられるモーションに依存しています。

多分それはモバイルでうまくいきますが、画面上に複数のインタラクティブな要素を持つ複雑なWebアプリケーションでは、ユーザーがツールチップがどこから来たのか常に把握していると想定するのは少し自信がありません。このような場合、矢印を削除すると、ツールチップのソースを認識できなくなる可能性があります。

Angular Materialにツールチップへの矢印の追加を検討するよう依頼しますが、これはほとんど神聖なMaterial Designガイドラインに違反しているため、ここに正当な理由があるかどうか質問しますツールチップの矢印を非表示にするツールチップの使いやすさに関する調査も参考になります。

15
Jay Mann

これは完全な答えではなく、OPの元の意図、Angular矢印を追加することを検討するための資料を求めることのみを話します。この部分的な答えの意図は、変更はGoogleとAndroidであり、Angular Materialではありません。

これは、Angularマテリアルの目的と意図)の説明にあります。

「AngularJSを使用している開発者の場合、Angular MaterialはUIコンポーネントフレームワークであり、GoogleのMaterial Design仕様のリファレンス実装です。このプロジェクトは、再利用可能な一連の、マテリアルデザインに基づいてテストされ、アクセス可能なUIコンポーネント。」

該当箇所を太字にしています。

つまり、Angularマテリアルは、Googleのマテリアルデザイン仕様のルールとガイドラインに従うだけなので、Angularユーザーと擁護者。

Angular Materialが変更された場合、Googleの考え方を変更する必要があります。Angular Material Foundersは、Materialの信者であり信心深い文字。

より完全な質問については、ええ...いいえ。矢印を抑制/削除し、それらをオプションとして提供しない正当な理由は考えられません。私が想像できる審美的な配慮は正当な理由ではありません。

私はあなたの考えに同意しない傾向があります。矢印には何の問題もありません。矢印は、ユーザーを考慮したフレームワークではオプションにする必要があります。吹き出しは、ツールチップ、導入、説明、および説明のオプションにする必要もあります。

2
Confused

私があなたの質問を適切に解釈するならば、それは方法Angularの主な問題はツールチップを実装することをお勧めしますこれはこれです:

多分それはモバイルでうまくいきますが、画面上に複数のインタラクティブな要素を持つ複雑なWebアプリケーションでは、ユーザーがツールチップがどこから来たのかを常に把握していると想定するのは少し自信がありません。

私は個人的に、ユーザーは常にツールチップがどこから来たかそれが重要な場合をキャッチすると信じています。いくつかの理由により、以下にリストされています。私はこれらについて具体的な研究の引用はしていませんが、心理学とWeb上のユーザーエクスペリエンスのデザインの経験の研究で学んだ関連情報です:

  1. ユーザーのカーソルは目を追う傾向があります。デジタルサービスを使用するときは、目と合わせてマウスカーソルを移動する傾向があり、ページの特定の領域に対するユーザーの注意にカーソルの位置を近づけます。
  2. ユーザーの現在のフォーカス領域外のコンテンツは、その特定の注意の瞬間には関係ありません。ユーザーがページの特定のセクションまたはその特定の要素に焦点を合わせていない場合、その領域の要素から展開されるツールチップは、他の場所に注意が向けられているため、その時点でユーザーにとって無関係であると見なすことができます。上記の最初のステートメントと組み合わせて、ユーザーが特定の要素に関心があり、ユーザーの注意がそこにある場合、カーソルもその領域にあり、ツールチップが展開し、ツールチップがどこから来たかに気付くでしょう。
  3. モーションは人間の視覚システムの最も基本的で敏感な側面の1つです。機能がグループ化されていて、同じ場所に複数のボタンがある場合、ツールチップがどのアイテムから発生しているかをユーザーが認識しにくいように見えるかもしれません。ただし、人間の目はオブジェクトの動きに信じられないほど敏感です。その速度、方向、軌道。上記の例のような場合、Googleドキュメントでは、アクションの近接性により、ツールチップがどの要素からのものであるかを判別できないように見える場合があります。これに関する実証的な調査を行わなかったので、ユーザーはこのシナリオではほとんど問題がないか、ツールチップのアニメーション/場所に基づいて、ツールチップがどの要素に属しているかを正しく解釈すると仮定します。捕食者から私たちを保護するために使用されていたこの動きへの感受性は、今や私たちがウェブでの間違いを犯すことから私たちを保護しています...
6
Jake Barnett

アニメーションは常にユーザーの注意を引き、ツールチップは通常、マウスオーバーまたはあらゆる種類のフォーカスアクションに表示されます。したがって、これはアクションの結果であり、ツールチップがどこから来たかを示す小さなアニメーションにユーザーが気付くと確信できます。

ちなみに、画面が機能で非常に混雑している場合、一部の機能の配置を再考する可能性がありますか?

4
Yakke

材料設計ガイドライン によると:

ツールチップには方向矢印がありません。代わりに、方向を伝えるためにソースから発せられるモーションに依存しています。

リストされたデスクトップの例を見ると、複数の要素が隣り合っていることがわかります。

Material Design Tooltips Desktop

ツールチップは隣接する要素に接していますが、重なりません。ツールチップはまだその上の要素に関連付けられています。アニメーションと合わせて理解すれば十分だと思います。ヤッケが言ったように;画面が混雑していて、ツールチップが属する場所を明確に区別するスペースがない場合は、要素の配置を再検討することをお勧めします。

私が本当に役立つと思うことの1つは、デスクトップ上にカーソルがあるということです。これは、カーソルを合わせていることを常に思い出させます。

矢があれば使い勝手は良くなると思いますが、どれくらいかは疑問です。これを裏付ける研究は見つからなかったので、誰か他の人に見つけてもらえたら最高です。

3
Melvin S