web-dev-qa-db-ja.com

連絡先の詳細フォームをよりわかりやすくする

連絡先の詳細を追加するためのプロジェクトにWindowsベースのフォームがあります。

これがスクリーンショットです

enter image description here

名、姓、var、cstのテキストボックスを追加しました（vatとcstは登録企業に関連する番号です）

また、リストボックスを使用して複数の携帯電話番号、住所などを保存しました。

どういうわけか、UIはユーザーフレンドリーではないと感じています。すべてが混んでいるような気がします。

ユーザーインターフェースを改善するためのガイドはありますか？

formslayoutgui-designfeedback
8
Searock

レイアウトを見ると、フォームのレイアウトを作成したときに、すべてのスペースを埋める必要があると感じたのではないかと思います。実際には、空白は明快さと秩序感を追加します。レイアウトの最大の問題はスペースだと思います。間隔を使用すると、レイアウトの特定の領域を視覚的にグループ化できます。また、フォームの2列のレイアウトは、一般的には良い考えではありません。フォームのアイフローは上から下です。

以下のレイアウトでは、次のようにしています。すべてのフィールドを1つの列に配置し、スペースを使用して、携帯電話、電話、ファックスなどのいくつかの入力をグループ化しました。また、複数のエントリに使用していたUI要素も削除しました。UI要素は非常に扱いにくく、デフォルトで不要な領域を占有するためです。私の例では、複数のエントリを許可するフィールドで、新しいテキスト入力を追加するプラスボタンを使用しています。これは、各エントリが常に編集可能であり、必要なスペースのみを使用するためです。

また、フォームのビジュアルフローに保存ボタンを配置し、「クリア」ボタンを「キャンセル」に置き換えました。さらに、「キャンセル」ボタンを右に移動したので、フォームのアイフロー内になく、偶発的なクリックを避けるために余分な労力を見つける必要があります。

enter image description here

10
Denzo

連絡先/住所ブロックはかなり自明です。そのため、ラベルにそれほど依存する必要がない場合があります。

インラインラベルと通常のラベルの組み合わせを使用してから、メール/電話のリストを削除し、代わりにそれらを1つの要素（直接追加できるリスト）に結合します。

name    [first       ] [last        ]

address [street                     ]
        [city                       ]
        [state ] [country ] [Zip    ]

email   [email protected]          -
        [add email                  ] +

等.

4
DA01

関連する要素間の間隔を狭めます。また、携帯電話番号と電話番号に割り当てるスペースを減らします。もちろん私はあなたの顧客を知りませんが、彼らが2つか3つ以上の代替番号TOPSを持っていないと仮定しますが、実際にはおそらく1つだけです。それ以上ある場合は、スクロールバーを使用してください。メール、ファックス、ウェブサイト、住所についても同様です。保存とクリアのボタンを隣同士に配置します。

3
Matt Rockwell

Webフォームに関連するように書かれていても、Luke Wroblewskiの「フォームデザインのベストプラクティス」を読むと、かなりのメリットが得られる場合があります。 http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

Luke W.によるもう1つの有益な記事は、2つの下部ボタンを配置するためのオプションについて詳しく説明しています。 http://www.lukew.com/resources/articles/PSactions.asp

3
mg1075

現在のレイアウトでは、2つの異なる列のように見えるので、一方の頭に姓、もう一方の頭に姓を配置し、保存ボタンとキャンセルボタンを同じように配置すると、最初は感動しました。 「空白」のスペースを減らし、同様のアイテムを一緒に移動するという提案に同意します。

大きなスペース（複数の電話番号、ファックスなど）をデータに反応させる機能はありますか？ URLが1つしかない場合、4つまたは5つに収まる大きな空のスペースを表示する必要はありません。このUIをもう少しデータ駆動型に対応させるために使用しているプラ​​ットフォームを実行します。これらのスペースは必要に応じて拡大または縮小します。あるいは、小さなスペースとスクロールバーの方がうまく機能するでしょう。結局のところ、携帯電話の番号を3つまで持っている人は何人いるのでしょうか。

ただいくつかの考え。

1
Monica Cellio

まず最初に、電話入力や下のリストボックスなど、相互に依存する要素をグループ化してみます。 2つの間のスペースを減らすことによって、それらが接続されていることを明確にします。次に、入力フィールドを少し広くして、ラベルに近づけることもできます。このような：

enter image description here

次に、「+」ボタンと「-」ボタンをいくつかのアイコンに置き換え、入力ボックスとリストボックスのボーダースタイルが同じであることを確認します。見栄えが少し良くなります。

0
Marian