指、タッチ、人のためのデザイン。

Stephen Huberによる記事の翻訳 。



2013年の記事「 ユーザーはどのようにモバイルデバイスを実際に持っているのですか？」 」 しかし、それ以来、実際の製品でさまざまな手法を使用して多くの研究と実験が行われ、他の多くの記事が執筆されています。 長年にわたって、人々がスマートフォンやタブレットをどのように持っているか、どのようにそれらと巧妙に対話するかについて、より知られるようになりました。 そして、これらすべては、しばしば予期しないデータですが、2013年の古い記事にはありません。 これが彼女の主な問題です。 デスクトップの使用の観察、古い対話モードの標準、偶然の状況および誤って解釈されたデータに基づいて仮定を行いました。 しかし、さらなる調査とより良い分析のおかげで、誤った仮定を拒否し、真実を突き止めることができました。



今日、多くの人がこのトピックに関する時代遅れで正確性の低い記事を引用しています。 読者は、いくつかの無関係なデータを他のデータと組み合わせることがあり、これに基づいて誤った結論に達することがあります。 この記事の目的は、これに終止符を打ち、人々がタッチスクリーンと対話する方法と、この情報を使用してより良い製品を開発する方法についての最新の理解を提供することです。

「感情」ではなく、データを信頼する

あなたが非常に、非常に慎重でない限り、私たちの観察を分析することになると、あなたは簡単に誤解の犠牲になります。



確かにあなたはスマートフォンを持っていて、それをウェブサーフィンに使用し、いくつかのお気に入りのアプリケーションを使用し、誰もが自分のスマートフォンをどのように使用しているかを理解していると思います。 しかし、あなたは間違っています！ ほとんどの場合、私たちは1つのスマートフォンのみを使用し、デザイナーとしては、ほとんどの人がAn​​droidデバイスを使用していても、iPhoneを所有する可能性が非常に高くなります。



さらに、私たちは主観的に多くのことを認識しており、認知心理学、単なる心理学、パターン、および設計基準に関連する多くのうわさや誤解があります。



タッチは、モバイルデバイスと対話するための自然なパラダイムではありません。 したがって、ユーザーが使用する方法とタッチの新しい設計パラダイムを検討する必要があります。 スクロールアンド選択機能を備えた携帯電話またはタッチ用のキーボードを備えたマウスを提案した後、相互作用の問題の新しい層を解決する必要があるという結論に達しました。 場合によっては、非常に手に負えない問題もあります。これは、タッチ操作がまだ比較的新しいためです。 引き続き適切な相互作用パターンを開発しています。 さらに、タッチスクリーンがどのように機能するかについての理解の範囲と深さは限られています。 多くの場合、私たちは奇妙、意見、個人的な誤り、未確認の情報、噂に基づいて設計上の決定を下します。

タッチ技術

観測結果に移る前に、テクノロジーについて簡単に説明しましょう。 タッチスクリーンの操作におけるいくつかの重要なポイントとその履歴についてお話ししましょう。 これは、今日観察している人々の行動を理解し、データで見つかった問題の一部を説明するのに役立ちます。

ライトペン

ライトペンが最初に登場しました。 これは、コンピューターのポインティングデバイスとしてのマウスの先駆けであり、現在も機能しています。 今日、私たちはそれらをスタイラスと呼びますが、最初はライトペンと呼ばれていました。 スタイラスを使用した最初の生産アプリケーションは、米国空軍の半自動地上環境ネットワークシステムであるSAGEでした。



ニンテンドーダックハントのゲーミングガンは同じ原理で機能しました。ペンはポインターではなく、ディスプレイのタイミングと高度に同期されたリーダーであり、スクリーンのどの部分にガンが向けられているかを示すことができました。



1960年代の終わりまでに、デスクトップワークステーションで利用できるライトペンは、今日使用されているライトペンとそれほど変わらなかった。 ポインティング、コピー、貼り付け、ジェスチャの使用など、おなじみのやり取りをすべて実行できるようになりました。



デジタルペンは依然として非常に積極的に使用されていますが、既に他の技術を使用しています。 現在、それらのいくつかは圧力と角度を決定できます。

