なぜこのデザインは散らかっていたり圧倒されていると考えられるのですか？

Question

デスクトップブラウザーとタブレットブラウザー用のWebアプリを開発しています。私のUXの知識はすべて、個人的な経験と反復から生じています。私は正式なトレーニングを受けたことがありません。このWebサイトでは、できる限り整理された情報を提供するように細心の注意を払って説明しましたが、フィードバックを寄せてくれた多くの人々は、「乱雑」で「圧倒的」だと説明しています。情報を改善しながら、同じ情報を提示する方法を見つけるのに苦労しています。

このカードベースのデュアルメニュー、サイドバーデザインのどの要素がこの応答を引き起こしていますか？

plainclothes · Accepted Answer

これがUXが難しくなる場所です

インターフェースに本質的に問題はありません。大量の情報をかなり明確で標準化された方法で処理しているようです。
しかし、インターフェイスに問題があります：ユーザーはそれに慣れていません。

これは複雑な問題ですが、すべてのUX設計プロジェクトの中心です。それはあなたがサービスを提供するオーディエンスと彼らがあなたのアプリを使用することになるコンテキストに完全に依存しています。

どこから始めれば

ユーザーの小さなサブセットの意見を過大評価していないことを確認してください。それが「きしむ車輪」全体の問題です。彼らはいくつかの有効な懸念を抱くかもしれませんが、あなたが彼らがより多くのユーザー集団を代表していることを確認する必要があります。
実際のユーザーがアプリで実際のことをしているところに座ってください。何が起こっているのか、どのようなタスクを実行しようとしているのか、行き詰まっている、混乱している、イライラしているのかを確認します。
一度に1つのソリューションをテストします。合理的な変更が合理的であればあるほど、テストから正確に取り除くことができます。
何かを修正したと思ったら、ユーザーと一緒に戻ってください。たくさんのフィードバックを集め、あなたが解決したと思ったことを確実に解決してください。

tl; dr

ユーザーが達成したいことを正確に理解する。

すべてを排除する
[アクション、単語、画像、アイコン、色、形、ピクセル]
それは彼らを＃1でより良くしません。

一般的な観察

免責事項：私はあなたのユーザーではないので、私はそうではないかもしれません。彼らがそうである修飾されていない推測のために私の観察をしてください。

階層

小さな角の三角形のおかげで、カードの見出しは間違いなく最初に私の目を引きます。それは重要な要素のようです。次はどこへ行くのですか？

Create Gameボタンは、見つけたら重要に聞こえます。画面の端に隠れており、すでに他の場所で使用されている唯一のハイライト色を使用しているため、位置特定は大変な作業のようです。

ナビゲーションのように見える上部のGamesおよびUsersについてはどうですか？現在、どれがアクティブか、何をするかわかりません。

一般的に、私の注意を引くことはたくさんあります。それは私につながります...

視覚ノイズ

そこにあるものを洗練することにより、離散したものの数を減らしてみてください。たとえば、Onlineインジケーターが円を失い、次のように簡略化できます。

別の機会はカードの詳細です。概要レベルでこの情報のうちどれだけが必要ですか？ホバー/タップでその一部を拡大できますか？そして、詳細アイコンは有用な情報を追加しませんが、その頻度のためにページに多くの視覚的なノイズを追加します。テキストラベルだけではない理由：

また、ゲームカードでは、黄橙色の線のコンテキストはありません。一見すると、人のアイコンの下にあるタブインジケータのように見え、Privateの別のタブがある可能性があります。そう思うとすぐに、それは意味がありません。もっと無駄な注意。

単調

複雑さの懸念にもかかわらず、単調さを解消するために何かを追加する余地があるかもしれません。ゲームのカバー画像を許可する意味はありますか？または、その青いLコーナーを完全なヘッダー色として使用することもできます（実際にはすべてが同じではないと想定）。

Paul LeBeau · Answer

すべてのゲームボックスでこれらのテーブル行ラベルを繰り返すことは、IMOの認識をすっきりさせることに大きく貢献しています。また、そのすべての情報が必要ですか？おそらく簡略化を試すこともできますが、必要に応じて拡張する機能を追加できます。

filip · Answer

UIは優れていますが、いくつかの点で改善の余地があると思います。

行が多すぎます（ほとんどの行は削除できます）
デザインのさまざまな部分のコントラストが小さすぎる（目をぼかしてみて、デザインのさまざまな部分を見分けられるかどうかを確認してください）。カードは特に問題があります。それらをポップにします。

