web-dev-qa-db-ja.com

タブレットのツールチップの代替?

この質問がサイトで何度か議論されていることを理解しています。しかし、私が探している答えやインスピレーションを得られていないようです。ところで、私のバックグラウンドは、私がばかげているように思える場合のプログラマーです。

それでは、Webアプリケーションがあるとします。問題は、画面を常にいっぱいにしたくないが、必要なときに利用できるようにする必要があるという情報をどのように伝えるかです。ホバーテキストはこれに適していますが、マウスが関係している場合にのみ機能します。次に、このWebアプリケーションをサポートして、ターゲットに設定されたいくつかのタブレットとブラウザーの組み合わせ(iPad、Andriod Samsungなどを含む)で適切に実行できるようにする必要があります。

レンチを投入するために、追加の動的コンテンツを表示するために要素を「ホバー可能」にするだけでなく、クリックして主要なアクション(別のページに移動するなど)をトリガーすることもできます。不動産は非常に限られているため、「情報」アイコンを追加することはできません。ツールチップのコンテンツが動的であるという事実も、「グラフの凡例」のオプションを除外します。

これが具体的なユーザー事例です。

画面の下には、非常に限られた面積のカレンダーウィジェットがあります。マウスでの動作方法は次のとおりです。1)「2014年11月24日」にカーソルを合わせると、ホバーテキストに感謝祭などの情報が表示されます。

2)エンドユーザーが特定の日付セルをクリックすると、エンドユーザーは別のページに移動します。

マウスでは問題なく機能しますが、「タッチ」では機能しません。 「タッチ」に期待しているのは:

1)同じコードベースで、デスクトップと主要タブレットの両方の主要ブラウザーで適切に実行されます

2)既存の機能を維持します(各日付セルの補足情報、および各日付セルのクリック可能なイベント)

enter image description here

問題は、仮に、これらの画面をタブレットを念頭に置いて設計した場合、ホバーテキストに依存しなくても済むように、どうしたらいいのでしょうか。タッチとマウスの両方で同じように機能することをしたでしょうか? 「ツールチップを表示するためにホバー」である必要はありません。その場合、どのようなオプションがありますか?

[〜#〜] edit [〜#〜]:余分な領域がない別のユーザーケースを追加します。たとえば、列の値の多くはホバーアップして補足情報を提供できます。 enter image description here

14
riceball

満足のいく答えがないため、満足のいく答えが得られませんでした。デスクトップを念頭に置いて構築されたアプリケーションを、基本的なデザインを変更せずにタッチスクリーンでうまく機能させようとしているが、これは不可能である。

デスクトップでは、何か(クリックしてマウスオーバー)でアクションをトリガーする複数の方法がありますが、タッチスクリーンでは(基本的に)1つしかありません-タップします。この制限を回避する方法はありません。

両方のプラットフォームで同じデザインを使用する必要がある場合は、タッチスクリーンに適したデザインを作成することから開始する必要があります、次にデスクトップに適合させます。タッチスクリーンインターフェイスの方が2つのうち制限が多いため、これははるかに簡単です。ほとんどのタッチスクリーンインターフェイスは、変更することなくデスクトップで簡単に使用できます(環境に最適ではない場合でも)。現在、あなたは逆を試みています、そしてこれは満足のいく結果をもたらさないでしょう。

マウスオーバーの問題に加えて、デザインが小さいと使用できないコントロールなど、タッチ時に他の潜在的な問題があります。

カレンダーはすべてのタッチスクリーンデバイスで利用できる基本的なアプリの1つなので、これらのカレンダーがどのように機能するかを見て、それらをエミュレートする必要があります。これにより、この問題の解決策を再発明する必要がなくなるだけでなく、ユーザーにとってより親しみのあるデザインが得られます。

10
user31143

最近、同様の課題を持つプロジェクトがありました。ヘルプの吹き出しテキストに大きく依存するアプリケーションの再構築を担当しました。タブレットとデバイスに焦点を当てたアップデートにより、私はこの情報を提示する新しい方法を考え出す必要がありました。その結果、私は相互作用を拡大するために多くのタップに頼りました。

あなたの例を見た後。アプリケーションにカレンダーがなかったことをとても嬉しく思います。基本的なインタラクションのモックアップを組み込んでいます。スペースに合わせてコンテンツが移動し、不要になったときに閉じます。

enter image description here

コンテンツを重ねたりカバーしたりすることもできます。私のクライアントは、コンテンツが表示されたままでいることが重要であると感じていましたが、それが問題でなければ、オーバーラップは問題ありません。

enter image description here

コードを書き直したくなかったと思います。私は他の誰かが最終製品を作ったと告白しているので、どのくらいのコードを書き直さなければならなかったかは言えませんが、それは構築されたものであり、すべてのやり取りはタブレットとデスクトップで問題なく機能します。

7
Johnny UX

サイトの変更を必要としないような良いアプローチはないと思います。私はあなたがより多くの情報のために「長押し」オプションを考えることができると思います(いくつかの電話はこれをします)が、それは普遍的なアプローチからはほど遠いです。個人的にはそんなことはしませんが、悪魔の提唱者を演じるだけです笑

このような状況の場合、これらのアイテムの横に小さなアイコンを追加することで何ができるかを確認します。たとえば、「?」または、問題のツールの横にある「i」アイコン。マウスを使用すると、ユーザーはこのアイコンにカーソルを合わせるとツールチップが表示されます。タブレットの場合、ユーザーはそのアイコンをクリックしてツールチップを表示します。後者の場合、ツールチップを設定して手動で閉じるオプションも用意する方が賢明かもしれません。これにより、状況に応じてオンデマンドで維持されます。

私が思い浮かぶその他のことははるかに多くの作業を必要とし、あなたの制約を考えると実現可能ではないようです。

1
softserve

シングルタップを使用して、情報ツールチップを表示するホバーダイアログを表示しませんか。たとえば、感謝祭。同じダイアログで、ダイアログを閉じる方法と、詳細ページに移動するためのリンク/ボタンを提示します。基本的に、デフォルトでは最初のタップでツールチップを表示するようユーザーに強制します。次に、次のタップで、最初に探していたページに移動します。

0
thomasyung

タッチUIツールチップに関するGoogleマテリアルデザインガイドラインの内容を確認することをお勧めします。

http://www.google.com/design/spec/components/tooltips.html#tooltips-touch-ui-tooltips

押し続けるとトリガーされるようです。次に、ユーザーが離すと、目的のアクションが完了します。それはそれを扱う良い方法のようです。

0
thomasyung

これが私が最良の解決策であると考えるものであり、AppleとGoogleの両方が同意します。

コントロール(ウィジェットなど)を押します。コントロールを選択したい場合は、クリックしてください。無駄な時間はありません。ツールチップが必要な場合は、それを押し続けると、200ミリ秒後にタッチが解除されるまでツールチップが表示されます。繰り返す

通常、マウスカーソルがコントロール上に置かれるまでツールチップはポップアップしないため、これはデスクトップアクションと密接な関係があります。

人々が知っているはずの方法は、タッチデバイスに慣れているからだと思います。

0
user19809