web-dev-qa-db-ja.com

レスポンシブサイドバーのサブナビゲーション

大規模なWebサイトの新しい応答性の高いバージョンに取り組んでおり、部門に応じて変更されるメインナビゲーションとサブナビゲーションをサポートする必要があります。以下は、これへの取り組み方のモックアップです。

sidebar navigation moves to submenu toggle on mobile

メインナビゲーションはハンバーガーメニューの下にあり、ローカルサイドバーメニューはページ上部のトグルになります。より良いアプローチはありますか?このアプローチに大きな落とし穴はありますか?

また、サブメニュートグルのラベルを決定しようとしています。たとえば、これが大学のWebサイト用で、部署が「Financial Aid」の場合、ラベルは「Financial Aid」または「Financial Aid Links」または「Additional Navigation」などのより一般的なものにする必要がありますか? 「Financial Aid」とだけ表示されている場合でも、トグルがサブナビゲーションであることは明らかですか?ご意見をお寄せいただきありがとうございます。

11
PartialObserver

あなたの解決策はまともだと思いますが、私はハンバーガーメニューと重要な情報を隠すことに警戒するでしょう。

Luke Wroblewskiは、ナビゲーション項目を上部バーの永続的に表示されるソリューションからハンバーガーメニューに移動した後のWebサイトでの主要なアクションの劇的な減少について書いています[1]。

ただし、次のクリックの背後に何かが「隠れて」しまうと、他の人がそれを目にして使用することが少なくなることは明らかです。

考えられる解決策は、サイトで最も重要なアクション(または行動を促すフレーズ?)を見つけ、それらを永続的に表示することを検討することです。

[1] Luke Wroblewskiによる常に優勝- http://www.lukew.com/ff/entry.asp?1945

1
Daniel Slowacek

2番目の質問について説明します。私の意見では、不要なテキストは削除するのが最善です。つまり、「Financial Aid Links」ではなく「Financial Aid」です。サブ要素が明らかにクリック可能である限り、それらをリンクとして識別する価値はありません。これは、「送信ボタン」というラベルの付いた送信ボタン(「嫌い」とも言いますが、誰が送信したいですか?)に似ています。

また、小さなディスプレイに適しています。

0
Aaron Lewis

ここにあなたが望むものに基づいた3つの例があります。これらはよりユーザーフレンドリーです。ただし、新しい方法を開発するときは常に、それをテストし、ターゲットユーザーがそれを気に入っているかどうかを確認します。次に、問題を解決しました。ハンバーガーメニューを使用すると、セカンダリメニューと同様にコンバージョン率が上がることを確認しました。次のように、ハンバーガーメニューにそれらを組み合わせることができます。

enter image description here

または、別のアイデアは次のようになります: enter image description here

要件を正しく理解している場合は、サブメニューが「アニメーション化」されたセカンダリメニューとして機能するホバーボタンを用意することをお勧めします。

enter image description here

この投稿がお役に立てば幸いです。ありがとうございました

0
Serag Alzentani

あなたのレイアウトのアプローチは一般的なものだと思うので、使いやすさの問題は最小限に抑えられます。あるいは、キャンバス外のメニュー内にサブリンクをネストすることもできます。このナビゲーションレイアウトは、ユーザーにサイト階層の完全なビューを提供し、ユーザーは少ないクリックで目的地に到達できます。

mockup

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

また、サブメニュートグルのラベルを決定しようとしています。たとえば、これが大学のWebサイト用で、部署が「Financial Aid」の場合、ラベルは「Financial Aid」または「Financial Aid Links」または「Additional Navigation」などのより一般的なものにする必要がありますか? 「Financial Aid」とだけ表示されている場合でも、トグルがサブナビゲーションであることは明らかですか?ご意見をお寄せいただきありがとうございます。

アーロンが言ったように、「財政援助」で十分であるはずです、彼の説明は有効です。 「追加ナビゲーション」のようなより一般的な用語の使用に関しては、それは少し冗長だと思います。

私はその理由についていくつかのモックアップを考え出しました:


mockup

bmmlソースをダウンロード

サブメニューリンクに対する懸念を要約するには、リンクは簡潔である必要がありますが、ユーザーがアクセスしようとしているターゲットページを説明している必要があります。それでも納得できない場合は、ユーザーと一緒にカードの並べ替えを行って、適切な用語を決定することができます。

0
adamsoh