web-dev-qa-db-ja.com

ユーザーはドロップダウンナビゲーションがどのように機能することを期待していますか?

この質問は、Webページで ドロップダウンナビゲーション を使用して予想される動作に関するものです。


これは、クライアントから受け取ったばかりのメールの一部です(「入学」は、トップレベルのナビゲーションリンクの1つです)。

入学に関するナビゲーションのトップレベル(およびクリックして開くページを取得できるその他のトップレベルの項目)に関する質問。上部をクリックすると、[アドミッション]の下に優れた機能があります。 Word Admissionsをクリックしない限り、完全な説明は表示されません。これはばかげているように聞こえるかもしれませんが、人々は最初にナビゲーションの見出しをクリックして情報を取得し、次にポップアップするサブメニューを操作することを知っていますか?私はいつもあなたがメインの見出しの上にカーソルを置いて、ポップアップメニューを取得し、そこから行くと思っていました。 (もっと技術的に言ったかもしれません–トップメニューナビゲーションアイテムは通常、直接クリックしたときにランディングページを持っていますか?)

これは、同じ質問でクライアントから受け取った別のメールです。

あなたへの質問-プルダウンメニュー.....プルダウンメニューが表示されたとき、見出しであると思うので一番上のアイテムをクリックするとは思いません-それは私だけですか、それとも人々が実際にクリックし忘れるかもしれません。 「財団について」で作品を見て?助成金申請と同じ-人々が申請と指示の両方を簡単に見つけられるように、指示と申請の両方をサブメニュー項目にする必要がありますか?これが理にかなっているかどうかはわかりませんが、サブメニュー項目があるときに見出しをリンクにしないでください。

過去に、ドロップダウンをトリガーして「実際の」リンクを表示するためにホバーするプレースホルダーだけでなく、実際にはページへのリンクであるトップレベルのリンクをユーザーが知っていると想定していました。この仮定は間違っていたと思います。これについてクライアントに質問したり、リンクを認識していなかったためにいくつかのページのレビューを見逃したりしたのは今回が初めてではありません。

私がベストプラクティスを心に留めておらず、HTMLの純粋主義者でもなかった場合は、_href="#"_またはhref="javascript:void(0)"のいずれかを使用して、トップレベルのリンクを単に「無効」にし、それらをプレースホルダーにしますのみ、それを1日と呼びます。技術的な理由から、これらは_<a>_要素である必要があります。これは魅力的ですが、私はそれは悪い習慣であり、それを行うことでおそらくアクセシビリティの問題があると思います。

私はこの問題を、ドロップダウン内のトップレベルのリンクを複製する(異なるテキストで別の同一のリンクを作成する)ことによって処理しました。これは、私が考えることができる最良のアイデアです。また、サブリンクを再リストするだけの「要約」ページも作成しました(無意味なものです)。

ユーザーは、リンクをホバーすると実際にドロップダウンがトリガーされることを常に認識しているわけではありません(小さな矢印などがない限り)。別のレベルのナビゲーション(ホバー時)を開くすべてのリンクが、クリックされたときに実際にページにリンクすることを期待していますか? 3レベルまたは4レベルの深さのナビゲーションについてはどうですか?

ドロップダウンナビゲーションのリンクが機能することをユーザーはどのように期待し、このクライアントに何を伝えますか?

サブメニューがあるリンクがクリックできないか、概要/要約ページ(サブメニューの拡張バージョンが含まれている可能性が高い)に移動するか、または固有の重要なページへのリンクをトップレベルとして配置しても「OK」ですかドロップダウンの?考えれば考えるほど、大丈夫だと言いがちになりますこれらのリンクは見落とされたり見落とされたり、ユーザーになりやすいためです)expect概要ページにすぎません。

この非常に一般的なWebインターフェースに対するユーザーの期待について、あなたが言わなければならないことを聞いてみてください。

20
Wesley Murch

一般に:

  • メニューバーが主にWebサイトをナビゲートする方法であるときに、より多くのリンクを表示するHOVER
  • クリックして、メニューバーが主にWebアプリケーションのタスクバーとして使用されている場合に、より多くのリンクを表示します(標準のデスクトップアプリに似ています)。

ナビゲーションとして使用する場合、トップレベルのリンクにカーソルを合わせると、セカンダリリンクが表示され、クリックされる可能性が高いという永続的な問題があります。これは問題ありませんが、オッズがトップレベルのリンクがほとんどクリックされないことを除いてです。

そこにある典型的な救済策は、そのトップレベルのリンクのページを、そのセクションの目次として扱うことです。それ自体は、固有のコンテンツは多くありませんが、他のページへのゲートウェイ/概要として機能します。

