web-dev-qa-db-ja.com

ユーザーが500行のテーブルの各行のオプションのリストから値を選択する必要がある画面を設計する方法は?

私は、非常に退屈で困難なタスクを容易にするのに役立つはずのアプリケーションを設計しています。

このアプリの前は、各ユーザーには約5〜8列、300〜500行のスプレッドシートが与えられていました。 (各ユーザーのスプレッドシートは異なります)。

各行ごとにの場合、ユーザーは最後の列に値を入力する必要があります。その値は、通常20〜30の選択肢を含む選択肢のリスト(Excelドロップダウンメニューなど)から選択されます。選択肢のリストは、すべての行でまったく同じです。

実際のコンテキストは敏感ですが、ここに架空の類似例があります-スプレッドシートにはソフトウェア開発プロジェクトのバグのリストが含まれています。各列には、バグに関するさまざまな情報が含まれています(たとえば、バグが発生した画面、バグの重大度、バグを発見したユーザー、再現性の程度など)。ユーザーは各バグを確認し、開発者へのバグ(約20人の開発者のリストから)。その割り当ては最後の列で行われます。

ご想像のとおり、これは非常に退屈で時間のかかる作業です。

これをWebアプリケーションに変換することで、少なくともスプレッドシートの配布にかかる時間と手間を削減し、それらをマージするプロセスを容易にします。

ただし、データ入力作業を効率化するUIも作成できるようにしたいと考えています。

私の最悪の場合の解決策は、すべての行の最後の列にドロップダウンメニュー(つまり、select要素)がある単純なテーブル/グリッドです。

しかし、確かにこれにはより良いソリューション/設計パターンがありますか?

12
mattstuehler

エンドユーザーにとってはるかに簡単な解決策は、選択肢のリストがすべての行で同じであると言うので、最後の列のテーブルを空にしてから、ページのどこかに、テーブルの近くに別のリストを置くことです。ドロップダウンではなく、すべての選択肢が一目でわかるリスト-名前をクリックすると、自動的に行に追加されます。

このように、ユーザーは毎回ドロップダウンをクリックしてスキャンする必要がなく、1つのリストを見て、名前を1回クリックして次の行に移動し、もう一度クリックする、などの操作を行います。

他のいくつかの要素を考慮する必要があります-名前を挿入する次の行を強調表示し、次に利用可能な行を選択するためのロジックなどですが、これにより、ユーザーから最小限のクリックと認識が必要になります(imo)。

13
Jason Tavarez

これはデータ入力タスクのように聞こえますが、そのように扱う必要があると思います。つまり、これが一定の頻度で戻るタスクであると想定します。

このような面倒な作業に直面した場合、新規ユーザーに優しいのではなく、速度を最適化することは理にかなっています。つまり、最終的に使用する方が高速である限り、UIを習得するのが難しくなる余裕があります。ユーザーは、面倒なタスクをより早く取り除くことができるのであれば、喜んで学習に費やすでしょう。もちろん、学習能力を高めるために、選択するオプションが常に変化するわけではありません。

1つは、ユーザーがキーボードから手を離さずにすべてを処理できるようにすることです。キーを押してオプションを選択する方が、リストからオプションを選択するよりもはるかに高速です。ユーザーが行う必要があるのは、行の単一のオプションを選択してから次の行を移動することだけである場合、オプションを選択するまさにそのアクションがトリガーされて、次の行に移動することもできます。

また、速度については、最後に行ったビューアイテムの概要(速度が原因でミスが発生していないかどうかを確認できるようにする)と、ユーザーが前に考えられるようにいくつかの今後のアイテムの概要を保持することが重要です。ただし、行でいっぱいの画面でユーザーを溺死させると、現在の行に焦点を合わせることが難しくなるため、現在の行にはより多くのスペースが必要です。

mockup

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

私は数年前にこのようなことをして、滑空クラブのデータ入力を容易にしました。フライト付きの無限のExcelシートの代わりに、必要なデータをすべてすばやく入力できるようになりました。処理にかかる時間は1桁減少し、エラー率も減少しました。

6
André

複数の行をまったく表示する必要がありますか?それ以外の場合は、一度に1行だけを表示しないでください。または、行の抽象化をすべて取り除きます。行の情報と、クリックして選択できるすべての選択肢を表示します。

2
curious_cat

いくつかの簡単な考え:

  • 2つのビューがあります。1つはチケットを1つずつ確認し、1つのチケットの画面全体を使用します。割り当てが行われると次のビューに進み、もう1つは現在行われている割り当ての概要を示します。両方のビューには異なるユースケースがあります。
  • 写真のように、開発者を視覚的に表すものを使用します。これにより、選択と識別が容易になります。
  • 各開発者の可用性の視覚的なインジケーターを提供します。たとえば、開発者が関連付けられているチケットが多いほど、彼の写真はグレー表示になります。このようにして、ユーザーは、より多くのチケットを自由に取得できる開発者を簡単に識別できます。
  • 最後の点で一般化します。ユーザーがこれらの割り当てを行う方法について考えます。最適なのはどのようなものですか?開発者あたりのワークロードは同じですか?専門知識のある問題に割り当てられた開発者ですか?同じオフィスの人々が一緒に働いていますか?これらの問題に関する情報をビューに入れてください。理想に到達するまでに彼らがどれだけうまくやっているかを見せてください。
  • チケットを移動するワークフローを最適化します。ユーザーはチケットを読み、開発者を選択します。これは、開発者の写真の1つをクリックするだけで実行できます。クリック後、ビューは次のチケットに移動するはずです。これは混乱を招く可能性があるため、いくつかの保護手段(前に戻る、テーブルビューに移動する)を用意して、いくつかのテストを行います。
  • コンピュータ化された提案があります。チケットの80%では、開発者の割り当ては問題ではないと思います。適切なチケット割り当て者を記述し、システムの提案を緑色で概説します。これにより、ユーザーがあいまいな場合に、提案されたものをクリックできるようになります。多くの場合、最もエネルギーを費やすのはユーザーが気にしない選択肢です。
