web-dev-qa-db-ja.com

ダッシュボード/ポータルページメニューパターンの代替?

現在、アプリケーションの開始ページは、アプリケーションのさまざまな領域にリンクするカテゴリに漠然とグループ化された一連のボタンです。これらのリンクには、より深いアプリケーションページ(設定メニュー、データテーブルなど)を表示するものと、ネストされたダッシュボードページを表示するものがあります。

私はこのデザインをできるだけ避けたいです。

  • 実際の機能を備えたより深いページへの移動が遅くなる
  • ページ自体は非常にまばらで、リンクにすぎないため、実際のリンク先よりもプレースホルダーのように感じられます。
  • 一般的に醜いデザインパターンです

したがって、アイコンのグリッドのリストの代わりに、ここで試す代替デザインをいくつか探しています。私が浮かんだ1つのアイデアは、これらのページを要約ページに変え、ボタンリンクの代わりに、リンク先のページに関する要約情報を持たせることです。私が検討したもう1つの代替策は、Windowsスタイルのドロップダウンメニューを使用することですが、これは応答性の高いWebアプリケーションであるため、ナビゲーション階層の規模を考えると、このようなナビゲーションをうまく実装することは困難です。

編集:以下は、基本的に現在のシステムがどのように見えるかを示す簡単なモックアップです。プレースホルダー画像は、セクションのコンテンツに半関連するアイコンにすることを目的としています。これらのアイコンまたはリンクテキストを押すと、ページが表示されます。

Mockup

アイデア?

8
moberemk

理想的には、何も入力せずに、必要なものを正確に提供してくれるでしょう。もちろん、これはさまざまなタイプのユーザーがすべて異なるものを望んでいる場合には不可能です。現実は 一部のビジネスでは、アクセスする必要のあるコンテンツがたくさんあるだけです さまざまな人がさまざまなタイミングでアクセスするため、ポータルページを再設計するときに注意すべき点がいくつかあります...

1.少ないほど良い

選択のパラドックス は面白いものです。誰かに非常に多くのオプションを与えて、もはやオプションがないようにすることが可能です。これが、私がこのような再設計中に最初に試みて行うことは、すべてのリンクを正当化する理由です。それが存在することの目的を絶対的に持っていること、そしてその目的が間違いなく誰かの生活を容易にすることを確認してください。

2.同等の選択肢を表示する代わりに、おすすめを試します

ユーザーは推奨事項を好むことがよくあります。これは、思考が少なくて済むため、他より優れているものが目立つようにするためです。

recommendations

ソース: goodui.org

3.アイテムを一口サイズにグループ化する

ナビゲーションリンクをカテゴリにまとめて、消化しやすくしているようですが、これは良いことです。最も重要なグループを上に表示してください。

khan

khan mobile

ソース: Khan Academy

4.プログレッシブ開示

アイテムへのアクセスがそれほど多くない場合は、アイテムの表示を求めるまで非表示にすることで、ユーザーの認知的負荷を軽減できます。あるグループまたはアイテムを別のグループより上にランク付けできない場合がありますが、これを推測せずに実行できる場合は、最も重要なグループと各グループの最も重要なアイテムのみを表示することを検討してください。

disclosure

5.早期にテストし、頻繁にテストする

ユーザーのコアセットからできるだけ早くフィードバックを得て、再設計の取り組みが本当にユーザーの生活を容易にすることを確認してください。単一のインタラクションに執着しすぎないで、プロセスを反復できるようにしてください。最良のパターンは存続します。

ナビゲーションの見直しで、これらのヒントのいくつかが役に立ち、幸運であることを願っています。

5
DaveAlger

あなたが言及した2つの選択肢:

  • 概要ページ
  • Windowsスタイルのドロップダウン

私が思いついた代替案は、ほとんどこれら2つの組み合わせです。アイコンベースのダッシュボードの代わりに、ウィンドウ付きのダッシュボードを用意しました。

Windowed Dashboard Landscape

各ウィンドウには、さまざまなサイトがリンクまたはボタンとしてリストされ、階層リンクはネストされたアイテムとして表示されます。

Windowed Dashboard Portrait

上記のスクリーンショットは、応答機能も示しています。特定の解像度に基づいて、個々のウィンドウのサイズを変更するだけです。横向きのブラウザで2つのウィンドウを並べて表示する場合、小さいモバイルブラウザでは上から下に表示することができます。