あなたのコメントに答えるために、それらをデッドリンクにしないことをお勧めします。その理由は、ドロップダウンメニューが適切に構築されていない場合(非常に悪いJSヘビーなものがたくさんある)、Googleやスクリーンリーダーなどがサイトをトラバースするのに苦労するためです。さらに、そしてこれは私の意見ですが、私はタッチデバイスで見つけました、私はドロップダウンを扱うのが嫌いです。タップして行きたいだけです。

これは、非常に基本的なサイトマップを作成するときに、90年代後半(UXが重要なものと見なされる前)にさかのぼります。クライアントは、トップレベルのページを除くすべてのページのコンテンツを作成することがよくあります。そのため、常にトップレベルのページのコンテンツについて、他のページへのリンクのクイックリストをまとめる必要がありました。それは常に問題であったと思います。 ;)

11
DA01

ナビゲーションメニューからページにアクセスし、ナビゲーションバー自体がページの間にコンテンツのレイヤーを保持していることが明確ではなかったため、コンテンツ階層の1つ下のレベルで、予想よりも低いレベルでジャンプしていることに気付きました。とメニュー項目のページ。

トップレベルのアイテムを複製することで考えられるいくつかの問題があります:

  • ナビゲーションバーのアイテムには、1つのページだけに十分なコンテンツがあるため、メニューがない場合があります。この場合、アイテムを複製することを提案すると、メニューは単一のアイテムになります。

  • ユーザーは通常、ナビゲーションメニューを使用して、コンテンツ階層内の同じレベルにある他のページに移動します-メニュー内のすべてのアイテムが同じレベルにあるという前提の下で。それらのうちの1つがたまたま現在のページからのレベルアップである場合、それは混乱を招く可能性があります。 (パンくずリストはこれに役立ちます)

  • これはユーザーの認知的負荷に追加されます-アクセス方法を覚えておくためのより多くの情報があるようです。

  • 独自のリンクを持つナビゲーションバーアイテムに慣れている場合は、メニューの重複アイテムがわかりにくく、不要に見える

通常、混乱は、ナビゲーションバーがユーザーにバーのアイテム自体がクリック可能であることを示しておらず、それらにカーソルを合わせるとポップアップするメニューが表示され、デスクトップアプリケーションのメニューバーと非常によく似ているためです。ユーザーがバーアイテム自体がドロップダウンメニュー以外のものをアクティブにすることを期待することはありません。

したがって、ナビゲーションバーをデスクトップメニューバーとは大幅に異なる方法で設計し、ナビゲーションバーの項目自体がクリック可能であることをユーザーに十分な手掛かりを提供します。バーでアイテムを互いに分離し、ハイバーするときにアイテムをハイライトして「ホット」にすることで役立ちます。メニュー自体をバーから少し分離します。メニュー自体をナビゲーションバー自体とは異なるスタイルで表示することができます。これは確かに助けになるでしょう。ナビゲーションバーの項目にカーソルを合わせると、メニューがすぐに表示されることに注意してください。

