web-dev-qa-db-ja.com

タッチスクリーンにツールヒントを表示するにはどうすればよいですか？

マウスのあるPCでは、ホバー状態を使用します。タッチスクリーンで、この種の情報を提供する最良の方法は何ですか？

touch-screenhovertooltips
6
rotaercz

ツールチップにするかツールチップしないか/ したがって、公平に言えば、実際に質問者の質問に答えることが役立つかもしれません。通行料を支払うかどうかについて、これ以上の議論はありません。

enter image description here

-

私は2つの主要なソリューションを提唱します。

1。タッチアンドホールドを使用して

これはより自然な相互作用モデルです。多くのアプリがこれを使用して、クリックすると詳細情報を表示します。ユーザーが長押し（長押し）すると、ヒントが表示されます。メディアクエリを使用して、ユーザーがタッチ対応デバイスを使用していることを検出し、ソリューションを実装できます。

このソリューションの@Diodeusのおかげで https://stackoverflow.com/questions/2625210/long-press-in-javascript ：

    var pressTimer;

    $("a").mouseup(function(){
      clearTimeout(pressTimer);
      // Clear timeout
      return false;
    }).mousedown(function(){
      // Set timeout
      pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
      return false; 
    });



.Element-Being-Pressed {
    -webkit-animation: 1s longpress;
            animation: 1s longpress;
}

@-webkit-keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

@keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

-

2。ダブルタップを使用して

この原則により、ユーザーが1回タップするとヒントが表示され、2回タップするとリンク先に移動します。これは、特にユーザーがこの行動パターンを事前に知らされていない場合は、複雑に聞こえます。

CSS Tricksの@kevinkに感謝します。右に移動するリンクを、代わりにツールチップを表示するように置き換えます。

ツールチップを示すリンクを、コードの最終的な宛先に移動する同一のリンクに重ねることができます。ユーザーがマウス対応デバイスを使用している場合、ヒントを表示するリンクがデフォルトで表示されます。これをエレガントに機能させるには、ヒントが再び表示されるように、数秒後にリンクを更新する必要があります。

http://jsfiddle.net/kevinkirchner/LuL5R/embedded/result/

<p class="parent">
    <a href="http://example.com">
        <span class="animate">Show my animation before leaving</span>
        <span class="double-tap"> </span>
    </a>
</p>



