実用的なフォーム要素のサイズ
私は決してUIデザイナーではありません。私はこの1、2年で、多くのWebサイトの重要なボタンやリンクなどに非常に大きなクリックゾーンがあることに気づきました。アクションを実行するためにカーソルを取得するのは面倒なので、私は感謝していると言わざるを得ません。今はおそらくモバイルとの関連性が高いと思います。これらは、これらのデザイン変更の原動力になるかもしれません。
それで、ウェブページのボタン/リンクサイズの経験則はありますか？
これはすべて フィッツの法則 に基づいています。これにより、ユーザーがボタンにカーソルを移動するのにかかる平均時間がわかります。 FittsのUI Law Applied the Web や Jared Spoolのポッドキャスト のような主題に関するさまざまな記事を見つけることができます。
そして、経験則は簡単です：重要なボタンは文字通り親指で押すことができるほど大きくなければなりません（こんにちは、iPad）:-)
Appleのヒューマンインターフェイスガイドライン のiPhoneの経験則は次のとおりです。
少なくとも29ピクセルの高さのコントロールを作成し、44ピクセルの高さのターゲット領域を提供します。
本の詳細 Tapworthy 、私が実際に発見した場所。
しかし、iPhoneのタップターゲットに関しては、どれだけの大きさがあるのでしょうか。さて、指先の大きさは？ Apple 44ピクセルで正確に固定し、この測定値は標準のiPhoneコントロール全体に確実に表示されます
すべてのインターネットユーザーがプロのフルタイムインターフェイスデザイナーの器用さと俊敏性を備えているわけではないという認識が広まっているため、経験則はそれほど多くありません。 1999/2000年に、あなたは物事が小さく、8x8の大きなボタンを使用する多くの「ピクセル」デザインを見ました。 Steve Krug、Kathy Sierra、37signals、Jakob Nielsenなどの2000年代に触発されたユーザビリティブーム以来、人々は自分のアプリやサイトがいかに使いやすくなっているかに気づき、それに応じて設計を始めました。
ストーリーのもう1つの側面は、画面と画面解像度が一般的に大きくなっていることです。今日の平均はおそらく1280x1024以上ですが、10年前はほとんどの人が平均して800x600を平均していたため、サイトで1280x1024のビジターを見つけることができたのは幸運でした。解像度が大きいため、画面により多くのピクセルが収まり、以前はかなり見やすかったものがさらに細かくなりました（そのため、クリックが難しくなります）。
そして最後に、タッチベースのデバイスの導入により、マウスポインターの極端な精度と比較して指のように不正確なもので小さなターゲットをヒットすることは難しいため、多くの開発者がクリック領域を真剣に考え始めました。
これらの変更はすべて、ある時点で経験則につながる可能性がありますが、全体としてできる最善のことは、サイトにアクセスしているオーディエンスの種類を特定し、それが誰であるか、どのデバイスであるかを考慮してそれに応じて設計することです。使用、および画面/ウィンドウにどのくらいのスペースがあるかなどの他の要素。
ある程度、クリックゾーンのサイズは、ページ上の他の要素に相対的です。厳密な基準はありませんが、通常、ボタンの高さは少なくとも40pxで、テキストサイズは通常少なくとも13pxです。また、ナビゲーションや、少なくとも一部のグラフィックコンポーネントを含む他のボタンの場合は、テキストだけでなく、領域全体をクリックできるようにすることが重要だと思います。