web-dev-qa-db-ja.com

それぞれのケースが重要である多くの選択肢とオプションを提示する方法は?

アプリのインターフェースを表示できませんが、ここに概念があります。最初の画像の状況と人物の簡単な説明。 2番目の画像は、ケースと支援方法のオプションです。 (最初に、ケースを選択してからオプションを選択します)。

問題は

  1. 大量のテキストを配置する。テキストを短くすることはできませんが、ケース3とオプションでは、フォントと改行を減らす必要があります。テキストをカットせずに通常の外観で整理する方法

  2. すべてのケースを選択して整理する方法は?

ユーザーがそれぞれのケースを読んで選択するのは難しいでしょう。そしてインターフェースの混雑感

2
Ai inque

私がこの問題にどのように取り組むか:

  1. レイアウト:グリッド(1)のブラウジングはリストよりもはるかに難しく、おそらく分割することができます。
  2. グループ化:論理的にグループ化すると、情報がはるかに理解しやすくなります。あなたのコンテンツはわかりませんが、おそらくグループを形成することができます。次に、それらをカラーコード化し、フレーム化するなどして、微妙ですが明白にします。
  3. Text:中央揃えのテキストはスキャンが困難です。このページを見ると、すべてが左に揃っています。 1つの重要なボタン用に中央揃えのテキストを予約する
  4. Flow:エリア2はエリア1を選択した結果ですか?はいの場合、これは視覚的に明らかにする必要があります。

あなたのケース3の問題については:ボタン/ピルである必要がありますか?ヘッダーにもなりますか?またはタブ?その後、テキスト行が壊れる可能性があります。

ここに私がそれほど遠くないとわかった例があります:

screenshot from stackexchange

例のように:左選択、右:結果リスト

一般に、画面の目的を明確にする必要があります。ユーザーは何をすることになっていますか?このワークフローは、UIでサポートされる必要があり、その逆ではありません。

1
KMSTR