web-dev-qa-db-ja.com

レスポンシブWebデザインのヘッダー/フッターの最良のアプローチは何ですか?

私は、はるかに大規模なeコマースサイトの一部として、レスポンシブサイトを行うIAです。私たちのページはサイト全体の唯一のレスポンシブな部分なので、サイトの90%はまだレスポンシブではありません。これの一部はテストケースであり、他の部分ははるかに大きな努力のための土台です。

私の質問はヘッダー/フッターに関係しています。

また、サードパーティプロバイダーがモバイル向けに最適化したサイトもあります。ヘッダー/フッターリンクの圧倒的多数が応答せず、モバイルに最適化されていないリンクに移動するので、それらをモバイルビューのレスポンシブサイトから除外することは理にかなっていますか?

これまでに行ったのは、モバイルサイトへのリンクのみを含むヘッダー/フッターIAです。このようにして、ユーザーはモバイルコンテキストにとどまり、モバイルで優れたUXを提供しないページにバウンスされません。

これはそれに取り組む正しい方法ですか?

デスクトップ/タブレットと同じ正確なヘッダー/フッターコンテンツをモバイルに含めることが正しい決定かどうかはわかりません。

9
jfin66

私は両側の証拠を読みました:

いいえ、個別のモバイルナビゲーションを作成しないでください。

Sujan Shresthaによる研究 (189ページを参照)は、モバイルでデスクトップナビゲーションの一部を省略すると、デスクトップサイトに精通しているユーザーに混乱を招き、タスクの完了時間を短縮できるため、正しいことを示していますモバイルのナビゲーションを変更する前によく考えます。

また、一部のページをモバイルから非表示にすることにより、暗黙的に別のモバイルコンテキストを想定しています。モバイルデバイスへのアクセスの約70%は静止した状況で発生します( Heimonen 2009年に67%が見つかりました-- Church&Oliver 2011年に71.4%が見つかりました、71ページ)。これらの固定コンテキストの人々(およびモバイルコンテキストのモバイルユーザーも)は、デスクトップユーザーと同じ情報ニーズを持っているため、ナビゲーションの関連部分を非表示にすると、求める情報を見つけることが難しくなります。


はい、別のモバイルナビゲーションを作成する必要があります

「小さな画面デバイスでのWeb検索の改善」 の作成者は、デスクトップサイトにアクセスするモバイルデバイスのユーザーが、デスクトップ用に最適化されたWebサイトでタスクを完了できないことが多いことを発見しました。

「失敗の主な理由と、それに関連する大きなタスクのタイミングは、検索結果から選択したサイトをナビゲートする際の大きな困難でした。無駄な時間と労力のほとんどは、小さなウィンドウ内で次第に失われることに費やされました」(488 )

コンテンツが不可欠でない限り、コンテンツへのリンクを提供することで、ユーザーがサイズの小さい画面でサイズの大きいインターフェースを使用するのに苦労するときに、ユーザーを不満にさせるだけです。ナビゲーションのその部分を削除することで、何気なくブラウジングしているだけで、実際にそれらのページでタスクを実行する必要がないすべてのユーザーのエクスペリエンスを向上させます。

警告: 他の一部の研究者 は、(少なくともモバイルアプリのコンテキストでは)ブラウジングが総使用量(p。186)の10〜12%しか占めていないことを発見しました。目的を考慮してインターネットを使用する。その目的が情報の検索やステータスの確認だけである場合でも、モバイルでページを非表示にすると、そのようなことはできなくなります。このため、私が個人的に片側を選択した場合、モバイルナビゲーションからデスクトップページを非表示にしないことを選択します。アクセスの悪さに不満を感じているアクセスできないことでイライラするほど悪くはありません。


NEITHER(非現実的な理想)

理想的にはコンテンツが同じである必要があるため、2つのナビゲーションは最終的に同じになるはずですデスクトップとモバイルの両方のサイトが同じデータベースからコンテンツをプルしますが、フォーマットするだけですそれは違う。彼女の著書モバイル向けコンテンツ戦略で、Karen McGraneはクロスプラットフォームのコンテンツ公開がどのように機能するかを示しています。貴社は当分の間コンテンツを分岐させたように思われるので、これはおそらく現時点で実行可能な解決策ではありませんが、将来のために心に留めておくべきものです。


