web-dev-qa-db-ja.com

Web UIで長押し機能を伝える

したがって、Googleドライブと他のいくつかのアプリケーションを除いて、ブラウザのデフォルトの右クリックコンテキストメニューを上書きすることは、ほとんどノーノーと見なされているようです。これの代わりに浮上しているように見えるパターンは、ユーザーがマウスの主ボタンでクリックする「詳細」ボタンを提示することであり、これにより2次インターフェース(コンテキストメニュー、サイドバー、ボトムシートなど)が表示されます。

ただし、このパターンは不動産を占有し、ユーザーの注意をメインコンテンツから引き離すので、私はこのパターンが嫌いです。特に垂直のリストではなくアイテムのグリッドを扱っている場合、私は個人的にパターンがかなり混乱していると思います。

「もっと」ボタンの良い代替案は「長押し」オプションを提供することだと思います。この機能は、基本的にすべてのデバイスのすべてのブラウザでサポートできます。これは、その技術的な実装がsetTimeout呼び出しにすぎないためです。

残念ながら、「more」ボタンは非常に普及しており、長押し機能はあまり普及していません(少なくともWorld Wide Webでは)。この機能についてユーザーを教育する最善の方法を見つけるのに苦労しています。

これが私がこれまでに思いついたことです:

enter image description here

アプリ全体で、リスト内のアイテムにタッチアイコンが表示されている場合、そのアイテムはすべて長押しできることを示しています。リストの最初の項目のみにヒントがあるため、これは、すべての項目に「もっと」ボタンを配置するよりも、不動産の占有が少なくなります。マウスを備えたデバイスを使用している場合、「タッチ」アイコンの上にマウスを置くと、いくつかのコンテキストのツールチップが表示されます。

enter image description here

この特定の例では、カードをクリックまたはタップすると、アイテム専用の表示ページが表示されますが、カードを長押しすると同じページが表示され、サイドバー/ボトムシートが表示されます(画面の幅によって異なります)。

enter image description here


私が思いついたパターンのいくつかの欠点を挙げられますか?上記のパターンをどのように改善できますか?

11
Luke

他の回答に加えて:

主な欠点:長押しがすでに使用されています。

どこ?タッチスクリーンを備えたWindowsデバイスは、指を長押しして指定された場所で右クリックを開始します。ウェブブラウザを含むどこでも。 ( Youtubeの例 )。

したがって、長押しでカスタムアクションを実行した場合の影響は予測不可能になり、オペレーティングシステムやブラウザに依存する可能性があります。たとえば、一部のブラウザは両方のアクションを同時に開始できます。つまり、右クリックのコンテキストメニューを開いて、同じ長押しでアクションを実行できます。

代わりに:

  • アクションをコンテキストメニューに配置するか、
  • 画面上のボタンを追加して、操作モードを切り替えます(次のアクションまたは永続的に)。これは基本的に、ユーザーがPhotoshop、GIMP、(ペイント-もちろん...)などからすでに知っているツールパレットの機能です。

