web-dev-qa-db-ja.com

テーブルヘッダーの右側にツールチップアイコンがありますか?

テーブルヘッダーの右側にあるツールチップアイコンを使用しますか?

各列ヘッダーに短い情報が記載されたテーブルがあります。各ヘッダーの横にあるアイコン[i]で画面を乱雑にしたくありませんが、使用時に情報を詳しく説明したいと思います。

それで...下の画像のようにアイコンなしで列ヘッダーにツールチップを配置すると、ユーザーはツールチップを見つけることができますか?または、短いタイトルの説明に対する代替ソリューションはありますか?

enter image description here

3

ヘルプを表示する各項目の横にある[i](または類似の)アイコンを使用することは、ほぼ受け入れられている標準だと思います。業界標準を変更すると、顧客はすぐに別のことを考えることができます。この種のことを読むのに適した本は、Steve Krugの「Do n't Make Me Think」です。

例-誰もが玄関のドアハンドルが手元にあることを期待しており、開閉の操作はかなり堅調です。ドア自体に素晴らしいデザインが思いついたが、それはハンドルを標準からドアの最下部まで移動する必要があった、またはさらに悪いことに、ハンドルがまったく表示されていない場合は、即座に人々が目の前の障害物を自然に乗り越えることがより困難になります。

[i]アイコンを使用しないことに本当に頭がよければ、テストできるオプションが2つあると思いますが、このヘルプテキストがそこにあることは明らかです。

古いアイデアの新しいデザイン

新しい[i]アイコンを自分で再設計します。より合理的でかさばらないようにしたいと思いますが、最終的には同じ目的タイプのアイコンを提供します。

点線の下線

古き良き 'attr/abbr'の点線の下線。視覚的に人々は、それが純粋な好奇心から異なっていることを知っています。ほとんどの人はホバリングし、アニメーションの遅延が遅すぎない限り、サイトでこれが何を意味するのかを理解します。ホバー時にカーソルタイプを変更することで、これを強化することもできます。

それらを試して、試してみて、人々がそれとどのように相互作用するかを確認してください。

覚えておいてくださいXは単なるデザインではありません
多くの人々は、素敵なデザイン=素敵な体験であるとすぐに思い込みます。あなたは世界で最も素晴らしいウェブサイトを持つことができますが、人々が彼らが探しているものを簡単に見つけることができない場合、それは最高の経験になることはありません。

お役に立てれば。

3

ツールチップを取得するためにテーブルヘッダーの上にマウスを置くことは絶対に考えません。各ヘッダーの後にツールチップキューを表示したくないので、代わりに、さまざまな列を説明する1つのヘルプボタンを画面に追加できますか?

1
Dennis