5

UIの質問:グリッドへのデータ入力を実装するための最良の方法(「エンドユーザーが最も好む方法」として定義される)または最も悪い方法についてのコンセンサスはありますか?

多くの行があるグリッドがあります。グリッドの列には、ユーザーが入力/編集できるさまざまなタイプのプロパティが含まれています。プロパティの「タイプ」は次のとおりです。

  • フリーテキスト
  • 数字(数字)
  • 列挙値(たとえば、「高」、「中」、「低」のいずれか)
  • その他(日付、期間など)

「フリーテキスト」タイプは設計が難しくありませんが(それについては質問しません)、次の2つのタイプについてはどうでしょうか。

数字

  • キーボードを使用して数値を入力する場合、フリーテキスト入力を許可してから、ぼかしで検証メソッドを実行しますか?または、各キー押下を監視して、データ入力を数字のみに制限しますか?
  • 一部の列のデータの構文が数値のみに制限されていることを(フォームではなくグリッド上で)ユーザーにどのように伝えますか?ユーザーが間違った(数値以外の)キーを押した場合はどうしますか?
  • 「spin」または「spinner」コントロールは、標準のWindowsコントロールです。HTMLベースのグリッドでも使用するのは適切ですか?

列挙値

マウスを使用して列挙値を入力または編集するには、マウスクリックで小さなコンテキストメニューをポップすることが重要だと思います。

  • <select>別の方法は、入力コントロール(つまりコンボボックス)を使用することです。列全体のコンボボックスを使用することは、テキスト値の列を使用することほど読みにくいと思います(コンボボックスはテキスト以外のインクを追加するため)。通常はプレーンテキストを表示しますが、フィールドが入力フォーカスを取得したときにそのテキストをコンボボックスに置き換える(そしてぼかし時にコンボボックスを削除する)ことについてどう思いますか?
  • マウス(つまりクリック)の結果ではなく、キーボード(つまり[Tab]キー)の結果としてフォーカスが変更されたときに、同じメニューをフォーカスにポップしますか?つまり、フィールドにタブで移動すると、ポップアップメニューが表示されますか?ちなみに、私が見たCSSベースのポップアップメニューは、マウスには反応しますが、キーボードには反応しません(たとえば、[上]および[下]矢印キー)。ブラウザで実行できるIntellisenseのようなデータ入力の実装を知っていますか?

例えば?

また、あなたが模範的な例だと思うものを見たいと思います。デスクトップUIやブラウザ内の回答に興味があります。


編集:[data-entry]タグを付けた別の質問(「誰かがSigma Grid(Javascriptベースの編集可能なデータグリッド)を使用したことがありますか?」)に続いて、SigmaGridの例を見ています。IMOは多くのことをうまく実行します(キーボードとジャストインタイム選択ボックスの優れたサポート)。ただし、数値フィールドのサポートは不完全な場合があります。たとえば、数値セルで「a」を押すと、警告ボックスが表示されて、間違っていることを通知することがあります(ツールチップの邪魔にならない場合があります)。および/またはセルを空(空白)のままにし、「a」を消去して何も残さない場合があります。


以下の回答のいずれかに返信して編集してください。

ただし、ここでも、フォームの主な用途を決定し、そのために最適化します。データの視覚化または分析には、一括入力とは異なるニーズがあり、キーボードユーザーを満足させることは、キーボード+マウスユーザーとはまったく異なります。

同じ表示(つまり、テーブル/グリッド)が、既存のプロパティの表示、新しいプロパティの作成、および既存のプロパティの編集にうまく機能するようにしたいです。数十のアイテム(つまり、数十行のデータ)があり、それぞれに数列しかありません(たとえば、テキスト/アイテムの説明の1列と、1つ以上の関連アイテムプロパティの1つ以上の列)。

一部のデータ/プロパティは主観的で相対的なものである可能性があります(たとえば、各アイテムの2つのプロパティは、各アイテムの「優先度」または「難易度」であり、他のアイテムと比較した場合にのみ特に意味があります)。これが私が望む理由です。すべてのデータを1つの画面にまとめて表示する:エンドユーザーがそれらを比較できるようにします。