赤外線タッチスクリーン

最初のタッチスクリーンの1つでは、人の指の位置を決定するために、赤外線のグリッド（垂直および水平に向けられた）を使用しました。 1980年代には、このようなスクリーンはATMや博物館の屋台などのその他の公共機器で使用されていました。



ご存知のように、赤外線は画面上のオブジェクトの存在を判別できるため、このようなデバイスは相互作用のいくつかの簡単なルールを暗示しています：袖と紙の袖口を画面から遠ざける必要がありました-赤外線ディスプレイの周りには、それらがかなり入っている広いフレームがありました深く引っ込んだ。 光線自体は非常に広いため、ユーザーの指を完全に決定しました。 最終的に、そのようなディスプレイは非常に正確に配置することを学びましたが、ほとんどのモデルでは、ユーザーが画面のかなり大きな部分を選択すると想定されていました。 つまり、画面全体が選択可能なゾーンのグリッドであったため、ボタンを大きくする必要がありました。 しかし、当時のアプリケーションでは、このようなディスプレイは非常に適切で信頼性がありました。

抵抗膜方式タッチスクリーン

タッチスクリーンは、市場に抵抗技術が登場してから普及しました。 それにより、人々はタッチを自然な相互作用の形として認識することができました。 「抵抗性」という用語は、スクリーンが動き、つまり圧力に物理的に抵抗することを意味します。 最上層は柔軟な透明プラスチックでできています。 ユーザーが指またはスタイラスで押すと、最も細いワイヤのグリッドが下にあるグリッドに押し付けられるため、クリックが配置されます。



このような画面は、非常に反応がよく正確です。 しかし、柔軟な最上層のために、応答性と活力の間で妥協する必要がありました。 このようなスクリーンは簡単に傷が付いたり、拭いたり、最上層が破れたりすることさえあります。 応答性の高いシステムは脆弱です。 粘り強いモデルの使用はより難しく、受動的なスタイラスが必要な場合があります。これにより、画面を非常に強く突くことができます。



最近まで、それは低コストのデバイスと特定の環境で最高のタッチスクリーンテクノロジーの1つでしたが、応答性と高品質の材料の必要性が市場の抵抗スクリーンの混雑につながりました。

静電容量式タッチスクリーン

今日、2017年に誰かがタッチスクリーンについて話すとき、彼は容量性技術を意味します。 現在、このような画面は、スマートフォン、タブレット、エンターテイメントシステム、車、キオスクなど、あらゆる場所で使用されており、他の小型機器にも導入されています。



容量性スクリーンは、人体の電気伝導率を使用します。 したがって、彼らはスタイラスとして古い光の羽で動作しません、あなたは手袋を外す必要があり、時には皮膚が乾燥しすぎると問題があります。 指はコンデンサーのように機能し、スクリーン上のガラスの存在は、X軸とY軸に沿った層で構成されるスクリーンのガラスと保護プラスチックまたはガラス層の間のグリッドノードによって測定されます。



容量性スクリーンレイヤーの簡素化されたレイアウト：







高解像度センサーはすでに存在しますが、指紋センサーなどの特殊なデバイスでのみ使用されます。 ほとんどのタッチスクリーンは非常に粗いグリッドを使用しており、より正確な位置決めは計算によって行われます。



特定の角度で、垂直静電容量センサーに気付くことができます。











これは理想的なシステムではありません。 数学的計算の複雑さ、電気ノイズ、厚さ、重量、コスト、光学的透明性の間のトレードオフなど、精度の向上には障害があります。 ディスプレイの精度が高すぎると、指やスタイラスの最も軽いタッチを認識でき、背景の電気的な「ノイズ」が干渉し始め、一般的にそのようなスマートフォンを使用することは困難になります。



数年前、Motorolaはロボットを使用して、さまざまなタッチの圧力、角度、速度を正確に制御する実験を行いました。 下の図のように、スマートフォンのグラフィックエディターで定規とスタイラスを使用して斜めの平行線を描画してみてください。 ほとんどの場合、彼らは完全にまっすぐになりません。



