web-dev-qa-db-ja.com

hoverIntentを備えたユーザーフレンドリーなドロップダウン?

ユーザーフレンドリなドロップダウンにhoverIntent(偶発的なホバーオフを防ぐためにわずかな動き予測遅延を導入)を使用することは良い考えですか?

http://cherne.net/brian/resources/jquery.hoverIntent.html

私は多くのCSS開発者がそれがJSであるためにそれを避けていることを知っていますが、デザイナー/ユーザビリティの人々はhoverIntentの使用についてどう思いますか?

5
Mark Boulder

これはUXに関しては完全に妥当なアクションだと思います-提供されたドロップダウンが利用可能であることをユーザーに明確に伝えるもちろんです。

明確にしていない場合、マウスをすばやくホバーすると、遅延のために視覚的なフィードバックがユーザーに提供されず、ユーザーはドロップダウンを完全に見逃してしまいます。

インスタントドロップダウンは、当然のことながら、かなり煩わしい場合があります(つまり、多数のメニュー項目にドロップダウンメニューが互いに接近している)ので、ユーザーに即座にフィードバックを提供します。

私はhoverIntentの考えに反対しているわけではありません。適切に使用されている場合は実際にUXが改善されると思いますが、ユーザーが他のオプションを利用できることをユーザーに認識させる必要があります。

5
Daniel Meade

HoverIntentを使用する代わりに、Amazonが使用する次のメソッドがあります。

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

アルゴリズムを使用して、マウスポインターの軌跡を決定します。これは、ドロップダウンが遅れることなく変化することを意味しますが、目的のサブメニューオプションに引き続きアクセスできます。

1
Joe Taylor

他のすべての機能と同様に、慎重に適用することをお勧めします。
すべてのアプリケーションのツールチップに使用されているため、広く知られているUIイディオムになっています。 Webアプリケーションの場合、ブラウザーは、ユーザーがツールチップを表示する前に、マウスポインターをしばらく待機するまで待機します。デスクトップアプリケーションも同様です。

jQuery hoverIntentプラグイン は、Web UIの他のすべてのホバリング効果の動作を模倣しています。

メニューの厄介な問題を解決します。この例を見てください:印刷したいと想像してください この新聞のページ 。マウスポインターが一番上のメニューバーの中央にあり、Susanaの上にあります。プリンターアイコンを目指してまっすぐ下に移動してクリックします。水色のメニューバーの[EDICIÓNIMPRESA]に少しカーソルを合わせ、ターゲットをカバーする選択リストを開いたため、死亡ページ( "Fúnebres")が表示されます。 。

青いメニューバーにhoverintentが実装されている場合、これは発生しませんでした。
これは、マウス操作を迅速に行うエキスパートユーザーにとって特に煩わしいことに注意してください。

プラグインにはパラメータ、ミリ秒のタイムアウト、対応するアクションを起動するためにユーザーがターゲットにカーソルを合わせる必要がある時間があります。
低遅延を選択した場合、UIは通常のように動作しますが、遅延は顕著ではありませんが、ユーザーはプラグインの利点をそれに気付かずに享受することになります。

1
Juan Lanus

私は、ホバーが死ぬべきだと確信しています。グーグルプラスなどのクイックメニューアクセスのようないくつかの用途がありますが、小さな動きがホバリングをオフにすることができるものはすべて悪いです。クリックしてドロップダウンを表示したい。

また、タッチデバイス用に別のデザインパターンを作成する必要もあります。

0
ryan