web-dev-qa-db-ja.com

静的データテーブルでは、ホバー時に行を強調表示する必要がありますか?

私のチームはマテリアルデザインテーブルコンポーネントを作成しています。 データテーブルに関するマテリアルデザインガイドライン 状態:

行ホバー(デスクトップ)

ユーザーが行の一部にカーソルを合わせた場合、その行に背景を表示します。

Material Design mockup showing a data table. One of the rows is highlighted and has a mouse cursor over it.

データテーブルにはチェックボックスやその他の選択コントロールがないことに注意してください。それらは読み取り専用です。

これは非インタラクティブなデータテーブルにとって意味がありますか?ユーザーはホバー時に行を強調表示できると思いますか?読みやすさに役立ちますか?

16
User not found

はい。はい。

私はUXの仕事をしていますが、これについてユーザーとして話しています。ユーザーとして、データの行を端から端まで簡単に追跡できるようにしてほしい。何が並んでいて、何がどうなっているのか簡単に見たい。

行の片側の列を見てから、同じ行の反対側だと思うが実際にはその上の行または下の行であるものを見るのは簡単すぎます。私は役に立たないインターフェースで偶然これをします。同じ行を端から端まで見ていることを確認するために、モニター上で指で物理的になぞっています。これは遅く、イライラし、エラーが発生しやすくなります。私を助けてください。

一部のサブ質問については:

  1. これは非インタラクティブなデータテーブルにとって意味がありますか?

    a。はい!私はこの機能を使用して、読み取り専用のテーブルでも支援します。

  2. ユーザーはホバー時に行を強調表示できると思いますか?

    a。多くのインターフェースが(残念ながら)実行しないため、それ自体はexpectしません。しかし、私はそれのために希望があり、そのような支援がないとイライラします。

    b。 「ユーザーがselect...を実行できることを期待している」という意味の場合(またはアクション可能である場合):可能性があります。一部のユーザーは、それがクリック可能かどうかを疑問に思うかもしれませんが、クリックできないことにすぐに気付きます。 If一部のユーザーは、行が実用的であると思い、数秒と数回のクリックを誤って浪費します。

  3. 読みやすさに役立ちますか?

    c。はい!とても。誰かがコメントしたように、その行を編集するつもりがなくても、Excelで行見出しを選択することがよくあります。その行を読みやすくするためにそれを行います。

読みやすさの別のオプション:@TulainsCórdovaが交互色アプローチを提案しました。提供された写真のコントラストが強すぎる色を除いて、それも良い考えです。両方の長所:非常にコントラストの低い交互の色(白と非常に薄い灰色など)を使用し、およびのコントラストの高いハイライトカラーを使用します。 1つのマウスオーバー行。

40
Aaron

TL; DR

いいえ、代わりに行の色が変わります。

長い答え:

幅の広いレポートで行を読みやすくするための交互の行の色(通常は白と薄緑)は、コンピューターのディスプレイの前に使用されていました。

そのテーブルが交互に色を変える場合、その上にカーソルを置いたときに行を強調表示する必要はありません。

enter image description here

上:緑のバー連続紙

enter image description here

上:コンピューターレポートの行の色を交互に

enter image description here

上:目が見えないほどわかりやすくなります

時々、ベルやホイッスルのアニメーションを追加するためのかゆみにより、シンプルで伝統的な、長い間テストされてきたユーザビリティソリューションから離れることになります。

さらに、ホバーで強調表示すると、行がクリック可能またはアクション可能であるという誤ったヒントを伝えることができます。

8

マテリアルデザインは、ガイドラインを備えたフレームワークです(包括的ですが、出発点です)。ユーザーにテストして、ユーザーにとって最適なものを決定します。

ユーザーが注意深く読む必要があると思われる場合は、縞模様の行(ゼブラストライプ)も検討しましたか?選択や操作を行わないようです。

ゼブラストライプの1つの側面は、ユーザーがテーブルを操作しなくても、個別の行がはっきりと表示されることです。

ホバー状態に依存することは、データ(および選択または操作)との潜在的な対話性を示している可能性がありますが、これは意図していません。

A List Apartに記事(今は少し古い)があります。

Zebra Striping:More Data for the Case