タッチの不正確な解釈のデモンストレーション：









ライン間の不均一な距離は私のせいです、私はロボットではありません。 ただし、この図は他の技術的な問題も示しています。 改行は、タッチの精度を判断する際のエラーの結果です（おそらく、スタイラスの細い先端が原因であるため、この問題は指では発生しない可能性があります）。 線の端の曲がりや切れ目は、ディスプレイの設計におけるアーティファクトと電気ノイズの影響を示しています。 線のうねりは、グリッドの線間の不正確な計算によるものです。

サイズ、圧力、接触スポット

接触スポットは、指と画面の間の接触領域です。 汚れのサイズと形状は、ユーザーが指の先端または枕でどのように触れるか、および圧力によって大きく異なります。



連絡先：









容量性スクリーンは、スポットの中心点、つまり幾何学的中心のみを修正します。 スポットの大きさは関係なく、圧力、サイズなどを測定する必要はありません。 多くのデバイスはマルチタッチ（マルチタッチ）をサポートしており、一部のデバイスは圧力の力を認識することができますが、これらの機能は安定したサポートがないため、有益に実装することは困難です。 したがって、グラフィックエディタまたはゲームを作成しない場合、ここでは、タッチスクリーンが押しの力を認識しないと仮定します。 これは直感に反するように思えるかもしれませんが、指のサイズはタッチの精度や感度とは関係がないことを理解することが重要です。



タッチスクリーンの古い標準は指のサイズに基づいているため、それらはもはや関係ありません。 たとえば、ISO標準の開発中、市場は人の指を認識する赤外線技術に支配されていたため、標準では、親指に対応するためにタッチターゲットのサイズを22 x 22 mmにする必要があると判断しています。 著者は、正確な適応に関する多くの研究を行っていません。



標準に準拠することを決定するときは、特定の推奨事項の基本を必ず理解してください。 技術が進歩するにつれて、標準は常に最新の状態に保たれるわけではありません。 基礎となる研究基準は、誤っているか、時代遅れであるか、特定の状況または技術にのみ適用可能です。

古い規格

時代遅れの標準を推進しているのはISOだけではありません。 すべてのモバイルOS開発者と一部のOEMは、ターゲットディスプレイオブジェクトの独自のサイズを宣伝しています。 ノキアは古い標準のバージョンの1つを借りて、更新しませんでした。 マイクロソフトはこの点で少し優れており、ターゲットオブジェクト間にギャップを作ることを提案していますが、一般的に問題はオブジェクト自体のサイズがかなり小さいことです。 GoogleとAppleは、人的要因ではなくプラットフォームの使いやすさに基づいていると思われる他のサイズを使用しています。 物理的な測定値の代わりにピクセルを使用する規格は、デバイスに依存しないピクセルでさえ画面ごとに大きく異なる可能性があり、人体のサイズとは関係がないため、役に立ちません。



ターゲット表示オブジェクトのサイズだけでなく、モバイルデバイスに関連する他の多くの標準も時代遅れです。 W3C WCAG標準はシンプルで理解しやすく、普遍的であるため、参照できます。 ただし、モバイル分野には適用されません 。 W3Cは、特にアクセシビリティ標準に関しては、モバイルデバイスを無視します。 彼らは、すべてのコンピューターがキーボードとマウスを備えたデスクトップであり、ユーザーの目から手の距離にあると考えています。 彼らの標準は、モバイルユーザーが対処しなければならない角度、明るさ、距離、およびその他の側面を正規化せずに、古い標準の72/96 ppi（インチあたりのピクセル）に基づいてピクセルサイズを定義します。



幸いなことに、モバイル標準の不備は、さらなる研究と改善された標準の進歩として、すぐに歴史になります。 「通常のコンピューター」は、マウスとキーボードを備えたデスクトップではなく、スマートフォンまたはタブレットです。 デスクトップよりも多くの人がモバイルデバイスを所有しており、使用されるテクノロジー、使用のコンテキスト、および人々のニーズは大きく異なります。

新しい標準の定義

