web-dev-qa-db-ja.com

CRM UIで余計な空白を処理する方法は?

看護師がワークフローを管理できるようにCRMスタイルのインターフェイスを設計しています。UIの問題が発生しています。ほとんどのユースケースでは、「タスクの詳細」に余計な余白があり、UIの問題が発生しています。カード(画像を参照)。 enter image description here これを緩和するために、フォントサイズを大きくすることを検討しましたが、残りのインターフェイスも14pxであるため、視覚的に衝突させたくありませんでした。 (また、この画面は、1440ptのワイドスクリーン用に設計されています。これは、インタビューした看護師のほとんどが使用しているものです)。

スペースが非常に長い入力を収容するのに十分な大きさであることがうれしいですが、それは少しだけに思えます。

これを軽減する方法について何か考えはありますか?どうもありがとう!

10
Conor

階層を視覚化する

ここには、データ要素の既知の優先順位を強調し、スキャン能力と視覚的な関心を追加しながら、柔軟性を維持する機会があります。

カードレイアウト(テーブルと比較して)の良い点は、スペースを使用してユーザーを期待されるフローに導くことができることです。あなたの空白は祝福です!

タスクの説明や、この顧客のイベント履歴など、使用されているかどうかに基づいて条件付きで表示されるいくつかの要素を追加することもできます。

Revised layout

その他の機会

トピックについて話している間、この領域全体でスペースを使用して情報階層をより明確にできると思います…

Problem area

16
plainclothes

空白の問題はありません。カードタイプのインターフェイスは、空白を含む傾向があります。

ヘッダーなどの詳細をグローバルコンポーネントに圧縮し、本文のみをノート専用にすることができます。

11
Nicolas Hung

カードのレイアウトを変更してみませんか?

トップカードにはフリーテキスト領域がないため、すべての情報を簡単に水平方向のスペースに収めることができます。このようにして、タスクノートカードの利用可能なスペースを利用できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

2
Mo'ath