警告。ナビゲーションからページを非表示にすることを選択した場合...
...次に、McGraneが警告するモバイルナビゲーションの落とし穴について考えます。
Googleからサイトにアクセスしたモバイルユーザーは、モバイルにページが存在しない場合、モバイルホームページにリダイレクトされ、デスクトップバージョンのホームページに移動し、手間をかけてデスクトップを検索する必要があります。彼らが探しているページを見つけるためのバージョンの内部ナビゲーション。

ユーザーがGoogleでページを見つけた場合、それがサイトのデスクトップバージョンのみであっても、モバイルでアクセスできるはずです。ヘッダーとフッターからコンテンツを除外する場合は、それらのページに移動していたであろうGoogleからの検索結果もリダイレクトしないようにしてください。

最後に、McGraneは競合他社のサイトを見てモバイル戦略を決定することをお勧めします。

グローバルナビゲーションをどのように処理しますか?デスクトップサイトと同じ主要カテゴリが含まれていますか、それともサブセットのみですか? モバイルではナビゲーションカテゴリの優先順位が異なりますか?ユーザーはホームページや他のサイトページからグローバルナビゲーションにどのようにアクセスしますか?

...したがって、競争力のある監査を行うと、質問への回答に役立つ場合があります。

5
Graham Herrli

検討すべき分野は少なくとも3つあると思います。

  • UX-デスクトップとモバイルのバージョンはUXとテクノロジーの側面により異なりますが、ユーザーエクスペリエンスと競合しない限り同じに保つ必要があります。モバイルでは簡単にアクセスできない機能へのアクセスを制限することでエクスペリエンスを適切に低下させることは理解でき、一般的には適切な方向性です。特にフッターリンクに関しては、私は中間の方法を選択します。フッターオフサイトリンクをタップすると、モーダルアラートを表示できます彼は現在、モバイル向けに最適化されたバージョンとモバイルフレンドリー性がないため、エクスペリエンスはさらに深刻な影響を受ける可能性があります。このようにすれば、すべてのリンクを維持しながらも混乱を避けることができるため、2つの世界の最高の状態を実現できます。ただし、これはモバイル調整の欠如の規模によっては、特にヘッダーナビゲーションに使用する場合、ユーザーにとって非常に厄介なものになる可能性があります。もしそうなら、どのリンクがモバイルフレンドリーサイトにつながるか、どのリンクがデスクトップバージョンのみにつながるかを(グループ化やグラフィック表現によって)何らかの形で示します。

  • リンクの移行-UXとSEOの両方に影響するため、1番目と2番目の中間にあります。このトピックは、3nafishの回答で広く説明されています。つまり、モバイルリンクとデスクトップリンクの間に1対1の関係があるはずです。そのため、誰かがモバイルからデスクトップリンクを入力すると、同じコンテンツにリダイレクトされますが、モバイルバージョンのサイトにあります(別のモバイルサイトがあることを考慮して、レスポンシブレイアウトではなく、既に処理されている場合)同時に、デスクトップからモバイルリンクをたどると、デスクトップバージョンの同じコンテンツが表示されます。

  • SEO-モバイルバージョンからのリンクの追加/除外はSEOに影響を与える可能性があります。意見については http://webmasters.stackexchange.com に問い合わせてください。

2
Dominik Oslizlo

ナビゲーションプロセスは、特定のコンテキストでのユーザーのニーズに基づいてタスクフローに従う必要があります。ユーザーコンテキストとニーズを念頭に置いて、タスクフローを開発します。デスクトップとモバイルのユーザーで同じであることがテストされている場合は、同様のナビゲーションパターンを使用してください。そうでない場合は、デスクトップとモバイルの両方のユーザーのニーズとコンテキストが異なる傾向があるため、変更することをお勧めします。

0
Dr_Laghari_UX