web-dev-qa-db-ja.com

このドロップダウンアンチパターンに名前はありますか?

最近、マウスオーバードロップダウンで小さなUI問題が発生しました。このようなドロップダウンの例を次に示します(ブルームバーグだけが犯罪者ではありません)。

https://www.bloomberg.com/view/articles/2017-08-09/yogurt-liquidity-and-listings

edit:歴史的な目的でマークアップされたスクリーンショットを追加します。赤い線はユーザーのマウスパスです。赤いボックスを入力すると、[意見]ドロップダウンがすぐに非表示になります。

Bloomberg View - Menu issue

トップバーの「オピニオン」にカーソルを合わせると、「オピニオン」セクションに関連するリンクが表示されます。

問題:[意見]ボタン内の位置から一部のリンクへの直線のパスが[政治]セクションを通過し、[意見]オプションがすぐにクリアされます。これは、ユーザーがリンクを選択するときに、マウスの経路を意識して考える必要があることを意味します。

この問題に名前はありますか?それを解決する最良の方法は何ですか?

editBen Kamensのブログ の厚意により、問題を表示する追加のGIFを以下に示します 以下のミダスによってリンクされています

Gif demonstrating menu issue

244
N. Quest

ソリューションの名前の提案の1つは この素晴らしい記事 からです方向メニューの照準

これは、カーソルのパスを検出することで、Amazonが「メガメニュー」遅延を使用せずににカーソルを合わせているときに、ユーザーが不要な要素を誤って選択しないようにする方法を示しています。

カーソルのすべての位置で、現在のマウス位置とドロップダウンメニューの右上隅と右下隅の間の三角形を描くことができます。次のマウス位置がその三角形内にある場合、ユーザーはおそらくカーソルを現在表示されているサブメニューに移動しています。アマゾンはこれを素晴らしい効果のために使用します。カーソルがその青い三角形内にある限り、現在のサブメニューは開いたままになります。

Amazon Hover Menu direction

289
Midas

話している問題は、「 狭いマウスコリドー 」と呼ばれることもあります。狭いマウスコリドーを使用すると、 ユーザーコントロール がないためにユーザーが不満を感じる結果になります。

Amazonの三角形のアプローチ(1986年にAppleで Bruze Tognazzini によって最初に行われた)に代わるものは、 廊下を拡張する小さなボックス を使用することです。この特定の実装の1つの利点は、それが純粋なCSS(疑似要素)であるため、- jQueryへの依存 (またはVanilla JS)が削除されることです。

Image from: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

(画像: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

96
Jonathan

私が働いている場所では、これを「デススタートレンチメニュー」と呼んでいます。私たちはその名前を発明しなかったと確信していますが、その本が見つかりません。

36
Matthew

プログラマーの観点から、ホバーインテント機能を提案します(環境の反応を約300ms遅らせます。これはあまり目に見えず、誤ってメニューを閉じたり開いたりするリスクを軽減します)。 300msがメニューとサブメニューのより複雑なツリーに追加されることがわかるかもしれませんが。

9
Snsa90

このパターンに使用する名前はhover tunnelです。

ホバートンネルは長い間問題があると認識されてきました: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

ホバーメニューについて最悪のことの1つは、ユーザーにホバートンネルを介してマウスを移動させることです。ホバートンネルは、ユーザーがアイテムをクリックするためにマウスを移動する必要がある通路です。技術にあまり詳しくない年配のユーザーは、多くの場合これを行うのに苦労します。技術に精通したユーザーでさえ、マウスを限られた経路で動かさなければならないのは面倒です。

「アンチパターン」はホバートンネルが崩壊する副作用にすぎないのではないかと思いますが、これはユーザーを誘導するための信頼できる方法ではないためです。広告やその他のコンテンツに。

4

いいえ、このパターンの名前はありません。

そのホバーメニューは、UXに関してはホバーメニューに過ぎません。私でも、経験豊富なインターネットユーザーがそのようなメニューをナビゲートするのに問題があり、ホバーメニューを使用しなければならないときに10回のうち9回は怒ります。

そのようなメニューをもう少しユーザーフレンドリーにする1つのことは、たとえば、ユーザーがテーブルの外に移動するときに小さな遅延を設定して、メニューがすぐに閉じるのではなく、ユーザーが移動できるように1〜1.5秒の遅延を設けることです。通常の流れの中でマウスが戻る。

1