私たちのパターン、ヒューリスティック、UXデータが人間の意見や直感と混ざり合っているのは悪いことです。 私たちはアーティストではなく、UXの研究者やデザイナーです。 せいぜい、エンジニアと科学者。 これは真剣に受け止められるべきです。



少し前に、さまざまな国の約1300人のユーザーの行動を観察しました。 彼らが路上で、停留所で、電車で、空港で、カフェでどのように電話を使うか。 ACM Digital Libraryからのタッチとジェスチャーの使用に関する多数のレポートのメタスタディも実施されました。 たとえば、そのうちの1つには1億2000万件のイベントに関するデータが含まれていたため、統計情報は十分です。 さらに、651件の観察が学校、オフィス、および家庭で実施され、そのためにタブレットおよびユーザーのタイプに関するデータが取得されました。 入力の種類と実行されるタスクに応じて、人々がタッチをどのように使用するかについて、モデレートされていないリモートテストが実施されました。



今日、さまざまな国やさまざまなデバイスからデータを受信して​​います。 研究者は、さまざまなユースケースに応じて、さまざまな方法で、さまざまな状況で情報を収集します。



したがって、この記事の情報はすべて、膨大な研究に基づいています。 何かが不明な場合は、それが言われます。 しかし、今日では、さまざまなデバイスや使用方法のために、人々のためにモバイルアプリケーションを設計する方法について多くのことをすでに知っています。 次に、これを文書化し、新しい標準として使用する必要があります。

タッチサイエンス

ほとんどのデザイナーは、人々が一般的に携帯電話をどのように使用するかを考えて、すべてのスマートフォンを片手で持ち、親指で制御される小さなiPhoneだと考えているようです。 彼らはまだ以下のような親指コントロール方式を信じています。 彼らは、すべてのタパスが画面の下部にあり、誰も左上隅に到達しないと信じています。



よく知られた誤ったスキーム：









しかし、フィールド調査によると、人々は常に戻るボタンを使用しています。 実際、これは、画面が右上隅にある場合でも、画面上で最も要求されているボタンです。 では、親指について何を知っていますか？ 基本から始めましょう。



以下は、手に対する指の骨の動きの範囲を示しています。 さらに、親指の関節、腱、筋肉は他の指、特に人差し指と相互作用します。 指でデバイスを保持している場合、親指の可動範囲はより制限されます。 しかし、デバイスに対して指を動かすことにより、ユーザーは親指が届く画面の領域を変更できます。









実際、親指はスイープ範囲で移動します-離れて手にしがみつきます-手への取り付け点に対してではなく、中手関節に対してです。 指の他の関節により、画面に向かって曲がることができますが、スイープモーションの範囲は拡大しません。 曲がる能力は重要です。なぜなら、指の動きが3次元的に自由であるにもかかわらず、画面はまだ平らだからです。 したがって、指の動きの範囲の限られた部分のみを1次元スクリーンに投影できます。

基本的なタッチ観察

親指は手で最も強いので、テープに使用すると、デバイスの強度が低下します。 人々はこれを理解しているため、押したり振動が発生したり、予想される場合、人々は本能的にモバイルデバイスをつかみ 、片手で持ち、親指で押します。



人々は携帯電話を両手で持っていますか？ いや 人々はそれらを異なる方法で保持し、しばしば保持方法を変えます。 さまざまな状況で人々の行動を観察した研究のおかげで、デバイスを保持するためのすべての可能なオプションを考慮すべきであることがわかりました。 最も一般的な6種類の電話保留とタッチを以下に示します。









時間が経つにつれて、さまざまな方法の使用頻度を判断することが可能になりました。 これらのデータは、観察中に繰り返し確認されました。



デバイス、ニーズ、コンテキストに応じて、人々は携帯電話の持ち方を変えます。

彼らは無意識にグリップを変えます。つまり、彼らはこれについてあまり知りませんし、そのような行動を予測しません。

• 75％のユーザーが1本の親指で画面に触れています。
• 電話を片手で持っている人は50％未満です。
• 36％は秒針を使用して携帯電話をつかみ、画面のさまざまな領域に手が届きやすく、持ちやすくなっています。
• 10％は電話を片手で持ち、もう一方の手で指を押します。