2
Peter

申し訳ありませんが、これは人間が500行の用紙に焦点を当てることは人間的にも可能ではないと思います。各行について、毎回集中的な視覚スキャンを必要とする20〜30個のドロップダウンの選択肢から回答を選択してください。あなたがそれをするために人々にお金を払っているとしても、あなたはこの仕事をする彼らの能力に賭けています。

この質問を重量挙げの意味に変換できるとしたら、「人に500キロを持ち上げさせるにはどうすればよいのか」と質問されますか。

話題に戻って、私の考えのいくつかは次のとおりです。

  • 「この努力をする必要性」全体を再訪してください。

  • 一度に1人のユーザーが最大15行(20をプッシュしたい場合は20行)までの行を取得します。調査で10を超える質問を入力すると、調査の疲労が発生し始め、約300〜500の話になります。あまりにも多くの場合、人間は効率的に行うことができます。私は20レコードを記録した後、フォームの残りの部分を埋めるためだけにみんなが「がらくた」を入れ始めると思います。

  • しかし、あなたがあなたが進んでいる必要があった場合に備えて、調査を複数のページに広げて、1ページに20行を超えないようにしてください。しかし、ここで20ページの1ページを見つけた後、ユーザーが「次の」ページのボタンを押すことをどのように励ましていると思いますか。

あなたがしていることをする必要があることを時々知っていますが、人間が500キロも持ち上げることができないことを忘れないでください。あなたはそれよりも良い代替案を考える必要があります。

1
Salman Ehsan

私はこの痛みを知っています:)バグ追跡のためにGoogleドキュメントだけを使用することがあります。通常、開発者はあなたの場合ほど多くはありませんが、いくつかのカテゴリ(PHP、Flash、CSSなど)にグループ化できます。

最初のアイデアは、セレクターに表示される開発者のリストを制限することです。他のいくつかの列に基づいて、自動的に実行できればすばらしいと思います。これを実行できない場合は、最初にフィールドを選択し、次にこの特定のグループからの開発者を選択することを検討できます。ただし、ユーザーが1つではなく2つのフィールドに入力する必要があるため、これも悪化する可能性があります。動作するかどうかご確認ください。

そうでない場合は、別の提案があります。開発者をグループ化することもでき、ユーザーが自分の名前を知っている場合は、再設計された国セレクターで使用されているものと同様のメカニズムを使用できます。 http://baymard.com/labs/country-selector 開発者名、フィールド、イニシャルを含む辞書を作成する必要があります。これにより、ユーザーはフィールド、イニシャル、または名前や姓の一部を入力するときに、選択可能な開発者のリストを制限できます。速度が劇的に向上するはずです。

さらに、この列は常に表示されているはずです。その他は水平方向にスクロールできますが、開発者の割り当てに使用されるものは常に表示されている必要があります。完全なリストを表示するオプションを使用して、スクロールを回避し、インターフェースの一般的な使いやすさを向上させるために、別のビュー(バグごとに固有のビュー)に移動することも検討できます。その理由は、ユーザーが現在分析している問題以外の問題に集中する必要がないためです。開発者にバグを割り当てたら、別のバグに切り替えます(ただし、要件に照らして、おそらくこの場合は異なります)。

最後になりましたが、利用可能なバグ追跡ソフトウェアを確認しましたか?これには、Webアプリケーションなど、非常に多くのオプションがあります。ここにリストがあります: http://www.thegeekstuff.com/2010/08/bug-tracking-system/ またはこれも: http://en.wikipedia.org/ wiki/Comparison_of_issue-tracking_systems -しかし、これらの一般的な問題は、日常の使用が複雑であることです。そのため、Google Docを使用することがあります。

1
Dominik Oslizlo

ユーザーが何よりもまず達成したいと考えていることを考え、既存の技術的解決策にとらわれないようにします。

ユーザーが500のアイテムを分類する必要がある場合、実際に誰かがそれをどのように行うのでしょうか。カードを使いますか?マークはどうですか?ユーザーが物事をグループ化して、それらをグループとしてラベル付けすることを可能にする方法はありますか?

本質的に、あなたは最初に潜在的に悪いものを使うことによって良い解決策を見つけようとしています。

1
Stewart Dean

上部に「コピーダウン」行を配置できます。したがって、ユーザーはチェックボックスを使用して、変更する行を強調表示できます。一番上の「マスター」行に共通の値を入力してから、「下にコピー」ボタンをクリックします。私は、さまざまな日付の価格を設定したいホテルのオーナーのための管理エリアのためにこれを行いました。

次に、それ自体が面倒なチェックボックスの負荷を刻むだけです。データをグループ化してjQueryで行の束をまとめることができるようにする方法がある場合、それはプロセスにさらに役立ちます。

enter image description here

1
icc97