web-dev-qa-db-ja.com

設定ページの最適なレイアウト

かなりの数のオプションがある設定ページがあります。スクリーンショットを見る

Original Settings

各リンクを使用すると、ユーザーは詳細を変更できるフォーム(ビジネス設定など)または検索/リストを検索して編集できるフォーム(製品など)に直接移動できます。

それは非常に効果的でユーザーフレンドリーなレイアウトですか?

各セクションを左側の垂直ナビゲーションのオプションとして表示するように変更することを検討しています。オプションをクリックすると、各リンクがタブセットのタブになります。

21
Craig

あなたの質問に対する2つの代替ソリューションが見つかりました。

1)現在のデザインを保持します。

goodなので、一度にすべての設定を公開です。リンクグループが非常に多いため、サービス管理と製品管理の例の違いをユーザーが見つけるのに時間がかかる可能性があります。 Amazonは現在このアプローチを使用しており、使いやすさにかなりこだわっているので、私はこのソリューションを優れたソリューションと考えます。

Amazon uses a menu page pattern

このソリューションを選択した場合、私はビジュアルデザインにさらに取り組みます。少しもっと構造化されたにし、コンパクトにします。さまざまなインデントと黒いアイコンの使用は面倒に感じます。おそらく、Yahooディレクトリにインスパイアされたレイアウトは、より使いやすくなるでしょうか?

2)サブページに分割します

