web-dev-qa-db-ja.com

ボタンの上にマウスを置いたときのデフォルトのカーソルはハンドポインターではありません

HTMLにカーソルを合わせると、デフォルトのカーソルが矢印になるのはなぜですか<button>?矢印は何かを選択できるといつも思っていましたが、手でアクションを実行できます。ボタンはアクションを実行するので、デフォルトのスタイルをオーバーライドしてハンドポインタにしないでください。

button cursor hand

button {
 cursor: pointer;
}
74
JoJo

ボタンは、従来のデスクトップソフトウェアのUIコントロールです。ハンドポインターがインターネットの登場前に使用されたことがないコンテキストです。

Webページが同じコントロールを使用し始めたとき、デスクトップ環境の場合と同じようにボタンを保持していました。

43
franz976

Affordanceがすべてです。ボタンは、アフォーダンスが高く、使用方法を視覚的に示します。ハンドポインターは、アフォーダンスが低いときに使用され、そのアイテムとの対話方法を示します。

以下は、Microsoftの抜粋です Windowsデスクトップアプリケーション>デザイン>ガイドライン>インタラクション>マウスとポインター

「適切に設計されたユーザーインターフェイス(UI)オブジェクトは、オブジェクトの使用方法を示唆するオブジェクトの視覚的および動作上のプロパティであるアフォーダンスを持っていると言われています。」

そして:

テキストリンクとグラフィックスリンクは、アフォーダンスが弱いため、手または「リンク選択」ポインター(人差し指が指している手)を使用します。リンクには、それがリンクであることを示す他の視覚的な手がかり(下線や特別な配置など)がある場合がありますが、カーソルを合わせたときにハンドポインターを表示することがリンクの明確な表示です。

混乱を避けるために、ハンドポインターを他の目的に使用しないことが絶対に必要です。たとえば、コマンドボタンには既に強力なアフォーダンスがあるので、 tハンドポインターが必要です。ハンドポインターは、「このターゲットはリンクです」を意味し、それ以外は何も意味しません。

36
JonW

CSS 2.1CSS Basic UI の両方の仕様では、ポインターカーソルはリンク専用( '... aポインタリンクを示します ')。 CSS 2.1テストスイートの作成者の1人が、W3Cメーリングリストで 次のコメント を書きました。

<img onclick = "... some function ...">、プッシュボタン、ラジオボタン、チェックボックスの上にカーソルを置いても、Windowsの下のカーソルはポインターに変化せず、矢印のままです。

ポインタカーソルは、リンクを示し、ではないすべて/すべてのクリック可能なオブジェクトを示します。 Web作成者がカーソル宣言を悪用したり、カーソル宣言を誤用したりするのは、仕様が述べていないこと(カーソルのクリック可能性を明らかにするカーソルなど)を一般化または想定する傾向があるためです。

したがって、リンク以外のコンテキストでcursor:pointerを使用しても使いやすさが向上するかどうかは、CSS標準に違反しています。

12
Ilya Streltsyn

興味深いことに、送信ボタンをthisコメントフォームに合わせると、カーソルが手に変わります。 「arrow = do and hand = go」はおそらくある時点では慣習だったと思いますが、a)それを知らないこととb)より良い設計によって広く捨てられています。ボタンがクリック可能に見えるようにすると、エンドユーザーにとってカーソルの変更は問題になりません。

10
Lyndon

心理学についても少しです。カーソルをマウスオーバー時に矢印も変更すると、ユーザーはアクション可能な何かの上にカーソルを置いていることを示しますが、必ずしも他の場所に移動するアクションではありません。これは、ウェブ上でマウスオーバーの手のアイコンがどこかに移動できることを示しているのとは異なります。

3
jameswanless

Webインターフェイスには、すべてのOSのように標準化された要素はありません。ウェブインターフェースiCloudとOneDriveカーソルはデスクトップOS標準とは異なるため。

ICloudとOneDriveの両方にネイティブインターフェースとウェブインターフェースがあると考えると、ネイティブではボタンにデフォルトカーソルが使用され、ウェブではボタンにハンドカーソルが使用されます。

enter image description here

enter image description here

0
Pradeep

ボタンは、微妙にリンクとは異なります。リンクは現在のページを別のページに置き換えるだけですが、ボタン-通常-はユーザー入力を送信し、多くの場合、どこかに保存されているデータに影響を与えます。したがって、区別は合理的です。

ただし、通常はボタンのスタイルをボタンと同様にリンクしたままにし、同様にリンクを使用するため、ボタンのポインターをスタイルして、手で「アクション」を寄付することがよくあります。

0
Bobby Jack