web-dev-qa-db-ja.com

携帯サイトメニュー。ハンバーガーのメニューは左か右か?

かなり前に、私たちはハンバーガーメニュー(私はそれらが悪いことを知っていますが、私は愚かな量のサブカテゴリーを得ました)を右に移動することに決めました。その理由は、アクセシビリティに基づいており、屋内のラボでは、この方法が好まれていることがわかりました。

現在、モバイルのトップバナーと検索に関していくつかのリワークを行っています。調査をしていると、文字通りすべての競合他社が左側にハンバーガーメニューを持っていることに気づきました。

一貫性のために、ユーザビリティ(メニューに到達しやすい方法)を犠牲にする価値はありますか(他の誰もが左側にハンバーガーメニューを持っています)。

私たちの顧客ベースがモバイルデバイス、特にiPhoneを多用していることは注目に値します。

同様のトピックがありますが、アプリではなく、ウェブサイトでのハンバーガーメニューの場所の特定の使用法については考えていません。 検索ボックスを左側または右側に配置する必要があります

31
Awfor

すべての回答に感謝します。このトピックにより多くの貴重な情報が生成され、最終的にハンバーガーの位置に関するA/Bテストを行うことにしました。これまでのところ、お客様のごく一部に対してのみ実行し、左側のハンバーガーは追加されました。カートレート、右側のハンバーガーと比較したサイトおよびページビューの平均時間。

つまり、現時点では、左側のハンバーガーは右側の同じハンバーガーよりも優れているという結論に達しました。これは、業界ごとに、また会社ごとに異なるはずだと強く信じています。

これが他の人が同様の質問に遭遇するのを助けることを願っています。

3
Awfor

ハンバーガーメニュー下部ナビゲーションメニューに置き換えます

私は特にあなたの質問に答えないことを知っていますが、ハンバーガーメニューと可能な代替品に関する最新の研究を共有することにしました。

最近、モバイルナビゲーションについてかなりの研究が行われています。 下部のナビゲーションメニュー は、ハンバーガーメニューと比較してFacebookの方が ユーザーエンゲージメント を作成していたことがわかります。 Luke Wreblowskiのビデオ を見て、ほとんどのGoogleアプリがハンバーガーメニューを下部ナビゲーションに置き換えている理由を説明しています。

enter image description here

はい、ハンバーガーナビゲーションは貴重な画面スペースを大幅に節約しますが、

ハンバーガーメニューの問題:

  • 発見可能性の低下

    アプリの利用可能なアクションは、ハンバーガーメニューの後ろに隠されています。それらは明示的ではなく、ユーザーは特定のアクティビティが利用可能であることを発見するためのアクションを実行する必要があります。

  • 相互作用コストが高い

    特定のアクションが利用可能であることを知っている場合でも、最初にハンバーガーメニューをタップしてから、アクションをタップする必要があります。下部のナビゲーションでは、1回のタップでアクションを選択できます。

  • 異なるアクティビティに関する通知を一度に表示することはできません

    通知の特異性は低いです。説明については以下の画像を参照してください: bottom navigation menu picturevs
    hamburger menu picture

なぜ下ナビゲーションメニューなのですか?

  • ユーザーはコア機能にさらに集中するアプリを明示的に利用できるため、

  • ユーザーエンゲージメントを促進する、ここで概説した調査によると

  • より人間工学的携帯電話の上部より下部に到達する方が簡単です(@Tarekの図をご覧ください)。

ユースケース:

  • Redboothの使用例

    • 顧客がアプリをより頻繁に使用した:セッション数が2倍以上!
    • アプリでより多くの時間を費やした:セッション時間は70%増加した
    • 最終的には、より多くの顧客のリピートが見られ、毎日のアクティブユーザーがほぼ一晩で65%増加しました。
  • Spotifyで削除されたハンバーガーナビゲーション

    同社はiOSでタブバーをテストして、ユーザーエンゲージメントにどのように影響したかを確認しました。タブバーを使用しているユーザーは、一般的に9%以上、実際のメニュー項目で30%以上クリックすることになりました。テストではまた、タブバーのオプションの数を5に減らすと、Spotifyのプログラムされたコンテンツのリーチが拡大したことも明らかになりました。

    より広範囲に展開する前に、Spotifyは新規ユーザーと既存ユーザーの両方でタブバーをテストし、悪影響がないことを確認しました。新しいバーにより、ユーザーは保持、エンゲージメント、または消費時間のメトリックに影響を与えることなく、より多くのタイプのコンテンツ(Spotifyプログラム、セルフプログラムなど)を探索することができます。

