web-dev-qa-db-ja.com

ハンバーガーメニューアイコン-左側または右側のどちらにしますか?

ハンバーガーメニュー(3つの小さな水平バー:新しいメニューアイコン)。右か左か。

私はモバイルとタブレットのアプリケーションだけを考えています。

enter image description here

私が最もよく目にするパターンは左側にあります。Youtubeアプリ、Evernoteアプリなどです。ただし、右手で電話をつかむとメニューにアクセスしやすくなるため、右の方がユーザーフレンドリーであるとの見方をしました。

enter image description here

皆さんはどう思いますか?フローに沿って左側にメニューを実装する必要がありますか?

38
John Assymptoth

FacebookとPathが初めてこのメニューを実装したため、このメニューは「有名」になりました。個人的に私はこのメニューにあまり惹かれていませんが、もし私がサイドを選ぶ必要があるなら、私は正しいサイドを選びます。

それは約だからです。ユーザーの67%が右親指(つまり、右手)を使用しており、いくつかの調査で、この手の姿勢が左上にあると画面領域に到達するのがより困難であることが証明されています。 LukeWの本Web Form Designのこの画像で適切に確認できるもの
enter image description here

モバイルWebサイトのアプリケーションのナビゲーションは、簡単に到達およびアクセスできる必要があります。このようにして、エクスペリエンスはより快適になります(少なくとも右利きのユーザーの67%にとって)。

ここでは、ユーザーがモバイルデバイスを保持する方法についての非常に興味深い記事を見つけることができます。 ユーザーは実際にモバイルデバイスを保持する方法

54
Rafa Q.

まず、すでに行われていることを行う必要があります。

ユーザーは一貫性を愛する

ほとんどのアプリが左上で実行している場合は、それを使用します。異なる会社であるにもかかわらず、多くの電話がタッチスクリーンに同じメカニズムを適用する方法と非常によく似ています(アプリを開くには、2回ではなく1回タップするか、スワイプすらします)。

さらに、研究が指摘しているように(@Izahakiに感謝)、左側を伸ばしてから圧縮する方がはるかに簡単であるため、左側の方が優れています(私が見つけたものとのバランスが取れていません)。

また、これを十分に表現することはできません:ユーザーテスト

ターゲットユーザー(利害関係者)がより慣れている、または慣れているものを確認します。彼らが技術に精通しているなら、私は一貫して行きます。

ただし、学習行動と呼ばれるものもあります。繰り返し使用した後にユーザーが始めること。ですから、本当に、あなたが標準を設定したとしても、それを壊さないでください、そして習得された行動の可能性があるかもしれません。ただし、最初に行うことから始めて、必要に応じて独自のルールを確立することを強くお勧めします。

14
Majo0od

私たちはこれについて最近多くの検討とテストを行っており、ハンバーガー/カーテンメニューを左側と右側の両方で試しました。覚えておかなければならない重要な要素の1つは、他のナビゲーション要素(特にホームアイコンまたは戻るアイコン)の位置です。

Appleは、ハンバーガーを[戻る]ボタンのすぐ横/上に置くと眉をひそめ、このためにアプリの1つを拒否しました。興味深いことに、他の人はそれを経験しているので、Appleはこれについていくらか矛盾しているようです。おそらく、それはタップゾーンのサイズ、機能間の視覚的な違いなどの他の要因に依存します。

しかし、一般的には、ハンバーガーアイコンを右側に配置することを主張します。左上は、戻る/ホームボタンの自然な位置のようです。私たちが行った以前の調査では、ユーザーはナビ階層に安心感/接地の感覚を与えるので、戻る/ホームボタンを持っているようなユーザーを示しました-彼らは常に「安全な」領域に戻ることができることを知っています。

おそらく、最初にカーテンナビゲーションが必要かどうかを確認する必要があります。これらは、アプリ内のどこからでもアクセスできるグローバルナビゲーションとして効果的に機能するという点で便利です。あなたのアプリはこれを必要としますか?ホームページにアプリのアイコン/機能の表を含むナビゲーションページを用意する方が簡単ですか?これは、可能なアプリ/機能の良いメンタルモデルを顧客に提供するのに役立ちます。それはあなたのアプリ、持っている機能の数とあなたのユーザーがそれをどのように使うかに依存します。

何をする場合でも、開発に送る前に、実際のユーザーでソリューションのプロトタイプをテストしてください。

8
Robert Whelan

最もよく使用されるコントロールは、最も簡単に到達できる画面領域にある必要があります。
メニューがあまり使用されない場合、それは事実だと私は思いますが、右手の親指の届く範囲内にあるとは見なされません。
アクティブな対話を要求するビジー設定画面など、めったに使用されないメニューは、両手で操作される可能性が高くなります。
また、左上隅にメニューがあることには、2つの利点があります。それは、常に表示されることと、誤って触れられる可能性が低いことです。

4
Juan Lanus

これが答えられてから、多くのことが変わりました。下部メニューの方がユーザーフレンドリーであることがわかりました。そのため、このコンセプトに向かってより大きなブランドが見られます。

これらのメニューの動作は、このバーに4つのメニューアクションを配置し、5番目の「メニュー」ボタンを使用して、デスクトップバージョンにある他の重要度の低いメニュー項目を非表示にします。

考えてみれば明らかですが、指が画面の下部に近づいているので、そこに配置しないのはなぜでしょうか。いくつかの例を集めました。

Spotifyメニュー

enter image description here

Facebookメニュー

enter image description here

その他の各種メニュー

enter image description here

2
MJB

西洋人は左から右、上から下に読むことに慣れているので、退屈な静的ボタンの代わりに左上に興味深い情報(現在のアプリのロゴやタイトルなど)を置くと、時間を節約できます。また、 右利きの人は右側のインタラクティブなものが好きです

2
Cees Timmerman

私の意見では、これはボタンの反応に依存します。非表示の垂直メニューを表示する場合は、垂直メニューが表示されている側に配置する必要があります(Facebookのアプリのように)。メニューが上から、下から、またはまったく異なるビューに移動する場合、それは実際には問題になりません。

疑問がある場合は、最も簡単で画面に最もよく収まるものを選びます。

0
T0t3sMcG0t3s

それはボタンが引き起こすアクションに依存すると思います。画面の左側に表示されるメニューをアクティブにする場合は、ボタンを左側に配置して、ボタンとメニューの関連付けを近接度で強化する必要があります。

画面の上部に表示されるメニューをアクティブにすると、ボタンが右側に表示されます。これは、ドロップダウンリストボックスの構成方法であり、このスタイルのメニューは、概念的にはドロップダウンリストから派生しているためです。

0
obelia