web-dev-qa-db-ja.com

タッチスクリーンアプリケーションの最適なボタンサイズはどれくらいですか?

study フォームに基づいた、タッチスクリーンコントロールサイズの理想的なボタンサイズ(リンクがなく、ウェブサイトはスパムトラップになりました)について、それほど最近ではないブログ投稿がありましたMITタッチラボは、指のサイズと感度のいくつかの測定値を提供します。

ブログの作成者が指摘したように、この理想的なコンタクトサイズは、設計ガイドにあるWindowsおよびAppleデバイスの推奨サイズよりもはるかに大きくなっています。なぜそのような違いがあるのか​​、そしてタッチスクリーンアプリケーションのコントロールのサイズを大きくする方が理にかなっているのか、またはこれが実際にユーザビリティの問題ではないのかと思います。

また、多くのモバイルウェブサイトやアプリはこれらの原則を完全に無視しているようです。画面サイズは、インターフェイスコントロールの大きさに制限があると確信しています。これは、多くの情報に対応できることと、コントロールを操作するのがどれほど簡単かとの間のトレードオフですか?スタイラスはあまり使われていない感じです。

同様の質問があなたが逃れることができる最小/最小サイズについて提起されていますが、これは最適なサイズとは別の質問であると私は考えます。サイズは、最高のユーザビリティ要件に対応します。

ブログのアーカイブされたリンク(元のドメインはスパムを示しています) https://web.archive.org/web/20140116222719/http://designbrother.com/2013/04/29/touch-screen-design-the -ideal-button-size /

