Best way to show old value vs new value in a list of items

Question

I am working on a screen with a list of diagnostics data on the right side of the screen (1/3 of the width).

The customer requested to be able to see the current and previous values close together so that they can determine how the system got into its current state.

What is the best way to show a label, current value, and previous value close together in a small amount of space on the screen?

For example, I could use a table with three columns, but some of these values might be long and I don't think that would look the best.

Here is an example mock-up:

I purposely truncated the program name to show the issue of space.

Would it perhaps be better to stack old values and new values vertically in one cell? The customer is specific that they want to see all of the old and new values at once.

Answer 1

Users might often tell you what they think they want, but what they ask for may not necessarily be the best for them. As a UX designer, one should strive to understand the users' thought process and suggest alternatives that they weren't even aware of.

I believe that in this case you could observe what the users are actually doing once they have the results. Consider this pseudo-code that describes their behaviour when dealing with numeric data:

• find old value
• find new value
• mentally subtract them
• if difference > 0 then check manual and find that the next action is XXX
• elif difference < 0 then lookup action in manual, it is YYY
• if no difference then do ZZZ

Perhaps it would be better to add another column to the table, call it difference to display the delta (so they don't have to subtract it in their heads, which could lead to errors). You can also use colour-coding, red for delta < 0, green for delta > 0 and otherwise gray. Of course, colours depend on the nature of the data.

You can also add another column called "Next action" which will display XXX or YYY - so users don't have to look it up (it takes time and is prone to errors).

They might be even happier if you give them a concise history of what happened, using a sparkline:

Now consider textual data:

• find old value
• find new value
• are they the same?
• if identical then do XXX
• else which part of the string changed?
• OR maybe they actually ask in how many places are there changes?

Depending on what the actual question is (you can try and elicit it in a think-aloud test, or by interviewing them), you will choose an approach. A typical one would be a visual diff, like many git clients do:

This is better than displaying a crossed-out old value, because if the next question is "so what has changed exactly?" they'll have to mentally compare the crossed out and the new string. It is better to give it to them on a plate.

Answer 2

The way you have posted the question gives me the impression that you have limited screen real-estate and you want to maximize the content that can be seen at a time. To achieve this, you can do with just 2 columns by doing a strike-through over the changed old values and displaying their new values adjacent to them. The unchanged values can be shown directly.

As you can see in the above image:

1. 57 has been replaced with 32
2. AB1234 has been replaced with AB1233
3. SENDMODEL is unchanged

You can use word-wrapping to reduce the width and accommodate for more fields.

Answer 3

What is the best way to show a label, current value, and previous value close together in a small amount of space on the screen?

Some table options:

1. Use CSS column-span for "Program name" td.

2. Group your table by "Program name", then "Program name" becomes a title for the table section. (Perfect if there are multiple products in your table.)

3. Increase your rows/decrease your columns. e.g. "Model present" becomes "New model" and "Old model". The table is taller, but thinner vertically.

4. Set your table to have CSS overflow and horizontal scrolling (I consider this to be native and defensible, particularly when a client says they want to have all the data).

5. Convert the one table to three. Each table then becomes two columns and the first td becomes the title.

Other options:

1. Tabbed content (each tab could hold a two column table or just regular flowing content).

2. Button activated overlays. One button? two buttons? Then the overlay can use the whole screen (Nice if consistent with the rest of the users experience on your site).

I think the above table options might offer some help for your current layout. The other options are just that, some other functional ideas when we have too much content for the area (we need to change that space).

Just a note that “old vs. new” is comparative data. That is best displayed as a table