web-dev-qa-db-ja.com

ダブルクリックイベントを見越して、クリックイベントの処理を遅らせる必要がありますか?

エンドユーザーにアイテム(曲)のリストを表示するアプリケーションを持っています。各曲は選択可能であり、選択された状態はチェックされたチェックボックスで表されます。次のようになります。

enter image description here

しばらくユーザーと話し合った後、2つのことを学びました。

  1. ユーザーは、チェックボックス領域内のみをクリックするのではなく、アイテム自体を1回クリックするだけで、リストアイテムを選択および選択解除できるようにしたいと考えています。

  2. ユーザーは、リストアイテムをダブルクリックして、曲の再生などのアクションを開始できるようにしたいと考えています。

ただし、ユーザーが曲をダブルクリックすると、ダブルクリックイベントをトリガーする前に2つのシングルクリックイベントがトリガーされます。これにより、アイテムの選択状態がちらつきます。 2回クリックしたため、状態は影響を受けていませんが、選択した状態の変化にUIが応答しようとするため、視覚的に少し混乱しています。

私が考えられる唯一の解決策は、ダブルクリックイベントが発生しないと確信できる十分な時間が経過するまでシングルクリックイベントの処理を遅らせることです。しかし、それは私にとっては悪いUXのように感じます。

クリックイベントの処理を遅らせることは適切ですか?ユーザーがプログラムをどのように使用したいかを考えるのは間違っていますか?私はこれにどのように取り組むべきですか?

3
Sean Anderson

私が問題を理解している場合、シングルクリックイベントが2回続いてダブルクリックイベントが発生し、その結果、UXがちらつきます。

Windowsファイルエクスプローラーでは、ダブルクリックはシングルクリックを増幅することで機能します。

  • シングルクリックでファイルを選択します
  • ダブルクリックして選択したファイルを開きます

あなたのUXで同様のアプローチをとることができますか?

おそらく、特定のアイテムのシングルクリック間の時間を追跡できます。

  • 最初のシングルクリックが処理されたら、システムクロックを記録します。
  • 同じアイテムの2回目のシングルクリックを受け取ったら、それがしきい値(*)未満であるかどうかを確認します。その場合、クリックを破棄してください。

(*)現在のユーザーに対して構成されているダブルクリックのタイムアウトを調べることができます。これにより、OSと同じように機能していることが保証されます。

4
Bevan

私にとっては、チェックボックスを削除して、選択したアイテムを強調表示する方が良いでしょう。複数のアイテムを選択する必要がある場合は、Ctrlキーを押しながらクリックする方法を使用できます。これにより、必要な操作を実行できます。

0
J. Melis

次のことができますか?

  • ユーザーが曲を選択するとき、チェックボックスは自動的にチェックされるべきではありません
  • チェックボックスは、ユーザーがチェックボックス自体をクリックしたときにのみチェックする必要があります
  • ダブルクリックで直接曲を再生します

注:このように、チェックボックスは、編集/削除/プレイリスト機能への追加のために予約できます。

0
Ades

質問に答えるために、いいえ、ホイールを再実装しないでください。オペレーティングシステムはすでにシングルクリックとダブルクリックを非常によく区別しています。 (彼らは何年もそれに取り組んできました。)

プログラミング言語を調べて、シングルクリックとダブルクリックで使用できるさまざまなイベントハンドラーがあるかどうかを確認することができます。

たとえば、.NET(C#、VB、C++、またはF#のすべてのニーズに対応)には、 Control.DoubleClick イベントがあります。 JavaScriptには ondblclick イベントがあります。

注意:これがモバイルアプリの場合、すべての賭けは無効になります。ダブルクリックは、実際にはモバイルではありません。

0
Matt Sheehe

同じ動作について スタックオーバーフローの回答 を確認したいと思うかもしれません。それはあなたにそれを技術的に行う方法のオプションをあなたに与えます。

ただし、このフォーラムでユーザビリティに重点を置く場合、ダブルクリックとシングルクリックの両方を行い、それをタイマーで処理すると、常にシングルクリックの遅延が発生します。パワーユーザーにとっては大変な痛みです。思い出すと、スクリーンメニューキーの OEMによるAndroidラッパーはダブルタップで動作した でした。そのダブルタップを聞くために、少し遅れがあり、それがメニューの開始を押し上げました。 モバイルブラウザーでの300ミリ秒の遅延 にも慣れているかもしれません。わずかな遅延でも、一般的にはユーザーが嫌うことを述べることが重要です。

そうは言っても、この画面には2つのモードがあることをお勧めします。シングルタップしたときにファイルを再生するシンプルなリスト。アイテムを長押しすると、複数のアイテムの選択、コピー、移動、プレイリストの作成などを行うことができる管理モードになります。これにより、基本的に、アイテムに対して実行するさまざまなアクションが分離されます。これは、長押しで選択がタッチベースのUIに役立つ傾向のあるパターンであるため、ユーザーが従うのが簡単になります。テキスト選択ガイドラインと同様に、すべてを選択したり、すべてをクリアしたりするためのアクションのトップラックを持つことができます。

0
Sol

独自のダブルクリックロジックを実装しないでください。

このアプローチをどのようにして見つけますか?

  • チェックボックスをシングルクリックして1つのアイテムを選択します-これで選択モードになりました
  • アイテム領域全体をシングルクリックしてさらにアイテムを選択します
  • キャンセルボタンで選択モードをキャンセル
  • 選択モードではないときにクリックして直接アイテムを再生する

デモ: https://jsfiddle.net/tgo3jd16/1/embedded/result/

0