web-dev-qa-db-ja.com

サイドメニューと固定ボトムメニューのどちらが優れていますか?

現在、Androidアプリに4つのメインメニューがあり、追加のサブメニュー(ホーム、マイローン、履歴、設定などの単純なメニュー)がないアプリを設計しています。このアプリは金融商品です。ユーザーがローンを獲得するGmailのようなサイドメニューがあると、Instagramのように各メニューにアイコンとラベルが必要な固定のボトムメニューを持つよりもレイアウトが楽しいと思いました。

メニューの配置について何かアドバイスはありますか?

mockup

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

14
Rob H. Yamin

下部のナビゲーションはAppleデバイスでは正常に機能しますが、Androidシステムボタンのため推奨されません。

親愛なるグーグル、それは素晴らしいです、しかし私は下部のナビゲーションがシステムボタンのためにAndroidデバイスでうまく機能しないと主張します。15のInstagramについて尋ねるときAndroidデバイスを使用しているユーザーは、下部のメニューでの操作中に誤ってシステムボタンをクリックすることが多いと宣言しました。

https://medium.com/house-of-apps/bottom-navigation-issue-on-ios-Android-and-ux-8851ffe726

これは、ユーザーが誤ってアプリケーションを終了した場合のユーザーエクスペリエンスの面での失敗です。製品チームとして、ユーザーがアプリケーションを離れるようにしますか?

enter image description here


Facebookは下部ナビゲーションバーをAndroidでしばらく使用しましたが、テストで正の結果が得られなかったため、タブ構造に。

enter image description here


サイドメニューを使用するか、またはFloating Bottom Hamburger Menuを使用して少しユーザーテストを行い、人々が親指でメニューにアクセスできるようにすることをお勧めします。 Googleのプラスアイコンに似ています-

enter image description here

15
DPS

私のインナーデザイナーはハンバーガーメニューをサポートしています。ハンバーガーメニューはすごくきれいにデザインできるためです。すべてのドリブルショットを見てください(UX関連の問題については、実際にはドリブルを見ていない)。しかし、残念ながら、それはユーザーにとってはそれほどうまくいきません!

見つけられない

多くのユーザーがハンバーガーを認識しないだけでなく、タスクの完了プロセスも遅くなります。

ここにあなたの質問に関連するいくつかの記事があります: https://www.nngroup.com/articles/mobile-navigation-patterns/
https://www.nngroup.com/articles/hamburger-menus/
しかし、この主張を支持する文字通り何千もの記事があります。

届きにくい

ハンバーガーメニューは通常、左上にありますが、世界の人口の10%だけが左利きです(Wikiによると)。また、画面が大きくなると、画面のその部分に到達するのが非常に難しくなります。これも、タスクの完了時間を遅くします。

enter image description here

3
Armands

ハンバーガーメニューから離れるのにはいくつかの要因があります。

これに関する多くの記事の1つを次に示します。 https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/

客観的に見ると、非表示のメニューよりも下部のメニューの方がナビゲートしやすいでしょう。

1番目の例はFacebook iOSアプリです(私はAndroidを持っていません)。ユーザーが必要とするすべてのメインセクション(フィード、リクエスト、メッセージ、通知)はすでに表示されています。セクション間を簡単に移動できます。最後の項目はメニューであり、ユーザーがアクセスする可能性が低い項目が含まれています。

それでも、どのメニューが最適であるかは、コンテキストに依存します。

2
olegdeleon

4つのメインメニューがあることを考えると、それらのメニューをユーザーに表示する方が良いでしょう。 olegdeleonが言ったように、下部のメニューはナビゲートしやすいので、より効率的で効果的です。

この記事はあなたに役立つかもしれません。

ボトムナビゲーションデザインの黄金律

1
Livin

選択しないでください:両方の長所を使用してください

トップ/ボトムナビゲーションvsサイドナビゲーション

Side-navigationは、アイテムを配置するためのより多くのスペースを提供しますが、一方でtop/bottom-navigationは非常に限られており、 -ほとんどの4または5アイテムが収まります(画面が小さいことに注意してください)。

私たちのアプリにはかなりのトップレベルのナビゲーション項目(7+)がいくつかあり、サイドナビゲーションを使用してそれらを表示しall、トップを使用します/ bottom-navigationを使用して、最も目立つ/ usedアイテムを表示します。これにより、ユーザーは最も使用頻度の高いトップレベルの画面にシングルクリックでアクセスできます。 2つのクリックを使用して重要な画面。

材料設計ガイドラインから 両方を表示:

Example of bottom navigation with side navigation

IOSではこのパターンは非常に一般的ですが、すべてのアイテムにサイドナビゲーションを使用する代わりに、上部/下部ナビゲーションに「詳細」オプションがあります。しかしAndroidの場合、上/下のナビゲーションで貴重なスペースを取るより多くのオプションではなく、サイドナビゲーションを使用します。

上と下

他の回答で示唆されているように、Androidの下部ナビゲーションは、手で到達しやすい領域であっても、使いやすさの問題を引き起こす可能性があります。

1
Rolf ツ