web-dev-qa-db-ja.com

リスト間の要素の移動

質問があります... 2つのリストがあるインターフェースを扱っています。リスト間で要素をドラッグアンドドロップできます。

より良いアプローチとは何ですか?なぜですか?

a)リスト間を移動しても、リスト間のボタンの動作は変わりません。アイテム3を右に移動すると、システムはアイテムをソースリストから削除し、その中の次の使用可能なアイテムを選択して、目的のアイテムをターゲットリストに配置します。以前に選択したアイテムのフォーカスが失われ、別のアイテムに置き換えられます。 (下の図では、Item Threeが他のリストにプッシュされ、Item Fourが選択されました)。

mockup

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

b)選択されたアイテムがフォーカスを失うことがないので、中央のボタンの動作が変わります。前の例とは異なり、中央のボタン>を1回クリックして移動すると、アイテムが1つのリストから別のリストに移動し、<

mockup

bmmlソースをダウンロード

私の意見では、オプションbは以前の状態に簡単に戻る(元に戻す)ことができるため、よりフレンドリーです。また、ボタンを無効にして両方のリストで項目を選択する必要がなくなるため、使用が少し簡単になります。


ボーナス:ソリューションa)を考慮すると、アイテムが左側のリストが選択されている場合、右側のリストにのみ移動でき、その逆も可能です。右側のリストのアイテムを選択すると、左側のリストにしか移動できません。したがって、ボタンを無効にすることは、ユーザーにとって煩わしいでしょうか、それとも奨励されるべきでしょうか?

11
edgarator

全体像を見てください。ユーザーは次に何をしますか?おそらく元に戻せません-可能ですが可能性はありませんか?

次のステップとして、左のリストから右に別のアイテムを移動する場合は、ソースリストの次のアイテムにフォーカスを置いたままにして、ユーザーが矢印ボタンを連続して押すだけで複数のアイテムを簡単に移動できるようにします。したがって、アイテム2、3、4を移動するには、アイテム2を選択してから、矢印ボタンを3回押します。

同様に、アイテムを右側のリストから左側に移動した場合。

リストが順序付けされていると仮定すると、2番目のリストでも最初のリストと同じ順序を維持する必要があります。

1つのリストが空の場合を除いてボタンを無効にする(グレー表示する)必要はありません。また、シーンのアフォーダンスの視覚的な調査を妨げるため、ボタンをまったく非表示にしないでください。

したがって、オプションa)です。

13
Roger Attrill

転送リストで考慮すべきポイントは次のとおりです。

  • 単一選択と複数選択(ドラッグによる選択を含む)。
  • 転送後の選択。
  • リストをダブルクリックします。
  • フォーカスがリストにあるときに項目を転送するためのENTER/DELETEキーの可能な処理。
  • トラバーサルポリシーに焦点を当てます。
  • 並べ替え。

正直なところ、次のような動作であれば、2つの転送ボタンを保持することをお勧めします。

  • 選択したアイテムを1つのリストから別のリストに(いずれかの方向に)転送する場合、転送されたアイテムは宛先リストで自動的に選択されます。これにより、ユーザーは、たとえば間違いをした場合に備えて、他のボタンをクリックすることですばやく元に戻すことができます。また、これにより、特に転送先リストのアイテムが並べ替えられている場合など、ユーザーが何が起こっているかをたどりやすいので、アイテムが転送されたという良好なフィードバックが得られます(転送されたアイテムが宛先リスト)。
  • 選択したアイテムをあるリストから別のリストに(いずれかの方向に)転送する場合、ソースリストの次のアイテムが自動的に選択されます。これにより、ユーザーは、マウスを動かして各アイテムを個別に選択する必要なく、同じボタンをすばやくクリックすることで、連続するアイテムをすばやく転送できます。
  • ユースケースによっては、両方のリストで複数を選択すると、ユーザーが一度に複数のアイテムを転送できるようになる場合があります。リストで何も選択されていない場合は、他のリストに転送するための関連ボタンを無効にする必要があります。そのため、ボタンをクリックすることが実際に効果がある場合にのみ、ボタンを有効にする必要があります。
  • >ボタンの後にフォーカスを取得する次のコンポーネントが<ボタンになるように、トラバーサルポリシーを作成します。多くの実装(特にJava Swing))では、この順序はデフォルトではなく、ユーザーを驚かせる傾向があります(自然ではありません)。
  • 多くの人はアイテムをダブルクリックする傾向があるので、ダブルクリックしたアイテムを他のリストに転送することは良い考えです。
  • 一部の人々は右側のリストでDELETEキーを使用する傾向もあります(セマンティクスによって異なります)。したがって、それをサポートすることをお勧めします。そのような場合、左側のリストでEnterキーを許可することもできます。しかし、これは単に好みの問題なのかもしれません。

