web-dev-qa-db-ja.com

変更前と変更後のどちらを選択するのに最適なUIは何ですか？

私は現在、2人以上の人が法的文書で共同作業できるWebアプリケーションに取り組んでいます。そこでは、変更を提案でき、どちらの当事者にも元のバージョンまたは改訂された（前/後）バージョンを選択するオプションが与えられ、続行するバージョン。

私は、彼らがどちらか一方を選択しなければならないことを可能な限り明らかにし、前/後の下に受け入れ/拒否ボタンを置かないようにしています。

これまでにいくつかのアイデアの例を添付しました。 enter image description here

buttonsweb-appselectioncollaborationversion-control
6
designmonster

決定を導くのに役立つ一般的なコメントがいくつかありますが、最善のオプションは、ユーザーが動作を正しく理解していることを確認するためにテストする必要があります。

  • ユーザーに2つのオプションのいずれかを選択させることを話しているため、複数の選択に通常関連付けられているチェックボックスの使用（最初の2つの例で）は、一般的な設計パターンに反する場合があります。
  • ユーザーに一貫した参照ポイントを提供し、ボタンの名前を変更したテキストに対して配置したいが、一部のユーザーが参照として使用したい場合、元のテキストはそれに対してアクションを実行しないことを意味します。ポイント。したがって、おそらく、元のテキストに対して「保持」ボタンを、改訂されたテキストに対して「変更」ボタンを使用して、レイアウトとデザインを一貫させることができます（2つのボタンの切り替えのように機能させることができます）。
  • 視覚的な注意散漫の量を減らすには、追加の画像、色、および形状がユーザーをガイドするための補佐官よりも注意散漫になるため、入力コントロールを使用してクリーンでシンプルなデザインを維持することをお勧めします。
4
Michael Lai

@Alvaroのフィードバックから少し取り上げて、ユーザーが入力する必要がある種類の入力に焦点を当てて、この解決策を考えました。それが役立つかどうか私に知らせてください。

enter image description here

4
Joao Carvalho

私の意見では、ドキュメントをスキャンすると色がうるさすぎて、多くの変更が加えられた場合には威圧される可能性があります。

ドキュメントに加えられた変更について話しているため、現在のソリューションでは、ユーザーは同じ文を2回読んで自分で変更を見つける必要があります。変更をインラインで表示して、ユーザーが変更がテキストに影響する場所を正確に確認し、認知負荷の量を減らすことができます。詳しくは Nielsen Norman Groupの記事 を参照してください

だから私の解決策はそのようなものになるでしょう：（色で遊ぶことができます、私は時間に余裕がありませんでした:)） enter image description here

4
noadavi

これは、尋ねたい質問の種類によって異なります。

  • "どれを保持しますか：AまたはB？"この場合の正しいUI要素は、チェックボックスではなくラジオボタンです。
  • "新しいバージョン（B）を保持しますか？"/"実際のバージョンを更新しますか？"このケースは、「はい」または「いいえ」の直接の質問です。

私の意見では、2番目の質問は、新しいバージョンがオリジナルの改良版であり、ユーザーが単に確認しているだけであると想定しているため、この場合により関連性があります。

新しいバージョンを「保持」または「破棄」するように求めるダイアログが適切なオプションになる場合があります。

3
Alvaro

私の問題は色です。赤と緑は、西洋では、伝統的に並置して「悪い」または「停止」および「良い」または「進む」を意味します。これは、ユーザーに無向の選択をさせようとするときに悪い考えです。

これらの色と、サンプル＃3のボタンの色の使用を組み合わせると、かなり混乱します。

おそらく、オリジナルを白黒にし、何を選択したかによって、そして選択した後でのみ、リビジョンの背景のみを赤/緑にする必要があります。

その他の問題：
-チェックボックスが小さすぎて、間違いを起こしやすい。
-サンプル＃4の垂直方向のトグルは、低い/改訂されたオプションを選択したい場合に上がり、高い/元のオプションを選択したい場合に下がります... ???

2
infinite-etcetera