web-dev-qa-db-ja.com

タッチスクリーンの最小ボタンサイズと間隔

IPhoneなどのタッチスクリーンの場合、ボタンの最小サイズはいくつですか。

そして、どれほど密接にそれらを一緒に押し込むことができますか?

1つの画面に多くのボタンを配置するアプリがあり、使いやすいように設計する必要があります。

13
Mongus Pong

(私は一種の怠惰なので、再版 私の答え SOのスレッドから)

最近の科学的研究はそれを発見しました:

[A] ターゲットサイズ9.2 mm離散タスク [ie、単一ターゲットポインティングタスク] およびシリアルタスクの9.6 mmのターゲットは、パフォーマンスと設定を低下させることなく、タッチスクリーンベースのハンドヘルドで片手で親指を使用するのに十分な大きさである必要があります。

小型タッチスクリーンデバイスでの片手親指使用のターゲットサイズ調査(Parhi、Karlson、&Bederson 2006)から引用。他の情報源は、この「0.4インチに近いルール」に同意します(例:Designing Gestural Interfaces(Saffer 2008、p。42))。

IPhoneのピクセル密度が 163 PPI (6.417px/mm)であることを考えると、どのターゲットでも59px以上の対角線を目指してください。

(これは片手での親指の使用に対してのみ検証されることに注意してください。)


これらのガイドラインに従えば、間隔 /を削除できます。

tl; dr?すべては、ピクセル密度に要約されます。

10
jensgram

Appleによる推奨事項については、 iPhoneヒューマンインターフェイスガイドライン (このリンクはWebアプリのガイドラインに移動します)を参照してください。 「 指先サイズのターゲットを提供 」と呼ばれる章があり、これを基にして意思決定を行うことができます。

また、推測しないでください、テストします。さまざまなサイズの指(ターゲットオーディエンスの範囲内)を使用して何人かの人々を獲得し、プロトタイプでさまざまなサイズのボタンを押してもらいます。それはあなたに何が期待できるかについて多くを教えてくれます。

編集:MicrosoftのWindows Phone 7向けUI設計および相互作用ガイド は、4ページの「最小のタッチターゲットサイズ」の詳細を示しています。ガイドは優れており、タッチスクリーンUIで作業するUIデザイナーには必読です。

8
Rahul

一部のAndroidベースのモバイルアプリケーションを開発しているときに、ユーザーが指/タッチで簡単かつ正確にアクセスできる最小のタッチ領域をテストする必要がありました(クリックアンドドラッグアクションを実行)。

テストは3 Androidベースの電話:HTC Hero、Samsung Galaxy Spica、T-Mobile Pulseで行われました。Pulse(3.5インチ画面)を除くすべての電話には3.2インチ画面がありました。それらの320x480ピクセルの画面解像度と容量性の画面表面。

要するに、20x20ピクセルよりも小さいものはすべて使用できませんでした。また、ボタンの周囲にはスペース(5ピクセルのマージン)が必要です。

2
Bojan Gavrovski

UXガイドラインの多くは指先のサイズを中心に展開されており、これらのガイドラインは推奨サイズと間隔が異なります。指先のサイズは、最小サイズのコントロールと間隔を決定する唯一の要素であってはなりません。

お問い合わせ

タッチスクリーンに触れるときは、指/親指で作られた実際の「接触パッチ」を考慮してください。また、ユーザーがタッチをターゲットに視覚的に集中させたとユーザーが判断する際のエラーも考慮する必要がありますが、実際には、画面との実際の接触が片側から少しずれている場合があります。

デバイスタイプ

さまざまなデバイスの持ち方やユーザーからの距離の違い(たとえば、携帯電話とタブレットを比較すると、電話が近くにある可能性があります)により、最小タッチサイズと間隔も異なる場合があります。それらは視聴者により近く保持され、間違いが起こりにくいので、あなたは間違いなく電話のより小さな最小値で逃れることができます。タブレットのように離れた場所にある大きなデバイスでは、ミスの可能性を高めるために最小サイズを増やす必要がある場合があります。


UXmatters( http://www.uxmatters.com/mt/archives/)のこれと他の要因について話している素晴らしい記事があります2013/03/common-misconceptions-about-touch.php )。

記事の抜粋:

...指または親指の一部のみが画面に接触します...接触パッチは圧力と角度によって異なります

物理的なサイズが重要なため、すべての適切なガイドラインは、ミリメートル、インチ、タイポグラファーのポイント、またはその他の実世界のスケールです。

可視ターゲットのサイズを大きくする必要はありません。代わりに、リンクまたはボタンの周囲のクリック可能な領域の寸法を単純に増やすことができます

視覚とタッチの両方のターゲット領域のデザイン。ユーザーの期待を考慮してください。

サイズ:

enter image description here

1
Dave Haigh

追加として:Googleのマテリアルデザインでは、タッチターゲットのサイズとして7〜10 mm以上を推奨 https://www.google.com/design/spec/search.html?q=Touch+target+size

0
Andi