2つの転送ボタンを必要とするこの実装は非常に便利で、ユーザーは非常にすばやく移動でき、間違いをすばやく修正するのも簡単です。

ここでは、selectionfocusを区別していることに注意してください。キーボード操作の場合、フォーカスは最後に使用されたコンポーネントのままである必要があります。私は多くの実装を見てきました(Java Swing再び)で、リストの中間選択状態の間にボタンが一時的に無効になり、アクティブ化されたボタンから次のコンポーネントにフォーカスが移動します。これによりキーボード処理が行われますとてもうるさい。

最後に検討する必要があるのはsortingです。リストのどれにもないか、最初のリストだけにあるか、両方のリストにあるかのどちらかです。これは、リスト内の順序に意味的な意味があるかどうかに大きく依存します。ただし、特に最初に多くのアイテムが含まれている場合は特に、最初のリストをソートすることをお勧めします。これにより、アイテムを見つけやすくなります。あなたはこの質問を見ているかもしれません: ペアのリストボックスGUIでRHSリストボックスをアルファベット順にソートするのは正しいですか?

これが役に立てば幸いです;)

4
Padrig

オプションAを選択することをお勧めします。簡単な理由は、各ボタンの役割を明確に強調し、ユーザーが実行できるアクションをユーザーに通知するためです。

オプションBで、どの列が選択されているかに基づいてボタンを切り替える場合、ユーザーがボタンアクションの変更に気付かない可能性があります(私は気付かず、最初の反応は逆のオプションでした)。さらに、オプションBは、アクションが実行されたときにのみ表示される移動ボタンのさまざまな機能を非表示にしている可能性があり、ユーザーが一目で列1から2に移動すると元に戻せないという印象を与える可能性があるため、直感的ではありません。

オプションAについては、右の列にアイテムがない場合は右から左への矢印を無効にして(逆も同様)、アプローチが列を横切って移動するとすぐに有効にすることをお勧めします。列間を移動できることをユーザーに通知します。ユーザーが空の列からコンテンツを移動しようとするとエラーが発生するのを防ぐだけなので、最初は無効にしておいても問題ありません。

1
Mervin

オプションBを検討している場合は、元のリストの前の位置の視覚的な手がかり(「-------」など)を追加する必要があります。また、ユーザーが2番目のリストのアイテムのフォーカスを外すと、このセパレーターが表示されなくなることを理解する必要があります。左側のリストがリセットされ、アイテムを元に戻すと、論理的に最後に配置されます(アイテムの後)四)。ボタンにタブで移動しても、アイテムがフォーカスを失うべきではないことに注意してください。

ボタンは元の状態でなければならないことを覚えておく必要があります。右側のリストが最初は空の場合、選択は単純です(>)。しかし、両方のリストにアイテムがある場合はどうなりますか?それが私がお勧めすることです:両方のボタンを配置しますが、アイテムがフォーカス/ホバー/ドラッグされたとき非アクティブなボタンを非表示にするか、アクティブなボタンのアウトラインの色を変更します。

だから私の答えはインタラクティブな方法で両方を行う:動作はユーザーに適応し、逆ではありません。

0
Knu