各ウィンドウを折りたたんで、ユーザーが表示内容をカスタマイズできるようにすることもできます。

Drop Down Mockup

私が使用したダッシュボードに基づくいくつかのアイデアはうまくいきます。

2
Alan

私も最近この挑戦に直面しました。アプリの特定の機能領域につながる漠然とした関連性のある多くのアイコンを備えた「クールな」ポータルページが欲しいという要望があります。

問題は、全体が強制されていると感じることです。また、アプリスイート(またはビューとアクティビティのセット)が非常に深くなると、ポータルは浅すぎたり、乱雑になったりする傾向があります。

多分あなたはまったくポータルを必要としませんか?

アプリの実際のビュー内でより良い情報アーキテクチャとナビゲーションソリューションが本当に必要な場合はどうでしょうか。おそらく、いくつかの主要な地域があります。

  1. 主要な機能領域。これらは、アクティビティのタイプの一般化されたバケットです。
  2. これらの機能領域内のビュー。これは、アクティビティが開始される場所です。
  3. 詳細/ドリルダウンページ。これらは、アクティビティのサポート要素です。

(次のGoogleネスについての謝罪を受け入れてください。これは最初に頭に浮かんだことであり、まだ自分の仕事を共有することはできません)

主な分野

これらは、互いに相互作用する個別のアプリ(またはサブアプリ)のようなものです。アクティビティのステップに応じて、またはアプリメニューから明示的に、Googleアプリを切り替えるように、それらを切り替えることができます。アプリメニューは、ポータルに対するよりモダンな答えのように私に感じます。それはページ全体ではなく、アプリ全体であなたと一緒にいることができます。

Google's persistent app menu

セカンダリビュー

これらは、現在のアプリ内の特定のアクティビティ(またはタスク、ジョブなど)、ビューに飛び込む場所です。タブはこれに適しているようで、デスクトップとモバイルで機能します。

Android application tabs

詳細ページ

これは、ユーザーが学習し、物事を成し遂げるために掘り下げ始めるところです。モバイルのコンテキストでは、ページのタイトルが変わる可能性があり、バックアップすると別の方向に移動します。これらは、サブ/サイドナビゲーションメニューにも適しています。

Android 3rd level page

ユーザー設定

2番目のレベルから下の任意の時点で、ユーザーはビューにすばやくアクセスしたい場合があります。ユーザーは、独自のパラメータセットを適用したビューも必要になる場合があります(フィルターのように)。これは、アプリメニューのような、ユーザーの「お気に入り」のための一種のカスタムポータルを提供できる場所です。 FABメニューが思い浮かびますが、スターまたはブックマークのアイコンが付いたメニューを想像してください。

Android floating action button

YMMV

それは私が何らかの方法で向かっているところです。 job stories を試してみると、最高の体験のようです。私は数か月間、一方を他方に対してテストしませんが、最初のゲリラフィードバックはそれが正しいトラックであることを私に教えてくれます。

1
plainclothes

表示するコンテンツがわからない場合は、 Google Materialのカード を試して、見出しをcard、必要に応じて補足アクション、およびその特定のカードのコンテンツのリスト。

カードは異種のコンテンツを許容するため、これは特定のニーズに非常に適している可能性があります。言うまでもなく、これらはデスクトップバージョンを「ドレスアップ」するための非常に優れた要素です。下の画像を参照してください。

enter image description here

ご覧のとおり、カードの中ではさまざまなコンテンツを使用できます。また、技術仕様では1つのリンクのみを使用する必要があると記載されていますが、cardロジックから出て、必要な数のリンク、またはリンクを追加することもできますカード内のリストのような説明テキストとアイコン。あなたはそれをすることになっているわけではありませんが、そうしたとしても何も悪いことは起こりません!

そして、私たちは Material Designリスト の領域にいる間、それらの機能を見て、より多くのアイデアを得ることができます。たとえば、以下の画像を見てください。

enter image description hereenter image description here

ここでは、リストのニース表示と拡張された情報動作を確認できます。モバイルでは見栄えがいいですが、デスクトップでは馬鹿げているように見えるので、リストをカードまたはグリッドリストまたは利用可能なスペースを利用するための何でも。

とにかく、それはあなたのコンテンツとユーザーに提供したい視覚的な参照に依存します。画像やアイコンについて言及しているので、少し難しいですが、これらのアイデアがお役に立てば幸いです

0
Devin