そして、ここにそれへの別の参照があります(それはリンクではなくウェブサイトに問題があることを示すためだけです( http://www.linkedin.com/groups/Touch-screen-design-ideal-button- 2566185.S.238425414

UPDATE#1:最小44 x 44ポイント、それがどのように正確に派生しているかはわかりませんが、興味深いです( http://babich.biz/pagination-best-practices/ )。セクション2をお読みください。クリック可能な大きな要素を提供します。

UPDATE#2:別の参照、今回は Microsoft からタッチターゲットサイズを9 mm四方以上に引用(48x48ピクセルで135 PPIディスプレイ(1.0xスケーリングプラトー)。また、7 mm四方未満のタッチターゲットの使用は避けてください。

UPDATE#3:Apple開発者ガイドライン から引用したもので、最近44 x 44ポイントを引用しました。

更新#4:NN/gが タッチスクリーン上のタッチターゲット に関する記事を公開しましたが、情報/結論は変更されていません。

UPDATE#5一般的なUI要素の クリック可能な領域のサイズ を拡張する必要性についての非常に優れた記述で、 WCAG 2.1ガイドライン 「タッチまたはマウスの最小ターゲットサイズは44×44ピクセルにする必要があります」(2.5.5-ターゲットサイズ-レベルAAA)。

enter image description here

59
Michael Lai

はい、サイズが問題になる可能性があります。指の精度はポインター+マウスの精度よりも低いため、タッチターゲットは通常のデスクトップターゲットよりも大きくする必要があります。この最悪の精度では、見逃されたタップを実行する確率は大きくなります(ボタンに触れない、または間違ったものに触れるなど)。

通常、タッチスタディは主なスタディ変数としてエラー率を使用します。提案は、エラーが発生しやすい完全なタッチターゲットではなく、画面情報密度などの他の重要な変数のバランスを取りながら、エラーの数を実用的なレベルに最小化するためのものです。

Target size influences error rate (from Microsoft)

キオスクなどの従来のタッチインターフェースでは、画面のサイズによってデザイナーがこれを行うことができるため、ターゲットは通常、携帯電話よりもはるかに大きくなります。携帯電話では、いくつかのトレードオフを行う必要があります。これは、スタイルガイドと過去の調査でターゲットサイズが異なるためです。

ピクセル単位の測定は、タッチインターフェイスの設計には役立ちません。画面のピクセル密度に関連して人間の指のサイズを考慮する必要があります。設計対象のデバイスのピクセル密度を把握し、メトリック単位をピクセルに変換する必要があります。

他の変数を考慮しない場合の最適なタッチターゲットサイズは、理論上の無限サイズですが、スタイルガイドでは通常、9mm(0%、5%のタップを逃した)および7mm(1%のミスしたタップ)の一般的なターゲットサイズを使用することをお勧めします最低でも。

Luke Wroblewskiには スタイルガイドの推奨事項の優れた編集 があり、 Microsoftの推奨事項 (ユーザーテストセッションに基づく)を参照することをお勧めします。逃したタップのグラフは彼らの研究からのものです。

47
PaRaP

さまざまなプラットフォームに与えられたガイドラインは、すべて最小サイズは9〜12mmであるという考えに基づいています。ガイドライン間の違いは、主にデバイスのピクセル密度が異なるため、9〜12mmの数値に到達するために必要なピクセル数が異なるためです。

これはボタンを使いやすくするための理想的な寸法ではありませんが、決して下に移動してはいけないことに注意してください。ただし、実際には、スペースの制約により、使用される標準サイズになることがよくあります。

実際の「理想的なサイズ」とはアプリケーションによって異なります。私は、下揃えのアクションバーにある3つのボタンを頻繁に使用しなければならない1つのモバイルアプリケーションに取り組みました。ボタンのサイズを約20%増やすことで、UXに測定可能な改善が見られました。これは、このアプリケーションにとって十分に重要であり、大きなボタンのためにある程度のスペースをあきらめようとしました。他のアプリケーションでは、これは適切なトレードオフではない場合があります。

19
JohnGB

同様に重要なのは、ボタン間のパディングと、ボタンが画面上に配置される場所です。電話のケースのため、画面の端にあるボタンに触れるのは難しいと主張する人もいます。

現在市場に出ているスマートフォンのサイズが大きいため、おそらく片手での使用はかなり落ち込んでいますが、親指の到達を考慮することは理にかなっている可能性があり、その限界や動きでは精度が低くなります。 モバイルデバイスの使用に関する記事 からのこの画像は、それをかなりよく示しています。enter image description here

最後に、誰かがすでに述べたように、ユースケースはそれほどではないにしても等しく重要です。アプリがスノーボーダー向けである場合は、スキー用手袋(少なくともタッチデバイス用に作られた導電性手袋)での使用を検討してください。それが幼児向けであり、まだ運動能力を発達させている場合は、より大きなタッチゾーンとパディングが賢明です。

8
Thurstan

私は今、いくつかのプロジェクトでこの発見を引用して人々と戦いました。矛盾したimhoは、制御された環境に存在する研究者の能力のために存在します。

処理するページが複雑な場合、すべてのタップ可能なアクションを大きな男の親指のプリントのサイズにすることはできません。そうした場合、UIの雑然とした混乱になってしまいます。人々は私たちが時々彼らに信用を与えるよりも彼らのタッチデバイスに熟達しています。

重要なアクションの場合、9〜12 mmの正方形(またはそれ以上)の範囲で確実に機能するものが見つかりました。小さなアイコンやテキストリンクなどの2次および3次アクションの場合は、 6 mm四方未満。

ボトムライン: "クリティカルパス"アクション以外のものを使用すると、少し小刻みに部屋が広がります。最近、人々はデバイスに完全に行き当たりばったりではなく、遅延タップのコストを認識しています。重要性の低いアクションの1つと対話したい場合は、指で少し注意します;)

6
plainclothes

PaRaP簡単に感動本当に重要な点について

「[キオスク]のような従来のタッチインターフェースでは、通常、ターゲットは携帯電話よりもはるかに大きい」

ユーザーがどのようにインターフェイスを操作しているかに依存するため、pxまたはmmの単一の最適サイズはありません。

ニュースリーダーアプリなど、ユーザーがじっと座っているのが好きな場合は、ボタンを小さくすることもできます。

ワークアウトタイマークロックなど、ボタンが動く可能性がある場合は、ボタンを大きくする必要があります。

ミスとサイズの割合に関するデータを収集するアプローチが好きですが、シナリオによって結果セットは異なります。また、プレスする時間も大事だと思います。ボタンを逃さないかもしれませんが、ボタンを押すまでに体の動きを止めるのに時間がかかりすぎるかもしれません。

1
andrewb