We are currently designing a web application for internal use. In the attached screenshot you can see a table where the second record is selected. The text right of the table are further fields of this selected record.

My question is the following: every field of the record can be changed (be it one that is displayed in the table or outside of the table). How can I highlight any changed content for the user? It should not be too obstrusive (bold, red), yet it should not be too unobstrusive (ie just making it italic would hardly get realized).

The highlighting should indicate, that the value has changed (which is an important information for the user at that point).

Unfortunately I could not find anything related to that topic, neither here nor on Google. Help would be appreciated :)

(Top: german version - bottom: english version if it helps understanding)




  • can you give some more information: who is the one changing the values? is the user himself doing it or are they being changed by the moderator/admin and then being displayed to the user? could you also provide an additional mockup showing an example before and after changing? cheers
    – BatlaDanny
    May 30, 2014 at 14:04
  • Can you add English equivalents to your wireframe?
    – SwankyLegg
    May 30, 2014 at 18:40
  • it is the user himself doing the changes. well, an additional mockup would look exactly like this ones, but with different values in the table and/or in the output fields next to the table.
    – roland_w
    Jun 2, 2014 at 5:28
  • You could of course add a column before the first and have an icon appear whenever content has been changed.
    – Vince C
    Jun 2, 2014 at 7:18
  • 1
    Ah, I must have misunderstood. I thought you just meant, reflecting changes in the table. How about just adding an icon (or even a (colored) dot) next to the modified field? Not too obtrusive yet still quite clear.
    – Vince C
    Jun 2, 2014 at 8:05

1 Answer 1


Consider using a flag indicator like what spreadsheets do for comments. You just need enough to let the user know there's something important about that field and they can get the full details if they click/mouse over the field.

enter image description here

There's usually a lot of similar metaphors around that you can "steal" and reuse if you look a little beyond your current context. :)

Diagram for discussion thread below:


download bmml source – Wireframes created with Balsamiq Mockups

  • thanks. I was already thinking about this for the table. but how could I also highlight changes in the text fields next to the table?
    – roland_w
    Jun 2, 2014 at 5:29
  • The dot concept in your new screenshots will work for both the table and the details section to the right. My only suggestion would be to move the dot, so it floats on left instead of having it inline with the text. You want all the text to align so the user can quickly scan through the list. Right now the dots is making scanning more difficult.
    – nightning
    Jun 2, 2014 at 20:40
  • so where exactly would you position the dot (both in the table and in the other fields right of the table)? I understand what you say but I don't get where you would put the dots :)
    – roland_w
    Jun 3, 2014 at 6:12
  • Updated the answer to put in diagram.
    – nightning
    Jun 3, 2014 at 17:07

Your Answer

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

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