しかし、これらは基本にすぎません。 ユーザーが表面に置く電話を保持し、使用する他の方法があります。 タブレットを使用する方法は異なり、動作は画面上またはガジェットに加えて、ユーザーが何をしているかによって異なります。



おそらく最大の驚きであり、最も重要な観察結果は、モバイルデバイスではデスクトップのように左上から右下に画面が表示されないことです。 親指の動きに制限があるため、右から下へ、左から上へと反対方向に画面に触れません。 代わりに、人々は中央の画面を見てタッチすることを好みます。 この図は、スマートフォンとタブレットの画面に触れる精度の変化を示しています。









何よりも、人々は画面の中央でコンテンツを読み、多くの場合それをスクロールして、読む断片が中央に来るようにします。 また、画面の中央をクリックする方が便利なため、ここのターゲットオブジェクトは7 mmまで小さくできますが、コーナーでは12 mmに増やす方がよいでしょう。



観察とその後の分析から重要な結論が導き出されました。人々は、目的の場所を正確にクリックすることはありません。 クリックには常にエラーがあります。 実際の調査の例を次に示します。オーバーレイスコープのメニューボタンをクリックする必要がありました。









何十人ものユーザーがこの調査に参加しました。 また、クリックの多くはターゲットの中心から遠く離れていました。 まったく入っていない人もいました。 スリップが鍵です。 オブジェクトのサイズが完全になることはないため、すべてのクリックを登録します。 ミスは常に発生するため、許容量を決定し、それとともに生きます。 提案された目標サイズに収まるクリックは95％のみです。



また、ミスによる問題も回避する必要があります。そのため、クラッシュ、エラー、および不正確さが存在するという事実として考えてください。 危険な要素または相互に接続されていない要素を他の要素から遠ざけることにより、エラーの可能性に注意し、偶発的なクリックの可能性のある結果を排除または削減します。

タッチフレンドリーな情報デザイン

時間が経つにつれて、モバイルタッチスクリーンとの基本的な人間のやり取りに関連する2次および3次の影響を検出して証明することができました。



画面の中心に焦点を当てているため、リストビューとグリッドビューを頻繁に使用します。 このような表示モードはうまく機能し、人々はスクロールしてクリックするだけでそれらを使用しようとします。 したがって、メインコンテンツは常に画面の中央に配置してください。 最もよく使用されるアプリについて考えてください。 それらのいずれかを起動すると、テキストメッセージ、メール、ストーリー、ビデオ、写真、記事などのコンテンツのリストを取得し、表示または操作する内容を選択します。



二次アクションのオブジェクトは、上部または下部に配置するのが最適です。 コンテンツ領域の上部または下部にあるタブは、ユーザーが表示モードまたはセクションを切り替えるのに役立ちます。 アクションボタンを使用すると、コンテンツを作成または検索できます。 あまり重要ではない-三次-ユーザーが通常何らかの角度から起動するメニューの機能を非表示にします。 情報設計の階層は次のとおりです。











「ハンバーガー」メニューは間違った考えであり、それを取り除く必要があると聞いたことがあるかもしれません。 しかし、このアドバイスは過激すぎる。 多くのデザイナーパターンでメニューは推奨されていませんが、一部のデザイナーはアイコンの使用頻度が低いためにこのビューを保持しています。



サイトのセクションでカスタムナビゲーションを使用している場合、メニューでナビゲーションを非表示にするのは適切ではありません。 ここで、セクションを指定するタブは、タブがセカンダリコンテンツに属することに加えて、より効果的です。 主要なコンテンツを画面の中央に配置するか、アプリケーションを設計して、さまざまなカテゴリを歩く必要がないようにすることをお勧めします。



これらのルールは、さまざまなタイプのユーザー向けのモバイルアプリケーションおよびサイトの設計に数年間使用されてきました。 彼らは、操作性と結論の正確さ、メニューのオプションと機能が優れていることを完全に証明しました.UXテストのすべての参加者は、モバイルデバイスの経験がないユーザーでも数秒間正しいことを見つけました。