一部の行を削除して、カードをもう少し目立たせました。これにより、デザインが少し乱雑にならないと思います。自分を判断しなさい。

Harrison Paine · Answer

カードによって表示されているデータは、リストまたはテーブルではるかに理にかなっています。各カードには、まったく同じフィールドに異なる値があり、フィールドのラベルを毎回表示しています。ヘッダーのあるテーブルは、「時間」、「言語」などのラベルを一度だけ表示します。

カードについてのメモとして、それらは混合またはフリーフォームのコンテンツにより適しているように見えます。各カードは、その固有のコンテンツに合わせて調整された固有のUIを提示します。コンテンツは利用可能なゲームのリストなので、UIでそれをリストで表すのは理にかなっています。

Devin · Answer

個人的には、散らかっているとは思いませんが、はい、少し圧倒的です。

基本的に、私はあなたの画面を見て、どこを見るべきか、何をすべきかわかりません。最も重要な側面は、隅にあるLであり、誰かがオンラインであるという事実です（これは、色を使用しているためです）。情報を混合して、すべてに同じレベルの階層を提供します。 [〜＃〜] cta [〜＃〜] sは灰色（!!!!）であり、指定された画面に基づいてブレッドクラムが奇妙です（ゲームを表示していますが、ブレッドクラムの表示UsersそしてこれはGamesの下のレベルであり、あなたがプレイヤー）、あなたはどういうわけかメインコンテンツに関連しているように思われるメッセージ/チャットサイドバーを持っていますが、接続を見つけるのは本当に難しいです...まあ、それは少し混乱しています。良い知らせは、これらのすべての側面が簡単に変更される可能性があることです。あなたの主な問題は、階層、重要なこととそうでないことに焦点を当てているようです。いくつかの色（主にCTA）を変更してテストします。すぐに結果が表示されると思います

とにかく、私はあなたがいくつかの徹底的なテストを行い、行動と相互作用を研究し、友達ではなく同僚ではなく実際のユーザーに質問をするべきだと思います

IT ppl · Answer

ここで提供される答えは素晴らしいですが、いくつかの観察：

ユーザーのアバターを灰色の円（複数の灰色の円は雑然として見えます）に配置します。同様に、すべてのゲームカードに意味のある情報を配置します。
オンラインユーザー向けの概念として緑の円のみを保持し、テキスト（「オンライン」など）を友達のリストから削除します。ただし、ログインしたユーザーのステータスにはテキストを保持します。緑=オンラインなどのさまざまな色付きの円の意味を理解するのに役立ちます。、赤=オフライン、オレンジ=アイドルなど.
「友達」からメールアイコンを削除します。 All 'ヘッダーはアプリのヘッダーに既に配置されています。これら3つのポイントについては、次の図を参照してください。
このように、メニューのゲームとユーザーをナビゲーションタブに配置します。
右上隅と文字のサイズをこのように増やします。

Viziionary · Answer

私は提供するいくつかの基本的なガイドを持っています。これはすべてのUXに適用する必要があり、ここでは特に重要です。

利便性は明快さと競争する必要はありません。

設計者は、ユーザーを混乱させたり圧倒したりしない情報を提示しながら、画面スペースを最大限に活用することになっています。しかし、これはしないということは、設計者は、表示される情報を明確にするために、利用可能な情報量を交換する必要があることを意味します。ユーザーとの対話により、動的設計を活用します。

流体設計媒体で快適になることによって...

私たちデザイナーは通常、ベクターレイアウトエディターでインターフェイスを設計するのが自然だと思います。そこでは、アニメーション、遷移、および変換の束を配線しません。これが、ユーザーとの対話を通じて情報を公開（および非表示）する革新的なレイアウトを設計する私たちの能力を制限するものです。したがって、まず、動きのある、アニメーション化された、変形するインターフェースを構築できる環境での設計を学びます。個人的には、HTML、JS、CSSを使用してインターフェースを設計するだけです-しばらくすると、それは自然な設計媒体になります。

...ユーザーの注意を引きながら、情報を公開および非表示にする環境を作成できます。

次に、インターフェースを設計する際の流動的な自由度を利用して、ユーザーのフォーカスを要素間で必要な順序または必要な順序で「プル」し、インターフェースと対話する情報のヒントを表示します。さまざまな情報グループにアクセスします。

