指で友だちをモバイルデザインにする:タッチスクリーンに最適なサイズ

少し前まで、興味深い記事が私の目を引きました。著者はモバイルインターフェイスの使いやすさについて考えています。 彼の判断の一部は証拠大Capの結論のカテゴリーからのものであるが、そこにはかなり有用な事実と議論が数多くあるので、私は彼女の翻訳をhabro-publicと共有することにした。 さらに、このトピックはコメントで有益な議論を引き起こす可能性があります-多くのデザイナー自身がこの問題に繰り返し出くわしたのではないかと思います。







ダーツをプレイすることは、ターゲットの他の部分よりもブルズアイを打つのがはるかに難しいです。 ターゲットの中心がその最小部分であるため、これは自然です。 この原則は、モバイルデバイスにも適用できます。



小さなコントロールは、大きなコントロールよりも指で叩くのがはるかに困難です。 モバイルインターフェイスを設計するときは、すぐにこれを提供し、これらの要素を大きくすることが最善です。 したがって、タッチデバイスのユーザーの生活を促進します。 しかし、大多数のユーザーを可能な限り満足させるには、どれくらいの大きさが必要でしょうか? 多くのモバイルアプリケーション開発者がこの問題に関心を示しており、そのほとんどはプラットフォーム開発者が提供する公式ユーザーガイドを参照しています。



モバイルプラットフォームガイドが言うこと



AppleのガイドラインであるiPhoneヒューマンインターフェイスガイドラインでは、タッチ要素の最小サイズを推奨しています:幅44ピクセル、高さ44ピクセル。 Microsoftのガイド-Windows Phone UI設計および相互作用ガイドでは、34pxのサイズを使用し、最小タッチ領域を26pxにすることを推奨しています。 ノキアの開発者ガイドは、このサイズは少なくとも1 x 1 cm2にすることを推奨しています。 または28 x 28ピクセル。



当時、これらのガイドラインはすべてタッチオブジェクトのサイズの一般的な値を示していますが、それらは互いに一致しないだけでなく、人間の指の実際のサイズにも対応していないことがわかります。 実際、提供されているサイズは平均的な指のサイズよりもはるかに小さいため、モバイルデバイスの使用中に問題が発生する可能性があります。



小さなタッチ領域は大きな問題を引き起こす可能性があります。



小さなタッチオブジェクトにより、ユーザーは再び注意深い照準を合わせて適切な領域に到達するようになります。 ユーザーは、チップまたは指先のいずれかを使用して、指を制御する原理を変更する必要があります。 指パッドを使用してクリックすると、モバイルデバイスのユーザーは大きな接触面積を得ることができますが、タッチオブジェクトは非表示になり、ターゲットが見えなくなります。 それ以外の場合、ユーザーは主に小さな領域をクリックするために指先を使用します。これにより、視覚的なフィードバックが得られ、ターゲットに正確にヒットしたことがわかります。 このような指の動作の頻繁な変更により、モバイルアプリケーションでの作業は遅くなり、複雑になります。







さらに、小さなタッチオブジェクトは多くのエラーを引き起こす可能性があります。 それらが隣り合ってグループ化されると、ユーザーは誤って隣接するオブジェクトをクリックして、不要なアクションを実行する可能性があります。 それは、指の共通領域が複数の隣接オブジェクトを一度にカバーできるためです。 したがって、クリック中にこのクリックの目的が明確に定義されていない場合は、予期しない結果に備えてください。 人差し指だけを使用して間違いを犯すのは非常に簡単です。通常、親指の領域はタッチスクリーン上のターゲットよりもはるかに大きいため、親指を使用してそれらをナビゲートするのはさらに簡単です。 ユーザーは、狭い部分を使用するために指を横向きにすることもありますが、これには手足の不必要な操作のために追加の時間が必要です。







親指の使用は、モバイルデバイスユーザーの間で非常に人気があります。 一部のユーザーは、デバイスで作業しているときに常に2つの無料の手を持っているわけではありません。 多くの人は、片手だけを使い、手のひらにデバイスを持ち、親指でインターフェイスを操作することを好みます。 ターゲットをより正確に打つために、ユーザーは片手と両手、または親指と人差し指を切り替える必要はありません。 さらに重要なことは、ターゲットサイズがクリックエラーにつながるべきではないということです。 小さなタッチターゲットは、指に優しいターゲットとは異なり、ユーザーの生活を困難にします。



人差し指の平均幅(ピクセル単位)。



MIT Touch Labは、 「触覚の力学を調べる人間の指先」(触覚の力学を調べる人間の指先 )で、ほとんどの成人の平均指幅は1.6-2 cm(16-20 mm)であると判断しました。 ピクセルでは、これらの値は45〜57ピクセルになります。これは、開発者向けのほとんどのガイドラインで示されているよりも広いです。