タッチスクリーンをスタイラスで使用したWindows Mobile 5(2006)などを覚えている場合、コンテキストメニューを開くためにタッチスクリーンを長押し(別名「タップアンドホールド」)するのは非常に古い概念です。長押しは、進行状況インジケーターによって示されました-長押しの場所の周りに点線の円が作成されます。 ( Youtubeの例

この問題の確実な回避策がない限り、特にプラットフォームに依存しないことが予想されるWeb UIを設計する場合は、この欠点を無視しないでください。確実な回避策がない場合、私はこの問題の重大度をストッパーとして分類します


編集:

UIについて何ができるかについてのもう1つの提案は、ゲームThe Incredible Machine(1993)からのものです。 ( Youtubeの例 )左ボタンのクリックと左ボタンのドラッグのみを使用して、問題のタイプを正確に解決することに焦点を当て、非常にエレガントで直感的な方法でそれを行います。アイテムの種類ごとに使用できる基本的なオプションに加えて、オブジェクト間のリンクのドラッグや、許可されていないアクションの表示についても説明します。 (アイコンを使用しますが、テキストラベルやメニューオプションのさまざまなレイアウトの利用に制限はありません。)アイテムをアクティブ化(クリック)すると、アイテムのオプションが表示されます。

  • 必要に応じて、項目を強調表示する(「この項目は操作を許可する」と伝える)か、メニューオプションを直接表示することにより、ホバーポインターにも応答できます。これはマウスユーザーにとってはすばらしいボーナスですが、タッチスクリーンは通常ホバリングをサポートしていません。

ヘビーデューティのユーザーは、キーボードでメニューオプションをアクティブにできるかどうかを評価します(項目を選択した後)。これはあなたが読んでいるこのページでも機能することを知っていますか(あなたがアクティブ化した後プロファイルページでそれをタブします:タブプロファイルと設定の編集>メニュー設定>チェックキーボードショートカットを有効にする)。ここStackExchangeで、私は常に E 編集リンクを視覚的に見つける代わりに(そしてマウスポインターで見つけます)。追加できる場合 E 編集用、 R 名前の変更などの場合、UIに値を追加できます。これは、ヘビーデューティのユーザーにとっては、マウスを使用して小さな長方形のアイコン/ラベルを指すよりも、キーボードのキーを盲目的に押すほうが快適なことが多いためです。

4
miroxlav

私があなたのアプローチで見た主な欠点は、あなたがかなり珍しい相互作用パラダイムを導入していることです。これにより、アプリがユニークになり、少なくとも最初はユーザーを混乱させる可能性があります。

ただし、このパターンは不動産を占有し、ユーザーの注意をメインコンテンツから引き離すので、私はこのパターンが嫌いです。

使用するタッチアイコンはほぼ同じ量の不動産を占有するので、より一般的なメニューインジケーターをクリックします。

別の欠点:長押しは、単純なクリック/タップよりも時間がかかります。また、ドラッグ/ドロップ操作を妨げる可能性があります。

22
Marian

クリック(タップ)などの一般的なアクションをオーバーロードするのは難しい

より大きなトラックパッドとフォースタッチを備えた最新のMac Book Proについて、何人かに尋ねたところ、全員が force touch オプションを無効にしています。

ユーザーがクリックと本当にクリックとを区別する必要があるときに、これがユーザーに与える摩擦について考えます。

それは、特定のユーザーに対してタップホールドオプションが機能しないと言っているわけではありませんが、一般に、たまたまクリックが遅く、2種類のクリックのどちらか一方の背後にある機能にしかアクセスできない人もいます。

long-pressルートを利用する際の注意事項は次のとおりです...

アクションの背後に重要な機能を配置しないようにしてください

ユーザーが新しいやり取りを発見するのは難しいため、重要なタスクを実行する唯一の方法が物事を長くタップすることである場合、一部のユーザーは仕事をブロックされます。 long-pressアクションが単に「アイシング」である場合、頻繁なユーザーのエクスペリエンスを向上させる可能性があります。他のすべての場合と同様に、より技術に詳しい観客はlong-pressの代わりにright-clickを使用することに慣れているため、これを顧客とテストする必要があります。

ユーザーはトレーニングを受ける必要があります

これは、ほとんどの人が理解するのに一般的な十分な対話ではないため、アニメーション化されたタップアンドホールドのポップアップでユーザーに何かを実行するように求め、その後に「了解しました!」初めてのユーザーにはメッセージが必要です。これはもちろん1回だけ実行する必要があり、ユーザーはアクションが正常に実行されたら、アイコンを使用して他のコントロールにアクションを推定できます。

tap hold training

long-pressを実行していることをユーザーに知らせます

時間が長すぎるため、持続時間を正確に取得するのは困難です。短すぎると反応が遅くなり、クリックできなくなります。マウスダウンで、約400ミリ秒を超えてリングをフェードインしようとするので、通常のクリックでは何も表示されず、1200ミリ秒を超えてタップポイントの周りにリングが描画されます。ユーザーとテストしている間、数値を微調整する必要があります スピナーを表示する必要があるカットオフなので、1秒より長くする必要があります

考慮すべきことは他にもあると思いますが、実際に始めてみると、状況依存オプションのリストを示すすべての要素を比較検討してもそれほど悪くはないように見えます:)

幸運と貢献に感謝します!

8
DaveAlger

私は、本当に正当な理由がない限り、基本的な相互作用を発明したり再発明したりしないと言います。

また、1つまたはいくつかのカードにヒントを追加しても、「これですべてがうまくいく」または「これですべてがうまくいく」ということを伝えるには不十分です。同じように見える '。

ユーザーは明示的なインジケーターやキューを好みます。

視覚的な認識と親しみやすさが重要です。何も考える必要はありません。 much考えなければならないようには見えませんが、特に長押しが特定のカードに対するものではないことが判明した場合は、少しためらいが溜まって煩わしさになります。

しないが長押しされるすべてにアイコンを追加する必要はありません。長押しは関係ありませんeverywhereサイト上で- すべき明示的であるある関連する、驚きを避ける.

カードのようなスタイルの使用を既に考えているようです。通常、「詳細」のコンテキストは、カードの右上隅にある個別のアイコン(同じアイコン、同じ場所、どこでも使用できる)によって提供されます。

他のものとは別に、長押しはクリックに比べて比較的長い時間がかかります

以下の例は、人気のあるメニューインジケーターを示しており、実際にはそれほど多くはありません。彼らは確かに追加不動産へのアクセスよりも機能へのアクセスとアフォーダンスにおいてより価値があります-特に不動産はしばしばとにかく無効であるためです。

Trello

enter image description here

enter image description here

Facebook

enter image description here

enter image description here

LinkedIn

enter image description here

enter image description here

Twitter

enter image description here

enter image description here

Strava

enter image description here

enter image description here

7
Roger Attrill

進行状況インジケーターを使用できます

あなたの場合、これは線形進行インジケーターで達成できます:

long-press progress indicator

インジケーターは、長押しする要素に重ねて表示されます。ユーザーが要素を保持すると、進行状況インジケーターが比例して進み、ユーザーは進行状況インジケーターの読み込みを停止します。

私はこれを実際の世界で試したことはありませんが、長押しの場合はニースの記号のようです。

6

Androidは最近、タッチスクリーンデバイスで長押しするGoogleアプリケーションのこの機能を追加しました。そのため、ユーザーがデバイスレベルでより優れていることを理解することもお勧めします。 Android long press on Gmail app icon

そして、それをテストしてください、カバブメニューは時々ユーザーに依存し、彼らが好奇心を持っているかどうかに応じて機能します。しかし、これらのメニューにはコンテキストがないため、解決する必要があります。

あなたのコンセプトのこれらの特定のカードがセカンダリインターフェイスを必要とする原因は何ですか?これは私がまだ質問しているところです。これがこの機能を持つことがより一般的である場合は、システムのUIを調整して、これらの機能を主要なUIニーズとして表面に表示する必要があるかどうかが問題になる可能性があります。

0
Art of FITZ