動的なユーザーインタラクションに焦点を当てることにより、シンプルなインターフェース階層を使用して、ユーザーが必要なときに必要な情報にユーザーを導くことができます。

多くの情報をユーザーに公開したいのですが、人々が一度に満足できる量には制限があります。特にこのような重複した情報テーブルを扱う場合は、スムーズでシンプルなアニメーションにリンクされたユーザー操作に依存することにより、公開される詳細の数を制限します。

たとえば、あなたのケースでは、重複する情報を含むすべてのゲームブロックを表示する代わりに、ゲームを識別するラベルのみを使用してブロックを表示してから、ユーザーがそれを操作したときに（タップまたはホバーなどで）、詳細を表示しますゲームの。この変更だけでインターフェースが大幅に簡素化され、ユーザーは一度に大量の公開情報を吸収する必要がなくなります。

Curt Doolittle · Answer

まあ、良い答えですが、「単調」以外の原因についてはあなたを助けていません。これは素晴らしい用語ではありませんが、終わりです。

雑誌、ポスター、ユーザーインターフェイスの優れたデザインは、font、font sizeおよびwhitespace、colorでさらに改善され、 harmedwithline。

これらのプロパティ：フォント、フォントサイズ、空白、色train（a）重要なこと、（b）情報をスキャンする方法、（c）データのパターンを直接考えるのではなく、一目でデータのパターンを確認する方法。

読むことは人々にとって非常にコストのかかる作業なので、スキャンして「これらのうちどれが他のもののように見えない」か、または原理のいくつかの変形を特定するためにスキャンしたいのです。

ユーザーが無意識のうちにユーザーインターフェースを記憶すると、空間的位置は専門知識とともに時間とともに発展します。（経験豊富なユーザーはExcelスタイルのインターフェースが好きで、新しいユーザーはそうではありません。）

言い換えると、エントリレベルまたは経験豊富なユーザーのデザインを「テスト」しているかどうかを知らない限り、インターフェイスのデザイン時にイントロスペクションに依存することはできません。

フォントサイズ（優先度）、フォントスタイル（フォントは相対的な意味を伝える）を使用して、情報の見方をユーザーに「トレーニング」します。フォントがshapesを使用した後（他の人がアドバイスしたコーナータブなど）。図形の後にはcolorを使用します。色は最後でなければなりません。

色はtypeを示すか、または「これは他のものと似ている」ことを示す必要があります。色（色付きのバーまたは背景）で「装飾」する必要がある場合、「意味」がないため、これは通常失敗を表します。

「レイヤー」で個別の要素を実行してデザインをテストし、レイヤーのオンとオフを切り替えます。あなたの目はあなたに言うべきです。

カードインターフェイス

これで、「カード」（空間レイアウト）が結合されましたが、「テーブル」のフォントと色を使用しています。

カードがソリューションの優れたUIモデルであるとは思えないので、まずユーザーを支援していることを確認してください。カードは主に画像を保持している場合に機能し、常に再配置する必要があります。それ以外の場合は、スキャンしやすいため、通常はテーブルの方が適しています。

たとえば、トランプのパックを取り、床に投げると、方向に関係なく区別できます。「カード」を床に投げると、それらはすべて同じに見えます。

したがって、ユーザーによる位置索引付けに依存している場合、間違ったモデルを使用しているか、またはトランプのメタファーを解決する必要があります。

役立つヒント

私は人々に助言するために雑誌のページレイアウトを見つけるようアドバイスするようにしています。もちろん、ゴールドスタンダードはNYTの紙とWebサイトです。すべてのタイプと空白。

しかし、ビジュアルモデル（たとえば、モノポリーボードゲーム）から始めることは、通常、デザイナーがアマチュアを悩ます「ボックスの問題」を回避するのに役立ちます。

Juan Lanus · Answer

人間がUIのような何か構造化されたものを見るとき、私たちはメンタルモデルを構築する傾向があります。
その目標を達成するために、無意識のうちに一瞬でUIをスキャンし、UIのすべてのアイテムをメモします。
このプロセスでは、UIの要素の数に応じた量の「メンタルパワー」を消費します。これは認知負荷に関連しています。
その後、消費された認知負荷に応じて、何度も「疲れ」ます。

ええと、UIにはかなりの数のアイテムがあり、ユーザーが不満を言うのは、スキャンごとに必要な認知的負荷の量です。
要素の数は「Hey guys」パネルではなく、アイコン、テキストピース、線などすべてです。
改善の余地がたくさんあるので、これは朗報です。

