How to show that an element has been previously modified

Question

Note: I've been through the following questions and, while they do provide some useful insight, they are all really old (2010, 2012) and not really a duplicate of my use case → 1, 2, 3

---

I have a table in which each row contains the following elements:

• original value
• current value
• slider to modify the current value
• other irrelevant things (5 or 6 columns in total)

The current value can be modified (increased or decreased) using the slider or simply by typing a new number in the row (the cell is an input box), all changes are saved automatically.

Users can navigate away, return to the same page (possibly days or weeks later) and continue from where they left, but the only way to see if a value has been modified in a given row (aka original value =/= current value) is to "manually" look at the two cells and compare the numbers.

I'm thinking of implementing some sort of visual indicator which should:

• show which rows have been modified
• ideally, if the current value is greater or lower than the original value (unsure about this)

I'm definitely not a strong UX person, so I'm looking for some ideas and advice on what things to keep in mind while implementing this indicator.

Answer 1

You can look at different treatments from apps like Outlook with new email, they have a blue stripe to the left on threads that have new messages. There are also other examples like Gmail with a tag "new" that dissapears when you open the tab. See the example below:

New items on each tab will also be bolded whereas the older ones are on regular text.

On a parallel note, they also have added an additional metadata to the very right of emails that may require attention. Look at this:

I hope this helps

Answer 2

A visual indicator next to the value can easily show if the original value has been overridden or not. I think you should also remove the original value column and just include the current value column which will have either the original values or the overridden values with visual indicators

Solution

We have a simple dot as a visual indicator. Green dot if the value increased and orange dot if the value decreased. And on hover of that dot you can see the original value indicator plus the offset by which the value decreased

I have mocked a simple solution for this scenario. Check out the image given below

Answer 3

I would suggest to add a column presenting exactly the information users are looking for: the change between the current and previous value (I supposed the number can be changed multiple times, so the difference would be between previous value and current value).

Here is an example of what I imagine:

The change is represented using up and down arrows that should not be mistaken with edit buttons. Colors differentiate up and down, but they are redundant with the shape of icons, so the design is still accessible.

Having a separate column gives the possibility for the users to sort or filter the table based on this information: all values that have increased, or decreased, or stay constant (only one value).

Extra information can be presented on hover, such as the actual difference, date of last value entered, etc.

Answer 4

I have a few different ideas to display that a column has been modified.

I would however also store a date modified for the row in the table (so you don't have to base something just solely on value and always compare those)

This you could use to tell if a row has been modified (either with a icon or a different background color)

ideally, if the current value is greater or lower than the original value (unsure about this)

You could display this in a few different ways.

• Use an icon to show an arrow up or arrow down.
• Use colored background for the column (to show if the value is positive or negative)
• Use a combination of the above.

I personally love using colors to catch users attention; however. It cannot be overused or too agressive, or so the user is thinking maybe they've done something wrong.

I am not a visual artist; however I created a concept to show what I mean

Instead of going for an icon here I decided just to color the border.

I think the soft redish color is telling the user it's a downwards going number. Unless a number going down is something positive, then the colors should be switched (an example would be if you could lower your cost of living, this would be a positive thing)

Answer 5

One possibility would be to show changed values in bold¹. Although probably not the same sort of table as you have, Microsoft does this a lot in their Visual Studio development software. The example below clearly shows that the Output Directory and Intermediate Directory settings have been changed:

One disadvantage of this approach is that it is not immediately obvious what the original value actually was, although there are ways of tackling this:

• For any field-type, a Tooltip could show something like "Changed from xxxxx".

• A drop-down could include the original value (either separated from the other values, or marked in some manner.

• A right-click menu could show the original value and/or have an option to reset the cell to that value.

---

¹ If you wanted to show "increased-from-original" or "decreased-from-original" you could possibly add colour, though there may not be an "obvious" mapping for which colour to represent each, and there would be the usual warnings about relying on colour for users who in some degree colour-blind.

Another option would be to show up- or down-arrow either before or after the value, but (a) that might make things look "cluttered" and (b) might be mistaken for controls to change the value.