web-dev-qa-db-ja.com

モバイルアプリのサブページでタブバーにアクセスできるようにする必要がありますか?

UX /グラフィックデザイナーとしてiOSとAndroid向けのアプリを開発するチームに参加しました。アプリは既に本稼働中であり、新しい機能の実装と現在のデザインの調整に取り組んでいます。

私たちのアプリはタブベースであり、アプリのメインページ用に5つのタブがあります。また、ユーザーがナビゲートできる各タブにはいくつかのサブページがあります。

私が気づいたことの1つは、ユーザーがより深くナビゲートするとタブバーが表示されない/アクセスできないことです。代わりに、タブバーを使用する前に、ナビゲーションバーの戻るボタンを使用して親ページに戻る必要があります。

Facebook、メッセンジャー、Instagram、App Store、Spotify、SoundCloudなどの他のアプリでの私の経験から、タブバーには常にすべてのサブページからアクセスできます。これは、私がチームにやるよう説得しようとするものだと思います。

しかし、それでも、タブバーを常にアクセスできるようにすることの賛否両論は何ですかここの誰かがこの問題について何か経験がありますか?

2
NBK

マテリアルデザインガイドラインは問題を正しく指摘しています。

下部のナビゲーションバーを使用すると、あるトピックの深いところから別のトピックの上部にすばやく移動できます。ユーザーが階層を下に移動するときに、永続的に表示するか、スクロールして非表示にして、使用できるようにします。

下部のナビゲーションバーは次の目的には使用しないでください。
-メールの「作成」画面など、単一のタスクに焦点を合わせたビュー。
-ユーザー設定または設定を含むビュー

Androidでは、[戻る]ボタンは下部のナビゲーションバービュー間を移動しません。

したがって、アプリケーションでタブバーを非表示にするは、ユーザーが1つのサブページにジャンプするときは常に常に良い方法とは限りませんです。タブのメインページの上にサブページをスタックする必要があります。メインページに戻るには、サブページに[<-]戻るボタンがあります。流れは完全にInstagramで行われます。

例外はフォームです。サブページがフォームであり、ユーザーの完全な注意が必要な場合は、タブバーを非表示にする必要があります。

3
Kishan

ユーザビリティヒューリスティックの1つのルールはユーザーコントロールまたは自由です:すべてのセクションとサブセクションはナビゲート可能である必要があり、ユーザーはコントロールできる必要があります。

これは構造的な問題である可能性もあります。アプリの構造には多くの(3つ以上の)セクションがあり、ユーザーをさらに深く押し込む可能性があります。その場合、簡単な修正は「Home aka Emergency Exit」を提供することです。 (ページがフォームの場合は「キャンセル」)上部ナビゲーションの右側にあるアイコン。

これがアプリの構造を処理する方法です。

レイヤー1(親ページ)-アプリのすべてのメインセクションにタブバーでアクセスできる必要があります(理想的には、横方向にスクロールできる場合は4〜5のタブに保ち、最大数は7以下にする必要があります。 7よりも異なる構造を考える必要があるかもしれません)。

レイヤー2(子ページ)-サブセクション(最初の子)ヘッダーに戻るボタンは必要ありません。アプリでは、これらは通常「リスト」です。

レイヤー3(グランドチャイルドページ)-これらのページでは、チャイルドページに戻るには[戻る]ボタンが必要です。また、フォームの入力、子ページの特定のインスタンスの詳細、アクションボタンの組み合わせなどのアクティビティを含めることもできます。こことこのタブバーを超えて、ここではフォーカスと明確さを提供することをお勧めしません。

0
Arshdeep Singh

UIで常に同じナビゲーションパターンを維持する必要があるため、すべてのページでタブを維持します。主要な機能に簡単にアクセスできるフレームと考えてください(FacebookやInstagramなどの主流のアプリが良い例です)。フレーム内に情報を表示します。 (古いスマートフォンなどで)スペースに関連する問題が発生したい場合は、ユーザーがデータを操作(スクロールまたは読み取り)するときに非表示のタブを使用する必要があります。このソリューションは、いくつかの重要な機能があり、それらを常に表示して簡単にアクセスできるようにする場合に適しています。とにかく、これらが「主要な」機能でない場合は、ハンバーガーアイコンの後ろにある共通のラテラルメニューを使用したいと思います。このソリューションはプロセスにタップを追加しますが(1.burgerアイコン、2.functionアイコン)、UIをクリーンに保ちます。それはあなたの呼び出しです!

0
Marco Tatta