web-dev-qa-db-ja.com

グループ内の相互に排他的なペアを指定および表示するためのUX

私は、少数のオプションの中から相互に排他的なペアを選択して後で表示できるフォームを含むSaaS/B2B Webアプリに取り組んでいます。ここではいくつかの例を示します。

  • 顧客がこのパッケージを購入した場合、他のパッケージを購入させないでください
  • この地域を訪問している場合、この他の地域も訪問できません
  • この人を招待する場合は、この人を招待しないでください

ここにもっとコンテキストがあります：

  • 選択できるオプションの総数は常に少ない（2-6）
  • デフォルトは常に「制限なし」で、ペアが定義されていないことを意味します
  • ユーザーがデフォルトを選択する時間の約50％、1ペアを選択する時間の25％、2ペアを選択する20％、5％3+ペア

私が理解する必要がある2つのUXがあります：

  • 適用された制限を示す「ビュー」UX
  • 制限やその他の属性を変更できる「編集」UX。

"ビュー" UXの場合、最初に考えたのは、次のようなグリッドを使用することです。

Package              Code       Manager             Don't Buy With         Actions
------------------------------------------------------------------------------------
Southwest            12         Joe Smith           Texas, Cheyenne        [edit]
Texas                89         Alex Carlson        Southwest              [edit]
Dakota               34         Mindy O'Brien                              [edit]
Cheyenne             65         Jane Skilling       Southwest              [edit]

そして編集フォームの最初の考えはチェックボックスを使うことでした。

Don't Buy With:    [x]   Texas
                   [ ]   Dakota
                   [x]   Cheyenne

しかし、両方向に適用される制限の「相互」の性質をより適切に捉えた制限を表示および編集するためのより良い方法があるかどうか疑問に思っています（たとえば、1つのアイテムに制限を追加または削除すると、すぐにパートナーに表示されます）。

チェックボックスをグリッドに統合することを検討しましたが（潜在的なパートナーごとに1列）、一部の名前は長くなる可能性があり、ユーザー、特に小さな画面を使用しているユーザーにとって、水平方向の領域が溢れるリスクがあります。だから私はこのアイデアを（おそらく時期尚早に）捨てました。

他のアイデアはありますか？

formsweb-appcheckboxesgridmulti-selection
2
Justin Grant

alternative views および Cayley table を検討してください

最初に、競合する設計ニーズがあることを指摘しましたが、これには alternative views が必要です。制限の表示と編集を表示する表示は異なる場合があります。

次に、制限の順列を示すために Cayley table を使用することを検討します。次のようになります。

パッケージの制限

             Southwest     Texas      Dakota      Cheyenne   
------------------------------------------------------------
Southwest  |    N/A    | Don't Buy |           | Don't Buy |
------------------------------------------------------------
Texas      | Don't Buy |    N/A    |           |           |
------------------------------------------------------------
Dakota     |           |           |    N/A    |           |
------------------------------------------------------------
Cheyenne   | Don't Buy |           |           |    N/A    |
------------------------------------------------------------

これは、これらの制限に相互関係があることを認識し、ユーザーがそれらをチェックして変更する必要があるユースケースを考慮に入れます。

2
Jonathan Strate