web-dev-qa-db-ja.com

ヘッダーのホバーメニューは使いやすいですか?

ユーザーは、下に表示されているようなヘッダー/メニューを簡単に使用できると思いますか?

http://learn.linkedin.com/wp-content/uploads/2008/06/Company-Pages-266x300.jpg

25
EnexoOnoma

ユーザーが単にメニューの上にマウスポインターを置くのではなく、メニューバーをクリックしてメニューを開くと、パフォーマンスが向上します。ホバーメニューは、ウェブに登場するずっと前から悪い考えであることが示されていました。

Chaparro BS、Minnaert G、およびPhipps C(2000)。 メニュー項目の選択でマウスオーバーを使用する場合の制限 。ヒューマンファクターズアンドエルゴノミクスソサエティの年次総会の議事録、7月44日(2)、p361。 (ほぼ全文 マウスオーバーvsポイントアンドクリック:場合によります!

また、実証済みの真のDOD設計基準標準-ヒューマンエンジニアリング(別名 MIL-STD 1472 )とも一致しません。

5.14.2.1.8.4明示的な作動。指定された位置の実際の入力(有効化、操作など)には、カーソル位置とは別の明示的なアクションが必要です。

ただし、いったんメニューが開かれると、ホバー時に追加のメニューが開くことが推奨されます。詳細は Webメニューバーをより使いやすくする を参照してください。

問題の一部は、クリックして開くのと同じくらいの精度を得るには、ホバリングで開くことの速度の利点が無効になるほど長い遅延を設定する必要があることです。

ホバーメニューは、実際には失敗する直感的に魅力的なアイデアの教科書ケースです。彼らはまた、何かがウェブ上で一般的であるからといってそれがベストプラクティスであるとは限らないという教科書のケースでもあります。

36

クリックでドロップダウンする方が使いやすいです。さらに、タッチスクリーンデバイスにはホバーがありません。

ホバーするのではなく、クリックすることをお勧めします。発見しやすいように、視覚的な手がかり(三角形が下向き)を追加することを忘れないでください。

ドロップダウンで起こりうるユーザビリティの問題に関する役立つ情報をいくつか示します

11
Emil

スマッシング誌の次の記事を読むことを強くお勧めします。

ドロップダウンメニューの設計:例とベストプラクティス

ユーザーは、スクリーンショットにあるような、従来の細いドロップダウンメニューを嫌っていました。ただし、複数の列、より大きなマージン、より良いスタイル、サブメニューのない、より広いドロップダウンに行くと、彼らは満足しているように見えました。

4
jColeson

タブレットやモバイルデバイスの普及により、ホバー中心のデザインから離れるべきだと感じています。タッチスクリーンには「ホバー」状態はありません。

私のアプローチは簡単です:

  1. 考えられるすべてのリンクをヘッダーに収めるように一生懸命に努力しないでください。代わりに、いくつかの広範なトピックまたはカテゴリを持つ単純なナビゲーション構造を設計します。
  2. 各リンクは、より具体的なトピックにドリルダウンできるランディングページにつながります。

最後に、このマルチページ設計がサイトの閲覧中にユーザーの速度を低下させたり、ユーザーを困らせたりしないように、サイトは非常に高速である必要があります。 YSlowhttp://www.webpagetest.org などのツールを使用して、サイトを最適化します。もちろん、高速なWebサイトはいつでも歓迎ですが、これはモバイルユーザーにとって特に重要です。

3
Steve Wortham

WindowsとAppleアプリケーションで遍在しているため、ほぼすべてのユーザーがこの概念に精通しています(そして、リボンで再設計されたとしても、それはまだ同じような概念です)。

彼らがそれを好むと好まざるとにかかわらず、あなたが知る必要があるものです-それはユーザーに依存し、またメニューがどれだけうまく機能するかに依存します。たとえば、ユーザーが上からメニュー項目に直線で移動するときにメニューが非表示にならないようにするための遅延が必要です。ナビゲートしにくいメニューは、概念に精通している場合でも、ユーザーを混乱させたり苛立たせたりします。

(注意すべき違いは、Windowsのメニューはホバー時ではなくクリック時のドロップダウンのみであることです。ホバー時のドロップダウンはそれをより見つけやすくしますが、より侵襲的です。ホバー時のみ(クリックではなく)ドロップダウンは問題が発生する可能性がありますタブレットでページにアクセスすると、ホバリングする方法がないためです。)

2
Inca

私の経験では、ホバーメニューとメガメニューは使いにくいです。これは、個人的な経験と他のユーザーの視聴に由来します。これは、ユーザーが器用さを制限しているか、運動能力が低い場合に特に重要です。

また、タッチインターフェイスではうまく機能しないようです。

1
kevinbpcls

ホバーメニューはタッチデバイスでの使用が非常に難しい
(ブラウザーに組み込まれたスマートフォンを使用せずにLinkedInを参照してみてください)

...そして、ユーザーがメニューの上でマウスを不正確に動かすと、しばしば閉じられます
(たとえば、古いバージョンのWindowsのスタートメニュー-Windows 7のスタートメニューの[すべてのプログラム]は、ホバーメニューを使用しません)。

1
Danny Varod