So I have some settings for contractors such as their hourly rate stored in the database. I have several screens where users enter a contractor and have a field for their rate. The way I have it setup now is that when the contractor is autocompleted I populate the hourly rate input and flash it to notify that it has been updated.

Now, what I would like to do is have a notification come up when a user then changes that hourly rate to one I do not have stored in the database. I would like to have a simple div come up next to the field saying "This rate differs from the one we have stored. Would you like to update it?". How would you design such a box? I think having yes/no buttons is too overwhelming. I would like this to remain simple.

I was thinking of copying/stealing the way stackoverflow handles notifications as demonstrated below. Any ideas that might be more clear to the users?

sample layout

2 answers

This was chosen as the best answer

I would elaborate the text in the box slightly to avoid confusion, something like:

This value differs from John's default hourly rate of $35.00 
(click this box to change John's default hourly rate to $39.95)

It may not be a reasonable expectation for your system, but the wording as is could lead the user to expect they will be taken to a new form or that they will be changing the value on this form.

I would change field label to use the same nomenclature the box does. "Labor Rate" instead of labor cost, and perhaps default instead of base in the box text.

Visually, you might eliminate the border on the div and add a subtle point to the left hand side indicating that it applies to the field to the left. The distinction in size and emphasis between the two lines of text looks good.

Answered about 7 years ago by Patrick Anderson

One would use something like jQuery to do an AJAX request to some sort of end-point that queries the database and returns a response. Parse that response and use it to build a DIV. jQuery makes stuff like this a breeze.

If you don't want to do AJAX queries, you could build the rate into the page as it's being built via (like PHP, or whatever) and then use jQuery/Javascript to check this number on key up or change on that field.

Answered about 7 years ago by Nathan DeGruchy
  • This is all done with jquery. The labor rate is populated when employee is autocompleted and the notification comes up on blur if the value has changed. I'm simply looking for insight on the design side of things. Jim Mitchener about 7 years ago