WordPressテーマでこの問題を頻繁に発見したため、自分のWebサイトでWordPressテーマを選択したとき、特にThemeShiftのテーマに惹かれました(以下のWebサイトのサンプルを参照してください: http://themeshift.com/demo/designum/ )これにより、ナビゲーションバーのアイテムが明確にクリックできるように、ナビゲーションバーが十分に区別できるようになりましたホバーメニューでは、アイテムが大幅に異なるスタイルで表示されます。これは良い例ですが、ナビゲーションを表示するサイトはたくさんあります。よくバー。

enter image description here

4
Roger Attrill

最近、クライアントから同様のリクエストがあり、トップレベルのページにはコンテンツが必要ないというので、代わりにドロップダウンエリアにページを追加して、そこにコンテンツを配置しました。

その後、カーソルの問題を修正するためにいじっていたときに、最初のレベルに矢印が表示され、サブレベルにのみポインターが表示されます。非常にクリックできるように見えるが、どこにも行かないレベルのページ。リンクのリストを作成することはできますが、クライアントにはそれを正当化するのに十分なコンテンツがありません。

とにかく、それはおそらく修正することができますが、これらの決定がモバイルナビゲーションに影響を与えることになるという考えだけです。

2
curious

私が管理しているサイトの1つで、ほとんどの人がメインメニューをクリックすることを考えていないため、最も重要なコンテンツをサブメニューに移動するように修正するように求められました。私は人々がそこには何もないと仮定するだろうと少し床があります。私の考えでは、メインメニューにコンテンツがあることは明らかであり、そこから開始することになります。インターネットを検索すると、トップメニューをクリックできないようにするための多くのWebクエリが表示されます。したがって、サブメニューのみを見るユーザーとメインメニューをクリックするユーザーの2種類のユーザーと競合する必要があります。メインをクリック不可にするのではなく、同じページへのサブメニューリンクを作成し、別の名前を付ける方がより良い解決策だと思います。これにより、モバイルおよびタブレットデバイスでのクリックできない問題が回避されます。 Webデザインで許可されている場合は、名前を複製できますが、検索エンジンで問題が発生するのではないかと思います。どうやら、私たちは最初と最後が何であるかをほとんど見ているので、私はドロップダウンメニューの下部にあるリピートに行きます。それまでの間、ユーザーが実際にサイトをどのように移動しているかを確認するために、Google Analyticsを設定しました。

2
Eva Dillner

私は数年前からこれに挑戦してきました。私は同様のコメントや質問を聞いて驚いています。人々が自動操縦をしていて、彼らが想定しているものだけをクリックする傾向があるので、それは今より一般的になっています。私たちは何でもクリックすることを知っている「季節の」サイトユーザーと、Windowsによって確立された貧弱なUIとUXのアプローチに基づいてクリックするユーザーがいます。

残念ながら、これに対する私の対応は、十分な数の人々が一般的なものを誤って使用すると、それが標準になるということです。今やデジタルTVの録画はDVRingと呼ばれていますが、これまでVCRingと呼ばれたことはありません。したがって、メインメニュー項目(ugh、 'tab')がコンテンツ自体を保持せず、フライダウンサブページのみを保持することが期待される場合、このための目次を作成する上記のソリューションに同意しますクリックされた場合に備えて、ランディングページとしてのセクション。

多くの人々がウェブサイトの使い方を知らず、サイトのインターフェースを不自由にして機能を損なうという多くの仮定を立てているのは残念なことです。

2
user2192621

「ユーザーはドロップダウンナビゲーションがどのように機能することを期待していますか?」

他の人とは異なる動作を期待する人もいるので、これには単一の答えはありません。

私の意見では、この問題の鍵はコンテンツ構造を改善することです。 1レベルのサイトマップから離れるとすぐに、階層構造を考える必要があります。各親ページはその子ページの概要であり、各子ページはその親トピックの一部をカバーしています。

この考え方により、2つの問題が解決されます。

  1. 親ページをクリックしないユーザーは、詳細情報だけでなく概要も見逃すことはありません。

  2. コンテンツマネージャは、適切なコンテンツ主導のメニュータイトルを検討します。

ドロップダウンメニューで親リンクを複製すると、場合によっては機能することがあります。最初または最後の項目は入学概要にすることができますが、他の項目から視覚的に分離する必要があります。

2
Peter

私は2008年にこの問題に最初に遭遇し、クライアントがそれを受け取っていないのでそれを書き留めました。私はいくつかの簡単な非公式のテストを行いましたが、他の人もそれを取得していないことがわかりました。ドロップダウン付きの主なナビゲーション項目もクリック可能です。開始されたすべてのWebユーザーにとって、それは簡単なことではありません。しかし、明らかに他の人にはありません。

私はちょうどそれに遭遇しました再び 2015年に私が立ち上げようとしている新しいサイトで、そしてもう一度クライアントのために更新している別のサイトで。人々がそれを得ないのは私には計り知れませんが、これは起こっていることなので、それは要点の外にあるようです。

FlickrはHome Depotと同じアプローチを採用しており、ドロップダウンリンクの最初のアイテムはメインのナビゲーションアイテムと同じページに移動しますが、名前は異なります。それは私を苦しめますが、これは私が取るアプローチです。また、メインナビゲーションとセカンダリナビゲーションの視覚的な違いについてもテストしますが、それがうまくいくとは思えません...

1
Kellie Bonnici

すべてのトップレベルのリンクがリンクの名前を含むページを表示し、そのページが次のレベルのサブリンクを表示することは長い標準です。これは各レベルで続きます。これらのページのコンテンツには、各リンクが表示するページの概要が含まれている必要があります。ナビゲーションバーの下にあるパンくずリストは、上のリンクまたは2つ上のレベルに直接戻ることを好む人にとっても非常に適しています。

これを行うには多くの理由があります。たとえば、1900x1200の解像度と高解像度のマウスを使用しているため、薄すぎるサイトや、構造が不十分でナビゲート中に陥没するサイトでは、ナビゲーションのカスケードが困難になる場合があります。そのような場合は、リンクをクリックして概要ページに移動し、通常のテキストリンクをクリックします。また、ページ数の多いサイトをサーフィンするときは、パンくずが大好きです。

サイトをレスポンシブにする場合は、カスケードドロップダウンが電話に適切に移植されないため、単一レベルのドロップダウンを実行する必要があります。

0
Rollin Shultz

追加のコンテンツ(ドロップダウン)がある場合は、マウスオーバーで表示されます。親リンクをクリックすると、そのコンテンツ(入学)の親ページに移動します。

Home Depot's サイトをご覧ください。彼らはまさにこれを行います。また、追加コンテンツのリストを含むすべてのメインナビゲーション項目にキャレットを追加します。

enter image description here

0
Matt Rockwell