web-dev-qa-db-ja.com

レスポンシブウェブアプリ、セカンダリナビゲーションまたはプライマリアクション用の下部タブ?

私はすべてのデバイスで完全に機能する必要があるWebアプリを構築しているので、モバイルファーストのレスポンシブWebアプリとしてゼロから構築しました。

メインナビゲーションが多すぎるため、メインナビゲーションにハンバーガーと左ナビゲーションを既に使用しています。主要なページの1つである[トランザクション]には、上部のタブを使用する次のサブページがあります。

Left nav with top tabs

ステータス「見込み客」、日付「8月1日」、およびアイコンは、ユーザーが行う一般的なアクションの右上にあるボタンです。ステータスと日付は、フォームフィールドを表示するボタンで、これらの値を簡単に変更できます。

ただし、サイトをモバイルに縮小すると、これらのすべてのアイテムのために上部に十分なスペースがないのは明らかなので、タブを残して、アクションをオーバーフローメニューに移動します。

enter image description here

ただし、ユーザーはメニューをクリックしてステータスと日付の値を表示する必要があります。これは、常に表示したい便利な情報です。

状態や日付の変更などの主要なアクションを含む「下部ナビゲーション」セクションを追加することを考えています。

こうすると、タブは現在の位置に留まり、デスクトップでは2つのクイックボタン(ステータス/日付)が表示されますが、モバイルでは、下部に移動して2つのタブ(それらは単なるボタンですが)。

すべての関連情報を表示するための別のインターフェースは考えられません。メインのスクロール領域に配置すると、スクロールを開始するとユーザーはデータを失います。このツールバーは、4つのタブすべてでほとんど同じです(メインセクションのみが異なります)。

誰かが情報を提示する方法についての提案を持っていますか、または私が思っているような「アクション」の下部セクションを使用するのが良い/悪い考えですか?私は緩やかにUIをマテリアルデザインに基づいていますが、仕様を厳密に遵守するのではなく、ユーザーにとってより優れたエクスペリエンスを提供します。

更新:2017-08-16 11:45

もう1つの可能性は、デスクトップには常に表示されますが、モバイルではタブツールバーが下にスクロールすると非表示になり、上にスクロールすると表示される2番目のツールバーを使用することです(従来のモバイル)。

これにより、すべての主要なアクションにすぐにアクセスできるようになり、デスクトップおよびモバイルユーザーに多くの機能を提供するだけでなく、スクロールのタブを非表示にすることでモバイルの一部の不動産を節約できます。

enter image description here

7
Dan L

ダン、UX、UI、レスポンシブウェブアプリの開発は順調です。デスクトップビュー階層は適切に機能し、直感的です。これをモバイルファーストレスポンシブウェブアプリとして構築したと主張する最初の文を読むことは有望でした。しかし、最初にモバイルプラットフォームを完全に解決しなかったようです。 (肋骨をつつく)

ナビゲーションのレイヤーが非常に多いため、ケースでは下部ナビゲーションを使用する必要があります。ただし、下部ナビゲーションは実際にはトップレベルのナビゲーションであり、第3レベルの埋め込みコンテンツではありません。分かった分かった;それはページの下部であり、視覚的なトップダウン階層があります。しかし、iPhoneがデビューして以来、携帯電話はトップレベルナビゲーションでボトムナビゲーションバーを使用しています。 Googleマテリアルデザインでさえ、このナビゲーションルールに負けています。

最近の素晴らしい読み物は次のとおりです。

https://material.io/guidelines/components/bottom-navigation.html

https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/

したがって、ユーザーが下の行がサブナビゲーションではなく階層の上位レベルであると考えるように条件付けられている場合に備えて、2つのボタンを下の行に配置することについて心配します。

実際、これら2つのボタンには非表示の値がありますが、今設計したものは悪くありません。ユーザーにとって何が重要かをランク付けする調査はありますか?そして、どの順序で?多分あなたはそれほど多くを推測する必要はなく、簡単なユーザーテスト調査にあなたの質問に答えさせましょう。

ただし、下部ナビゲーション(IMO)を追加する場合は、下部ナビゲーションを最上位レベルのみにすると、多くのレベルのナビゲーションを取得できます。そして、ページ、タブ付きコンテンツ、ハンバーガーメニューの組み合わせを使用して、ネストされたコンテンツの引き出しを引き出します。

どう思いますか?あなたの利害関係者はそれのために行きますか?

1
jhurley