web-dev-qa-db-ja.com

選択リストを開くのはいつですか?マウスダウン時?またはクリックして?なぜ?

  • コンポーネント:select別名。 ドロップダウン
  • プラットフォーム/システム:web、non-touchデバイス(トラックパッド付きのラップトップまたはマウス付きのデスクトップ)

ガイドライン、慣習、またはいくつかの調査が行われて、開発者/設計者が選択リストを正確にいつ開くかを決定するのに役立ちますか? mousedownまたはclick


enter image description here


一部の カスタムサードパーティselect実装 sは、最初にclickmousedown + mouseupは同じ要素上にありますが、他の実装、特にネイティブの実装はmousedownですでに開いています。たとえば、ブラウザで native HTML <select> element を試してください。

私の観察では(Windowsマシンを使用して)、すべてのブラウザーがmousedownで一貫してネイティブ選択リストを開いたので、その背後に理由がある<select>リストを開くときにいくつかのガイドラインまたは規則が必要です。

個人的には、mousedownのリストを開いて知覚されるパフォーマンスとネイティブの動作との一貫性を向上させることもできます。しかし、個人的な意見の代わりに、一般的な推奨事項が(ある場合)およびであるかどうかを知りたいです)whyいくつかの数値。

6

アクセシビリティの観点から、イベントはマウスダウンではなくマウスアップで発生することをお勧めします。

これは、意図せずに誤ってリストをクリックしてしまう可能性のある、器用さ/運動障害を持つユーザーに役立ちます。したがって、マウスを離したときにイベントが発生すると、これらのユーザーは、マウスを押したままターゲットから離れてアクションをキャンセルすることができます。

この方法に従うことにより、アプリケーションはWCAG 2.1の達成基準2.5.2(ポインターのキャンセル)に不満を持つ可能性があります。

あなたはここでそれについてもっと読むことができます: https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html

9
Sooraj MV

Sooraj MV 正しいのは、アクションはマウスアップでのみ実行することをお勧めしますが、選択入力を開くだけで、マウスを離して離すことで、元に戻すことができ、元に戻すことができます。*

WCAGガイドラインの成功基準 を見ると、次の1つ以上を満たす必要があることがわかります。

ダウンイベントなし

  • ポインターのダウンイベントは、関数のどの部分の実行にも使用されません。

中止または元に戻す

  • 関数の完了はアップイベントで行われ、完了前に関数を中止するか、完了後に関数を元に戻すためのメカニズムが利用可能です。

アップリバーサル

  • アップイベントは、前のダウンイベントの結果を逆にします。

必須

  • ダウンイベントで機能を完了することは不可欠です。

マウスダウンでフォームの選択コントロールを開き、コントロールの外のマウスアップで閉じると、「中止または元に戻す」(完了がオプションの選択として定義されている場合は、議論の余地があります)および「アップリバーサル」を満たすと私は主張します(マウスを上に移動すると、選択を強制せずにコントロールのオプションの表示が逆になります)。

マウスダウンで開くことの1つの利点は、1回の対話(マウスのダウン、移動、マウスのアップ)で、ここで視覚化したように、オプションを選択できることです。

Option being selected in one mouse down and up, with mouse down action illustrated

インタラクションの最初の部分(マウスダウン)に近いフィードバックがすぐに得られるだけでなく、実際に選択を行うという目標を達成するのが速くなるので、あなたはそれをより速く感じる。

「正しい」行動への言及は見つかりませんでした。 W3Cフォーム/選択 、または Microsoftコンボボックス のドキュメントページで参照されていると思いました。

インターフェースに精通し、潜在的なアクセラレータ(通常はビジネスポータル、サービス指向のWebアプリ)の恩恵を受けるエキスパートユーザーがアプリケーションを使用するのか、それともそうでない新規ユーザーが使用するのかを考慮に入れることができます。そのアクセラレータ(通常はeコマースWebサイト)を利用します。

コンポーネントに他のすべての機能がある場合は、それを使用して基本的なプロトタイプを作成し、インタラクションデザインの違いがユーザーに与える影響を確認します。

余談ですが、Webコンポーネントの問題は、設計システム/コンポーネントライブラリ内で一貫していることが多いのですが、それらが存在するエコシステム(ブラウザ/オペレーティングシステム)の規則を採用していないことです。

*この動作はChrome/Macで見られますが、できませんブラウザーとOSの組み合わせが異なると動作が異なる理由を証明します。

3
Zenon

デザイン、ユーザーエクスペリエンス、およびユーザビリティによると、マウスダウンは確かに高速です。ユーザーと操作:4番目...、パート2アーロンマーカス編集

「マウスダウンベースの選択タスクは、マウスアップイベントに基づくタスクよりもパフォーマンスが高いことが示されました。」

知られていることは、クリックまたはマウスダウンアクションのどちらを決定するかに関して、考慮すべき要因はエラー防止であることです。

たとえば、Google Chromeはマウスダウンを使用してページを切り替え、クリックしてページを閉じます。

enter image description here

経験豊富なユーザーは誤ってクリックしない可能性がありますが、多くの運動障害のあるユーザーは誤ってクリックする可能性があり、ジェスチャーをキャンセルするオプションを提供することは有用ですが、特にアクションがエラーにつながる可能性がある場合は同様です。

表示設定のMacbookのより個人的なメモでは、マウスダウンでアクセスできる回転のドロップダウンがあります。運動能力に障害のある人は簡単に画面を180度回転させるでしょう。

そのため、ドロップダウンで選択を行うことによって行われた変更が大きく、元に戻せないこと、および新しい選択を行うときに視覚的な手掛かりが提供されることを確認することをお勧めします。

1