私のアプリケーションは、比較的専門的な(初心者ではない)コンピューターユーザー向けですが、データ入力スペシャリスト向けではありません。たとえば、ユーザーはソフトウェア開発者、プロジェクトマネージャー、製品マネージャー、QA担当者などですが、ある程度は顧客でもあります。イントラネット(パブリックインターネットではない)で実行されていますが、使いやすくて楽しいことと、習得しやすいこと、または直感的に理解できることの両方が重要です。

また、キーボードユーザーの満足度がキーボード+マウスユーザーと完全に異なる理由もわかりません。単一のソリューションでどちらかまたは両方をサポートできる/すべきだと思いました。

4

6 に答える 6

4

私見、あなたが尋ねる必要がある大きな質問はあなたのページの主な目的とあなたのユーザーの相対的な洗練です。Tab + 10の主要なプロ、マウスクリック+ハントペックのタイピスト、両方の少しを扱っていますか?

あなたがする選択はこれを考慮に入れる必要があります。グリッドを選択することで、ユーザーは下からステップアップし、フォームをナビゲートする主な手段としてタブナビゲーションを使用し、主な用途はバルクデータ入力であると想定しています。

数値入力について:

  • 変換ルーチンの提供を計画している場合は、数字に制限する必要はありません。
  • ユーザーが無効な入力を入力した場合(たとえば、テキストだけでなく一部の数値が無効になる場合があることに注意してください...たとえば、負の年齢)、エラーをインラインですぐに表示することをお勧めします。
  • 特に小数の数値を扱う場合は、スピナーを避けてください。スピナーはデータ入力から焦点を外し、有限の離散数のセットを扱っている場合を除いて、最小限の値を提供します。この場合、コンボ/選択の方が適している可能性があります(理由については次の投稿で詳しく説明します)。

列挙値について:

  • 疫病のようなポップアップ/コンテキストメニューは避けてください。それらは、ユーザーがマウスを使用し、現在のタスクからフォーカスを奪うことを要求します。これは、文字通り、新しいウィンドウを生成するときです。コンボ/選択により、ユーザーはある程度先読みでき、矢印によるキーボード選択が可能になります。
  • 発生するコンボボックスの問題(ドロップ矢印によってテキストが読みにくくなる)は、提供するフォーカスソリューションで軽減できるものですが、一般に、行と列の間のパディングを増やすことで、グリッドをより読みやすくすることができます。 。

追加コメント:

  • 可能であれば、変換付きの日付をフリーテキストで送信します。ユーザーのトレーニングを計画している場合、または厳格なマスキングシステムを採用することを選択した場合(および検証の失敗時に同様に手首を叩くのを刺激する場合)を除いて、ユーザーは好きなように日付を入力できます。 国際的な人々と取引している場合、彼らは月と日を異なって入力することに注意してください。米国のSOPはmm/dd / yyyyですが、多くの国ではdd / mm/yyyyを好みます。
  • かなりの数のフィールドがある場合は、データ入力を複数の行に分割することを検討してください。10列を超えるフラットグリッドは、単一のビューで理解するのはかなり困難です。これの欠点は、垂直スクロールが増えることです。そのため、一方で編集データの現在の行を解釈する際にデータコンテキスト(たとえば、上の行と下の行)を使用することの重要性と、すべての一方の行の情報(複数行またはHスクロール)。

ただし、ここでも、フォームの主な用途を決定、そのために最適化します。データの視覚化または分析には、一括入力とは異なるニーズがあり、キーボードユーザーを満足させることは、キーボード+マウスユーザーとはまったく異なります。

編集:コメントへの返信

また、キーボードユーザーの満足度がキーボード+マウスユーザーと完全に異なる理由もわかりません。単一のソリューションでどちらかまたは両方をサポートできる/すべきだと思いました。

