長いリスト内のアイテムのサブセットを選択する最良の方法
私たちのクライアントの1人は、彼が発行している雑誌に関する情報を共有するためのWebアプリケーションを構築することを望んでいます。雑誌の各版には、さまざまな量の広告主が含まれています。これらの広告主は、広告主の中央プールから来ています。このプールには（現時点では）約150人の広告主が含まれています。雑誌の各版には、これらの広告主のサブセット（約70〜80）が含まれています。
私たちのクライアントは、この150のリストから70〜80の広告主を雑誌の版に追加する方法を考え出してほしいと考えています。できるだけ速く、できるだけ簡単で、できるだけ直感的である必要があります。
ここで理想的な解決策は何でしょうか？下の画像の行で何かを考えていました。
- 利用可能な広告主のリスト。
- 選択した広告主のリスト。広告主には削除ボタンがあります。
- 左側のリストにある広告主向けの自動提案付きテキストボックス。 <Enter>は、左側のリストから広告主を削除し、右側のリストに追加します。テキストボックスがクリアされ、フォーカスが維持されます。
私の同僚は、ドラッグアンドドロップ、または各広告主のチェックボックスが付いた1つのリストだけを提案しましたが、これらのアプローチでは、ユーザーに多くの検索とクリックを強いることになります。私のアプローチでは、ユーザーは入力を続けることができます。
この状況に関する他の提案はありますか？
あなたのデザインKristofはすでにかなり良いです。あなたは、このマウスとキーボードの4番目と4番目のアクションを停止するなどの非常に重要なことを打ち消しました-それは経験を台無しにするつもりです。そして、私はドラッグアンドドロップであなたと一緒です-yuk！
私はあなたのアイデアを少し洗練させました：
- 明らかに、左の項目をマウスでクリックすると、右に追加されます。
- あなたはテキストフィルターをグーグルスタイルにしたいと思うでしょう-すなわち。マルチワード、部分一致。検索入力と同様に、「rce bm」は、図に示されている3番目の項目と一致します。これは簡単に行うことができ、ユーザーは強力で直感的な方法で名前を探すことができます。 2番目のレートのフィルタリング（文字列の開始など）は、ユーザーを苛立たせ、再び使用しないようにします。フィルタリングはインターフェースにとって非常に重要であるため、うまく機能します。
- （他の誰かが示唆したように）ユーザーの時間を節約する別の方法は、「選択した広告主」側に部分的に完成したリストを用意することです。 「最も使用頻度の高い上位10社」の広告主が70％以上ヒットする可能性が高いと考えた場合、読み込み時に右側のリストにそれらをダンプすることもできますか？最悪の場合、ユーザーはトップ10のうちの1つまたは2つ（それぞれ1クリック）を削除する必要があり、残りの7つのアイテムは検索のために保存されています。このアイデアの数値を調整して、ユーザーの作業を軽減します。
覚えておいてください：より多くの作業あなたがユーザーのために実行できます。彼らのクリック、見た目、検索を減らすために、あなたのインターフェースはより速く、より簡単で、好感が持てるでしょう。
私は雑誌を出版する会社で働いているので、あなたのドメインについては少し知っています。
広告主のリストは発行ごとにそれほど変化しないと思うので、前の発行の広告主をデフォルトで選択します。
広告主は150人しかいないので、そのうちの約半分が選択されるので、検索に迷惑をかけることはありません。簡単なチェックリストのリストから始めて、それがどれだけうまく機能するかを見てみましょう。スキャンするのが簡単になるように、選択したアイテムが視覚的に区別できるようにします（太字にするなど）。
私の最初の投稿なので、穏やかにしてください、そして私も同じようにします:-)
ここには良いアイデアがいくつかありますが、元のポスターの要件を完全に満たすものはないと思います。
"クライアントは、この150のリストから70-80広告主を追加する方法を考え出すことを望んでいます"-Kristof Claes。
ユーザーが結果をフィルタリングして選択した広告主リストに追加できるという気の利いたアイデアの多くには確かに同意しますが、一括追加約70広告主を選択します。フィルタリングのアイデアは非常に優れていますが、ユーザーが「宛先」フィールドで受信者を指定している電子メールアプリケーションと同様のアプリケーションにつながるだけです。 70人の受信者を手動で追加することを想像してみてください。
理想的には、次のワークフローは不要です。
- 検索する語句のタイプ
- （結果が表示されます）
- オートコンプリートアイテムのEnterキーを押すか、表示されたリストから1つ以上のアイテムを選択します
- 約70の広告主が追加されるまで、手順1〜3を繰り返します。
自分のことを本当に知っている多くの人からの素晴らしい投稿がいくつかありますが、一部はおそらくオフトピックになり、優れた「ユーザーインターフェイスデザイン」の心理学よりも実装テクノロジーに少し焦点を合わせていると思います。
このスレッドに対する私の最後の考えは、おそらく「グループ」を選択に追加するための何らかのメカニズムです。これにより、同じワークフローを70回繰り返すことを確実に減らすことができます。私が見たいくつかのソフトウェアは、「ラウンドロビン」アプローチで広告主を選びます。確かに、これは一部の選択に役立ちます。さらに、常に追加したい定義済みのグループ、たとえば、「新しい」製品の有料の広告主または広告のリストを含めることができます。
そして今、少し外れたトピックのために...
Matty、Apple、特にiPhoneについてお話ししましたね。
...私たちはiPhoneから学ぶことができます...キーは、ユーザーのために行われた決定で結果として生じる合理的な仮定を行うことです...
先日の私たちの話の後で、それが何を意味するのかよくわかりません。タッチデバイスだけでなく、使いにくいかもしれませんが、Appleには、一般に、ユーザーが実際にユーザーベースをどう思っているかを疑問に思うソフトウェアを作成してきた歴史があります。代表的な例– iPadデバイスの名前を変更する場合は、まず、それをiTunesソフトウェアがインストールされているコンピューターに接続する必要があります。 iPadの全般設定に簡単にアクセスできないのはなぜでしょうか。
最高のユーザーインターフェイスは、「演繹的なユーザーインターフェイスの設計」、つまり「演繹的なユーザーインターフェイスの設計」、つまり「試行錯誤」というスタイルです。タッチデバイスは後者のカテゴリに分類されます。説明させてください：
iTouch、iPhoneのようにAppleで人気のあるデバイスに触れた場合、そして今ではiPadがソフトウェアの使いやすさを「石器時代」に戻しています演繹的なユーザーインターフェイス」。ボタンの非常にうまく設計されていないグリフのように、ユーザーに「私の良さ、それはどういう意味ですか？」と考えさせ、タッチデバイスの画面を見つめると、2つを使用することはすぐにはわかりませんユーザーは指でズームインまたはズームアウトできます。または私のお気に入り–指を押しながらアイコンを2秒ほど押すと、デバイスが「削除モード」になります。
不適切に設計されたアイコンと同じように–「意味がわかりませんが、初めて使用した後は、通常、何が起こったか覚えています」のカテゴリに分類されます。 、多くのタッチデバイスは演繹ユーザーインターフェイスのカテゴリに分類されます。これは、ユーザーがプログラムで実際に実行できることを "遊んで"と推定する必要があるため、即時の使いやすさが低下するためです。
今後ともよろしくお願いいたします。
広告主のリスト全体には、その上にフィルタリングが必要です（基本的に、「3」を「1」の上に置き、「3」は「1」のコンテンツに動的に影響を与えます）：
- 検索（その場でリストを絞り込みます）
- Groups（ "Last Used"、 "Fashion"、 "Electronics"など）
注-検索が十分に強力である場合、1つのコントロールのみを使用できるため、「ファッション」を検索すると、名前に「ファッション」が含まれるか、「ファッション」カテゴリに属するものとしてタグ付けされているすべての広告主が返されます。
「最終使用日」はチェックボックスにすることができます。
主なメリット：
その場でリストを絞り込むと、関連するすべてのアイテムを一緒に選択して移動できます。
例：「electronics」と入力して、エレクトロニクス関連のすべての広告主のリストを取得し、それらをすべて選択して（マウス、Ctrl + A、またはその他の方法で）、すぐに正しいリストに移動します。
関連性のあるこのUIがあります。
https://dl.dropbox.com/u/2965258/foodSelector/foodHierarchy.html
広告主がなんらかのカテゴリに分類されていて、ユーザーがそれぞれのカテゴリを知っている場合、それは使用できる可能性があります。
これはマウスのみのUIであり、広告主ごとに1回のクリックが必要です。
キーボードで操作できますが、メニューが閉じて、選択するたびに再度展開する必要があります。これは、Enterでメニューを閉じないことで修正できます。
Micky Duncan に同意する必要があります。このタスクには、検索/グループ化/フィルタリングはまったく適していないと思います。
大きなリストからいくつかのアイテムを検索して選択する必要はありません。リストのすべてのアイテムの約halfを選択します。ユーザーがアイテムの半分を選択する必要がある場合、ユーザーはすべての候補者を選択し、誰も逃していないことを確認する必要があります。したがって、ワークフローは次のようになります。
紙に150の広告主のリストがあるとします。あなたはリストを上から下に行き、それぞれについて「この広告主が欲しいですか？」を決定し、チェックマークまたはストライクを与えます-スルーおよび最後に、すべてを評価したことを確認します。
したがって、デザインは次のようになります。
フォーカスは中央のリストの一番上のアイテムにあり、ユーザーは左右の矢印キーを使用してアイテムを破棄するか、選択したリストに配置できます。そのため、広告主に応じて左または右を押すことで、リスト全体をすばやく処理でき、各自にいくつかの考えを与え、見落とすことはありません。
あなたのソリューションはかなり良いもののようです。左のリストは情報を追加しないので削除します（これは長いリストであり、Enterキーを押した後に何かが表示されなくなったことを識別するのは難しいでしょう）オートコンプリートを使用して検索フィールドを提供します（ユーザーがEnterキーを押すことを知らない場合に備えて、そのフィールドからドロップダウンが表示されるはずです（ユーザーはどのオプションが利用可能かを確認できます）。また、大きな[広告主をリストに追加]ボタンを追加します。
これをできるだけ早く（モックデータを使用して）プロトタイプステージで動作させ、クライアントでデモしてから実行してもらいます。彼らは頻繁にフィードバックを使用するため、フィードバックをできるだけ早く入手することが重要です。
MickyD および Patrick が提起したポイントに同意します。それはすべて、広告主の選択がどのように行われるかに依存します。クライアントはUIを使用して特定の問題に含まれるはずの広告主を選択しますか、それともクライアントは特定の問題に含まれる広告主のリストをすでに持っていますか？どちらの場合も、フィルタリングが最善の解決策ではないと思います。
クライアントがUIを使用して広告主を選択する場合は、1つのリストにチェック済み/チェックなしの状態を表示する方がはるかに優れています。パトリックが書いたように、選択した州を目立たせるのは良い考えです。選択された状態を太字にするだけでなく、選択されていない状態を明るくすることもできます。クライアントは、キーアップ/キーダウンを使用してリスト内を移動し、スペース（または同様のキー）を使用してチェック/チェック解除します。
特定の問題に広告主が表示されるリストがクライアントにある場合、最初のアプローチは、そのリストをデジタル形式で受信して自動的にインポートできるかどうかを確認することです。それが不可能な場合は、おそらくリストが何らかの方法でソートされ、UIは広告主を同じ方法でソートする必要があります。
3番目のオプションは、クライアントが広告主を検索する問題を調べるか、ソートされていないリストを持っているかのいずれかです。この場合、フィルター機能を使用することは理にかなっています。
ポイントは、目標とタスクを取り巻く状況を知らなければ、良い解決策を提供することは本当に難しい場合があるということです。
2つのリストと2つのボタンを使用します。ユーザーはマウスのクリックで左側のリストの単一の要素をマークできます。ダブルクリックすると、要素が右側のリストに移動します。
Shiftキーを押しながらクリックし、範囲をクリックしてマークを付け、[>]ボタンを使用してすべてのマークされた要素を右に移動します。 Ctrlを使用すると、単一の要素をマークされた状態からマークされていない状態に切り替えたり、元に戻したりすることができます。
Ctrl-aはすべての要素をマークします。すべては他のプログラムインターフェースから知られています。
アルファベット順にソートされた要素を使用すると、エントリを簡単に見つけることができます。スクロールが必要な場合は、最初の文字をホットキーとして使用して、そのエントリに移動できます。
> afoo ifoo
bfoo jfoo
cfoo kfoo
> dfoo lfoo
> efoo mfoo
> ffoo
gfoo
hfoo
[ < ] [ > ]
{a、d、e、f} fooが左側にマークされました。 [>]を使用すると、ユーザーはそれらを右に移動します。
そのようなインターフェースはかなり高速で、使いやすく、理解しやすいです。ツールチップテキストを追加したり、ボタンに「選択したアイテムのリストに移動」および「選択したアイテムのリストから削除」という名前を付けたりできます。
別のリストに移動した後、このリストを再利用する必要があります。