web-dev-qa-db-ja.com

要素が以前に変更されたことを示す方法

:私は次の質問をしました、そしてそれらはいくつかの有用な洞察を提供しますが、それらはすべて本当に古い(2010、2012)ものであり、本当に私のユースケースの複製→ 12


各行に次の要素が含まれているテーブルがあります。

  • 元の値
  • 現在の価値
  • 現在の値を変更するスライダー
  • その他の無関係なもの(合計5または6列)

スライダーを使用するか、行に新しい数値を入力するだけで現在の値を変更(増加または減少)でき(セルは入力ボックスです)、すべての変更が自動的に保存されます。

ユーザーは移動して同じページに戻り(数日または数週間後)、元の場所から続行できますが、特定の行(元の値=/=現在の値)で値が変更されているかどうかを確認する唯一の方法です。 2つのセルを「手動で」調べて数値を比較することです。

私はある種の視覚的なインジケーターを実装することを考えています:

  • 変更された行を表示する
  • 理想的には、現在の値が元の値より大きいまたは小さい場合(これについては不明)

私は確かに強力なUXの人ではないので、このインジケーターを実装する際に心に留めておくべきことについてのアイデアやアドバイスを探しています。

5
bugs

新着メールがあるOutlookなどのアプリからのさまざまな処理を見ることができます。新着メールがあるスレッドには、左側に青い縞模様があります。タブを開くと消える「new」タグが付いたGmailのような他の例もあります。以下の例を参照してください。 Here the tabs with the new label

As I navigate to those tabs they reset, the new and number label dissapears 各タブの新しいアイテムも太字になり、古いものは通常のテキストになっています。

並行して、注意を要する可能性のある電子メールの右端にメタデータを追加しました。これを見てください:

Additional metadata on the same location as date would be, in a different colour and bolded

これが役に立てば幸い

2
Ainhoa Ostolaza

値の横にある視覚的なインジケーターは、元の値がオーバーライドされているかどうかを簡単に示します。また、元の値の列を削除して、元の値または視覚的インジケーターで上書きされた値のいずれかを持つ現在の値の列を含める必要があると思います

ソリューション

視覚的な指標として単純なドットがあります。値が増加した場合は緑のドット、値が減少した場合はオレンジのドット。そして、そのドットにカーソルを合わせると、元の値インジケーターと、値が減少したオフセットが表示されます

このシナリオの簡単な解決策をあざけりました。以下の画像をご覧ください

enter image description here

2
Sheraz

ユーザーが探している情報を正確に示す列を追加することをお勧めします。現在の値と以前の値の間の変更(数値は複数回変更できるため、以前の値と現在の値の違いになるでしょう)。

これが私が想像することの例です:

Value comparison table

変更は、編集ボタンと間違えないように上下の矢印を使用して表されます。色は上下に区別されますが、アイコンの形状と重複しているため、デザインに引き続きアクセスできます。

別の列があると、ユーザーはこの情報に基づいてテーブルをソートまたはフィルタリングできます。増加または減少したすべての値、または一定のままです(1つの値のみ)。

ホバーでは、実際の差異、最後に入力した値の日付などの追加情報を表示できます。

2
celinelenoble

列が変更されたことを表示するいくつかの異なるアイデアがあります。

ただし、テーブルの行に変更された日付も保存します(値だけに基づいて何かを常に比較する必要はありません)。

これは、行が変更されたかどうかを確認するために使用できます(アイコンまたは別の背景色で)

理想的には、現在の値が元の値より大きいまたは小さい場合(これについては不明)

これはいくつかの方法で表示できます。

  • アイコンを使用して、上矢印または下矢印を表示します。
  • 列に色付きの背景を使用します(値が正か負かを示します)
  • 上記の組み合わせを使用してください。

私は個人的に色を使用してユーザーの注意を引くのが好きです。しかしながら。使いすぎたり攻撃的になりすぎたりすることはありません。そのため、ユーザーは何か間違ったことをしたのではないかと考えています。

私はビジュアルアーティストではありません。しかし、私は私が何を意味するかを示すためにコンセプトを作成しました

Shows a modified table with rows and columns

ここにアイコンを表示する代わりに、境界線に色を付けることにしました。

柔らかな赤みがかった色は、ユーザーに下向きの数字であることを示していると思います。数字が下がっていない場合は、色を入れ替える必要があります(たとえば、生活費を下げることができれば、これは良いことです)

1
Muqito

1つの可能性は、変更された値をboldで示すことです。1。おそらくあなたが持っているのと同じ種類のテーブルではありませんが、MicrosoftはVisual Studio開発ソフトウェアでこれをたくさん行っています。以下の例は、Output DirectoryおよびIntermediate Directoryの設定が変更されたことを明確に示しています。

enter image description here

このアプローチの欠点の1つは、これに取り組む方法はいくつかありますが、元の値が実際に何であったかがすぐに明らかではないことです。

  • どのフィールドタイプでも、ツールチップは「Changed from xxxxx」のようなものを表示できます。

  • ドロップダウンには、元の値を含めることができます(他の値から分離されているか、何らかの方法でマークされています)。

  • 右クリックメニューには、元の値を表示したり、セルをその値にリセットしたりするオプションがあります。


1 「元からの増加」または「元からの減少」を表示したい場合は、色を追加できますが、それぞれを表すための「明白な」マッピングがなく、通常の警告が表示される場合があります。 ある程度色盲のユーザーのために色に頼る.

別のオプションは、値の前または後に上向きまたは下向き矢印を表示することですが、(a)物事が「乱雑」に見える可能性があり、(b)値を変更するコントロールと間違われる可能性があります。

1
TripeHound