完全に違うわけではありません。これは、大部分のユーザーを「最適化」することと「サポートする」ことの違いと考えてください。いくつかの例:コードエディタはキーボードユーザー向けに最適化されています。ホットキー、ショートカット、およびキーボードナビゲーションの間で、ユーザーがマウスを使用する必要はほとんどありません。ほとんどのRTSゲームは、片手でマウスをもう一方のキーボードで使用して動作します。通常、マウスの使用のみをサポートしますが、このために最適化されていません。ITunesはもう一方の極端な例です。ほとんどの場合、ドラッグアンドドロップが主流のUIと同様に、マウスにのみ依存しており、キーボードのみを使用することはほぼ不可能です。

入力を許可してエラーを表示しますか。またはエントリを防ぎ、エラーを表示しますか?グリッド(テーブル内のどこかにあるセル)の場合に「インライン」で表示するとはどういう意味ですか?

どのプラットフォームで構築しているかはわかりませんが、はい、テーブル内のどこか、できれば話しているデータの行のどこかにあることを意味します。ASP.NETのGridViewでは、複数のコントロールを同じ「セル」に埋め込むことができるTemplateFieldsを使用できます。リッチクライアントの世界では、ほとんどのサードパーティコンポーネントが、コンテキストでエラーを発生させるOOTB(IDataErrorInfoなど)と同様のサポートを提供します。

別の方法ですべてのエラーをグリッドの上または下に配置する場合、ユーザーは数十行のデータのどれにエラーがあるかを判断するのが困難になります。これを最適に処理しない例として、Amazonカートに10個の商品を追加してから、-1に変更した1個の商品を除いて、すべての金額を2に変更してみてください。更新を押して、エラーのある行に簡単に移動できるかどうかを確認します。

また、検証スタイルの「イン」フレーバーは、ユーザーがデータを入力し、入力を妨げたり、入力を削除したりすることなく、データが正しくない場合にメッセージを提供できるようにすることです。StackOverflowはこれをさまざまな場所で行いますが、コメントを追加することで最も簡単に証明できます。検証では、少なくとも15文字が必要であることが通知されますが、通知時にコメントは削除されません。すぐに、ユーザーに明示的に通知し、入力が正しくないことをすぐに知らせます。この例は、Windowsでバックスラッシュを使用してファイルの名前を変更しようとすることです。すぐに正確な指示が記載されたバルーンが表示されます。

インテリセンスまたはオートコンプリートは一種のポップアップですが、キーボードを使用して操作できます(フォーカスを離さないでください)。

Visual StudioでIntellisenseと同じくらいきれいにポップアップをサポートできるのであれば、私はそれを試してみようと思います。私のポップアップ以外の経験では、ほとんどの場合、試行錯誤します(マウスを手に取り、正しい場所に再度焦点を合わせる必要があるため、非常に恐ろしいこともあります)。Intellisenseで覚えておくべきもう一つのことは、それが素晴らしいステートメントの終わりの処理を持っているということです(つまり、あなたのタイプした単語との相互作用+先読み+スペル/大文字小文字の許し+タブ/入力処理を意味します)。タブを使用してフィールド間を移動していると想定しているため(VSにはフィールドがないことに注意してください)、アプリケーションに「これで完了です。オートコンプリートに移行してください」と通知する別の方法を考え出す必要があります。 -入力した内容のコンプリート/インテリセンス」

テキストの周りのコンボボックスのフレームは、テキストを速読しにくくすると思っていました。フォーカスがないセルには、下向きの矢印が付いているがコンボボックスの周囲にフレームがない(テーブルセルの境界のみ)最小限のコンボボックスの方が適している可能性があります。焦点が合っていないセルに役立ちます。

ComboBoxのフレームが心配な場合は、完全に同意します。フレームの色をコントラストの低い色に変更します。焦点が合っていないときにコントロールの「クロム」を最小化するために取る解決策は、明らかにそれをよりテキストのようにし、(おそらく?)より読みやすくします。

とにかく、あなたのデザインで頑張ってください。

于 2009-06-16T21:29:14.660 に答える
2

ExtJS

編集可能なグリッド:http ://extjs.com/deploy/ext-3.0-rc2/examples/grid/edit-grid.html

行エディターグリッド:http ://extjs.com/deploy/ext-3.0-rc2/examples/grid/row-editor.html

私はまだ3.0xバージョンを個人的に使用していませんが、2.0はかなり素晴らしいです。Extフレームワークには少し学習曲線がありますが、検証、入力制限、データバインディングなど、ほとんどすべてを実行します。

