web-dev-qa-db-ja.com

ドロップダウンの子が1つだけのナビゲーションメニュー—直感的かどうか

ここにウェブサイトのメインナビゲーションがあります:

Simple navigation menu

サブナビゲーションをオンクリックにすることはかなり一般的であり、かけがえのないものです。

Child navigation dropdown


しかし、ユーザーおよびデザイナーとして、ドロップダウンに子要素が1つしかない場合に苦労しました。

Single-child sub-navigation on menu

多くの場合、どちらもクリック可能です。「カワウソ」は動物に関する一般的なページに表示され、「サラ」は特定の水生哺乳類に関するページに移動します。

見た目も気分も悪いです。これにはどのような解決策がありますか?


他の場合では、 親と子のナビゲーション 要素の区別がそれほど明確ではない可能性があるためです。

Similar parent and child elements in navigation menu

ただし、各ページが長すぎて1つに結合できない場合があります。

または、別の方法として、両方が同じページにアクセスする場合があります。

これは明らかに実装に依存しますが、確立されたベストプラクティスはありますか?ユーザーインタラクションに関する調査はありますか?

9
Baumr

メニューは論理的である必要はなく、意味があり、有用である必要があります。

「子」が1つある場合は、一意のラジオボタンが意味をなさないように「親」は必要ありません。

サブナビゲーションをオンクリックすることは一般的ですが、非常に置き換え可能です

ほとんどのWebサイトにはサブナビゲーションメニューがありません。 1章の本は要約を必要としません:あなたはそれを読むだけで、1部屋の家は計画を必要としません:あなたはただ入るだけです。

つまり、ドロップダウンメニューがある場合、「親」をクリックすると、通常はドロップダウンが開き、別のページに移動しません。ホバーメニューの場合、通常、「親」はクリックできないか、すべてが混乱します。

メニューを構築する前にWebサイトの構造を設計すると、この種の問題を回避するのに役立ちます。 *ウェブサイトは分類表ではありません。*

ただし、例外として扱うことで、例外を処理できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

エンティティに独自のクラスがある場合は、メニューに存在することで十分かもしれません。

そうでない場合:

mockup

bmmlソースをダウンロード


直感的な用語を使用することは非常にあいまいです

私は Klaus B.Bærentsen、INTUITIVE USER INTERFACES で定義を見つけました

直感的なインターフェースは、ユーザーによる特別な知識や特別な教育措置の開始を必要とせずに、すべてのユーザーがすぐに理解できるインターフェースとして定義できます。誰でもシステムに近づくことができます。それが提供するサービスの種類と、それを運用するために何をすべきかを見てください。デバイスを操作している間、システムインターフェースのナビゲーションと操作は、インターフェースの感覚運動動作の側面を意識する必要なく進行する必要があります。

ユーザーがクラスやフィールドの以前の知識を使用して、彼が望むものを見つけるので、私たちはこのような状況にはまったくありません。

2
Gildas Frémont

メニューはナビゲーション要素であるため、最も意味のあるものはユーザーにとってナビゲーションが容易になるものです。

最初の例は良いメニューです。「カワウソ」の項目は1つしかありませんが、「カワウソ」を「サラ」に名前変更しても、「サラ」が動物の一種のように見えるので、意味がありません。さらに、サラの会社を維持するための2番目のカワウソを取得した場合、2つのカワウソがいるので、ナビゲーション構造を変更する必要はありません。

enter image description here


2番目の例は、実装によっては不十分なメニューである可能性があります。ここで、「宿泊施設」の名前を「ホテル」に変更しただけでは、明確さが失われることはありません。

enter image description here

そうした場合に発生する可能性のある小さな問題の1つは、相互作用モデルの整合性が失われることです。他のすべてのメニューの下にオプションが表示されることに慣れているユーザーの場合、「ホテル」が別のサブメニューに展開されない場合、サイトに問題があると思うかもしれません。これはおそらくすでに「ホーム」や「連絡先」の場合に当てはまるため、大きな問題になることはほとんどありません。


TL; DR:例1は良い。例2は悪い。

7
JohnGB

私が取るアプローチは、メインレベルのみのページに代替フィルタリングオプションを提供することです。たとえば、ホテルによるフィルタリングの最後の例を取り上げますデザインはそのようなものになります

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

この方法の利点は、結果のスーパーセットをユーザーに提供できるだけでなく、そのパラメーター(この場合はホテル)のみでフィルターするオプションも提供できることです。したがって、ユーザーには、必要に応じてフィルタリングするオプションを含むすべての関連情報が表示されます。

1
Mervin

この状況に対して確立されたベストプラクティスはあるのでしょうか。これはさまざまな要因に依存します。

スケーラビリティ:ナビゲーションメニューがカテゴリベースで、その下にあるメニューの数が増える可能性がかなりある場合は、カテゴリとして保持することは間違いありません。例、「宿泊施設」に「ゲストハウス」、「サービスアパート」が含まれる可能性がある場合、現時点では「宿泊施設」をメインメニュー、単一の「ホテル」をサブメニューにしておくと便利です。

整合性:異なるメインメニューのランディングページがある場合、「犬」、「鳩」、「セイウチ」にはランディングページがあり、トム、ファットトニーにも個別のページがあります。 「カワウソ」のリンク先ページと「サラ」のリンク先ページを分けておくとよいでしょう。

2つをマージする場合は、巧妙にラベルを付けて、メニューが「カワウソのカテゴリにあるサラ」のコンテンツにつながることが明らかになるように、最善を尽くすことができます。しかし、私はこれを達成することを疑います。

しかし、全体として、単一の子メニューを2つの異なるページを持つメインメニューの一部として保持することで問題が発生することはないと思います。

1
Spicerjet