web-dev-qa-db-ja.com

全ページ幅のナビゲーションバーと960pxボディの混合

全幅の上部ナビゲーションバー(ナビゲーションバーのコンテンツも全幅であることを意味します)と含まれているボディ(約960px)を混在させるユースケースはありますか?使いやすさとデザインの点でそうすることの利点または欠点は何ですか?

IMO、それは全幅または含まれている必要がありますが、両方ではありませんが、混合するとユーザビリティの問題が発生します。

  • 位置合わせの違いにより、クイックスキャンが不可能です。
  • 広い画面では特に視差が悪く、ナビゲーションバーの要素を使用する場合でも目とマウスの動きが多くなります。これにより、ナビゲーションバーの効果が最小限に抑えられます。

それでも、このアイデアをさらに探求することに興味があります。これをうまく成功させたウェブサイトはありますか?

編集

これは私がフィードバックしたいもののモックアップの例です:

mockup of top navigation bar and content 960px wide

編集Redux

いくつかの例が挙げられていますが、私が求めているのは、これが良いアイデアであるかどうか、そしてそうである場合はいつ使用すべきかです。グーグルはそれをしていますが、これが実際にユーザーフレンドリーなデザインパターンであるとは確信していません。

11
Virtuosi Media

Google成功した​​企業であると考えている場合昨年ユーザーエクスペリエンスについて、それが答えです。すべてのサイトに全幅のトップナビゲーションバーを実装しており、一部のコンテンツは幅が狭く、中央に配置されています。質問のパターンのようです。

Google full width navigation bar

Googleバーの外観が更新されました

掲示される Googleのサポートサイト 読むことができる:

Googleバーは、クリックしてさまざまなGoogleサービスにアクセスできる濃い灰色のバーと、アカウントの検索、共有、管理に役立つ薄い灰色のバーの2つの部分で構成されています。 [...]

薄い灰色のバーには、現在使用しているGoogleサービスの検索ボックスが含まれている場合があります。 Google+ユーザーの場合は、右側に共有ボックスと通知アイコンが表示され、GoogleページからGoogle+に参加できます。

グーグルは完全に規制を撤廃するために多くのコメントをしており、昨年(2011年)11月に試みた。しかし、そのデザイン(ホバードロップダウンメニュー)は、コミュニティによってさらに拒否されました。 Googleは再び黒いバーに戻る必要がありました 、しかし コミュニティに尋ねる 代わりに何をすべきか。

私の個人的な見解では、自分のGoogleサービスの場所を常に知っているので、黒い棒が好きです。 「コミュニティ」は常に正しいとは限りませんが、彼らは多くの意見を出します。ユーザーは常にワンクリックで必要なものを見つけることができるため、ブラウザウィンドウの上部にあるナビゲーションバーを使用しても安全だと思います。

7
Benny Skogberg

私は私が行ったデザインのいくつかでそのようなものを使用しました。

行われたいくつかの調査研究に基づく私の意見では、両者が直接の関係を持っていない場合、両方が混合する可能性があります。

グーグルの場合のように、トップバーのコンテンツは、コンテンツとトップのナビゲーションの間に直接の関係はありません。それはそれが削除されても影響を及ぼさない追加の機能と呼ぶことができます。

以前、ユーザーがログインしてWebサイトのコンテンツの一部にアクセスする必要があるWebサイトを設計しました。ウェブサイトはすでに設計されており、私はコンサルタントとして、欠点を特定し、導入された新機能のいくつかを提案するために働いていました。私の考えは、ウェブサイトのレイアウトは同じままで、ログインに基づいてサイトのコンテンツのみが変更されるため、ユーザープロファイルと編集オプションを一覧表示し、サイトをその下に保つことができる暗いトップバーを使用することをお勧めします。実際には、サイトの全体的なデザインを妨げることのないツールバーのように機能しました。

位置合わせとスキャンに関しては、これらはほとんど使用されないオプションであるため、ユーザーはそれらにアクセスするのに問題はありませんでした。

1
ajayashish

現在 ニューヨーク州労働省 は、画面上部のペルソナベースのナビゲーション(メガメニュー)に「全幅」の永続的なナビゲーションバーを使用しています。コンテンツ固有の領域に到達すると、左側に追加のサイドバーが表示されます。サイドバーは、コンテンツ固有のナビゲーションのフォームをユーザーに提供します。

トップナビゲーション

Labor home page showing mega menu

サイドナビゲーション(白の領域は、選択された/現在のページを示します)

Labor page showing side navigation

0
JeffH

Swipely を使ってサンプルを試してみたい場合(通常のUIを表示するには、アカウントを作成する必要があります)。私は個人的にはそれが「悪い」経験だとは思わないが、それが多くをもたらすかどうかはわからない。

私はサイトで実際に有益であるかもしれない多くのテキストコンテンツのユースケースを見ることができます。コンテンツは本体領域とスクロールに含まれています。メニュー/ボタンは横に押し出され、より「気を散らさない」読書環境を作成します。それはストレッチです...しかし、いくつかの状況で役立つかもしれません。

0
Clayton Correia