于 2009-06-18T02:18:17.110 に答える
1

http://www.peterblum.comをご覧ください。

過去4年以上にわたり、多くのアプリケーションでこの製品を使用しています。Web フォームの UI を確実に強化し、多くの検証の問題を解決します。特に、グリッド コントロールでうまく機能します。

幸運を祈ります

于 2009-12-23T21:03:26.980 に答える
1

数値の場合、通常は JavaScript を使用して、入力してもらいたい値以外の値の入力を制限します。この場合は数字。アラートなどを与える必要はありません。許可しないでください。

列挙型の値については、ある種の選択ボックスまたはドロップダウン ボックスを実際に使用します。それは、人々が Web サイトで慣れ親しんでいることです。あなたはそれに夢中になり、マウスが上に来るまで非表示にするか、ボックスをクリックすることができます.

タブ移動の場合は、別の選択ボックスに移動できるようにします。これは、多くのデータを入力する一部の人々にとってより高速になります。

于 2009-06-16T21:10:57.350 に答える
1

これは、何年にもわたって入力フォームを扱ってきた観察結果の寄せ集めのリストです。

数字の桁:

  • フィールドの長さを制限しないでください - 分離文字を追加した (または 1 つ多すぎる) と、フィールドに入力できないことがわかり、本当に面倒です。次に、戻って「問題のある」文字を削除し、最後まで行って、塗りつぶしを続ける必要があります。優れたシステムでは、フィールドを終了するときにデータ以外の文字をトリミングして削除する必要があります。それでも値が収まらない場合は、すぐにユーザーに知らせてください。
  • 数字以外を避けるには、数字以外の文字列を埋めるキーを無視してください。3 桁/10 進数の区切り記号、空白、および制御文字 (CTRL-x) に注意してください。通貨記号 (削除予定) を含め、利用可能なほぼすべての形式から値を貼り付けることができるはずです。
  • スピン コントロールはまだ普及していないため、エキスパート インターフェイスにのみ使用する必要があります。また、スクロールバーの落とし穴の多くを共有しています: 終点の矢印を配置するのに十分なスペースはありますか?クリックすると十分な精度が得られますが、キーボードでも正確かつ高速にインクリメントできますか?
  • ユーザーがフィールドを終了した後、値は最大許容桁数に丸められ、できれば読みやすくするために OS 設定に従ってフォーマットされます。

列挙値:

  • 入力時にフィールド ウィジェットを変更すると、新しいユーザーが混乱する可能性があるため、エキスパート インターフェイスでのみ使用する必要があります。
  • Google サジェストのようなインターフェイスは、リストが大きくてもユーザーになじみがある場合に便利です。長いリストのナビゲーションは、数回クリックするだけでより管理しやすい部分に減らすことができるからです。ユーザーが既存のすべてのオプションを実際に表示したい場合に備えて、ドロップダウン セレクターを使用できるようにする必要があります。フィールドが新しいエントリを許可せず、フィールドの内容がどのオプションとも一致しない場合、ユーザーがそこから移動したときに、最も近い一致を見つけようとする必要があります。たとえば、オプションが「高」、「中」、「低」であることがわかっている場合は、最初の文字のみを入力し、残りはシステムに任せると便利です。
  • フィールドがマウスまたはキーボードを介してフォーカスを取得すると、使用可能なオプションがそれほど多くない場合は、すぐに表示されます。ユーザーにとっては良いヒントです。落とし穴の 1 つは、あまりにしつこく、ユーザーが別の場所に移動しようとしたときに、画面の他の部分が見えにくくなってしまうことです。
于 2009-06-19T15:53:58.953 に答える
0

jQuery には、一般的なデータ入力のイディオムを支援する優れたプラグインがいくつかあります。

jQuery の使用率が高く、これらのプラグインのいくつかは、美しさの要因とともに、これらのプラグインがユーザー入力を処理する最良の方法のいくつかを表していることを私に示しています...

evolt の Isaac にもUsable Formsに関する優れた記事があります。

于 2009-06-19T06:17:49.180 に答える