web-dev-qa-db-ja.com

「タッチスクリーン対応」のユーザーインターフェイスなどはありますか?

タッチスクリーンフレンドリーについての私の理解は、コントロールが小さすぎず、指でタップできることです。 「タッチスクリーン対応」のユーザーインターフェイス標準はありますか?または、Word(タッチスクリーン対応)さえありますか?

30
Lester Nubla

はい、それは finger-friendly と呼ばれています。

小さなタッチターゲットは、大きなタッチターゲットよりもヒットするのが困難です。モバイルインターフェースを設計するときは、ターゲットを大きくして、ユーザーが簡単にタップできるようにすることをお勧めします。しかし、大多数のユーザーに最高の使いやすさを与えるために、どれだけ大きくするべきでしょうか?多くのモバイル開発者はこれを不思議に思っており、そのほとんどは、プラットフォーム開発者が提供するユーザーインターフェイスガイドラインに答えを求めています。

小さなタッチターゲットはヒットするのが非常に難しく、ユーザーは正しいターゲットを押すために(可能な場合)ズームインする必要がある場合があります。特に有用ではなく、対処する必要がある問題。また、ターゲットを打つことは困難です。ターゲットを指でタッチすると同時に、押すオブジェクトを非表示にすることができます。あるいは、オブジェクトをプッシュ表示にするために指先を使用することもできますが、それを機能させるには指を再配置する必要があります。

enter image description here

ボタンまたはリンクの間に十分な空白を実装しないと、ユーザーが意図しない他のボタンを誤って押してしまい、他の場所に移動してしまう可能性があります。それが起こるときの欲求不満を想像してみてください。

enter image description here

「フィンガーフレンドリー」のコンセプトはまだそれほど大きくないかもしれませんが、おそらく急速に成長するでしょう。


Smashing Magazineの画像: 指に優しいデザイン:理想的なモバイルタッチスクリーンのターゲットサイズ

30
Benny Skogberg

これはかなり大まかな質問ですが、いくつかのリソースを探している場合は、次のことをお勧めします。

20
Hynes

タッチとマウスの違いは、コントロールのサイズだけではありません。別の考え方が必要です。

•スクロールではなくスワイプ(スクロールバーの役割を再考する必要があります)

•クリックしてズームするのではなく、ピンチします。

•カーソルが見えないままになる(指の下にあるため)。これにより、操作がより直接的になりますが、正確さが低下します。

•ホバリングなし(ツールチップはどこに残りますか?)

•小さいデバイスでは、chromeのスペースが少なくなります。

等。

11
Igor Asselbergs

以前にfinger-friendlyという用語を使用したことがありますが、これはかなり簡潔です。マウスとキーボードのインターフェースは問題ないかもしれませんが、指によるタップやスライドなどには適さない場合があります。目的に応じて専用のインターフェースを作成するか(スマートフォンやタブレットアプリなど)、どちらか一方の設計を両方のユースケースに合わせて調整してください。

コントロールのサイズ設定よりも、指に優しいインターフェイスだけではありません...コントロール間の間隔と、マウスで最適に機能するホバー効果の慎重な使用もあります。

フィッツの法則 について考えてみます。

フィッツの法則(しばしばフィッツの法則として引用される)は、主に人間とコンピュータの相互作用と人間工学で使用される人間の動きのモデルであり、ターゲット領域にすばやく移動するのに必要な時間は、ターゲットまでの距離とサイズの関数であると予測しますターゲットの。フィッツの法則は、手または指でオブジェクトに物理的に触れることによって、または仮想的に、ポインティングデバイスを使用してコンピューターモニター上のオブジェクトを指すことによって、指し示す行為をモデル化するために使用されます。 1954年にPaul Fittsによって提案されました。

速度と精度のトレードオフがあり、ターゲットが小さくなったり、ターゲットが遠ざかったりします。

5
Grant Palin

1970年代と1980年代に始まった非常に初期のタッチスクリーンアプリをいくつか開発し、長年にわたって多くの教訓を学び、独自のガイドラインを開発してきました。

(私たちは、タブレットや携帯電話などのハンドヘルドデバイスが存在するずっと前に、フルスクリーンサイズの端末で作業を行っていたことに注意してください。)

まず、ユーザーを理解する必要がありました。彼らは一般市民のメンバーですか、それとも訓練された従業員ですか?彼らはこれを4時間シフトで使用しますか、それともたまに使用しますか?それらは常に制御された環境にありますか、システムがドアの外で使用されますか、またはユーザーが冬の風がそれらを冷やすことができる外のドアの隣に立って、手袋を着用するように誘惑しますか?ユーザーは、洗浄液で機器を定期的に洗浄する必要があるフードサービスエリアにいますか、それともプラスチック手袋を着用している可能性がありますか?これらの質問は、タッチスクリーンテクノロジの選択を決定するのに役立ちました。

次に、アプリケーションはボタンの位置とタイプを常に変更していますか?または、ボタンはかなり一貫していて、比較的静的な領域にありますか?画面上の固定された場所のセットにボタンを制限すると、繰り返しアクティビティを実行するユーザーに役立ちます。ボタンをどこにでも表示すると、速度が低下します。通常は、ナビゲーションボタンを一定の位置に配置して、一種のフレームを設定します。