.parent { position: relative;}
.parent a { position: absolute;}
.parent .double-tap { display:none; }
.parent .double-tap { display:block; }
a .animate {
    display:block;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: -webkit-transform 0.3s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.3s ease-in-out 0.2s;
    -o-transition: -o-transform 0.3s ease-in-out 0.2s;
    -ms-transition: -ms-transform 0.3s ease-in-out 0.2s;
    transition: transform 0.3s ease-in-out 0.2s;
}
a:hover .animate {
    -webkit-transform: translateX(52px);
    -moz-transform: translateX(52px);
    -o-transform: translateX(52px);
    -ms-transform: translateX(52px);
    transform: translateX(52px);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out;
    -ms-transition: -ms-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

ユーザーは、領域またはリンクが実際にヒントを表示できるものであることを確認するために、視覚的な手がかりが必要になる場合があることを常に覚えておいてください。

-

ページが初めてロードされるときにハイライトを使用する

なんらかの方法でホットスポットをハイライトしてみて、1〜2秒後にハイライトをフェードアウトさせます。

-

使用のヒント/アイコン

小さな矢印や疑問符などのヒントを使用することで、何かに触れると2番目の状態になる可能性があることをユーザーに確認させることができます。

タッチベースのデバイスで「ホバー」に代わるものは何ですか？

3
Babalwa Mehlomane

多くのデバイスに画面下部にサムコントロールが付いていたとき、私は「ホバー」状態の要素にもまったく同じアクションを実行する「フォーカス」状態が必要であることを助言していました-このように、ユーザーがスクロールすると親指コントロールを備えた画面では、通過した各要素に対してホバー状態がアクティブになります。これにより、クリック可能なボタン、リンク、ツールチップの存在をユーザーに警告することができました。

ただし、これらのコントロールはあまり一般的ではないため、タッチインターフェイスの設計方法についてはより慎重に検討する必要があります。

次のような解決策がいくつかあります。

  • ヒント/ツールチップをページ上の表示テキストとして表示-ツールチップのテキストを非表示にせず、フィールド名の横または下にデフォルトでページに表示します。
  • 「ヒント」リンクを追加-フィールド名の近くにアイコン（通常は疑問符「？」）を追加して、ユーザーがアイコンをタップしてヒント/ツールチップを見ることを選択できるようにします
  • コンテキストタップ-ヒント/ツールチップを含む可能性のある関連要素に関連付けられたコンテキストコントロールを表示するロングタッチ（タップアンドホールド）機能を追加します

UXのほとんどのことと同様に、実際のユーザーとテストして、この製品の正しいアプローチを決定することをお勧めします。

2
Andrew Martin

タッチスクリーンで、この種の情報を提供する最良の方法は何ですか？

簡単です。ツールチップで非表示にしないでください。

重要な情報である場合は、常にすべてのデバイスのユーザーに提示してください。必須ではない場合は、表示しないでください。

一部のユーザーが追加のヘルプを提供せずにデザインを使用できないと思われる場合は、デザインをもう一度確認する必要があります。私は、ツールチップは基本的には失敗したことを認めるものであり、フォーム/アプリを最初から使用するのに十分なほど簡単にするものではなかったと確信しています。

1
Seth Warburton

最初の引用：

わかりやすくするためにツールヒントを必要とするインターフェイスは、ひどく再設計する必要があります（Jef Raskin：The Humane Interfaceを参照）。

さてあなたの質問に。

それをタップしてください
これが主な方法です。アイコンをタップして、追加情報を表示します。
例
enter image description here

問題
ツールチップを持つ要素が別のクリックアクション（アンカーリンクなど）を提供する場合、これは機能しません。

タッピングとホールド
これがGoogleが Material Design でツールチップを使用する方法です

ツールチップは、アイテムをタップして押し続けるとトリガーされます。ユーザーが要素を押し続けている間、ツールチップを表示したままにします。

これは、すでにタブアクション、アプリの更新ボタンにリンクしている要素（例）で正常に機能します。
例
enter image description hereenter image description here

問題
要素にすでに長押しアクション（アンカータグや画像など）がある場合、ツールチップはOSのポップアップメニューの下にあります。
enter image description here

結論
モバイルのツールチップは使いづらいです。したがって、それらを避けて、それを必要としないUIを設計してください。これを達成すると、デスクトップでのサイトの使用性も向上します。
ツールチップを回避できない（または回避できない）場合、2つの点に注意してください。あなたが使用します：
デフォルトのアクションはすでにありますか
デフォルトのインタラクションでツールチップをトリガーすることは避けてください（アンカータグをタップするなど）。
アフォーダンス
ユーザーはツールチップやその他の何かが起こることを期待しますか？ （たとえば、ラベル上の点線の下線は、ほとんどがツールチップまたは標準ではない他の操作を示します）。

1
Michael Schmidt

インタラクションデザインに戻って解決策を見つけてください。ツールチップはさまざまな目的で使用されるため、タッチスクリーンにツールチップを表示するための万能の答えはありません。私はあなたの質問への答えは、デスクトップでツールチップを使用している理由理由を調べ、人々が異なる方法を設計することになると思いますモバイルでも同じタスクを実行できます。

たとえば、ツールチップを使用してアイコンのみのボタンのラベルを表示している場合、モバイル向けのインタラクションを再設計する方法はいくつかあります。最も明白な（そして単純化した）のは、ボタンのラベルを常にテキストで表示することです。それらを使用してコントロールまたはコンセプトに関する「ヒント」テキストを表示する場合、タップするとヒントテキストを表示する別の要素（他の誰かが言及した疑問符など）を導入できます。

さまざまなタッチジェスチャー（長押しなど）を使用してツールチップをアクティブにすることを選択した場合は、ブラウザーのデフォルトの動作をオーバーライドしている可能性があることに注意してください。

0
Nate Green