web-dev-qa-db-ja.com

パンくずリストは、ドロップダウンを組み込む場合に効果的ですか?

私は現在、非常に包括的なセクションをWebサイトに追加することを考えています。私が話しているセクションは、Webサイト全体のレベル3から始まり、それ自体に4つの構造レベルがあります。巨大!

Webサイトの最初の2つのレベルに使用されているWebサイトの水平ナビゲーションを使用またはタッチできません。ユーザーに高い柔軟性を提供する左側のナビゲーションに代わるものを探していました。

したがって、私の考えは、パンくずリストのナビゲーションを使用することでした。ただし、パンくずリストの各項目はドロップダウンメニューになります。ドロップリストで選択するたびに、次のドロップダウンに選択したページのサブページが表示されます。同様に選択すると、対応するページが開きます。

したがって、ユーザーはドロップダウンを使用して前後に移動できますが、カテゴリまたはサブアイテムを切り替えることもできます。

enter image description here

31
John Sample

MicrosoftはこれをWindowsエクスプローラーで行います!ほんの数週間前にWindows 7の仕事用コンピューターでこれに気づきました。(特定の状況で)どれほど便利かを十分に強調することはできません。

ここでの鍵は、彼らがそれを非常に機能的にしたことですが、ユーザーがそれを発見するまで邪魔になりません。

30
Karen

例のように直接ドロップダウンボックスを使用することは避けます。これは、ユーザーがパンくずリストとしての目的を理解できなくなるためです。代わりに、Microsoftの例に従ってファイルナビゲーションを実行してください。ホバーを強調表示してクリック可能性を示します(おそらく、ホバーの>記号をv記号に変更してドロップダウンを示します)。

標準のパンくずリストを視覚的に表示することで、誰も混乱させません。ホバーアフォーダンスを提供することにより、ナビゲーション機能の自己発見につながるクリックを奨励します。少なくとも、これは理論です。これは、マイクロソフトがエクスプローラーで行ったことです。この方法の有効性は、Explorerで利用できる新しいインタラクション方法に気づかなかったこの質問のユーザーだけを考えると、むらがあることは明らかです。私は、通常、ウィンドウズエクスプローラーよりもホバー効果が少なく、複雑さが少ないWebサイトでより効果的だと思います。ナビゲーションへの影響はおそらくより独特ではっきりしており、より発見しやすくなります。

5
Myrddin Emrys

このようなパンくずリストのパターンを使用して、2つのWebサイトを見てきました。そして私にとってはそれはかなり効果的だと感じています。どうやら、あなたがガーディアンのような巨大な構造を持っているなら。

1つは、厳密に言うと、Windowsエクスプローラーの動作です。孤独な惑星と保護者は、クリーンなデザインで気に入っている別のアプローチを使用しています。後者は、パンくずリストの右端にプレーンなサブメニューアイテム(またはリストボックスアイテム)があります。

enter image description here

画像ソース i-patterns.com 。ロンリープラネット 動作中 。実際には、リストボックスの右側に選択したアイテムが表示されます。メニュー「デンマーク」で都市を選択できます。コペンハーゲンを利用すると、それが右側に表示されます。これは非常に直感的に感じられ、サイトのカテゴリを示すパンくずリストだと思います。

enter image description here

画像ソース i-patterns.comGuardian here を参照してください。保護者が使用するパターンは異なります。それらは、第3レベルのパンくずリストのパンくずリストの右側に「クロスリンク」または「関連する主題」を表示します。したがって、ニュース(最初)とワールドニュース(2番目)は「固定」カテゴリです。 「経済」を選択した場合、「オバマ政権」はどこに入れ替わりますか。つまり、3つの階層リンクよりも深い構造になることはありません。私には一見しただけでは分かりませんでしたが、少し使ってみれば大丈夫なようです。しかし、私はその視覚的な魅力が好きです。

5
FrankL

Jetbrains IntelliJ IDEA もこれを実行し(これは ナビゲーションバー と呼ばれます)、非常に便利です。

intellij http://www.jetbrains.com/img/webhelp/navigationBar.png

それを発見した後、通常のツリープロジェクト構造ビューに戻ることはめったにありません。

3

本当に素晴らしい例(そして美しく実装されている)はAppleのXcode4です:

enter image description here

ここでの素晴らしい追加機能は、メニュー項目自体にサブメニューがあるため、実際に(大規模な)ツリー全体を1回のクリックとホバリングでナビゲートできることです。

追加の機能として、ユーザーがメニューの入力中に入力を開始すると、項目がその検索クエリにフィルターされ、さらに迅速に移動できるようになります。

enter image description here

1
Jakub Hampl

これで達成しようとしていることに同意します。しかし、ナビゲーションの主な目的は、サイトの周りに訪問者を連れて行くことです。パンくずリストは、訪問者がどこにいるか、サイト内の深さを明確に表示するために使用されます。

両方を混ぜ合わせて、パンくずリストの用途の意味を失ったと思います。私にとってこのデザインは検索フィルターのように見えます。「Go」または「Search」と言うためにクリックする必要があります。

私がこのサイトのどこにいるかを知りたいのであれば、ドロップダウンが私がどこにいるかを明確に示すのではなく、サイトを検索するためのツールを期待します。

明確にするために、従来のブレッドクラムを提案します。

0
Steven Wu

役立つ回答、意見、例をすべてありがとう。そもそも私の目的は、便利で柔軟なナビゲーションを実現することです。関数をロードしたブレッドクラムを実装するのではなく。だから、私の見出しは少し誤解を招く可能性があります。

その間、私は(非常に)小さなA/Bテストを行い、ドロップリストを一般的な左手ナビゲーションと比較しました。少なくとも2人のテスト担当者はリストの機能をすぐに理解し、それを使用することを好んだようです。

きっとデザインが大きな役割を果たすと思います。上記の図は、私の説明をサポートするためのものであり、最終的な実装のドラフトではありません。私のクリックダミーは、システム以外のドロップダウンをすでに使用しています。結局、私は確かにいくつかのうまく設計されたドロップリストに行くか、孤独な惑星のようなもので遊んでいきます。

0
John Sample