ナビゲーションメニューの遅延と使いやすさのバランスをとるには？
多くのアイコンを含むナビゲーションメニューを作成しています。 1つのアイコンをホバーすると、他のサブバーが非表示になり、別のサブバーが展開されます。
私が選択した180ミリ秒の遅延は、ユーザーがサブメニューのリンクに向かってマウスを移動しているときにセクションを誤って変更しないようにするためです。 100ミリ秒未満では実際のユーザビリティの問題があり、サブメニューのリンクをクリックできないという報告があります。ただし、遅延を大きくすると、遅延が発生し、気味が悪くなります。多くのユーザーが180ミリ秒での悪い経験を報告しました。
ユーザーエクスペリエンスは良いものになると思いますが、ユーザーにとってどのように感じるかと、それが役に立たなくなるのを避ける方法との間の適切なバランスを見つける必要があります。
人間の知覚に関する多くの記事を検索して見つけました（つまり、 人間の視覚応答のレイテンシに関する調査 ）。このユーザーエクスペリエンスの問題は、知覚と主観に関するものだと思います。
私の問題を解決するmsの「マジックナンバー」については、文献で見つけることができませんでした。
誰かが私の同じ問題に直面したことがあるか、提案するための代替アプローチがある場合は、提案を探しています。
執筆中に私はこれも見つけました： ユーザーが要素のフォーカスを外したときの猶予期間の正しい用語は何ですか しかし、水平メニューの解決策はないようですが、このケースはまだわかりませんホバリング目的の問題と見なすことができます。
このデモで機能していることがわかります：http://jsfiddle.net/xC6Bh/
遅延のみに依存しないでください！
すでに経験したように、遅延技術が優れたUXを発揮するのに役立つ値は実際にはありません。一部のユーザーにとって、この遅延は短すぎ、他のユーザーにとっては長すぎます。
分度器を壊す
代わりに、簡単な数学を使用して、メニュー遷移を実行する必要がある座標を計算できます。親メニュー項目の原点とサブナビゲーション項目の開始および終了の間の角度を計算します。これにより、ユーザーのマウスがメニュー項目の「途中」にあるかどうか、または別の親項目に変更されているかどうかを判断するために使用できる自然な三角形が作成されます。私はあなたのフィドルから下のラフなスケッチを描きました：
これは、Amazon.com（---）のメガメニューで使用される テクニックであることに注意してください 。
（上のブログからの写真）
明らかに、これはデザイン（親のナビゲーションアイテムのサイズ/位置が子に適切に比例していることを確認するなど）とJavascriptの実装の点でやるべきことを少し増やしますが、この解決策は単純な時限遅延。 （たとえば、ユーザーがy軸で進行していなければ、遅延などの機能を追加できます。）
この問題を解こうとする前に、この問題を何度か読んだことがあります。質問を言い換えると、サブメニューを表示するための最良の方法を理解しようとしているのですか？
一般的にはマジックナンバーはないと思います。ユーザーの同意なしに何かが変更され、ユーザーがそれを変更することを期待していない場合、これは良いユーザーエクスペリエンスとは言えません。あなたの例にある種類のメニューは、モバイルでも機能しません。
この種のメニューを実現する最良の方法は、サブメニューを更新する方法としてクリックを使用することです。ユーザーがクリックしたり、定義された境界からマウスを離したりすると、メニューが表示されたら閉じます。
クリックを使用していない場合は、すぐにそのメニューに切り替える必要があります。常に表示されるサブメニューは、通常はメニューを展開しているため、もう表示されません。 Bootstrapを使用して人々が採用している例に従うと、それらはすべて瞬時であり、すべてモバイルで機能することがわかります。ホバー効果は、残念ながらデスクトップで期待どおりにのみ機能し、多くのサイトではモバイルでの動作に問題がありますこれこそまさに理由です。