web-dev-qa-db-ja.com

メニュー項目がメガメニューに拡張されたタスクベースのナビゲーション

最初に、この質問の長さをお詫び申し上げますが、かなり徹底的に説明したいと思います。

最初に背景/理論的根拠:新しい 旅行ウェブサイトのデザインの一部として かなり珍しい(少なくとも旅行サイトでは)「目標/タスク」ベース主要なナビゲーション。

タスク:

  • 探索(「さりげなく閲覧したいユーザーのためのガイド付き探索ページ」)
  • 検索(欲しいものを知っているユーザーのためのファセット検索など)
  • コミュニティ(ユーザーフィードバック、Q&A、レビューを依頼)
  • コンシェルジュ(自動化されたパーソナライズされた提案を取得)
  • パルス(現在何が起こっているか、ブログと記事についての情報を得る)

これは、旅行を調査するときにユーザーがよく経験するフェーズ/タスクを模倣したいと思った根拠と一致しています。

直交して、次のトピック/アイテムが存在します:ホテル、レストラン、アトラクション、ナイトライフ、ショッピング、雰囲気と体験、地区。これらは通常、そのような旅行サイトの主要メニューを構成します。

これら2つを組み合わせることができます。たとえば、ユーザーは次のことができます。

  1. 探索>すべて
  2. 探索>地区
  3. 検索>ホテル
  4. コミュニティに質問する>アトラクションのレビューを求める
  5. コンシェルジュに尋ねる>ショッピングに関する個人向けのヒントについて>ショッピング
  6. 雰囲気を得る>最新のコンサート

私はこのセットアップがとても好きです。

私にとってこれは一種のマトリックスのように視覚化することができました:タスクXトピック。ユーザーに威圧されることなく、このマトリックスのようなナビゲーションを視覚化する方法を探りました。 (ところで:「タスク」+「もの->すべて」も可能です)

私は次のことを思いつきました:

  1. 基本的に、タスクナビゲーションは左に縦に表示されます(アイコンは今でも同じですが、Google Plusから大きく影響を受けています)。

  2. タスクアイテムをクリックすると、「タスクXすべて」に移動します

  3. 各タスク項目は、 メガメニュー (ポップアップ)としても機能します。これにより、ユーザーはそのタスクに深く入り込むことができます。例として、「探検」してみましょう。メガメニューの項目は、「ホテル」、「レストラン」、または「モンマルトルのロマンチックなホテル」のような階層的に深いページです。

  4. タスクが選択されると、そのタスクアイテムは画面の上部に移動し、ブレッドクラムの最初のアイテムとしても機能します。 (視覚的には「マトリックス」の水平部分があります)

2つのスクリーンショットを含めました。 1つ目は、左側のタスクベースのナビゲーションです。 2つ目は、左ナビゲーションが「メニュー...」という単一のメニュー項目に折りたたまれた状態です。特定のページタイプ(具体的には、水平方向のスペースが必要な「検索」)とモバイルデバイスで使用されます。

注:黄色のトップバーはかなり空っぽになっていますが、これには検索バーがあります。

EDIT:スクリーンショットの切り抜きを100%で表示

Explore page with expanded task-menu

Search page with collapsed task-menu

私は実際に結果にかなり満足していますが、このアイデア(および視覚的な実装)について他の人からいくつかのフィードバックを得たいと思います。具体的には:

  1. ユーザーが自分で機能(メガメニュー)を発見すると思いますか?これらのタスクメニュー項目を目立たないようにメガメニューとして2倍に表示するためのより良いアフォーダンスを得る方法はありますか?

  2. 2番目のスクリーンショットのコンデンスメニューについてどう思いますか?ページタイプを切り替えると、タスクメニューが折りたたまれたり、展開されたりする場合があります。 (スクリーンショット1と2)明らかに、これはあまり一貫していません。タスクメニューが展開されている場合でも、左上の青い[メニュー...]アイテムを常に表示することを考えました。

  3. 選択したタスクアイテムがブレッドクラムの最初のアイテムとして2倍になるというアイデアが気に入っています。結果として、タスクベースのメニューを順番に変更する必要がありません。 (つまり、アクティブなアイテムは常に一番上に移動します)これは大きな問題だと思いますか?

  4. 先ほど述べたように、アクティブタスクメニュー項目はブレッドクラムの最初の項目としても機能するので、以下についてより良い「センテンス」を流したいと思います。

    • 「コミュニティに尋ねる>レビューについて>アトラクションについて」これが文(私が欲しいもの)になるには、最初に「尋ねる」という単語を追加する必要があることに注意してください。これはもちろん、「コミュニティ」はタスクではなく「コミュニティに尋ねる」というタスクによるものです。 「コミュニティに尋ねる」の代替単語/短いフレーズは大歓迎です。

    • 同様に「コンシェルジュに尋ねる」と「バイブ」の場合>イベント

