web-dev-qa-db-ja.com

Webページの推奨ボタンサイズ

Webページのボタン（またはクリック可能なもの）のサイズに関する現在のユーザビリティガイドラインは何ですか？

buttonscsshtmlusability
8
Tony the Pony

これに関する「公式」のガイドラインはないので、いくつかの有名なサイトを見てみることをお勧めします。例として、SOを例に考えてみましょう。これがないと、それほど人気はありません。

  • 使いやすく、理解しやすいUI
  • メインメニューはほんの数点で構成されているので、誰も混乱しない
  • ボタンは大きいので、クリックは簡単ですが、大きすぎません（マウスを遠くに移動させる必要はありません）。
  • font-sizeはNiceであり、通常のテキストよりも少し高く、見やすく、背景とのコントラストが良いため、目を痛めることなく読みやすくなっています。
  • サイト自体は軽くて明るいです、テキストは白地に黒です（ここでもコントラストが良いです。多くのテキストでは、これは黒地のものよりも優れています（私の意見では））。

詳細については、googleに ergonomic ui を要求して、 this を確認してください（これはWebサイト/ Webアプリに固有ではありませんが、とにかく良い点です）

4
oezi

クリック可能な要素のサイズについて誰かが質問し、誰もフィッツの法則について言及していませんか？

http://en.wikipedia.org/wiki/Fitts_law

http://particletree.com/features/visualizing-fittss-law/

他のすべての考慮事項はさておき、フィッツの法則は（近似的に）「大きい方が良いですが、中から大から中から小から中への変更からより多くの利益を得るでしょう。」

4
edeverett

できるだけ大きい。クリック可能なアイテムが大きいほど、クリックしやすくなります。

もちろん、これと競合する他の要因があります。たとえば、ボタンだけではなく、他のもののための余地を残したいなどです。

3
Guffa

考慮すべきことの1つは、サイトにタッチ機能を追加することを目的としている場合です。もしそうなら、それは考慮に入れるべき要因です。タッチデバイスでは、ボタンと、理想的にはより大きなボタン（または、少なくともより大きなターゲット領域）の間隔を広げる必要があります。

2
DA01

Windows UXガイドラインに従う場合は、ボタンのサイズに関するガイドラインがあります。これはWebアプリケーションに複製できます。しかし、Webページに対してそれを行うかどうかはわかりません。 23pxはWindows UXガイドラインが言うことです

1
Abhijeet

画面の幅全体に広がる丸い角のチェックアウトボタンがあるデモビルドが送られてきました。ひいきのように見えるだけでなく、データを使って自分の意見を実際にバックアップすることはできません。

デスクトップボタンには大きすぎますか。

うまくいけば、サイト全体のボタンサイズの一貫性を私の引数として使用して、開発者と妥協できるようになるでしょう。指を交差させた3分の1のサイズにすることができますが、スクロールに固定することで、常に手の届く範囲に収まります。

「子供が遊ぶもの」のように見えるボタンを備えた信頼できるブランドのプレミアムな外観を維持するのは難しい

0
Paul Giles