おそらく、いくつかのグループをより広いグループにマージします。これが最も一般的なアプローチ Facebook、Twitterなどの大きなサイトや、WindowsやMacOなどのオペレーティングシステムで採用されています。通常、設定セクションは次のように分かれています。

  • プロフィール(他のメンバーに表示されるもの)、
  • デザイン(背景色などのページの外観、アカウントの詳細(電子メール、住所、電話番号、国など、システムで使用されるもの)
  • サイト固有の設定(これは、たとえばサービス管理である可能性があります)
  • パスワードの変更
  • アカウントを削除

Twitter uses a sub page approach

16
Tony Bolero

スクリーンショットのデザインは理想に近いと思います。これの評価の多くは、メガメニューパターンの長所/短所に関連しています。詳しく説明します。

メガデザイン

いいもの:

  • すべてのオプションがユーザーに表示されます。これは促進します:

    • Findibility-ユーザーが関連オプションを見つけやすくなります。
    • 学習性-ユーザーは利用可能なオプションをより早く学習できます。
    • Serendipity-ユーザーは興味のあるオプションを偶然見つけます。
  • 多数のオプションがありますが、それらはnicely clusteredであり、デザインは魅力的です。

悪い人:

  • オプションの数が増えると視覚的および認知的負荷が増加します。

考慮すべき事項:

  • 小見出しは必要ですか?内容が意味する説明はありませんか?あなたは本当に人々に設定ページで何ができるかを伝える必要がありますか?キャプションは理想的には自明なので、小見出しを削除できます。これにより、視覚的な負荷が軽減されます。それらを残す場合は、コントラストを下げます(薄い灰色を使用します)。
  • アイコンの使用法。アイコンは視覚的な負荷を増やします。ほとんどのユーザーは、アイコンを理解しようとするのではなく、見出しを読みます。経験豊富なユーザーのみが、アイコンを使用して関連アイテムを見つけることができます。使いやすさにはほとんど貢献しませんが、美的感覚を向上させる可能性があります。ここでもコントラストを下げることを検討してください。
  • nderlines下線は70年代です。これらを削除して視覚ノイズを減らすことを検討してください。最近の多くのシステムでは、クリック可能なアイテムを示すために色を使用しています。

ナビゲーションの提案

Navの提案の利点は視覚的な負荷を減らすですが、同時に可視性を減らすにもなります。サブアイテムがすぐに表示されない場合、ユーザーはときどき(間違って)サブアイテムの場所を推測します。学習可能性とセレンディピティも低下します。

Nav提案のもう1つの落とし穴は、それが増加することですinteraction load-デスクトップユーザーでは、必要なオプションから2クリック離れています。メガデザインで-たった1。

ページネーションについて簡単な調査を行いたいと思うかもしれません-ユーザーが大規模なデータセット(以前は使用可能と見なされていました)を処理できること、およびページネーションがユーザビリティを低下させることが示されています。主に検索結果に適用されますが、上記をサポートするために使用できると思います。

7
Izhaki

ここには本当に良い答えがいくつかあります。上記の理由から、私は「メガデザイン」を好む傾向があります。 Pinterestには、「メガ」デザインと「サブページ」デザインの非常に優れたハイブリッドがあります。スクロールすると、サブページ間を移動します。これには、視覚的な負荷をサブページに限定するという利点がありますが、ユーザーが使用可能なすべてのオプションを簡単に見つけるのにも役立ちます。 enter image description here

5
Andrew

デザインが私に朝のコーヒーをもたらすという点では、「友好的」ではありません。しかし、それは「すべてのオプションをくれ」ページなので便利です。これにより、ユーザーが最もよく使用することがわかっているオプションのみをユーザーに提供するという一般的な慣習に違反する可能性があります。しかし、これは設定ページであり、一度習得すればより速く使用できるため、UIが雑然となる可能性があります。

はい、学習曲線は急勾配ですが、理解しやすい情報のチャンクにうまくグループ化されたオールインワンページがあります。

3
Benny Skogberg

そのままでは必ずしも効果的なレイアウトではありません。それがユーザーに有効かどうかを理解するために、一連のユーザーテストを実行できます。たとえば、カテゴリ名がどうあるべきかを確認したい場合は カードソート 、既存の構造を確認したい場合は逆カードソートです。

左側の垂直ナビゲーションに分割すると、ユーザーが画面ごとにダイジェストするオプションの数を減らすことができますが、最初に正しいカテゴリを見つける必要があります。ユーザーは、適切なカテゴリを見つける前に2〜3種類のカテゴリにアクセスできます。イライラするだけです。 (私はこれを常に、Windowsコントロールパネルで常に行います)

これらのカテゴリで情報がどのように提示されるかも重要です。各サブカテゴリをタブに表示する場合、ユーザーはもう一度探して正しいものを見つける必要があります。 「タブ内のタブ」は避けてください-垂直ナビゲーションは単なる異なるタイプのタブです。

「タブ付き」レイアウトでは(既存の「フラット」レイアウトではなく)、適切な設定に到達するために必要なアクションの数も増加しています。アクションの数を増やすことは必ずしも悪いことではありませんが、組織の名の下で完全に良いことではありません。

実際、ユーザーには多くの情報が表示されますが、簡単に解析できます(少なくとも、画像から解釈すると)。情報は視覚的に適切に分割され(「よく整理されている」と回答するには、カードの並べ替えを参照してください)、数回使用すると、ユーザーは(すぐではないにしても)十分に精通して、探しているものをすばやく見つけることができます。

短い答え:既存の「フラット」デザインをお勧めします。

1

次の理由から、あなたのページは問題ないと思います。1)オプションが明確である2)タイトルの下のキャプションは、私ができることを示している3)アイコン、私が見ることができるものから、適切に見える。

乱雑すぎると感じた場合の代替案は、通常のタイトルとキャプション自体であり、ユーザーはそれをクリックしてオプションを展開できます。

ページは正常に見えると思いますが、おそらく私が行うことの1つは、オプションを次のような正方形グリッドレイアウトに「グループ化」することです: http://mathforum.org/alejandre/magic.square/ adler/adler.3x3grid.gif (各ボックスの間にパディングすることも忘れないでください)

こうすることで、キャプションからのテキストがオプションの長さの2倍に拡大されるのではなく折り返され、ページ自体がはるかにきれいに見えます。これが一部に役立つことを願っています!

1
Ochre