私の提案を理解していただくために、いくつかの例を列挙します。

それぞれの「こんにちは...」には、削除された場合にユーザーの理解を妨げることなく認知負荷を軽減する多くの内部行があります
「ジャックが作成」の下の行
「詳細」の下の表のセル境界
「詳細」という言葉自体
「友達|すべて|✉5」のアーチファクトライン（ホバー上のボタンのように表示）
フレンズの下のシマウマ縞|すべてのアーティファクト
「オンライン●」はカラー部分のみである可能性がありますが、代わりに緑✓およびその他の赤い十字が付いています
並べ替え/フィルター/すべてのゲームで、ドロップダウン矢印をテキストに近づけて、1つのものにしようとします
丸い写真の代わりに、3つすべての境界に達する正方形の写真を使用します
など...

最初のテストとして、「DETAILS」テーブルを拡張して、4つの境界すべてに接触するようにします（Niceの丸い角と「DETAILS」見出しが失われます）。
それはより簡単になり、そしてそれでグロッキングするのがより簡単になります。
そして、あなたは信じて、視覚的要素削除狂乱に乗り出すかもしれません。

HTDE · Answer

アイデア：

ゲームを作成

多分最初のカードはあなたの大きなゲーム作成ボタンかもしれません！編集したいテキストをクリックして、そこに直接入力できるようなタイプの入力が欲しいです。私もそれをレスポンシブにすることを考えているので、おそらくそれを見ると、それは非常にシンプルで、「+」と「ゲームの作成」があり、クリックすると、それらの自動入力フィールドでスムーズにアニメーション化されます。（カードが3Dで反転するとします。創造性には無限の選択肢があります！）

ゲームカード

応答性に関する同様のアイデア：[ゲームに参加]ボタンを削除して、ホバーにそれらの半透明オーバーレイ効果の1つとして表示させます。私は壁紙としてスクリーンショット/ゲームアートのアイデアが好きです。

ただし、これらのカードについて私が認識したことは次のとおりです。実際、必ずしもこの種のデータに最適なアプローチとは限りません。すべてのカードに同じ詳細と提示された情報があります。なぜある種のテーブルだけではないのですか？次に、プレイヤーはフィールドでそれらを並べ替えることができます。

クリエイティブにして、フィールドラベルを左または右に配置しても、壁紙を使用した幅広のカードのような向きにすることができます。ここにも無限のアイデアがあります！おそらく、彼らは左から右にスクロールでき、上下にスクロールすると、カードのグループを分類ごとに、おそらくゲームのタイプによってシフトできます。（矢印キーを使用できるようになりました！）

プレイヤーリスト

これ（そしておそらくヘッダー）は、少し乱雑に見える部分です。周辺の視覚情報が多いだけだと思います。では、どうすればこれを修正できますか？繰り返しになりますが、オプションはたくさんあります。クリエイティブになる必要があります。もう一度、壁紙から始めましょう。そして多分アコーディオンのインターフェース？「オンラインo」の代わりに、塗りつぶされた円と半円または空の円がある場合があります。またはリボンのような他のテーマ別インジケーター！（またはアイコンがくり抜かれた半透明のグラデーションを使用します。）

1つのアイデアは、おそらくオンラインの人だけを含めることですが、オフラインはコンマ区切りのリンクとして以下にリストされているだけで、フォーラムに表示されるようなものです。

Qwerty Uiop 、 Plok Min Juhby 、 Wes X Qwaz 、 Kip HG Jolumny 、 Ferd 3rd 、 Chasbyn Q Jon Klimp-Werdguft ZCXV 、 Guy T. Fred 、 Ty Hug

（ところで、私の母と私はゲームをプレイするときにキーボードの領域で何ができるかを確認するためにこれらの名前を思いつきました。）

これらの提案は、それを始めるためのものです。それが役に立てば幸い！

Daan · Answer

コントラストを追加（-===-）して、重要なコンテンツをより目立たせます（カードゲーム）。たとえば、背景色を暗くします。
現在部屋にいるプレーヤーの割合だけサイズを大きくして、黄色のストロークをより意味のあるものにします。部屋がいっぱいになると、たとえば赤いストロークが表示されます。
青い「L」のフォントは別のフォントのようですが、これは本当に変わっています。
間違いなく：「Round」、「Time」、「Language」、「Words」の前のアイコンを削除します。それらは楽しいだけでなく、注意をそらし、テキスト自体で十分なので、ロジックを追加しないようです。