タッチ可能なボタンには、両側に少なくとも1/2インチを含める必要があり、タッチ可能な領域が大きいほど良いとのガイダンスがありました。

処理がすぐに完了する必要はありませんでしたが、タッチが受け入れられたことをユーザーに即座に応答させる必要がありました。そのボタンのタッチ領域全体を反転させて、タッチしている間、指の下で強調表示させました。これはまた、ユーザーが触れた領域の全範囲をユーザーに教えます。

私たちは大きなフォントを使用し、ボタンのラベルにはせいぜい数語しか伝えないようにアドバイスしました。

ドラッグアンドドロップ、ドラッグ可能な選択ボックス、マルチタッチ、ジェスチャーは提供していません。 (これも、20〜30年前で、そのようなものが発明される前でさえ、今日のように一般的であることは言うまでもありません。)ユーザーが不要な領域に触れた場合、指をその領域の外にドラッグできます。最初のタッチポイントではなく、指のリリースをトリガーしました。彼らは、誤って指を画面の非タッチ領域にドラッグしてリリースできることを学びました。

これらの教訓のうちいくつが、今日のiPadの読み書き能力のある人々にまだ当てはまるかはわかりません。オペレーティングシステムとGUIフレームワークにネイティブのタッチ機能を使用することで、アプリケーションはそれほど多くの詳細を管理する必要がなくなります。そして、私たちの目標は「簡単だが非常に限られている」ことであり、「細部と完全な機能のために必要な細かいモーター制御」ではなかった。

4
John Deters

タップ可能な領域のサイズだけではインターフェイスがタッチフレンドリーにならないことに注意することが重要です。この Josh Clarkによる作品 では、作者はさまざまなタッチデバイス(スマートフォン、タブレット、ハイブリッド)上の重要な要素の配置に焦点を当てています。

親指の法則タッチ用に設計することは、指用に設計することを意味しますが、具体的には、親指用に設計することになります。携帯電話からタブレット、ハイブリッドまで、すべてのハンドヘルドタッチスクリーンで、親指がショットを呼び出します。これが理由です。

電話:

スマートフォンでは、最高のインターフェースが片手で握れるように最適化されています。手書きでコーヒーを飲み、赤ん坊を抱えることができるため、解放されます。これが最も一般的なグリップです。しかし、電話を片手で操作することは親指で操作することを意味するため、制限があります。親指は獣から私たちを分離しますが、悲しいことに、ソフトウェアの運転に関して言えば、親指は手の届かない範囲と器用さの両方に欠けています。

enter image description here

タブレット:

タブレットは非常に多くの異なる方法で保持されているため、タブレットは扱いにくいです。私たちはさまざまな抱擁をつかみ、傾け、傾け、ゆがめ、握り締めます。抱擁の多くはスタンスに依存します。経験則は、親指ゾーンが変更されることを除いて、これらの男にも適用されます。ここでの特別な頭痛の種は、親指のゾーンが個々のデバイスであっても一貫していないことです。姿勢によって変わります。

enter image description here

ハイブリッド:

ここでも、経験則はショットを呼び出します。ハイブリッドユーザーは、下隅のグリップを採用し、腕をキーボードの横に置いていることがよくあります。主要なコントロールとナビゲーションを下隅の親指のすぐ近くに配置すると、ゴリラの腕を避けることができます。その結果、スタンドアロンタブレットで見られたサムゾーンの垂直方向に反転したバージョンになります。

enter image description here

2
Yann

他の答えに加えて、マウスカーソルを領域の上に置くことができることに依存する機能は、本質的に指に不向きです。右クリックは不可能ではありませんが、タップアンドホールドを必要とするので迷惑です。また、領域が右クリック可能であることを視覚的に示す標準的な方法はありません。

2
Doval

他の回答が、考慮する必要のあるインターフェースの考慮事項の多くに触れているようですが、「モバイル」ではなく「タッチスクリーン」について尋ねたので、私はあなたが何かのために設計しているという知識に基づいた推測をします標準のモバイルデバイス以外。

その場合は、すべてのタッチスクリーンハードウェアデバイスが同じとは限らない(または同等に近い)ことに注意してください。最新のモバイルタッチスクリーンは、非常に高品質で相互容量のプロジェクトである静電容量式タッチ(PCT)パネルを中心に設計されており、多くの場合マルチタッチ(一度に複数のポイントをサポート)です。多くの大型フォームファクタータッチパネル(キオスクで使用される)は、赤外線タッチ(静電容量式タッチよりもはるかにシンプルな技術ですが、一般に、シングルポイントタッチまたはマルチタッチに限定され、重要な「ゴースト」の問題があります)または劣った自己静電容量PCT。

PCTがどのように機能するかについての詳細は、ゲイリーバレットと表彰された この学術論文 (PDFリンク)を参照してください。

また、次の質問について、大判タッチスクリーン(特にキオスク)の主な設計上の考慮事項について詳しく説明しました。

1
Kit Grose