結論

GoogleとFacebookがハンバーガーメニュー(大量のデータに基づいて決定)を削除した場合、アプリの下部ナビゲーションをテストすることは理にかなっています。また、GoogleやFacebookだけでなく、ここで引用した他の調査でも、ナビゲーションに代わる素晴らしい結果が得られました。

27

ハンバーガーのアイコンが最初にユビキタスになり始めたとき、それらは左側に配置されました。

しかし、あなた自身のように、アプリが繰り返し始めたとき、アイコンはクリックしやすいため右側にシフトしました(大多数の人が右利きで、右上隅が左のものよりもわずかにアクセスしやすい場合)。

enter image description here(ソース)

ハンバーガーアイコンを使用している場合は、右側に置いておきます。

16
Tarek

Google Material Guidelines のUI構造について読んだ後の私の結論は、左側にです

enter image description here

アプリバーの右側にあるアイコンは、アプリ関連のアクションです。メニューアイコンはオーバーフローメニューを開きます。オーバーフローメニューには、ヘルプ、設定、フィードバックなどの二次的なアクションとメニュー項目が含まれています。

プライマリアクションは右側に、セカンダリは左側に表示されます(おそらく 右利き が原因です)。

したがって、ハンバーガーメニューがメインアクションである場合、またはハンバーガーメニューが単独である場合にのみ、右側に表示します


右から左への言語用のアプリ を開発している場合は、順序を逆にします。

5
Alvaro

IPhoneのアプリは、左側または右側にハンバーガーを持っているようです。ユーザーはどちらにも慣れていると思います。そのため、どちらを選択するかは、画面上部にある他のアイテムによって異なります。

MSNニュースアプリの上部には検索バーがあり、右側にはハンバーガーがあります。
Amazonアプリには、左側にハンバーガーのある検索バーがあります。

どちらか一方の画面上部にある限り、それが最も重要です。

1
user93670

IPhoneでは、「戻る」ナビゲーションは通常、左上隅から行われます。

左端へのスワイプもサポートすることを強くお勧めします(大きな画面で片手で右利きのユーザーが左上隅に到達するのは非常に難しいため)。ただし、「戻る」は維持する必要があります。その位置でのナビゲーション(視覚的な手掛かりとして、左端からのスワイプについて知らない人のために戻る方法として、および小さな画面を使用する人のためにナビゲートする方法として、左利きです、または両手で電話を使用します)。

これで、「戻る」ナビゲーションとメニューが競合するようになりました。つまり、右側に配置する方が理にかなっています。左側に置くと、次のことができます。

  • メニュー(各カテゴリの「トップ」ページにいる場合)と[戻る]ボタン(セカンダリページにある場合)を切り替えるが、これは一貫性がなく、「内部」にいる場合のナビゲーションが複雑になるページ(最初に「戻る」、次にメニューを実行する必要があります)。
  • 両方のボタンを隣り合わせに配置しますが、実際には「戻る」ナビゲーション(ページ内)が存在する場合に限られます。つまり、(ボタンの順序によっては)レイアウトに一貫性がない可能性があり、2つのボタンを非常に近くに追加します小さい画面の携帯電話でも到達が非常に難しい場合は、.

さて、これは以下の場合は異なる場合があります。

  • 戻るナビゲーションはありません(これはそれほど頻繁ではありませんが)、
  • あるいは、片手での使用が一般的である動き回るのではなく、ユーザーが両手を使用できる「安定した」状況でユーザーのみ/ほとんどの場合アプリを使用することを知っている。

もちろん、特定のケースに最適なオプションは、A/Bテストを実行することです。

0
jcaron