Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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)

Example

ExampleEnglish

dots

share|improve this question
    
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 –  parthpk92 May 30 at 14:04
    
Can you add English equivalents to your wireframe? –  SwankyLegg May 30 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 at 5:28
    
You could of course add a column before the first and have an icon appear whenever content has been changed. –  VinceCgto Jun 2 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. –  VinceCgto Jun 2 at 8:05

1 Answer 1

up vote 0 down vote accepted

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
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 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 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 at 6:12
    
Updated the answer to put in diagram. –  nightning Jun 3 at 17:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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