ご返信をお待ちしております。

EDIT:サイズが768px未満の場合のみ「コンデンスメニュー」を表示する2つのスクリーンショット。モバイルエクスペリエンスの一部として、ユーザーがこれらの「コンデンスメニュー」をさらに期待している(?)場合、それは機能しますか、それとも左上にある厄介な場所にありますか?

小さな画面:コンデンスメニュー 768px

大きな画面:メニューを拡張 960px

参照としてのみ:小さい画面にのみコンデンスメニューを表示するという考え( 'more ...'ボタンを唯一のナビゲーション要素として使用)思っていた以上にあるようです。それをトレンドと呼ぶのは多すぎるかもしれませんが、Facebook、Google +、Youtube、Spotify、Path 2.0(おそらく、現時点で最高のUxデザインの1つ)がそれを実装している場合...これらすべての素晴らしい例で、私はいくつかの微調整によって、説明したuxが成功する可能性があることを確信しています。

https://stackoverflow.com/questions/11377472/slide-out-menu-like-Android-google-and-youtube-style-slide-menu-not-like-faceb

6
Geert-Jan

1. + 2. + 4 .:
私が目にする最大の問題は、第1レベルのタスクの意味がyourであるユーザーのクリックインです。 「探索」と「検索」。

あなたはすでに質問ユーザーがあなたのサイトに来ていることを整理しました-私の旅行POVから、非常に良いもの。

これらの質問を、実装のメカニズムではなく、ナビゲーションの中心にしてみませんか?スクリーンショット#2の短いメニューは「もうすぐそこ」のように感じますが、そこから何かを挿入します。

たぶん質問のプールから始めるかもしれません。そこでは、セグメントをクリックしてオプションを提供することができます。

(スタイルのリンクのみ、上記の「|」で区切られたオプションはもちろんポップアップに入ります)

あなたのフロントページはこれらのオプションを提示し、編集上の選択に基づいて関連するかばかげたオプションを循環することができます。

3 .:私が理解しているように、違いますが、上記のように、「第1レベル」のタスク項目の選択は、サイトではなく訪問者に集中することができます。

ランディングページ(すべてのタスクを含む)からパンくずリスト+メガメニューページにいつ移行するかはまだはっきりしていませんが、いじくり回すと簡単にわかります。上記の例でユーザーが「romantic」をクリックすると、「business」、「family」、「more ...」などのクイックオプションが提供され、さらにパンくずリストページとそれぞれのメガメニューにつながると想像できます。

2
peterchen

1-ユーザーがホームページで利用できる他のオプションがわかりません。彼らの注意のために戦っているものがそこにあるならば、彼らは垂直メニューを発見しないかもしれません。彼らがすることはそれほど多くなく、ホームページをより徹底的に探索せざるを得ない場合、彼らはそれを発見するでしょう。彼らを助けるためにあなたができることがいくつかあります。

最初に、この垂直ナビゲーションを最初にどのように表示するかわかりませんが、スクリーンショットのように見える場合は、灰色のアイコンが黒になっていると、よりカラフルになります。サイトの読み込み時にすべてが完全に色付けされ、項目が選択されると、残りは白黒にフェードします。これで、ユーザーがメニューを認識し、その使用方法を知っていることを確認しました。

2つ目は、アイコンの右側にラベルを表示することで、最初はメニューのスペースが広くなり、標準の垂直ナビゲーションに類似しています。上記と同じように、一度操作すると、スクリーンショットの状態に縮小できます。

2-コンデンスメニューの解決策は良いものではないと思います。一部の画面の要素の1つのためにスペースを空けるためだけにWebサイトのロゴを移動するわけではありません。それは不自然な振る舞いであり、私には非常に強制されていると感じています。常にそれを表示することをお勧めしますが、位置を変更し、黄色のストライプの下に青いボックスを配置して、パンくずリストを少し右に押し、メニュー項目を少し下げます。常に表示する場合は、メニューを折りたたんだ状態と展開した状態の2つの状態が必要です。

3-はい、それは大きな問題だと思います:)ブレッドクラムは非常に長い間使用されており、常に同じ状況です。メニュー項目を選択すると、ブレッドクラムの最初の項目になります。しかし、誰もこれを行いません(私が知っていることです)。メニュー項目の順序は変更しないでください。混乱して混乱します。これによって引き起こされたとされる冗長性は完全に問題ありません。

4-UI要素からセンテンスを構築するこれらのゲームはクールですが、Webサイトを完全に制御でき、さらに成長するつもりがない場合にのみ実行可能です。そうしないと、ある日、カテゴリが完全に適合せず、適切な表現を見つけるのに苦労して、うまく機能し、妥協を始めます。次に、ネーミングがあまり明確ではなく、生成されたフレーズも非常に滑らかではなくなります。

1