彼女は厳密な研究を行っており(読みやすさを向上させるために、さまざまな種類のストライプをテストしています)、最終的には次のように述べています。

データテーブルを含むアプリケーションまたはWebサイトを設計している場合は、個人的な好み、習慣、または(テストされていない)現状に基づいて設計を決定しないでください。そこから出て、ユーザーデータを入手してください。

マテリアルデザインは素晴らしいです(私はそれを常に使用しています)が、すべてのニーズやシナリオを説明することはできません(ガイドラインであるとも述べています)。自分のユーザーにとって何が機能するかをテストして見つけます。

7
Mike M

強調表示は必ずしも対話性を意味するわけではなく、ユーザーが水平線を維持するのにも役立ちます。 1つまたは両方の軸で特に密度が高いかまばらなテーブルは、1行にとどまることを難しくする可能性があります。

マテリアルデザインガイドラインでは、密集しすぎないように十分な空白を推奨していますが、スパース性が問題になるのを必ずしも防ぐわけではありません。

ただし、ポインターデバイスとの関係のため、ホバー状態は問題があり、アクセシビリティの問題が発生する可能性があります。また、モバイルでも問題があります。インカはまた 指摘する権利 ハイライトされた領域内にインタラクティブな要素がある場合、ハイライトが上記の相互作用を意味することが期待されるかもしれません-あなたの例では、チェックボックス。

したがって、強力な視覚的分離が必要な機能であると考える場合は、静的な代替案を検討してください。たとえば、 ゼブラストライピング マイクMが示唆しています。

3
Nathan Christie

実際に役立つ場所でのみ使用します。それがないと、何が起こっているのかを視覚的に追跡するのが難しい場合。そうでなければ、それは不必要な視覚的複雑さを追加するようです。

非常に大きなテーブルでは、行を視覚的に追跡するのに役立ちます。これが正当化される限り、「ユーザーがクリックしたいと思うかもしれないが、クリックできないことがわかる」という最初のステップの価値があることがわかりました(赤みがかった行にマウスポインターがあり、ぼやけてすみません)。

enter image description here

多くの情報が提示されている場合、偶数/奇数の行の色よりも視覚的にノイズが少ないことがわかります。

enter image description here

もちろん、強調表示の明らかな欠点は、ポインタのないデバイスではあまり効果がないことです(上のページはデスクトップでの使用を目的としています)。

ただし、あなたの場合、強調表示は機能的には必要ないようです。

マテリアルデザインガイドラインの遵守については、それはあなた次第です。私自身、厳格なマテリアルデザインの大ファンではありません。テキストの世界を取り除こうとする不可解な探求と、余白が多すぎるため、アイコンが何を意味するのかを推測し、暗記しすぎています。 UIが明確で健全である限り、マテリアルデザインの警察は(まだ)ドアを破壊することはありません。

2
Jason C

特にテーブルが広い場合は読みやすくなりますが、この例では、チェックボックスがマークされていることを示すホバー効果が期待されると思います。

チェックボックスをマークすることは多くのことを行う必要がある場合、これは有効なアクションになる可能性があります。または、ボックスをチェックすることが非常にまれである場合は多すぎる可能性があります。他のアクション(コピーと貼り付けのためのテキストの選択など)がより一般的です、または実行されるアクションは破壊的です。 (その場合、実際のチェックボックスのみをチェックすることをお勧めします。)

また、ユーザーが個々の行とテーブル全体の情報をどれだけ必要とするかを検討する価値もあります。リスト全体を参照して全体をスキャンしていて、右側の詳細がいいが一般的に重要ではない場合、ホバー効果はヘルプよりも混乱する可能性が高く、邪魔にならないようにマウスを移動する必要があります見る。

したがって、実際のユーザーで確実にテストし、それが重要な場合はフィードバックを取得してください。彼らだけが、単一の行の可読性が実際にどれほど重要であり、ホバリングがそれに影響を与えるかどうかを伝えることができます。

他のいくつかのオプションを与えるには、ホバーに関するルールの境界線の色、特に下の境界線を変更することを検討するか、テキストの色を変更するか、上下の行にグラデーションを付けることができます。 (フォントの太さやボーダーの幅を変更すると、リフローや移動が発生する可能性があるため、注意してください。)

1
Inca