適度に太い指で快適にクリックできるボタンのサイズは？

Question

私のボタンがウェブサイトで四角い形であり、私は大きな指を持つユーザー（および年配の人やメガネを忘れていて、その場で打つことが正確ではない人）に不便をかけたくないとしましょう。

私の推測は40 x 40ピクセルは適切なクリック領域ですが、新しいフルHD電話画面では小さすぎませんか？私は古い電話を自分で持っているので、試せません：X

おそらく、誰かがこの種の問題に使用する「太っている親指」の良いルールを持っていますか？

UIO · Accepted Answer

「太った指」のエラーは、指/親指の接触パッチに最小44px x 44px（約11mm x 11mm）をお勧めします。「重心」は、画面と接触する指の最初の部分です。ビジュアルについては以下を参照してください。

Sketchのようなものを使用してこれをプロトタイプ化している場合は、 Mirr.io を見て、テストデバイスにアクセスできる場合にモバイルデバイスでこれがどのように表示されるかを確認し、それに応じてサイズを変更できます。

詳細については、ここを参照してください。

Chadembox · Answer

WCAG 2.0のドキュメントによると

2.2タッチターゲットのサイズと間隔

モバイルデバイスの画面解像度が高いということは、多くのインタラクティブな要素を小さな画面に一緒に表示できることを意味します。ただし、これらの要素は、ユーザーがタッチして安全にターゲットを設定できるように、十分に大きく、互いに十分に離れている必要があります。

タッチターゲットサイズのベストプラクティスは次のとおりです。

画面サイズ、デバイス、解像度に関係なく、タッチターゲットの高さが少なくとも9 mm、幅が9 mmであることを確認します。最小サイズに近いタッチターゲットが非アクティブな少量のスペースで囲まれていることを確認します。注：このサイズを取得するために画面の拡大を使用する必要はありません。画面を拡大すると、垂直方向だけでなく水平方向にも画面移動が必要になることが多く、使いやすさが低下する可能性があります。