UIアンチパターンの「複数のメニューレベル」の修正
私の脳は、管理UIを以下のモックアップのように見せるように事前にプログラムされているようです。
モックアップには3つのナビゲーションレベルがあり、フォームにはフォームアクション用のボタンの別のセットがあります。
そこにもっと良いアプローチがあるかどうかを知りたいのですが。ユーザーフレンドリーなトリックを使用して、UIを少し単純化できますか、それともアプリの構造を再考する必要がありますか？
（あなたのプロファイルはあなたが開発者であることを示しているので、私が私の会社のプログラマーを手伝うのと同じ方法でこれに答えます。別の角度が必要かどうか私に知らせてください。）
管理UIの階層メニューはアンチパターンではないと思います。ただし、インターフェース設計に関しては「プログラマ思考」の例です。あなたがしている可能性が高いのは、アプリケーションのyourメンタルモデルをユーザーインターフェイスに直接マッピングすることです。代わりに、学習する必要があるのは、user'sメンタルモデルをマップすることです。これは練習なしでは難しい場合がありますが、上に行くにつれて、ユーザーインターフェイスがはるかに「直感的に」なります（ユーザーが簡単に習得できるという意味で）。
しかし、どうやってAからBに行きますか？以下は、検討できる基本的なUXテクニックです。
メンタルモデリング
メンタルモデリングは、さまざまな角度からアプローチできる手法です。 1つの方法は、カードソートまたは を使用することですKJメソッド （別名 アフィニティダイアグラム ）。大まかに言えば、ターゲットオーディエンスから多数の人々を集め、彼らと協力して情報アーキテクチャを定義し、アクティビティに優先順位を付けることです。そうすることで、画面がプロセスの副産物としてどのように機能するかを理解し、ステークホルダーが意思決定プロセスの一部であると感じるので、ステークホルダーとの賛同をより多く得ることができます。 。
ここに私がメンタルモデリングについてお勧めする本があります： メンタルモデル Indi Young著。
使いやすさのテスト
画面を設計したら、廊下のユーザビリティテストを行います。廊下のユーザビリティテストでは、廊下で誰かをつかんで、アプリで何かをするように求めます。管理UIであることから、「新しい従業員が入社したと想像してください。あなたの仕事は、それらをシステムに追加することです。どうしますか？」のような簡単なことを簡単に依頼できます。それらを手伝うことなくメモを取ると、短時間で多くの問題領域が明らかになります。開発中や起動後もこれを繰り返して、UIの使用方法についていくようにしてください。
ユーザビリティテストの聖書は、 Rocket Surgery Made Easy です。この本では、使用できる多くの戦略の概要を説明し、特に費用をかけずにテストを行う方法に焦点を当てています。見てみな。
プロトタイピング
実際の開発の前に（実際のアプリケーションを作成し、バックエンドなどすべてに接続するという意味で）、モックサービスと対話するインタラクティブなプロトタイプを作成します。エラーをテストするのではなく、ユーザーがUIをどのように使用するかをテストするので、期待するデータを提供するように事前にプログラムできます。プロトタイピングを使用すると、実際のビジネスロジックの実行について心配する必要なく、すばやく反復できます。ユーザビリティテストとメンタルモデリングを組み合わせると、時間とお金をかけずに、はるかに遠くまで行くことができます。
Todd Zaki Warfelの本 Prototyping は、さまざまな方法とアプローチの概要を説明しています。プロトタイピングを計画している場合は、強くお勧めします。 （プラグ：フロントエンド開発を行う場合、私のプロファイルには、HTMLプロトタイピングを目的とする私が開発したアプリへのリンクが含まれています。役立つ場合があります。）
考えさせないで
最後に、 Do n't Make Me Think を読んで、UIデザインに関する考え方を本当に変えてください。現在のデザインの多くの欠陥を認識し、それらに新しい方法で取り組む意欲を感じているこの本から離れることになります。読むのに2時間かかります、そしてあなたは保証された次の10年間知恵のためにそれを参照することができます。
Rahulは、UIデザインへのアプローチを再考する上で、いくつかの「ハイレベル」ポイントを提供しています。ただし、デザインの「ぎこちない」段階で役立つと思われる「低レベル」のトリックもいくつかあります。
親タブと子タブを使用する必要がある場合は、子が親タブに明確に「含まれている」ことを確認してください
要素に別の要素が含まれていることをユーザーに示すと、ユーザーは階層をすばやく把握できます。これは、次の3つの方法で実行できます。
- タブコンテンツとタブヘッダーが「結合」していることを確認します（サブウィンドウの上部にあるボタンではなく、カードタブのように見えます）。
- サブタブのコンテンツとそのヘッダースパンが親タブよりも狭いことを確認する
- サブタブのヘッダーテキストに親のテキストと同じかそれよりも小さいウェイトを設定します（おそらく親を太字にするか、サブタブのテキストの色を薄くします）。
Webベースのバグ追跡システムであるBeetilで使用されている以下の各手法を確認できます。
方法に注意してください-
- 「リリース」ヘッダーがタブのコンテンツに溶け込む
- 「計画/テスト/展開」タブは狭く、親タブに含まれるものの一部であることは明白です
- 子タブは弱い色と小さいフォントを使用します（また、ヒント1の別の例として、下向きの「矢印」に注意してください。これは、選択したタブを下のコンテンツに明確にリンクしています）。
垂直と水平の「子タブメニュー」を混在させないでください
...どちらが優先順位が高いか明確でないため。
フォームアクションを下部に配置
ワークフローの方が賢明です（何かを行う->保存またはキャンセルしてください）。
親/子タブはすでに混乱する可能性があるので、情報の階層に関係のないコントロールと混ぜ合わせて、人生を難しくしないでください
- 第三に、フォームが不均一に見えるのを防ぎます。