半自動プライズシステムUX / UI
システムがスコアに基づいて特定の数の勝者を決定するプロジェクトに取り組んでいます。彼らはシステムによって金、銀、青銅としてマークされています。管理者は、システムが選んだ一定数の勝者が選択した後、手動で勝者を選択できる必要があります。
だから、私はユーザーリストを生成して次のメソッドを実装することを考えていました
- 各ユーザーに対してゴールド、シルバー、ブロンズにするための3つのチェックボックスを提供する
- 各ユーザーリストに対して選択できるゴールド、シルバー、ブロンズのドロップダウンを提供します。
どちらの方法でも機能しますが、どちらの方法を使用するか迷っています。誰かがそのような半自動化プロセスを作成するためのより良いUXを提案できますか？少なくとも、私が指定した2つの方法のうちのベストプラクティスはどれですか。 Tnx
3つのオプションのうち1つだけを選択する場合は、ラジオボタンを使用する必要があります。 （ドロップダウンは別として）すべてのオプションが一度に表示され、（チェックボックスは別として）1つの項目のみを選択できます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ゴールド、シルバー、ブロンズのユーザーはそれぞれ1人しか存在できず、同じ人物であってはなりません。ラジオボタンは、標準の「1つしかあり得ない」コントロールであることは明らかな選択です。
まず、ラジオボタンをオフにすることはできません。誤って「ゴールド」の勝者を選択した場合、ラジオボタンのセットでは「うわー、私はその人を勝者として選択するつもりはありませんでした！」と入力する明確な方法がありません。
次に、選択肢は2次元でロックアウトされる必要があります。ゴールドの勝者は2人、およびはできません。これは、列と行で単一の選択しかできない論理パズルグリッドが必要であることを意味します。
（ logic-puzzles.org から取得）
上記は一般的なロジックパズルの「コントロール」であり、ボックス内の1つの項目がtrueの場合、同じ行または列内の他の項目はどれもtrueにはなりません。そのコントロールを賞品選択画面に適用すると、次のような結果が得られます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
このモックアップでは、1つのアイテムを選択すると、同じ列（1つのゴールド賞のみ）と行（エントリごとに1つの賞のみ）のチェックボックスが無効になります。同じ行と列の他のチェックボックスが選択されると、どのようにして無効（フェード）になるかに注目してください。間違えた場合は、チェックボックスをオフにすると、ブロックされたチェックボックスが有効に戻ります。
このインターフェースは、既に行われた競合する選択のために選択が妨げられる時期を明確に示します。勝者候補のリストをすべて1つの画面に表示できない場合、これはさらに重要になります。下にスクロールするとコンテキストは失われますが、無効なボタンはユーザーが誤って競合する選択をすることを防ぎます。
ドロップダウンの方がスペースが少なくてすっきりするので優れていると思います。また、名前にカーソルを合わせ、選択したユーザーの背景とドロップダウンのdivが1つのブロックの場合と同じ色になっている場合にのみ表示されるようにすることもできます。
User1 [Gold]
User2 [Silver] [Dropdown]
User3 [Bronze]
ホバーにのみドロップダウンが表示されるようにすると、変更が完了したときに概要がわかりやすくなります。