web-dev-qa-db-ja.com

テーブルへのユーザー入力

ユーザーが入力する必要のある入力が非常に多いデスクトップベースのアプリに取り組んでいます。自分の値を入力することになっているという印象をユーザーに与えながら、見栄えの良い方法でユーザーにデータを提示するのに苦労しています。

これまでに入手したものの写真を含めました。それに関する2つの主な問題は次のとおりです。

  1. それは醜いです。
  2. ユーザーが値を入力する必要があるかどうかはすぐにはわかりません。

これがデータを入力する良い方法ではない場合、誰かがユーザー入力の別の方法を提案してくれるとありがたいです。 Data input table

3
scipiones

カスタマイズを行う前に、まず標準のコントロールを使用してください。

プラットフォーム/オペレーティングシステム(WPF(Windowsデスクトップ)、Apple OS X、Apple iOS、Android、Web browser、etc)) 入力ボックスのレンダリング方法は、すべてわずかに異なります。

作業しているプラ​​ットフォームまたはOSの標準コントロールに固執すると、ユーザーがコントロールを入力ボックスとして認識するという問題が解消されます。


モックアップ(WPFアプリケーションの場合)

すべてが同じように見えるはずだと言っているわけではありませんが、カスタマイズを行う前に、基本的なレイアウトとコントロールから始める必要があります。入力ボックスとその下の行のスタイルを取り除き、使いやすくしました。これを基にして、クリエイティブなスタイルを追加することもできますが、使いやすさを犠牲にしてスタイルが適用されていることを確認したらすぐに、一歩下がって別の方法でアプローチする必要があります。

enter image description here

8
Dave Haigh

まず、すべての色を取り除きます-ワイヤーフレームを最初に白黒にします(多くの場合グレースケールでも)。

次は、フォームを作成するための最良の方法を探し始めます。これだけ多くのラベルがあるので、ユーザーが各フィールドに正しい情報を簡単に入力できるように、細心の注意を払っています。ラベルが入力ボックスからそれほど離れていると、何が何に関係しているかがわかりにくい場合があります。ラベルを右揃えにして、行の間隔をもう少し広げました。

enter image description here

もう1つの素晴らしいアイデアは、次のようなインフィールドテキストボックスです。 http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

入力ボックスでカーソルが点滅している限り、ユーザーは入力ボックスに入力できることを理解できるはずです。

幸運を!

2
Sarah Leigh

優れたUIはきれいなUIではないことを忘れないでください。つまり、優れたUIが美しくないということではありませんが、きれいなUIがUIを良くするわけではありません。

このようなデータを入力する必要がある場合は、コントロールをナビゲートしやすい計画を使用してください。タブインデックスに特に注意してください。あなたがデスクトップだと言っていました。それが.Netならデータグリッドを使用してください。読み取り専用列に読み取り専用のマークを付けます。

使いやすく醜いインターフェースは、毎回かなり複雑なインターフェースを打ち負かします(販売デモを除く)。

次に、データグリッドの変更を開始します。灰色のバーを追加するか、欠損値を強調表示します。しかし、それをシンプルに保つ。

アイデアは、最初にデータ入力を高速かつ効率的にし、次に口紅を追加することです。

2
coteyr