したがって、45〜57ピクセルの幅のクリックターゲットでは、ユーザーができるだけ快適にクリックすることができます。 ターゲットのエッジは、押されたときに常に表示されます。 これは視覚的な影響を与え、クリックの成功を示します。 さらに、ターゲットのサイズが大きいため、ターゲット間での指の移動速度が向上します。 これは、 フィットの法則と一致しています。 フィットの法則では、目標が小さいほど、達成に時間がかかります。 小さな目標は、正確にヒットするために特別な注意を払う必要があるため、ユーザーを遅くします。 指の幅に等しいサイズの目標により、これに時間を費やさず、クリックの精度について心配する必要がなくなります。



ピクセル単位のつまみの平均幅。



人差し指を使用してモバイルデバイスをクリックするユーザーはかなり多くいます。 ただし、親指の愛好家も少なくありません。 親指と人​​差し指の主な違いは、その幅です。大人の場合、平均で2.5 cmで、 72ピクセルに変換できます。







親指を使用している人にとって、72ピクセルは驚くべき効果を発揮します。 この幅のおかげで、ユーザーはインターフェース要素をクリックするのが簡単かつ迅速になります。クリックするたびに親指が常にターゲットに当たるからです。 また、これにより、ターゲットのエッジが任意の角度で見えるようになります。 これは、ユーザーが各タッチターゲットを見るために指を回す必要がないことを意味します。 ワンタッチで目標を達成できます。



小型タッチスクリーンデバイスでの片手親指使用ターゲットサイズの調査では、ターゲットのサイズが大きくなるとエラーの数が減少することがわかりました。 ユーザーは、指を回すなどの不要なジェスチャーを行うことなく、ターゲットコンポーネントをクリックすることができます。



別の調査「 携帯電話でのターゲット選択のためのタッチキー設計 」では、クリック領域が増加するとエラーの数がすぐに減少することも判明しました。



指の面積はほぼ常に完璧ですが、常に実用的とは限りません。



指のサイズに関連するタッチ領域を使用することのすべての利点にもかかわらず、このアプローチはすべての状況で実用的ではありません。 モバイルデバイスでは、限られた領域で作業します。 つまり、さまざまなインターフェイス要素に指に適したサイズを使用すると、デバイスの画面が許容するよりもはるかに多くのスペースを占有する可能性があります。 ただし、そのようなオブジェクトが複数ある場合は、画面上で問題なくマークできます。 画面サイズとタッチ要素のサイズ測定して、余裕のある大きなタッチ領域の大きさを調べる必要があります。 インターフェイスで指の寸法を使用する余裕がない場合は、モバイルプラットフォームの開発者が提供する公式マニュアルに従ってください。



明らかに、タブレットにはより多くの画面があり、より多くの空きスペースがあるため、理想的な指のサイズは、モバイルデバイスよりもタブレットコンピューターで使用する方がはるかに簡単です。 間違いなくこのスペースを使用して、タブレットの使いやすさを向上させることができます。 ただし、モバイルデバイスは、ユーザークリックの問題を引き起こすデバイスです。 したがって、指にとって快適なのは、まずタッチサイズが必要なのは彼らです。 デザイナーが直面している課題は、携帯電話の画面に最適に配置する方法を見つけることです。 これには、画面上で通常よりも少ないタッチオブジェクトを使用する必要があります。 しかし、これはプラスになる可能性があるため、設計者はナビゲーションを簡単かつ明確にする必要があります。



ゲームアプリケーションの指の寸法



考えるべきもう1つのことは、どの指が使用されるかわからない場合です。 ユーザーがどの操作オプションを好むかを判断するのは困難です-親指または人差し指。 アプリケーションがゲームの場合、ほとんどのユーザーは人差し指の代わりに親指を使ってプレイする可能性が高いです。 このため、親指サイズはゲームアプリケーションに特に役立ちます。 コントロールの大きさを親指の面積に等しく設定することにより、ゲームの管理と制御が改善されます。 したがって、ユーザーはボタンを押してもコントロールを見る機会が得られるため、ゲーム内でよりすばやく適応できます。





Gyro13 Steamヘリコプターアーケードゲームには素晴らしいタッチコントロールがあります



タッチオブジェクトのサイズが中指の幅に等しいことで、ほとんどのデバイスでモバイルデバイスの使いやすさが向上することは間違いありません。 ゲームアプリケーションであれ、その他の目的であれ、タッチオブジェクトはユーザーがクリックするように設計されています。 ユーザーがコントロールをクリックする最善の方法を考えるためにアプリケーションから注意をそらす必要がある場合、これはアプリケーションのエクスペリエンスを悪化させます。 新しいアプローチを理解すれば、ユーザーの指で本当に友だちになるアプリケーションを作成できます。 この指にやさしい設計は、いくつかの開発者に限られたものではなく、常に従うことができるモバイルアプリケーションの新しい設計標準です。



PS:一部の用語と表現については、明確な翻訳が見つからなかったため、厳密に判断しないでください。



All Articles