8

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.

4
  • Can you tell us in more detail what is shown in the table cells? Will it only be number values or also text. Additionally what is the range of numbers in the table cell (like 1 - 100 or 1 - 1.000.000). This will help us to find a better solution.
    – Kevin M.
    Aug 9, 2018 at 9:13
  • @KevinMol the value cells will only have numbers in the range 1-100, but the other cells will have text. Something like: T - T - N - N - N - T, where T is text and N is numbers.
    – bugs
    Aug 9, 2018 at 9:27
  • A quick summary of previous questions and outcomes might help. And some screenshots too :)
    – Michael Lai
    Aug 10, 2018 at 4:19
  • @MichaelLai you're right, I'll add something
    – bugs
    Aug 10, 2018 at 7:03

5 Answers 5

5
+25

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: Here the tabs with the new label

As I navigate to those tabs they reset, the new and number label dissapears 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:

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

I hope this helps

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

enter image description here

5
  • I like the idea of using colours. I'm unsure on removing the original value column though; on one hand, it would remove visual clutter, as the same information could be conveyed in a different way (i.e. on hover), on the other, comparing original against current is one of the main purposes of the application
    – bugs
    Aug 9, 2018 at 10:29
  • 1
    @bugs Well if it is a core functionality of this module then you should keep the original value column and just show the dots against the overridden values in the current value column
    – Sheraz
    Aug 9, 2018 at 10:35
  • 2
    Be aware of displaying the edit through colours only: the difference between the colours in the example here is completely invisible for colourblind people.
    – user68158
    Aug 9, 2018 at 11:35
  • @Levano We can use some icons inside the dots like arrow up and down to provide a clear difference which will be easily recognizable by color blind people.
    – Sheraz
    Aug 10, 2018 at 7:09
  • Don't use hover to trigger stuff - anyone using a keyboard would not be able to see it. Stick to click triggers only.
    – SteveD
    Aug 13, 2018 at 13:12
2

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:

Value comparison table

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.

4
  • Using colour as meaning is not recommended unless you add a legend somewhere, and icons can be problematic for people with sight difficulties. Perhaps using words like Increased and Decreased is more explicit?
    – SteveD
    Aug 13, 2018 at 13:18
  • 2
    A legend is not necessary here as the meaning is not encoded by the color only, but also by the shape + message on hover. People with sight difficulties will either increase character size (including the arrows) or use technology to listen to the content of the page (where the arrows will be replaced by the text on hover). Aug 13, 2018 at 15:20
  • 1
    Almost all people will be able to see the difference between two numbers, e.g. 45 is so clearly higher than 32, and 64 is so clearly lower than 78, so perhaps the arrows are not needed?
    – SteveD
    Aug 14, 2018 at 14:21
  • 2
    Arrows, assuming an appropriate size, are much better than words since an up vs. down arrow are more discernable from each other than the words "increased" & "decreased". Color then adds another redundant level of discernibility. There's also the benefit that arrows are relatively language agnostic, if that's a concern at all. Aug 14, 2018 at 17:46
1

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

Shows a modified table with rows and columns

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)

2
  • Would you need to add a legend somewhere to explain what the colours represent?
    – SteveD
    Aug 13, 2018 at 13:10
  • Yeah sure, but I saw your concern about colors in particular. You could complement them with patterns (say stripes; diagonal stripes and squares for example.
    – Muqito
    Aug 13, 2018 at 13:26
1

One possibility would be to show changed values in bold1. 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:

enter image description here

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.


1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.